[Element-UI] CUD (ajouter, supprimer, modifier) et vérification du formulaire (code source joint)

News 2023-10-05 06:34:19 views: null

Table des matières

1. Introduction

1. Introduction

2. Fonction

2. CUD

1. Ajouter des modifications

1.1. Ajouter une fenêtre pop-up

1.2. Définir les variables

1.3. Méthode de définition

1.4. Code complet

2. Supprimer

2.1. Méthode de définition

3. Vérification du formulaire

1. Ajouter des règles

2. Définir des règles

3. Soumettre l'événement

4. Code frontal complet

1. Introduction

1. Introduction

        L'ajout, la suppression et la modification sont trois opérations couramment utilisées dans la programmation informatique et la gestion de bases de données . L'utilisation d'opérations d'ajout, de suppression et de modification peut nous aider à gérer et à maintenir les données dans le système ou la base de données pour garantir l'exactitude, l'intégrité et la cohérence des données. . Ce sont des opérations très courantes dans la programmation et la gestion de bases de données et contribuent à améliorer la flexibilité et la maintenabilité du système .

Ce qu'ils font:

  1. Ajouter : En ajoutant des opérations, de nouvelles données ou fonctions peuvent être ajoutées au système ou à la base de données. Ceci est important pour étendre les capacités et les fonctionnalités du système. Par exemple, dans un système de gestion des performances des étudiants, de nouvelles informations sur les étudiants peuvent être ajoutées via l'opération d'ajout.
  2. Supprimer : L'opération de suppression supprime les données ou fonctionnalités inutiles du système ou de la base de données. Ceci est important pour nettoyer et maintenir la cohérence des données. Par exemple, dans une base de données de centre commercial en ligne, les produits radiés ou expirés peuvent être supprimés de la base de données via une opération de suppression.
  3. Modifier (Mettre à jour) : Les opérations de modification peuvent mettre à jour ou modifier des données ou des fonctions existantes dans le système ou la base de données. Cela peut aider à maintenir l’exactitude et l’exhaustivité des données. Par exemple, dans un système de gestion des informations sur les employés, les informations sur les salaires des employés peuvent être mises à jour via des opérations de modification.

2. Fonction

        Element UI est une bibliothèque de composants de bureau basée sur Vue.js. Elle fournit un riche ensemble de composants d'interface utilisateur, notamment des tableaux, des formulaires, des boîtes de dialogue, etc., pour créer rapidement des applications Web modernes.

 Les principales fonctions d'ajout, de suppression et de modification des opérations dans Element UI sont les suivantes :

  1. Ajouter : dans Element UI, vous pouvez utiliser des composants de formulaire et des composants de boîte de dialogue pour ajouter des données. Les composants de formulaire nous permettent de collecter les données saisies par l'utilisateur et de les ajouter à une base de données ou à un serveur via une action de soumission. Grâce au composant de dialogue, nous pouvons afficher une fenêtre contextuelle pour collecter les données saisies par l'utilisateur, puis ajouter les données au système.
  2. Supprimer : dans Element UI, vous pouvez utiliser des composants de table et des composants de boîte de dialogue pour réaliser la fonction de suppression de données. Grâce au composant tableau, nous pouvons afficher les données existantes dans le système et fournir un bouton de suppression à l'utilisateur. Lorsque l'utilisateur clique sur le bouton de suppression, une boîte de dialogue peut apparaître pour confirmer l'opération de suppression et les données seront supprimé de la base de données ou du serveur après confirmation. .
  3. Modification (Mise à jour) : Dans Element UI, vous pouvez utiliser des composants de formulaire et des composants de dialogue pour implémenter des fonctions de modification de données. Grâce au composant de formulaire, nous pouvons afficher les données existantes dans le système et fournir des boutons d'édition que les utilisateurs peuvent utiliser. Lorsque l'utilisateur clique sur le bouton d'édition, une boîte de dialogue peut apparaître pour afficher l'interface d'édition des données et les données seront mises à jour. dans la base de données après que l'utilisateur a soumis la modification ou sur le serveur.

        Les opérations d'ajout, de suppression et de modification peuvent nous aider à gérer et à maintenir les données dans Element UI. Qu'il s'agisse d'ajouter de nouvelles données, de supprimer d'anciennes données ou de modifier des données existantes, il peut être rapidement mis en œuvre grâce aux composants et fonctions fournis par Element UI, et offre une interface utilisateur conviviale et une expérience interactive. Cela permet d'accélérer le développement et d'améliorer la disponibilité et la facilité d'utilisation du système .

