Vue數(shù)據(jù)增刪改查與表單驗(yàn)證的實(shí)現(xiàn)流程介紹

更新時(shí)間：2022年10月19日 08:50:01 作者：顧輕舟。

這篇文章主要介紹了Vue數(shù)據(jù)增刪改查與表單驗(yàn)證的實(shí)現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助

1. 準(zhǔn)備工作

后臺(tái)服務(wù)接口，對(duì)書(shū)本的增刪改查操作

2. 彈出窗口

進(jìn)入ElementUi官網(wǎng)，找到Dialog對(duì)話框，可以參考“嵌套表單的dialog”實(shí)現(xiàn)。

該步驟先實(shí)現(xiàn)彈出窗口的前端邏輯，并不會(huì)調(diào)用后臺(tái)接口服務(wù)進(jìn)行實(shí)際的業(yè)務(wù)操作。

BookList.vue

<!--
彈出窗口：增加和修改書(shū)本信息共用一個(gè)彈出窗口，需要根據(jù)用戶(hù)的選擇動(dòng)態(tài)的設(shè)置彈出窗口的標(biāo)題
:tile  通過(guò)綁定值的方式設(shè)置dialog的標(biāo)題
:visible.sync  控制彈出窗口的顯示或隱藏，.sync同步修飾符
@close="closeBookForm"，設(shè)置窗口關(guān)閉時(shí)調(diào)用的處理函數(shù)，可用于清空表單
:model="bookForm"：用于定義表單對(duì)應(yīng)的model，具體model的定義可見(jiàn)data部分。
v-show="optiontype == 'update'" 通過(guò)操作類(lèi)型控制是否顯示書(shū)本編號(hào)字段，如果當(dāng)前操作類(lèi)型為
       新增，則不用顯示，書(shū)本編號(hào)在數(shù)據(jù)表中是自增的。
:label-width="formLabelWidth" 統(tǒng)一定義標(biāo)簽的寬度。
:style="{width: formEleWidth}"  統(tǒng)一定義form元素的寬度。
-->
<el-dialog :title="dialogName" :visible.sync="dialogFormVisible" @close="closeBookForm" width="500px">
  <el-form :model="bookForm">
    <el-form-item v-show="optiontype == 'update'" label="編號(hào)" :label-width="formLabelWidth">
      <el-input v-model="bookForm.id" autocomplete="off" :style="{width: formEleWidth}"></el-input>
    </el-form-item>
    <el-form-item label="書(shū)名" :label-width="formLabelWidth">
      <el-input v-model="bookForm.bookname" autocomplete="off" :style="{width: formEleWidth}"></el-input>
    </el-form-item>
    <el-form-item label="價(jià)格" :label-width="formLabelWidth">
      <el-input v-model="bookForm.price" autocomplete="off" :style="{width: formEleWidth}"></el-input>
    </el-form-item>
    <el-form-item label="類(lèi)型" :label-width="formLabelWidth">
      <el-select v-model="bookForm.booktype" placeholder="選擇類(lèi)型" :style="{width:formEleWidth}">
        <el-option label="名著" value="mz"></el-option>
        <el-option label="小說(shuō)" value="xs"></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="dialogFormVisible = false">確 定</el-button>
  </div>
</el-dialog>

在數(shù)據(jù)表格中添加“編輯”“刪除”功能連接。（在element-ui官方demo -> table組件中，有如何加入刪除，編輯等按鈕的示例）

    <!--表格-->
    <el-table :data="books" style="width: 100%;" :border="true" max-height="530">
      <el-table-column prop="id" label="編號(hào)" min-width="40" align="center"></el-table-column>
      <el-table-column prop="bookname" label="名稱(chēng)" min-width="100" align="center"></el-table-column>
      <el-table-column prop="price" label="價(jià)格" min-width="70" align="center"></el-table-column>
      <el-table-column prop="booktype" label="類(lèi)型" min-width="70" align="center"></el-table-column>
      <!-- “編輯”“刪除”功能連接 -->
      <el-table-column label="操作">
        <!--
        在<template>上使用特殊的slot-scope 特性，可以接收傳遞給插槽的prop
        slot-scope:類(lèi)似將每一行的row對(duì)象封裝到槽中，之后直接從scope中獲取
        row對(duì)象信息和行索引index信息即可
        -->
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">編輯</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>

