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

    目录

    一、表单校验

    1、出现表单组件 el-form

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

    3、给表单设置规则 rules

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

    二、增删改

    1、保障编辑窗体能够正常弹出

    2、表单校验通过后，调用后台数据接口完成新增功能

    一、表单校验

    1、出现表单组件 el-form

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

    3、给表单设置规则 rules

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

    表单校验：

     

    校验代码：

    Articles.vue：

    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.     
    15.     <el-table size="small" :data="listData" highlight-current-row style="width: 100%;">
    16.       <el-table-column align="center" type="selection" min-width="60">
    17.       el-table-column>
    18.       <el-table-column sortable prop="id" label="文章ID" min-width="300">
    19.       el-table-column>
    20.       <el-table-column sortable prop="title" label="文章标题" min-width="300">
    21.       el-table-column>
    22.       <el-table-column sortable prop="body" label="文章内容" min-width="300">
    23.       el-table-column>
    24.       <el-table-column align="center" label="操作" min-width="300">
    25.         <template slot-scope="scope">
    26.           <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑el-button>
    27.           <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除el-button>
    28.         template>
    29.       el-table-column>
    30.     el-table>
    31.  
    32.     
    33.     <el-pagination style="margin-top: 20px;" @size-change="handleSizeChange" @current-change="handleCurrentChange"
    34.                    :current-page="formInline.page" :page-sizes="[10, 20, 30, 50]" :page-size="100"
    35.                    layout="total, sizes, prev, pager, next, jumper"
    36.                    :total="formInline.total">
    37.     el-pagination>
    38.  
    39.     
    40.     <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @before-close="closeDialog">
    41.       <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
    42.         <el-form-item label="文章标题" prop="title">
    43.           <el-input size="small" v-model="editForm.title" auto-complete="off" placeholder="请输入文章标题">el-input>
    44.         el-form-item>
    45.         <el-form-item label="文章内容" prop="body">
    46.           <el-input size="small" v-model="editForm.body" auto-complete="off" placeholder="请输入文章内容">el-input>
    47.         el-form-item>
    48.       el-form>
    49.       <div slot="footer" class="dialog-footer">
    50.         <el-button size="small" @click="closeDialog">取消el-button>
    51.         <el-button size="small" type="primary" class="title" @click="submitForm('editForm')">保存el-button>
    52.       div>
    53.     el-dialog>
    54.   div>
    55. template>
    56.  
    57. <script>
    58. export default {
    59.   name: 'Articles',
    60.   data() {
    61.     return {
    62.       title: '',
    63.       editFormVisible: false,
    64.       editForm: {
    65.         title: '',
    66.         body: ''
    67.       },
    68.       rules: {
    69.         title: [
    70.           {required: true, message: '请输入文章标题', trigger: 'blur'},
    71.           {min: 5, max: 10, message: '长度须在 5 到 10 个字符之间', trigger: 'blur'}
    72.         ],
    73.         body: [
    74.           {required: true, message: '请输入文章内容', trigger: 'blur'}
    75.         ],
    76.  
    77.       },
    78.  
    79.       listData: [],
    80.       formInline: {
    81.         page: 1,
    82.         total: 10,
    83.         title: ''
    84.       }
    85.     }
    86.   },
    87.   methods: {
    88.     handleSizeChange(rows) {
    89.       // console.log("页面发生改变")
    90.       this.formInline.page = 1;
    91.       this.formInline.rows = rows;
    92.       this.search();
    93.     },
    94.     handleCurrentChange(page) {
    95.       // console.log("当前页码发生改变")
    96.       this.formInline.page = page;
    97.       this.search();
    98.     },
    99.     //是为了代码复用
    100.     doSearch(param) {
    101.       // 获取树形节点的数据
    102.       let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
    103.  
    104.       //this指的是vue实例
    105.       this.axios.post(url, param)
    106.         .then(resp => {//代表成功 箭头函数 jdk8的语法
    107.           console.log(resp);
    108.           this.listData = resp.data.result;
    109.           this.formInline = resp.data.pageBean;
    110.         }).catch(function () {//代表失败
    111.  
    112.       });
    113.     },
    114.     search() {
    115.       //  按照条件进行查询
    116.       this.doSearch(this.formInline);
    117.     },
    118.     closeDialog() {
    119.       //  关闭窗体
    120.  
    121.     },
    122.     handleEdit() {
    123.       // 展示新增文章的表单
    124.       this.editFormVisible = true;
    125.     },
    126.     submitForm(formName) {
    127.       this.$refs[formName].validate((valid) => {
    128.         if (valid) {
    129.           alert('submit!');
    130.         } else {
    131.           console.log('error submit!!');
    132.           return false;
    133.         }
    134.       });
    135.     }
    136.   },
    137.   created() {
    138.     this.doSearch({});
    139.   }
    140. }
    141. script>
    142.  
    143. <style scoped>
    144.  
    145. style>

    演示效果：

    二、增删改

    1、保障编辑窗体能够正常弹出

    2、表单校验通过后，调用后台数据接口完成新增功能

    Articles.vue：

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

     删除代码可从官网上去找：

     

    运行新增：

     

     

    编辑：

     

     

    删除：

     

     

    今日分享完毕，再见！

  • 相关阅读:
    Windows7 - 永恒之蓝 - 测试
    Maven
    PYTHON 120道题目详解（115-117）
    iOS基础介绍（二）
    APP攻防之博弈历程
    c 声明、定义、初始化的差别
    MySQL数据的ONLINE DDL操作测试
    体系认证服务认证产品认证的相同点与不同点
    sklearn决策树（Decision Trees）模型
    使用OfficeTool免费安装Office
  • 原文地址：https://blog.csdn.net/weixin_65808248/article/details/126834607