2. CUD

1. Ajouter des modifications

Avant cela, nous devons écrire notre code back-end afin de pouvoir effectuer les opérations suivantes.

1.1. Ajouter une fenêtre pop-up

Tout d’abord, rendez-vous sur le site officiel de notre composant | Element et recherchez notre composant pop-up. Je l'ai également fourni ci-dessous.

<el-button type="primary" plain @click="dialogFormVisible = true">新增</el-button>
<!--    弹窗-->
    <el-dialog title="新增页面" :visible.sync="dialogFormVisible" @close="clear">
      <el-form :model="book">
        <el-form-item label="书籍名称" :label-width="formLabelWidth">
          <el-input v-model="book.bookname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书籍价格" :label-width="formLabelWidth">
          <el-input v-model="book.price" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="书籍类型" :label-width="formLabelWidth">
          <el-select v-model="book.booktype" placeholder="请选择活动区域">
            <el-option v-for="t in types" :label="t.name" :value="t.name" :key="'key_'+t.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSubmit">确 定</el-button>
      </div>
    </el-dialog>

1.2. Définir les variables

data() {
    return {
      // 是否打开弹窗
      dialogFormVisible: false,
      // 弹窗标题
      title: '新增页面',
      // 定义数组接收数据
      book:
        {id: '', bookname: '', price: '', booktype: ''}
      ,
      // 类型
      types: [],
      // 输入框长度
      formLabelWidth: '100px',

    }
  }

1.3. Méthode de définition

 // 初始化方法
    clear() {
      this.dialogFormVisible = false;
      this.title = '新增页面';
      this.book = {
        id: '',
        bookname: '',
        price: '',
        booktype: ''
      }
    }
    // 编辑
    handleEdit(index, row) {
      this.dialogFormVisible = true;

      if (row) {
        this.title = '编辑页面';
        this.book.id = row.id;
        this.book.bookname = row.bookname;
        this.book.price = row.price;
        this.book.booktype = row.booktype;
      }

    }
    // 增加修改提交
    editSubmit() {

      //表单验证
      this.$refs['book'].validate((valid) => {
        if (valid) {
          //验证通过执行增加修改方法

          let params = {
            id: this.book.id,
            bookname: this.book.bookname,
            price: this.book.price,
            booktype: this.book.booktype
          }

          //获取后台请求书籍数据的地址
          let url = this.axios.urls.BOOK_ADD;

          if (this.title == "编辑页面") {//如果是点击的编辑页面更改访问路径
            url = this.axios.urls.BOOK_EDIT;
          }
          this.axios.post(url, params).then(r => {
            this.clear();//关闭窗口
            this.query({});//刷新
          }).catch(e => {

          });
        } else {
          // console.log('error submit!!');
          return false;
        }
      });

    }
  created() {
    this.types = [{id: 1, name: '玄幻'},
      {id: 2, name: '计算机'},
      {id: 3, name: '散文'},
      {id: 4, name: '古典'},
      {id: 5, name: '文学'},
      {id: 6, name: '教育'},
      {id: 7, name: '悬疑'},]
//初始化查询的方法
    this.query({})
  }

1.4. Code complet

