• SPA项目开发（CRUD&表单验证）

    目录

    一、表单验证

    二、增删改

    一、表单验证

    步骤：

     ①、将以下拷入Articles.vue中分页条下面

    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>

    拷入后会报错，将title和editFormVisible、editForm赋值

    1.  title: '',
    2.  editFormVisible: false,
    3.    editForm: {
    4.           title: '',
    5.           body: '',
    6.           id: 0
    7.         },

     然后先加入一个方法closeDialog

    1. closeDialog() {
    2.         // 关闭窗体
    3.        
    4.       }

    ②、 写一个方法 handleEdit

    1. handleEdit(index, row) {
    2.         // 展示新增文章的表单窗体
    3.         this.editFormVisible = true;
    4.  
    5.  
    6.       }

    效果：

     ③、将以下代码拷入

    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.             alert('submit!');
    5.           } else {
    6.             console.log('error submit!!');
    7.             return false;
    8.           }
    9.         });
    10.       },

     效果：

     步骤总结：

    1、拷入表单组件 el-from

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

    3、给表单设置规则 rules

    4、当表单提交事件要校验规则

    二、增删改

    写个方法：clearData

    1. clearData() {
    2.         // 清除编辑窗体的缓存数据
    3.         this.editForm.title = '';
    4.         this.editForm.id = 0;
    5.         this.editForm.body = '';
    6.         this.title = '';
    7.         this.editFormVisible = false;
    8.       }

    在关闭窗体方法中加入以下代码

    this.clearData();

    handleEdit方法中加入以下代码

    1. this.clearData();
    2.         // 展示新增文章的表单窗体
    3.         this.editFormVisible = true;
    4.         if (row) {
    5.           // 编辑
    6.           this.title = '编辑窗体';
    7.           this.editForm.id = row.id;
    8.           this.editForm.title = row.title;
    9.           this.editForm.body = row.body;
    10.         } else {
    11.           // 新增
    12.           this.title = '新增窗体';
    13.         }

    写入以下代码

    1. clearData() {
    2.         // 清除编辑窗体的缓存数据
    3.         this.editForm.title = '';
    4.         this.editForm.id = 0;
    5.         this.editForm.body = '';
    6.         this.title = '';
    7.         this.editFormVisible = false;
    8.       }

    关闭窗体方法和handleEdit中调用以上该方法

    this.clearData();

    对submitForm方法进行优化

    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.               url = this.axios.urls.SYSTEM_ARTICLE_EDIT;
    10.             }
    11.             this.axios.post(url, this.editForm).then(r => {
    12.               // 新增成功 1.关闭窗体-清空数据 2.重新查询
    13.               this.$message({
    14.                 message: r.data.msg,
    15.                 type: 'success'
    16.               });
    17.               this.clearData();
    18.               this.search();
    19.             }).catch(e => {
    20.  
    21.             });
    22.           } else {
    23.             console.log('error submit!!');
    24.             return false;
    25.           }
    26.         });
    27.       }

    然后更改doSearch中的以下代码，改成第二个代码

    this.formInline = resp.data.pageBean;
    this.formInline.total = resp.data.pageBean.total;

     最后写个删除方法

    1. deleteUser(index, row) {
    2.         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    3.           confirmButtonText: '确定',
    4.           cancelButtonText: '取消',
    5.           type: 'warning'
    6.         }).then(() => {
    7.  
    8.          let url = this.axios.urls.SYSTEM_ARTICLE_DEL;
    9.          this.axios.post(url, {id:row.id}).then(r => {
    10.            // 新增成功 1.关闭窗体-清空数据 2.重新查询
    11.            this.$message({
    12.              message: r.data.msg,
    13.              type: 'success'
    14.            });
    15.            this.clearData();
    16.            this.search();
    17.          }).catch(e => {
    18.  
    19.          });
    20.  
    21.         }).catch(() => {
    22.           this.$message({
    23.             type: 'info',
    24.             message: '已取消删除'
    25.           });
    26.         });
    27.       }

    整个页面代码

    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" width="60">
    16.       el-table-column>
    17.       <el-table-column sortable prop="id" label="文章ID" width="300">
    18.       el-table-column>
    19.       <el-table-column sortable prop="title" label="文章标题" width="300">
    20.       el-table-column>
    21.       <el-table-column sortable prop="body" label="文章内容" 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.     
    32.     <el-pagination style="margin-top: 20px;" @size-change="handleSizeChange" @current-change="handleCurrentChange"
    33.       :current-page="formInline.page" :page-sizes="[10, 20, 30, 50]" :page-size="100"
    34.       layout="total, sizes, prev, pager, next, jumper" :total="formInline.total">
    35.     el-pagination>
    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.  
    53.   div>
    54. template>
    55.  
    56. <script>
    57.   export default {
    58.     name: 'Articles',
    59.     data() {
    60.       return {
    61.         title: '',
    62.         editFormVisible: false,
    63.         editForm: {
    64.           title: '',
    65.           body: '',
    66.           id: 0
    67.         },
    68.         rules: {
    69.           title: [{
    70.               required: true,
    71.               message: '请输入请输入文章标题',
    72.               trigger: 'blur'
    73.             },
    74.             {
    75.               min: 5,
    76.               max: 10,
    77.               message: '长度在 5 到 10 个字符',
    78.               trigger: 'blur'
    79.             }
    80.           ],
    81.           body: [{
    82.             required: true,
    83.             message: '请输入文章内容',
    84.             trigger: 'blur'
    85.           }],
    86.         },
    87.         listData: [],
    88.         formInline: {
    89.           page: 1,
    90.           total: 10,
    91.           title: ''
    92.         }
    93.       }
    94.     },
    95.     methods: {
    96.       handleSizeChange(rows) {
    97.         this.formInline.page = 1;
    98.         this.formInline.rows = rows;
    99.         this.search();
    100.       },
    101.       handleCurrentChange(page) {
    102.         this.formInline.page = page;
    103.         this.search();
    104.  
    105.       },
    106.       // 为了代码复用
    107.       doSearch(parm) {
    108.         // 获取树形节点的数据
    109.         let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
    110.         // alert(url);
    111.         // {uname:'zs',pwd:'123'}
    112.  
    113.         this.axios.post(url, parm).then((resp) => {
    114.           console.log(resp);
    115.           this.listData = resp.data.result;
    116.           this.formInline.total = resp.data.pageBean.total;
    117.         }).catch(function() {
    118.  
    119.         });
    120.       },
    121.       search() {
    122.         // 按照条件查询
    123.         this.doSearch(this.formInline);
    124.       },
    125.       closeDialog() {
    126.         // 关闭窗体
    127.         this.clearData();
    128.       },
    129.       clearData() {
    130.         // 清除编辑窗体的缓存数据
    131.         this.editForm.title = '';
    132.         this.editForm.id = 0;
    133.         this.editForm.body = '';
    134.         this.title = '';
    135.         this.editFormVisible = false;
    136.       },
    137.       handleEdit(index, row) {
    138.         this.clearData();
    139.         // 展示新增文章的表单窗体
    140.         this.editFormVisible = true;
    141.         if (row) {
    142.           // 编辑
    143.           this.title = '编辑窗体';
    144.           this.editForm.id = row.id;
    145.           this.editForm.title = row.title;
    146.           this.editForm.body = row.body;
    147.         } else {
    148.           // 新增
    149.           this.title = '新增窗体';
    150.         }
    151.  
    152.       },
    153.       deleteUser(index, row) {
    154.         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    155.           confirmButtonText: '确定',
    156.           cancelButtonText: '取消',
    157.           type: 'warning'
    158.         }).then(() => {
    159.  
    160.          let url = this.axios.urls.SYSTEM_ARTICLE_DEL;
    161.          this.axios.post(url, {id:row.id}).then(r => {
    162.            // 新增成功 1.关闭窗体-清空数据 2.重新查询
    163.            this.$message({
    164.              message: r.data.msg,
    165.              type: 'success'
    166.            });
    167.            this.clearData();
    168.            this.search();
    169.          }).catch(e => {
    170.  
    171.          });
    172.  
    173.         }).catch(() => {
    174.           this.$message({
    175.             type: 'info',
    176.             message: '已取消删除'
    177.           });
    178.         });
    179.       },
    180.       submitForm(formName) {
    181.         this.$refs[formName].validate((valid) => {
    182.           if (valid) {
    183.             let url;
    184.             if (this.editForm.id == 0) {
    185.               // 新增
    186.               url = this.axios.urls.SYSTEM_ARTICLE_ADD;
    187.             } else {
    188.               url = this.axios.urls.SYSTEM_ARTICLE_EDIT;
    189.             }
    190.             this.axios.post(url, this.editForm).then(r => {
    191.               // 新增成功 1.关闭窗体-清空数据 2.重新查询
    192.               this.$message({
    193.                 message: r.data.msg,
    194.                 type: 'success'
    195.               });
    196.               this.clearData();
    197.               this.search();
    198.             }).catch(e => {
    199.  
    200.             });
    201.           } else {
    202.             console.log('error submit!!');
    203.             return false;
    204.           }
    205.         });
    206.       }
    207.     },
    208.     created() {
    209.       this.doSearch({});
    210.     }
    211.   }
    212. script>
    213.  
    214. <style>
    215. style>

    效果：

  • 相关阅读:
    【微服务】springboot 整合 dubbo3.0
    【MATLAB】利用MATLAB奏乐
    基于py的网络路由实验
    【YAML】【YAML的实践】【YAML的使用学习记录】
    PyQt（学习笔记）
    SpringCloud进阶-Eureka基础知识与搭建单机Eureka
    短视频ai剪辑分发账号矩阵系统（招商oem）----源头技术开发
    最大公约数——Hankson的趣味题（线筛法求质数+gcd+质因数组合搜索约数）
    计及新能源出力不确定性的电气设备综合能源系统协同优化（Matlab代码实现）
    智能手术机器人技术与原理（二）
  • 原文地址：https://blog.csdn.net/m0_62604616/article/details/126839748