• vue数据增删改查及表单验证

    目录

    1. 准备工作

    2. 弹出窗口

    3. 新增更新功能

    4. 删除功能

    5. 表单验证

    5. 接口文档

    1. 准备工作

    后台服务接口，对书本的增删改查操作

    2. 弹出窗口

    进入ElementUi官网， 找到Dialog对话框，可以参考“嵌套表单的dialog”实现。
    该步骤先实现弹出窗口的前端逻辑，并不会调用后台接口服务进行实际的业务操作。
    BookList.vue

    1. <!--
    2. 弹出窗口：增加和修改书本信息共用一个弹出窗口，需要根据用户的选择动态的设置弹出窗口的标题
    3. :tile  通过绑定值的方式设置dialog的标题
    4. :visible.sync  控制弹出窗口的显示或隐藏，.sync同步修饰符
    5. @close="closeBookForm"，设置窗口关闭时调用的处理函数，可用于清空表单
    6. :model="bookForm"：用于定义表单对应的model，具体model的定义可见data部分。
    7. v-show="optiontype == 'update'" 通过操作类型控制是否显示书本编号字段，如果当前操作类型为
    8.        新增，则不用显示，书本编号在数据表中是自增的。
    9. :label-width="formLabelWidth" 统一定义标签的宽度。
    10. :style="{width: formEleWidth}"  统一定义form元素的宽度。
    11. -->
    12. <el-dialog :title="dialogName" :visible.sync="dialogFormVisible" @close="closeBookForm" width="500px">
    13.   <el-form :model="bookForm">
    14.     <el-form-item v-show="optiontype == 'update'" label="编号" :label-width="formLabelWidth">
    15.       <el-input v-model="bookForm.id" autocomplete="off" :style="{width: formEleWidth}"></el-input>
    16.     </el-form-item>
    17.     <el-form-item label="书名" :label-width="formLabelWidth">
    18.       <el-input v-model="bookForm.bookname" autocomplete="off" :style="{width: formEleWidth}"></el-input>
    19.     </el-form-item>
    20.     <el-form-item label="价格" :label-width="formLabelWidth">
    21.       <el-input v-model="bookForm.price" autocomplete="off" :style="{width: formEleWidth}"></el-input>
    22.     </el-form-item>
    23.     <el-form-item label="类型" :label-width="formLabelWidth">
    24.       <el-select v-model="bookForm.booktype" placeholder="选择类型" :style="{width:formEleWidth}">
    25.         <el-option label="名著" value="mz"></el-option>
    26.         <el-option label="小说" value="xs"></el-option>
    27.       </el-select>
    28.     </el-form-item>
    29.   </el-form>
    30.   <div slot="footer" class="dialog-footer">
    31.     <el-button @click="dialogFormVisible = false">取 消</el-button>
    32.     <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
    33.   </div>
    34. </el-dialog>

    在数据表格中添加“编辑”“删除”功能连接。（在element-ui官方demo -> table组件中，有如何加入删除，编辑等按钮的示例）

    1.     <!--表格-->
    2.     <el-table :data="books" style="width: 100%;" :border="true" max-height="530">
    3.       <el-table-column prop="id" label="编号" min-width="40" align="center"></el-table-column>
    4.       <el-table-column prop="bookname" label="名称" min-width="100" align="center"></el-table-column>
    5.       <el-table-column prop="price" label="价格" min-width="70" align="center"></el-table-column>
    6.       <el-table-column prop="booktype" label="类型" min-width="70" align="center"></el-table-column>
    7.       <!-- “编辑”“删除”功能连接 -->
    8.       <el-table-column label="操作">
    9.         <!--
    10.         在<template>上使用特殊的slot-scope 特性，可以接收传递给插槽的prop
    11.         slot-scope:类似将每一行的row对象封装到槽中，之后直接从scope中获取
    12.         row对象信息和行索引index信息即可
    13.         -->
    14.         <template slot-scope="scope">
    15.           <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
    16.           <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
    17.         </template>
    18.       </el-table-column>
    19.     </el-table>

    script部分：

    1. export default {
    2. name: 'BookList',
    3.  
    4. data: function() {
    5.   return {
    6.     bookname: '',
    7.     books: [],
    8.     total: 0,
    9.     rows: 10,
    10.     page: 1,
    11.  
    12.     //控制对话框是否显示，默认是隐藏状态
    13.     dialogFormVisible: false,
    14.  
    15.     //统一控制标签的宽度
    16.     formLabelWidth: '40px',
    17.  
    18.     //统一控制表单元素的宽度
    19.     formEleWidth: '400px',
    20.  
    21.     //对话框标题，默认为新增，如果是点击修改按钮打开对话框，则标题应为修改。
    22.     dialogName:'新增书本',
    23.  
    24.     //操作类型，默认为添加，如果是点击修改打开对话框，则操作类类型应变为修改
    25.     //该变量用于控制是否显示书本编号字段，当操作类型为新增时不需显示（书本编号数据表字段为自增）
    26.     //当操作类型为修改时，需要显示。
    27.     optiontype: 'add',
    28.  
    29.     //定义表单对应的model
    30.     bookForm: {
    31.       id: '',
    32.       bookname: '',
    33.       price:null,
    34.       booktype: ''
    35.     }
    36.   }
    37. },
    38.  
    39. methods: {
    40.   qry: function() {
    41.     let url = this.axios.urls.BOOKMSG_BOOKINFO_REQ;
    42.     this.axios.post(url, {
    43.       bookname: this.bookname,
    44.       page: this.page,
    45.       rows: this.rows
    46.     }).then(resp => {
    47.       console.log(resp);
    48.       this.books = resp.data.data;
    49.       this.total = resp.data.total;
    50.     }).catch(error => {
    51.       console.log(error);
    52.     });
    53.   },
    54.  
    55.   //当每页显示的记录数发生变化时，设置当前页码为1，执行查询。
    56.   handleSizeChange: function(rows) {
    57.     this.rows = rows;
    58.     this.page = 1;
    59.     this.qry();
    60.   },
    61.  
    62.   //当前页码发生变化时，执行查询
    63.   handleCurrentChange: function(page) {
    64.     this.page = page;
    65.     this.qry();
    66.   },
    67.  
    68.   //当关闭对话框时，该方法用于清空表单
    69.   closeBookForm: function() {
    70.     this.bookForm.id=null;
    71.     this.bookForm.bookname = null;
    72.     this.bookForm.booktype = null;
    73.     this.bookForm.price = null;
    74.   },
    75.  
    76.   //打开对话框，将对话框标题设置为新增，操作类型设置为'add'
    77.   addBook: function() {
    78.     this.dialogName = '新增书本信息';
    79.     this.dialogFormVisible = true;
    80.     this.optiontype = 'add';
    81.   },
    82.  
    83.   //打开对话框，将对话框标题设置为修改，操作类型设置为'update'，
    84.   //并使用获取的待修改的记录的值设置对应的表单元素
    85.   handleEdit: function(row) {
    86.     this.dialogName = '编辑书本信息';
    87.     this.dialogFormVisible = true;
    88.     this.bookForm.id=row.id;
    89.     this.bookForm.bookname = row.bookname;
    90.     this.bookForm.booktype = row.booktype;
    91.     this.bookForm.price = row.price;
    92.     this.optiontype = 'update';
    93.   },
    94.  
    95.   //删除书本记录
    96.   handleDelete: function(row) {
    97.     console.log("dele  = " + row);
    98.   }
    99.  
    100. }
    101. }

    3. 新增更新功能

    1） 在action.js中加入后台接口配置。配置时按照自己的项目实际进行，不要照抄

    1.    //获取书本信息
    2.   'BOOKMSG_BOOKINFO_REQ':'/bookMsg/bookAction!getBooks.action',
    3.   
    4.   //增加书本信息
    5.   'BOOKMSG_BOOKINFO_ADD' : '/bookMsg/bookAction!addBook.action',
    6.  
    7.   //修改书本信息
    8.   'BOOKMSG_BOOKINFO_UPDATE': '/bookMsg/bookAction!updateBook.action',
    9.  
    10.   //删除书本信息
    11.   'BOOKMSG_BOOKINFO_DEL': '/bookMsg/bookAction!delBook.action',
    12.  
    13.   //VUEX 异步请求后台数据
    14.   'VUE_ASYN_REQ':'/userMsg/vueAsynAction!asynAction.action',

    2） 在前端调用接口， 注意在调用前请确认后台接口可正常使用

    图一：

    图二：

    1.       //保存书本信息
    2.       saveBook: function() {
    3.         let url = this.axios.urls.BOOKMSG_BOOKINFO_ADD;
    4.  
    5.         //如果当前操作类型为update则需要调用更新接口
    6.         if (this.optiontype == 'update') {
    7.           url = this.axios.urls.BOOKMSG_BOOKINFO_UPDATE;
    8.         }
    9.         this.axios.post(url, this.bookForm).then(resp => {
    10.  
    11.           //操作成功，关闭弹出框，执行查询以便于显示最新数据
    12.           //操作失败，提示失败，关闭弹出框
    13.           if (resp.data.success) {
    14.             this.$message({
    15.               message: resp.data.msg,
    16.               type: 'success'
    17.             });
    18.             this.dialogFormVisible = false;
    19.             this.qry();
    20.           } else {
    21.             this.$message({
    22.               message: resp.data.msg,
    23.               type: 'error'
    24.             });
    25.             this.dialogFormVisible = false;
    26.           }
    27.         }).catch(error => {
    28.         })
    29.       },

    4. 删除功能

    1.       //删除书本记录
    2.       handleDelete: function(row) {
    3.         let url = this.axios.urls.BOOKMSG_BOOKINFO_DEL+"?id="+row.id;
    4.         this.axios.delete(url).then(resp => {
    5.           if(resp.data.success) {
    6.             this.$message({
    7.               message: resp.data.msg,
    8.               type:'success'
    9.             });
    10.             this.qry();
    11.           } else {
    12.             this.$message({
    13.               message: resp.data.msg,
    14.               type: 'error'
    15.             });
    16.           }
    17.         }).catch(error => {
    18.           console.log(error);
    19.         })
    20.       }

    在删除之前需求让用户确认一下是否删除，这个功能请自行参数element-ui官方文档。

    5. 表单验证

    查看Element-ui官方文档Form部分
    图一：

    如果需要自定义验证规则，用法如下图所示：
    图二

    1.         //定义表单验证规则，validatePrice为自定义验证函数，在下文有具体定义
    2.         rules: {
    3.           bookname: [
    4.             {required: true, message: '请输入书本名', trigger: 'blur'}
    5.           ],
    6.           price: [
    7.             {required: true, validator: validatePrice, trigger: 'blur' }
    8.           ],
    9.           booktype: [
    10.             {required: true, message: '请输入书本类型', trigger: 'blur'}
    11.           ]
    12.         }

    validatePrice函数的定义：

    1.       //用于验证订单金额
    2.       var validatePrice = (rule, value, callback) => {
    3.         if(!value){
    4.           callback(new Error('请输入订单金额'));
    5.         } else if (isNaN(value)) {
    6.           callback(new Error('请输入数字值'));
    7.         } else {
    8.           callback();
    9.         }
    10.       }

    表单验证：

    1.       //保存书本信息
    2.       saveBook: function(formName) {
    3.         let url = this.axios.urls.BOOKMSG_BOOKINFO_ADD;
    4.          
    5.         //调用表单验证
    6.         this.$refs[formName].validate((valid) => {
    7.           //如果当前操作类型为update则需要调用更新接口
    8.           if (this.optiontype == 'update') {
    9.             url = this.axios.urls.BOOKMSG_BOOKINFO_UPDATE;
    10.           }
    11.           this.axios.post(url, this.bookForm).then(resp => {
    12.  
    13.             //操作成功，关闭弹出框，执行查询以便于显示最新数据
    14.             //操作失败，提示失败，关闭弹出框
    15.             if (resp.data.success) {
    16.               this.$message({
    17.                 message: resp.data.msg,
    18.                 type: 'success'
    19.               });
    20.               this.dialogFormVisible = false;
    21.               this.qry();
    22.             } else {
    23.               this.$message({
    24.                 message: resp.data.msg,
    25.                 type: 'error'
    26.               });
    27.               this.dialogFormVisible = false;
    28.             }
    29.           }).catch(error => {
    30.           })
    31.         });
    32.       },

    定义验证规则，及rule
    图三

    调用验证，图四

    通过form表单的ref属性来清空表单验证信息，图五

    5. 接口文档

    接口文档需要包含的基本要素：

    接口地址：
    请求方式：get/post/put/delete等
    请求示例：举例说明如何调用
    请求参数：说明请求参数，及存放的位置，如url，form-data, body raw等等。
    返回参数：
    正确：说明返回的json数据
    错误：指明不同错误的代码及含义

  • 相关阅读:
    记一次SQL优化
    【Java】记录一次使用 Springboot + Liquibase 做数据库的变更同步、回滚
    跨平台应用开发进阶(三十)：uni-app 实现视频直播
    NIO‘s Sword（思维，取模，推公式）
    Android性能优化，可以从那些方面解决？方案一览
    Python-OpenCV API
    Google重磅发布Go语言编码规范
    WebAssembly照亮了 Web端软件的未来
    人工智能导论
    JavaEE——IO
  • 原文地址：https://blog.csdn.net/qq_64001795/article/details/127289629