<template>
  <div class="Book" style="padding: 30px;">
    <!-- 输入框搜索 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="书籍名称 : ">
        <el-input v-model="bookname" placeholder="书籍名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="onSubmit">查询</el-button>
        <el-button type="primary" plain @click="dialogFormVisible = true">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 书籍的书籍表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="书籍ID"></el-table-column>
      <el-table-column prop="bookname" label="书籍名称"></el-table-column>
      <el-table-column prop="price" label="书籍价格"></el-table-column>
      <el-table-column prop="booktype" label="书籍类型"></el-table-column>
      <el-table-column label="操作" min-width="180">
        <template slot-scope="scope">
          <el-button size="mini" icon="el-icon-edit-outline" type="primary"
                     @click="handleEdit(scope.$index, scope.row)">编 辑
          </el-button>
          <el-button size="mini" icon="el-icon-delete" type="danger" @click="handleDelete(scope.$index, scope.row)">删
            除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block" style="padding: 20px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                     background :page-sizes="[10, 20, 30, 40]" :page-size="rows"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
    <!--    弹窗-->
    <el-dialog title="新增页面" :visible.sync="dialogFormVisible" @close="clear">
      <el-form :model="book">
        <el-form-item label="书籍名称" :label-width="formLabelWidth">
          <el-input v-model="book.bookname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书籍价格" :label-width="formLabelWidth">
          <el-input v-model="book.price" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="书籍类型" :label-width="formLabelWidth">
          <el-select v-model="book.booktype" placeholder="请选择活动区域">
            <el-option v-for="t in types" :label="t.name" :value="t.name" :key="'key_'+t.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
export default {
  data() {
    return {
      bookname: '',
      tableData: [],
      rows: 10,
      total: 0,
      page: 1,
      // 是否打开弹窗
      dialogFormVisible: false,
      // 弹窗标题
      title: '新增页面',
      // 定义数组接收数据
      book:
        {id: '', bookname: '', price: '', booktype: ''}
      ,
      // 类型
      types: [],
      // 输入框长度
      formLabelWidth: '100px',
    }
  },
  methods: {
    // 初始化方法
    clear() {
      this.dialogFormVisible = false;
      this.title = '新增页面';
      this.book = {
        id: '',
        bookname: '',
        price: '',
        booktype: ''
      }
    },
    // 编辑
    handleEdit(index, row) {
      this.dialogFormVisible = true;

      if (row) {
        this.title = '编辑页面';
        this.book.id = row.id;
        this.book.bookname = row.bookname;
        this.book.price = row.price;
        this.book.booktype = row.booktype;
      }

    },
    // 增加修改提交
    editSubmit() {

      let params = {
        id: this.book.id,
        bookname: this.book.bookname,
        price: this.book.price,
        booktype: this.book.booktype
      }

      //获取后台请求书籍数据的地址
      let url = this.axios.urls.BOOK_ADD;

      if (this.title == "编辑页面") {//如果是点击的编辑页面更改访问路径
        url = this.axios.urls.BOOK_EDIT;
      }
      this.axios.post(url, params).then(r => {
        this.clear();//关闭窗口
        this.query({});//刷新
      }).catch(e => {

      });

    },
    handleSizeChange(r) {
      //当页大小发生变化
      let params = {
        bookname: this.bookname,
        rows: r,
        page: this.page
      }
      this.query(params);
    },
    handleCurrentChange(p) {
      //当前页码大小发生变化
      let params = {
        bookname: this.bookname,
        rows: this.rows,
        // 分页
        page: p
      }
      // console.log(params)
      this.query(params);
    },
    query(params) {
      //获取后台请求书籍数据的地址
      let url = this.axios.urls.BOOK_BOOKLIST;
      this.axios.get(url, {
        params: params
      }).then(d => {
        this.tableData = d.data.rows;
        this.total = d.data.total;
      }).catch(e => {

      });

    },
    onSubmit() {
      let params = {
        bookname: this.bookname
      }
      console.log(params)
      this.query(params);
      this.bookname = ''
    }
  },
//初始化调用
  created() {
    this.types = [{id: 1, name: '玄幻'},
      {id: 2, name: '计算机'},
      {id: 3, name: '散文'},
      {id: 4, name: '古典'},
      {id: 5, name: '文学'},
      {id: 6, name: '教育'},
      {id: 7, name: '悬疑'},]
    this.query({})
  }
}
</script>

<style>
</style>

2. Supprimer

