SPA项目开发之CRUD增删改查+表单验证

目录 

一，增加

1，增加窗体代码

2，定义窗体

3，校验表单

①，将rules控件放入form表单

②，定义规则

③，调用校验规则

 二，修改功能

1，区分新增和修改的窗体

2，数据回显

3，为新增窗体清空数据

①清空数据的方法

②，调用清空窗体的方法

4，数据交互

三，删除功能

定义删除的方法，根据id删除

article.vue完整代码如下

---

一，增加

1，增加窗体代码

一定要放在div里面

   
   
     
       
         
       
       
         
       
     
     

        取消
        保存
       
     

   

2，定义窗体

定义窗体名字

设置窗体不可见，editFormVisible参数表示是否展示表单

定义editForm   json对象

定义窗体的关闭事件

定义窗体开启事件

效果如下 

3，校验表单

①，将rules控件放入form表单

 :rules="rules" ref="editForm">

②，定义规则

rules表示表单规则，相当于正则

        // 校验表单
        rules: {
          title: [{
              required: true,
              message: '请输入活动名称',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 5,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur'
            }
          ],
          body: [{
            required: true,
            message: '请选择文章内容',
            trigger: 'blur'
          }],
        }

③，调用校验规则

submitForm 提交表单的方法

formName表单名称

validate校验的方法

       submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

 效果如下 

  

 二，修改功能

1，区分新增和修改的窗体

通过id区分，当点击编辑时，会拿到那行数据的id，并根据id修改

      handleEdit(index, row) {
        this.editFormVisible = true;
        // console.log(row);
        if (row) {
          this.title = '编辑窗口';
          this.editForm.id = row.id;
          this.editForm.title = row.title;
          this.editForm.body = row.body;
        } else {
          this.title = '新增窗口';
          
        }
      },

2，数据回显

        // 定义editForm   json对象
        editForm: {
          // 为数据回显定义值
          title: '',
          body: '',
          // 根据id修改
          id: 0
        },

3，为新增窗体清空数据

①清空数据的方法

      // 清空新增窗体
      clearData() {
        this.editFormVisible = true,
          this.title = '';
        this.editForm.id = 0;
        this.editForm.title = '';
        this.editForm.body = '';
      },

②，调用清空窗体的方法

      // 定义窗体的关闭事件
      closeDialog() {
        // 调用清空窗体的方法
        this.clearData();
      },
      // 定义窗体开启事件，
      // 参数index,row
      handleEdit(index, row) {
        // 调用清空窗体的方法
        this.clearData();
        this.editFormVisible = true;
        console.log(row);
        if (row) {
          this.title = '编辑窗口';
          this.editForm.id = row.id;
          this.editForm.title = row.title;
          this.editForm.body = row.body;
        } else {
          this.title = '新增窗口';

        }
      },

 效果展示

4，数据交互

由于增加按钮和编辑按钮触发的是同一个表单，所以应该进行判断，使用不同的url进行处理

      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
            // 定义一个url
            let url;
            // ==0说明是新增
            if (this.editForm.id == 0) {
              // 拿到新增的地址
              url = this.axios.urls.SYSTEM_ARTICLE_ADD;
            } else {
              // 拿到修改的地址
              url = this.axios.urls.SYSTEM_ARTICLE_EDIT;
              }
              this.axios.post(url, this.editForm).then((resp) => {
                console.log(resp);
                this.clearData();
                this.search()
              }).catch(function(error) {
                console.log(error);
              });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

三，删除功能

定义删除的方法，根据id删除，提示添加在数据刷新之前

    deleteUser(index, row) {
        this.editForm.id = row.id;
        let url = this.axios.urls.SYSTEM_ARTICLE_DEL;
        this.axios.post(url, this.editForm).then((resp) => {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.search()
        }).catch(function(error) {
          console.log(error);
        });
      },

article.vue完整代码如下