• SPA项目开发之表单验证+CRUD

    目录

    一、表单验证

    思路

    所需表单

    增加和编辑页面：

     通过点击新增/编辑将表单对应窗口弹出

    表单验证

    表单提交时进行校验规则 

    效果​编辑

    二、CRUD

    表单校验通过后，调用后台数据接口完成新增功能（删改同样如此）

    效果展示

    新增：

     修改：

     删除

    一、表单验证

    思路

    1.出现表单组件 el-form
    2.通过点击 新增/编辑将表单对应窗口弹出
    3.给表单设置规则 rules
    4.当表单提交时要校验规则

    所需表单

    2.     <el-form :inline="true" :model="formInline" class="user-search">
    3.       <el-form-item label="搜索：">
    4.         <el-input size="small" v-model="formInline.title" placeholder="输入文章标题">el-input>
    5.       el-form-item>
    6.       <el-form-item>
    7.         <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索el-button>
    8.         <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加el-button>
    9.       el-form-item>
    10.     el-form>
    11.     <el-table size="small" :data="listData" highlight-current-row border style="width: 100%;">
    12.       <el-table-column align="center" type="selection" width="60">
    13.       el-table-column>
    14.       <el-table-column sortable prop="id" label="文章ID" width="300">
    15.       el-table-column>
    16.       <el-table-column sortable prop="title" label="文章标题" width="300">
    17.       el-table-column>
    18.       <el-table-column sortable prop="body" label="文章内容" width="300">
    19.       el-table-column>
    20.       <el-table-column align="center" label="操作" min-width="300">
    21.         <template slot-scope="scope">
    22.           <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑el-button>
    23.           <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除el-button>
    24.         template>
    25.       el-table-column>
    26.     el-table>

    增加和编辑页面：

    2.     <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="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>

     通过点击新增/编辑将表单对应窗口弹出

    判断是弹出新增还是编辑

    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.         } else {
    10.           this.title = '新增窗口';
    11.         }
    12.       },

    表单验证

     给表单设置规则 都放入Articles.vue

    1. rules: {
    2.           title: [{
    3.               required: true,
    4.               message: '请输入文章标题',
    5.               trigger: 'blur'
    6.             },
    7.             {
    8.               min: 5,
    9.               max: 10,
    10.               message: '长度在 5 到 10 个字符',
    11.               trigger: 'blur'
    12.             }
    13.           ],
    14.           body: [{
    15.             required: true,
    16.             message: '请选择文章内容',
    17.             trigger: 'blur'
    18.           }]
    19.         }

    表单提交时进行校验规则 

    1.       submitForm(formName) {
    2.         this.$refs[formName].validate((valid) => {
    3.           if (valid) {
    4.             let url;
    5.             if (this.editForm.id == 0) {
    6.               //新增
    7.               url = this.axios.urls.SYSTEM_ARTICLE_ADD;
    8.             } else {
    9.               //修改
    10.               url = this.axios.urls.SYSTEM_ARTICLE_EDIT;
    11.             }
    12.             this.axios.post(url, this.editForm).then(r => {
    13.               //新增成功后 1.关闭窗体，数据清空 2.重新查询
    14.               this.$message({
    15.                 message: r.data.msg,
    16.                 type: 'success'
    17.               });
    18.               this.closeDialog();
    19.               this.search();
    20.             }).catch(e => {
    21.  
    22.             });
    23.  
    24.           } else {
    25.             console.log('error submit!!');
    26.             return false;
    27.           }
    28.         });
    29.       }

    效果

    二、CRUD

    保障编辑窗体的正常弹出

    表单校验通过后，调用后台数据接口完成新增功能（删改同样如此）

    2.  
    3. <script>
    4.   export default {
    5.     name: 'Articles',
    6.     data() {
    7.       return {
    8.         title: '',
    9.         editFormVisible: false,
    10.         editForm: {
    11.           title: '',
    12.           body: '',
    13.           id: 0
    14.         },
    15.         rules: {
    16.           title: [{
    17.               required: true,
    18.               message: '请输入文章标题',
    19.               trigger: 'blur'
    20.             },
    21.             {
    22.               min: 5,
    23.               max: 10,
    24.               message: '长度在 5 到 10 个字符',
    25.               trigger: 'blur'
    26.             }
    27.           ],
    28.           body: [{
    29.             required: true,
    30.             message: '请输入文章内容',
    31.             trigger: 'blur'
    32.           }],
    33.         },
    34.         listData: [],
    35.         formInline: {
    36.           page: 1,
    37.           total: 10,
    38.           title: ''
    39.         }
    40.       }
    41.     },
    42.     methods: {
    43.       handleSizeChange(rows) {
    44.         console.log("页大小发生改变时触发")
    45.         this.formInline.page = 1;
    46.         this.formInline.rows = rows;
    47.         this.search();
    48.       },
    49.       handleCurrentChange(page) {
    50.         console.log("当前页码发生改变时触发")
    51.         this.formInline.page = page;
    52.         this.search();
    53.  
    54.       },
    55.       //是为了代码复用
    56.       doSearch(param) {
    57.         //向后台获取数据
    58.         let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
    59.  
    60.         //this指的是vue实例
    61.         this.axios.post(url, param)
    62.           .then(resp => { // 代表成功 this污染的问题可以通过箭头函数来实现 jdk8的 lambda表达式
    63.             console.log(resp);
    64.             this.listData = resp.data.result;
    65.             this.formInline.total = resp.data.pageBean.total;
    66.  
    67.  
    68.           }).catch(function() { //代表失败
    69.  
    70.           });
    71.       },
    72.       search() {
    73.         //按照 条件进行查询
    74.         this.doSearch(this.formInline);
    75.       },
    76.       closeDialog() { //关闭窗体
    77.         this.clearData();
    78.       },
    79.       clearData() {
    80.         //清除编辑窗体的缓存数据
    81.         this.editForm.title = '';
    82.         this.editForm.id = 0;
    83.         this.editForm.body = '';
    84.         this.title = '';
    85.         this.editFormVisible = false;
    86.       },
    87.       handleEdit(index, row) { //展示新增文章的表单窗体
    88.         this.clearData();
    89.         this.editFormVisible = true;
    90.         if (row) {
    91.           //编辑
    92.           this.title = '编辑窗体';
    93.           this.editForm.id = row.id;
    94.           this.editForm.title = row.title;
    95.           this.editForm.body = row.body;
    96.  
    97.         } else {
    98.           //新增
    99.           this.title = '新增窗体';
    100.         }
    101.       },
    102.       deleteUser(index, row) {
    103.  
    104.         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    105.           confirmButtonText: '确定',
    106.           cancelButtonText: '取消',
    107.           type: 'warning'
    108.         }).then(() => {
    109.           let url = this.axios.urls.SYSTEM_ARTICLE_DEL;
    110.           this.axios.post(url, {id:row.id}).then(r => {
    111.             //新增成功后 1.关闭窗体，数据清空 2.重新查询
    112.             this.$message({
    113.               message: r.data.msg,
    114.               type: 'success'
    115.             });
    116.             this.closeDialog();
    117.             this.search();
    118.           }).catch(e => {
    119.  
    120.           });
    121.         }).catch(() => {
    122.           this.$message({
    123.             type: 'info',
    124.             message: '已取消删除'
    125.           });
    126.         });
    127.       },
    128.       submitForm(formName) {
    129.         this.$refs[formName].validate((valid) => {
    130.           if (valid) {
    131.             let url;
    132.             if (this.editForm.id == 0) {
    133.               //新增
    134.               url = this.axios.urls.SYSTEM_ARTICLE_ADD;
    135.             } else {
    136.               //修改
    137.               url = this.axios.urls.SYSTEM_ARTICLE_EDIT;
    138.             }
    139.             this.axios.post(url, this.editForm).then(r => {
    140.               //新增成功后 1.关闭窗体，数据清空 2.重新查询
    141.               this.$message({
    142.                 message: r.data.msg,
    143.                 type: 'success'
    144.               });
    145.               this.closeDialog();
    146.               this.search();
    147.             }).catch(e => {
    148.  
    149.             });
    150.  
    151.           } else {
    152.             console.log('error submit!!');
    153.             return false;
    154.           }
    155.         });
    156.       }
    157.     },
    158.     created() {
    159.       this.doSearch({});
    160.     }
    161.   }
    162. script>
    163.  
    164. <style>
    165. style>

    效果展示

    新增：

     修改：

     删除

    取消删除

     确定删除

  • 相关阅读:
    C++11 之 override
    链表oj3（Leetcode）——相交链表；环形链表
    mybatis04关联关系映射
    ByteX-shrink_r源码解析
    c++基础：指针
    减治法（引例中位数、查找问题：折半&二叉&选择、排序问题：堆排序、组合问题：淘汰赛冠军问题&假币问题）
    线程同步互斥锁
    Linux/VC：进度条的小程序
    【遥控器开发基础教程1】疯壳·开源编队无人机-GPIO(遥控器指示灯控制)
    【华为OD题库-033】经典屏保-java
  • 原文地址：https://blog.csdn.net/weixin_65211978/article/details/126837484