• SPA项目开发之表单验证&增删改功能

    一、表单验证

    在elementUI中，Form组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则， 并将Form-Item的prop属性设置为需校验的字段名即可

    具体的可拜读elementUI官网
       

     1、先找到一个符合需求的表单样式，并在data中添加表单的属性

    1. <!-- 编辑界面 -->
    2. 		<el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @before-close="closeDialog">
    3. 			<el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
    4. 				<el-form-item label="文章标题" prop="title">
    5. 					<el-input size="small" v-model="editForm.title" auto-complete="off" placeholder="请输入文章标题"></el-input>
    6. 				</el-form-item>
    7. 				<el-form-item label="文章内容" prop="body">
    8. 					<el-input size="small" v-model="editForm.body" auto-complete="off" placeholder="请输入文章内容"></el-input>
    9. 				</el-form-item>
    10. 			</el-form>
    11. 			<div slot="footer" class="dialog-footer">
    12. 				<el-button size="small" @click="closeDialog">取消</el-button>
    13. 				<el-button size="small" type="primary" class="title" @click="submitForm('editForm')">保存</el-button>
    14. 			</div>
    15. 		</el-dialog>

     

    2、添加表单校验规则

     可在官网中查找一个表单校验规则rules与el-form表单中的rules相对应，根据自己的需求改吧改吧

     

     

    1. rules: {
    2.           title: [{
    3.               required: true,
    4.               message: '请输入活动名称',
    5.               trigger: 'blur'
    6.             },
    7.             {
    8.               min: 3,
    9.               max: 5,
    10.               message: '长度在 3 到 5 个字符',
    11.               trigger: 'blur'
    12.             }
    13.           ],
    14.           body: [{
    15.             required: true,
    16.             message: '请输入活动名称',
    17.             trigger: 'blur'
    18.           }]
    19.         },

     3、在表单提交时检验规则

    1. submitForm(formName) {
    2.         this.$refs[formName].validate((valid) => {
    3.           if (valid) {
    4.             alert('submit!');
    5.           } else {
    6.             console.log('error submit!!');
    7.             return false;
    8.           }
    9.         });

    二、增删改功能的实现

    1、首先确保新增/编辑的窗体能够正常使用

    当我点击新增时窗口名应该显示为新增文章，当我点击编辑时窗口名则为编辑文章。

    并且点击编辑窗口时，数据要能够回显，要拿到编辑前的数据。

    实现思路：在方法中传入下标index和当前行row两个参数，根据当前行来判断，如果存在row即为编辑，不存在则是新增

    1. handleEdit(index, row) {
    2.         this.clearData();
    3.         this.editFormVisible = true;
    4.         if(row){
    5.           this.title = '编辑窗体';
    6.           this.editForm.id = row.id;
    7.           this.editForm.title = row.title;
    8.           this.editForm.body = row.body
    9.  
    10.  
    11.         }
    12.         else{
    13.           this.title = '新增窗体';
    14.         }
    15.       },

    同时在关闭窗口时要清空数据，这里定义一个清空数据的方法，并在关闭窗口的方法中调用

    1.  clearData() {
    2.         this.title = '';
    3.         this.editForm.id = 0;
    4.         this.editForm.title = '';
    5.         this.editForm.body = '';
    6.         this.editFormVisible = false;
    7.       },
    1. closeDialog() {
    2.         this.clearData();
    3.       },

    2、新增和编辑功能的实现

    由于增加与编辑的方法名是一样的，所以在表单提交时我们需要判断触发这个方法时是增加还是编辑。

    实现思路：

    elementUI与layui一样，编辑数据时都不再需要向后台获取id，而是拿到该条数据的下标与当前行数，而新增时不需要，id为0，所以我们可以通过判断id是否为0来辨别增加和编辑两个方法。在通过axios拿到不同的接口数据

    1. submitForm(formName) {
    2.         this.$refs[formName].validate((valid) => {
    3.           if (valid) {
    4.             let url;
    5.             if (this.editForm.id == 0) {
    6.               url = this.axios.urls.SYSTEM_ARTICLE_ADD;
    7.             } else {
    8.               url = this.axios.urls.SYSTEM_ARTICLE_EDIT;
    9.             }
    10.             // let url = 'http://localhost:8080/T216_SSH/vue/userAction_login.action';
    11.  
    12.             this.axios.post(url, this.editForm).then((response) => {
    13.               console.log(response);
    14.               this.clearData();
    15.               this.search();
    16.             }).catch(function(error) {
    17.               console.log(error);
    18.             });
    19.           } else {
    20.             console.log('error submit!!');
    21.             return false;
    22.           }
    23.         });
    24.       }
    25.  
    26.     },

     

    3、删除功能的实现

    删除功能与编辑功能一样，都要拿到该条数据的下标和当前行数。在通过axios拿到删除方法的接口数据，并且提交时将当前行id赋给id即可

    1.  deleteUser(index, row) {
    2.         let url = this.axios.urls.SYSTEM_ARTICLE_DEL;
    3.         this.axios.post(url, {
    4.           id: row.id
    5.         }).then((response) => {
    6.           console.log(response);
    7.           this.clearData();
    8.           this.search();
    9.         }).catch(function(error) {
    10.           console.log(error);
    11.         });
    12.       },

     

    完整项目代码：

    1. <template>
    2.   <div>
    3.     <!--  搜索筛选-->
    4.     <el-form :inline="true" :model="formInline" class="user-search">
    5.       <el-form-item label="搜索：">
    6.         <el-input size="small" v-model="formInline.title" placeholder="输入文章标题"></el-input>
    7.       </el-form-item>
    8.       <el-form-item>
    9.         <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
    10.         <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
    11.       </el-form-item>
    12.     </el-form>
    13.     <!--列表-->
    14.     <el-table size="small" :data="listData" highlight-current-row style="width: 100%;">
    15.       <el-table-column align="center" type="selection" min-width="60">
    16.       </el-table-column>
    17.       <el-table-column sortable prop="id" label="文章ID" min-width="300">
    18.       </el-table-column>
    19.       <el-table-column sortable prop="title" label="文章标题" min-width="300">
    20.       </el-table-column>
    21.       <el-table-column sortable prop="body" label="文章内容" min-width="300">
    22.       </el-table-column>
    23.       <el-table-column align="center" label="操作" min-width="300">
    24.         <template slot-scope="scope">
    25.           <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
    26.           <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
    27.         </template>
    28.       </el-table-column>
    29.     </el-table>
    30.     <!-- 分页条 -->
    31.     <el-pagination style="margin-top: 20px;" @size-change="handleSizeChange" @current-change="handleCurrentChange"
    32.       :current-page="formInline.page" :page-sizes="[10, 20, 30, 50]" :page-size="100"
    33.       layout="total, sizes, prev, pager, next, jumper" :total="formInline.total">
    34.     </el-pagination>
    35.  
    36.  
    37.     <!-- 编辑界面 -->
    38.     <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @before-close="closeDialog">
    39.       <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
    40.         <el-form-item label="文章标题" prop="title">
    41.           <el-input size="small" v-model="editForm.title" auto-complete="off" placeholder="请输入文章标题"></el-input>
    42.         </el-form-item>
    43.         <el-form-item label="文章内容" prop="body">
    44.           <el-input size="small" v-model="editForm.body" auto-complete="off" placeholder="请输入文章内容"></el-input>
    45.         </el-form-item>
    46.       </el-form>
    47.       <div slot="footer" class="dialog-footer">
    48.         <el-button size="small" @click="closeDialog">取消</el-button>
    49.         <el-button size="small" type="primary" class="title" @click="submitForm('editForm')">保存</el-button>
    50.       </div>
    51.     </el-dialog>
    52.   </div>
    53. </template>
    54.  
    55. <script>
    56.   export default {
    57.     name: 'Articles',
    58.     data() {
    59.       return {
    60.         title: '',
    61.         editFormVisible: false,
    62.         editForm: {
    63.           title: '',
    64.           body: '',
    65.           id: 0,
    66.  
    67.         },
    68.         rules: {
    69.           title: [{
    70.               required: true,
    71.               message: '请输入活动名称',
    72.               trigger: 'blur'
    73.             },
    74.             {
    75.               min: 3,
    76.               max: 5,
    77.               message: '长度在 3 到 5 个字符',
    78.               trigger: 'blur'
    79.             }
    80.           ],
    81.           body: [{
    82.             required: true,
    83.             message: '请输入活动名称',
    84.             trigger: 'blur'
    85.           }]
    86.         },
    87.  
    88.         listData: [],
    89.         formInline: {
    90.           page: 1,
    91.           total: 10,
    92.           title: ''
    93.         }
    94.       }
    95.     },
    96.     methods: {
    97.       handleSizeChange(rows) {
    98.         this.formInline.page = 1;
    99.         this.formInline.rows = rows;
    100.         this.search();
    101.       },
    102.       handleCurrentChange(page) {
    103.         this.formInline.page = page;
    104.         this.search();
    105.       },
    106.       //是为了代码复用
    107.       doSearch(param) {
    108.         // 获取树形节点的数据
    109.         let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
    110.  
    111.         //this指的是vue实例
    112.         this.axios.post(url, param)
    113.           .then(resp => { //代表成功 箭头函数 jdk8的语法
    114.             console.log(resp);
    115.             this.listData = resp.data.result;
    116.             this.formInline = resp.data.pageBean;
    117.           }).catch(function() { //代表失败
    118.  
    119.           });
    120.       },
    121.       search() {
    122.         //  按照条件进行查询
    123.         this.doSearch(this.formInline);
    124.       }
    125.       closeDialog() {
    126.         this.clearData();
    127.       },
    128.       handleEdit(index, row) {
    129.         this.clearData();
    130.         this.editFormVisible = true;
    131.         if(row){
    132.           this.title = '编辑窗体';
    133.           this.editForm.id = row.id;
    134.           this.editForm.title = row.title;
    135.           this.editForm.body = row.body
    136.  
    137.  
    138.         }
    139.         else{
    140.           this.title = '新增窗体';
    141.         }
    142.       },
    143.  
    144.       clearData() {
    145.         this.title = '';
    146.         this.editForm.id = 0;
    147.         this.editForm.title = '';
    148.         this.editForm.body = '';
    149.         this.editFormVisible = false;
    150.       },
    151.       deleteUser(index, row) {
    152.         let url = this.axios.urls.SYSTEM_ARTICLE_DEL;
    153.         this.axios.post(url, {
    154.           id: row.id
    155.         }).then((response) => {
    156.           console.log(response);
    157.           this.clearData();
    158.           this.search();
    159.         }).catch(function(error) {
    160.           console.log(error);
    161.         });
    162.       },
    163.       submitForm(formName) {
    164.         this.$refs[formName].validate((valid) => {
    165.           if (valid) {
    166.             let url;
    167.             if (this.editForm.id == 0) {
    168.               url = this.axios.urls.SYSTEM_ARTICLE_ADD;
    169.             } else {
    170.               url = this.axios.urls.SYSTEM_ARTICLE_EDIT;
    171.             }
    172.             // let url = 'http://localhost:8080/T216_SSH/vue/userAction_login.action';
    173.  
    174.             this.axios.post(url, this.editForm).then((response) => {
    175.               console.log(response);
    176.               this.clearData();
    177.               this.search();
    178.             }).catch(function(error) {
    179.               console.log(error);
    180.             });
    181.           } else {
    182.             console.log('error submit!!');
    183.             return false;
    184.           }
    185.         });
    186.       }
    187.  
    188.     },
    189.     created() {
    190.       this.doSearch({});
    191.     }
    192.   }
    193. </script>
    194.  
    195. <style scoped>
    196.  
    197. </style>

     

     

     

  • 相关阅读:
    linux命令
    Java - Gson和Fastjson如何选择？
    【Java系列】Java 简介
    武汉星起航跨境—跨境电商卖家向海外仓进发，提升物流时效
    计算机组成原理——总线（课程笔记）
    audiopolicy
    华为od德科面试数据算法真题 2022-6-10 整形数组的最大连续子串的长度
    git 上传代码到gitlab
    创新案例｜云服务平台HashiCorp是如何构建开源社区实现B2B增长飞轮
    Redis集群方式
  • 原文地址：https://blog.csdn.net/m0_67477525/article/details/126835765