2.1. Méthode de définition

  
  // 删除
    handleDelete(index, row) {
      console.log(index, row)
      let url = this.axios.urls.BOOK_DEL;
      this.axios.post(url, {id: row.id}).then(d => {
        this.query({})
        this.$message({
          message: '恭喜你，删除成功',
          type: 'success'
        });
      }).catch(e => {
        this.$message('已取消');
      });
    }

3. Vérification du formulaire

1. Ajouter des règles

Vous devez ajouter :model="book" :rules="rules" ref="book" au formulaire dans elementui . :model et ref doivent être identiques.

      <el-form :model="book" :rules="rules" ref="book">

Ajouter des attributs prop à l'intérieur de <el-form-item>

2. Définir des règles

      //表单验证
      rules: {
        //定义验证格式
        bookname: [
          {required: true, message: '请输入书籍名称', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
        ],
        price: [
          {required: true, message: '请输入书籍价格', trigger: 'change'},
          {min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur'}
        ],
        booktype: [
          {required: true, message: '请输入书籍类型', trigger: 'blur'}
        ]
      }

3. Soumettre l'événement

Ajoutez-le à l'événement soumis


 this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });

formName : le nom sous la forme : model="book" ou ref="book"

    // 增加修改提交
    editSubmit() {

      //表单验证
      this.$refs['book'].validate((valid) => {
        if (valid) {
          //验证通过执行增加修改方法

          let params = {
            id: this.book.id,
            bookname: this.book.bookname,
            price: this.book.price,
            booktype: this.book.booktype
          }

          //获取后台请求书籍数据的地址
          let url = this.axios.urls.BOOK_ADD;

          if (this.title == "编辑页面") {//如果是点击的编辑页面更改访问路径
            url = this.axios.urls.BOOK_EDIT;
          }
          this.axios.post(url, params).then(r => {
            this.clear();//关闭窗口
            this.query({});//刷新
          }).catch(e => {

          });
        } else {
          // console.log('error submit!!');
          return false;
        }
      });


    }

Lorsque vos règles sont requises, exécutez votre méthode d'ajout et de modification, ou d'autres méthodes.

4. Code frontal complet

<template>
  <div class="Book" style="padding: 30px;">
    <!-- 输入框搜索 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="书籍名称 : ">
        <el-input v-model="bookname" placeholder="书籍名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="onSubmit">查询</el-button>
        <el-button type="primary" plain @click="dialogFormVisible = true">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 书籍的书籍表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="书籍ID"></el-table-column>
      <el-table-column prop="bookname" label="书籍名称"></el-table-column>
      <el-table-column prop="price" label="书籍价格"></el-table-column>
      <el-table-column prop="booktype" label="书籍类型"></el-table-column>
      <el-table-column label="操作" min-width="180">
        <template slot-scope="scope">
          <el-button size="mini" icon="el-icon-edit-outline" type="primary"
                     @click="handleEdit(scope.$index, scope.row)">编 辑
          </el-button>
          <el-button size="mini" icon="el-icon-delete" type="danger" @click="handleDelete(scope.$index, scope.row)">删
            除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block" style="padding: 20px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                     background :page-sizes="[10, 20, 30, 40]" :page-size="rows"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
    <!--    弹窗-->
    <el-dialog title="新增页面" :visible.sync="dialogFormVisible" @close="clear">
      <el-form :model="book" :rules="rules" ref="book">
        <el-form-item label="书籍名称" :label-width="formLabelWidth" prop="bookname">
          <el-input v-model="book.bookname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书籍价格" :label-width="formLabelWidth" prop="price">
          <el-input v-model="book.price" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="书籍类型" :label-width="formLabelWidth" prop="booktype">
          <el-select v-model="book.booktype" placeholder="请选择活动区域">
            <el-option v-for="t in types" :label="t.name" :value="t.name" :key="'key_'+t.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