script部分：

export default {
name: 'BookList',
data: function() {
  return {
    bookname: '',
    books: [],
    total: 0,
    rows: 10,
    page: 1,
    //控制對(duì)話框是否顯示，默認(rèn)是隱藏狀態(tài)
    dialogFormVisible: false,
    //統(tǒng)一控制標(biāo)簽的寬度
    formLabelWidth: '40px',
    //統(tǒng)一控制表單元素的寬度
    formEleWidth: '400px',
    //對(duì)話框標(biāo)題，默認(rèn)為新增，如果是點(diǎn)擊修改按鈕打開(kāi)對(duì)話框，則標(biāo)題應(yīng)為修改。
    dialogName:'新增書(shū)本',
    //操作類(lèi)型，默認(rèn)為添加，如果是點(diǎn)擊修改打開(kāi)對(duì)話框，則操作類(lèi)類(lèi)型應(yīng)變?yōu)樾薷?
    //該變量用于控制是否顯示書(shū)本編號(hào)字段，當(dāng)操作類(lèi)型為新增時(shí)不需顯示（書(shū)本編號(hào)數(shù)據(jù)表字段為自增）
    //當(dāng)操作類(lèi)型為修改時(shí)，需要顯示。
    optiontype: 'add',
    //定義表單對(duì)應(yīng)的model
    bookForm: {
      id: '',
      bookname: '',
      price:null,
      booktype: ''
    }
  }
},
methods: {
  qry: function() {
    let url = this.axios.urls.BOOKMSG_BOOKINFO_REQ;
    this.axios.post(url, {
      bookname: this.bookname,
      page: this.page,
      rows: this.rows
    }).then(resp => {
      console.log(resp);
      this.books = resp.data.data;
      this.total = resp.data.total;
    }).catch(error => {
      console.log(error);
    });
  },
  //當(dāng)每頁(yè)顯示的記錄數(shù)發(fā)生變化時(shí)，設(shè)置當(dāng)前頁(yè)碼為1，執(zhí)行查詢(xún)。
  handleSizeChange: function(rows) {
    this.rows = rows;
    this.page = 1;
    this.qry();
  },
  //當(dāng)前頁(yè)碼發(fā)生變化時(shí)，執(zhí)行查詢(xún)
  handleCurrentChange: function(page) {
    this.page = page;
    this.qry();
  },
  //當(dāng)關(guān)閉對(duì)話框時(shí)，該方法用于清空表單
  closeBookForm: function() {
    this.bookForm.id=null;
    this.bookForm.bookname = null;
    this.bookForm.booktype = null;
    this.bookForm.price = null;
  },
  //打開(kāi)對(duì)話框，將對(duì)話框標(biāo)題設(shè)置為新增，操作類(lèi)型設(shè)置為'add'
  addBook: function() {
    this.dialogName = '新增書(shū)本信息';
    this.dialogFormVisible = true;
    this.optiontype = 'add';
  },
  //打開(kāi)對(duì)話框，將對(duì)話框標(biāo)題設(shè)置為修改，操作類(lèi)型設(shè)置為'update'，
  //并使用獲取的待修改的記錄的值設(shè)置對(duì)應(yīng)的表單元素
  handleEdit: function(row) {
    this.dialogName = '編輯書(shū)本信息';
    this.dialogFormVisible = true;
    this.bookForm.id=row.id;
    this.bookForm.bookname = row.bookname;
    this.bookForm.booktype = row.booktype;
    this.bookForm.price = row.price;
    this.optiontype = 'update';
  },
  //刪除書(shū)本記錄
  handleDelete: function(row) {
    console.log("dele  = " + row);
  }
}
}

3. 新增更新功能

1）在action.js中加入后臺(tái)接口配置。配置時(shí)按照自己的項(xiàng)目實(shí)際進(jìn)行，不要照抄

   //獲取書(shū)本信息
  'BOOKMSG_BOOKINFO_REQ':'/bookMsg/bookAction!getBooks.action',
  //增加書(shū)本信息
  'BOOKMSG_BOOKINFO_ADD' : '/bookMsg/bookAction!addBook.action',
  //修改書(shū)本信息
  'BOOKMSG_BOOKINFO_UPDATE': '/bookMsg/bookAction!updateBook.action',
  //刪除書(shū)本信息
  'BOOKMSG_BOOKINFO_DEL': '/bookMsg/bookAction!delBook.action',
  //VUEX 異步請(qǐng)求后臺(tái)數(shù)據(jù)
  'VUE_ASYN_REQ':'/userMsg/vueAsynAction!asynAction.action',