export default {
  data() {
    return {
      bookname: '',
      tableData: [],
      rows: 10,
      total: 0,
      page: 1,
      // 是否打开弹窗
      dialogFormVisible: false,
      // 弹窗标题
      title: '新增页面',
      // 定义数组接收数据
      book:
        {id: '', bookname: '', price: '', booktype: ''}
      ,
      // 类型
      types: [],
      // 输入框长度
      formLabelWidth: '100px',
      //表单验证
      rules: {
        //定义验证格式
        bookname: [
          {required: true, message: '请输入书籍名称', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
        ],
        price: [
          {required: true, message: '请输入书籍价格', trigger: 'change'},
          {min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur'}
        ],
        booktype: [
          {required: true, message: '请输入书籍类型', trigger: 'blur'}
        ]
      },

    }
  },
  methods: {
    // 初始化方法
    clear() {
      this.dialogFormVisible = false;
      this.title = '新增页面';
      this.book = {
        id: '',
        bookname: '',
        price: '',
        booktype: ''
      }
    },
    // 编辑
    handleEdit(index, row) {
      this.dialogFormVisible = true;

      if (row) {
        this.title = '编辑页面';
        this.book.id = row.id;
        this.book.bookname = row.bookname;
        this.book.price = row.price;
        this.book.booktype = row.booktype;
      }

    },
    // 删除
    handleDelete(index, row) {
      console.log(index, row)
      let url = this.axios.urls.BOOK_DEL;
      this.axios.post(url, {id: row.id}).then(d => {
        this.query({})
        this.$message({
          message: '恭喜你，删除成功',
          type: 'success'
        });
      }).catch(e => {
        this.$message('已取消');
      });
    },
    // 增加修改提交
    editSubmit() {

      //表单验证
      this.$refs['book'].validate((valid) => {
        if (valid) {
          //验证通过执行增加修改方法

          let params = {
            id: this.book.id,
            bookname: this.book.bookname,
            price: this.book.price,
            booktype: this.book.booktype
          }

          //获取后台请求书籍数据的地址
          let url = this.axios.urls.BOOK_ADD;

          if (this.title == "编辑页面") {//如果是点击的编辑页面更改访问路径
            url = this.axios.urls.BOOK_EDIT;
          }
          this.axios.post(url, params).then(r => {
            this.clear();//关闭窗口
            this.query({});//刷新
          }).catch(e => {

          });
        } else {
          // console.log('error submit!!');
          return false;
        }
      });


    },
    handleSizeChange(r) {
      //当页大小发生变化
      let params = {
        bookname: this.bookname,
        rows: r,
        page: this.page
      }
      this.query(params);
    },
    handleCurrentChange(p) {
      //当前页码大小发生变化
      let params = {
        bookname: this.bookname,
        rows: this.rows,
        // 分页
        page: p
      }
      // console.log(params)
      this.query(params);
    },
    query(params) {
      //获取后台请求书籍数据的地址
      let url = this.axios.urls.BOOK_BOOKLIST;
      this.axios.get(url, {
        params: params
      }).then(d => {
        this.tableData = d.data.rows;
        this.total = d.data.total;
      }).catch(e => {

      });

    },
    onSubmit() {
      let params = {
        bookname: this.bookname
      }
      console.log(params)
      this.query(params);
      this.bookname = ''
    }
  },
  created() {
    this.types = [{id: 1, name: '玄幻'},
      {id: 2, name: '计算机'},
      {id: 3, name: '散文'},
      {id: 4, name: '古典'},
      {id: 5, name: '文学'},
      {id: 6, name: '教育'},
      {id: 7, name: '悬疑'},]
    this.query({})
  }
}
</script>

<style>
</style>

C'est tout pour mon partage, merci à tous d'en discuter dans l'espace commentaire ! ! !

Je suppose que tu aimes

Origine blog.csdn.net/weixin_74383330/article/details/133343463
conseillé
Classement
du quotidien
Plus
2024-08-26(0)
2024-08-25(0)
2024-08-24(0)
2024-08-23(0)
2024-08-22(0)
2024-08-21(0)
2024-08-20(0)
2024-08-19(0)
2024-08-18(0)
2024-08-17(0)

Code World

© 2018 codetd.com