2）在前端調(diào)用接口，注意在調(diào)用前請(qǐng)確認(rèn)后臺(tái)接口可正常使用

圖一：

圖二：

      //保存書(shū)本信息
      saveBook: function() {
        let url = this.axios.urls.BOOKMSG_BOOKINFO_ADD;
        //如果當(dāng)前操作類(lèi)型為update則需要調(diào)用更新接口
        if (this.optiontype == 'update') {
          url = this.axios.urls.BOOKMSG_BOOKINFO_UPDATE;
        }
        this.axios.post(url, this.bookForm).then(resp => {
          //操作成功，關(guān)閉彈出框，執(zhí)行查詢(xún)以便于顯示最新數(shù)據(jù)
          //操作失敗，提示失敗，關(guān)閉彈出框
          if (resp.data.success) {
            this.$message({
              message: resp.data.msg,
              type: 'success'
            });
            this.dialogFormVisible = false;
            this.qry();
          } else {
            this.$message({
              message: resp.data.msg,
              type: 'error'
            });
            this.dialogFormVisible = false;
          }
        }).catch(error => {
        })
      },

4. 刪除功能

      //刪除書(shū)本記錄
      handleDelete: function(row) {
        let url = this.axios.urls.BOOKMSG_BOOKINFO_DEL+"?id="+row.id;
        this.axios.delete(url).then(resp => {
          if(resp.data.success) {
            this.$message({
              message: resp.data.msg,
              type:'success'
            });
            this.qry();
          } else {
            this.$message({
              message: resp.data.msg,
              type: 'error'
            });
          }
        }).catch(error => {
          console.log(error);
        })
      }

在刪除之前需求讓用戶(hù)確認(rèn)一下是否刪除，這個(gè)功能請(qǐng)自行參數(shù)element-ui官方文檔。

5. 表單驗(yàn)證

查看Element-ui官方文檔Form部分

圖一：

如果需要自定義驗(yàn)證規(guī)則，用法如下圖所示：

圖二

        //定義表單驗(yàn)證規(guī)則，validatePrice為自定義驗(yàn)證函數(shù)，在下文有具體定義
        rules: {
          bookname: [
            {required: true, message: '請(qǐng)輸入書(shū)本名', trigger: 'blur'}
          ],
          price: [
            {required: true, validator: validatePrice, trigger: 'blur' }
          ],
          booktype: [
            {required: true, message: '請(qǐng)輸入書(shū)本類(lèi)型', trigger: 'blur'}
          ]
        }

validatePrice函數(shù)的定義：

      //用于驗(yàn)證訂單金額
      var validatePrice = (rule, value, callback) => {
        if(!value){
          callback(new Error('請(qǐng)輸入訂單金額'));
        } else if (isNaN(value)) {
          callback(new Error('請(qǐng)輸入數(shù)字值'));
        } else {
          callback();
        }
      }

表單驗(yàn)證：

      //保存書(shū)本信息
      saveBook: function(formName) {
        let url = this.axios.urls.BOOKMSG_BOOKINFO_ADD;
        //調(diào)用表單驗(yàn)證
        this.$refs[formName].validate((valid) => {
          //如果當(dāng)前操作類(lèi)型為update則需要調(diào)用更新接口
          if (this.optiontype == 'update') {
            url = this.axios.urls.BOOKMSG_BOOKINFO_UPDATE;
          }
          this.axios.post(url, this.bookForm).then(resp => {
            //操作成功，關(guān)閉彈出框，執(zhí)行查詢(xún)以便于顯示最新數(shù)據(jù)
            //操作失敗，提示失敗，關(guān)閉彈出框
            if (resp.data.success) {
              this.$message({
                message: resp.data.msg,
                type: 'success'
              });
              this.dialogFormVisible = false;
              this.qry();
            } else {
              this.$message({
                message: resp.data.msg,
                type: 'error'
              });
              this.dialogFormVisible = false;
            }
          }).catch(error => {
          })
        });
      },

定義驗(yàn)證規(guī)則，及rule

圖三