spa项目开发之CRUD&表单验证&vue的增删改查

前言：即前三篇博客的基础上在进行开发，本篇是第四篇

spa项目开发之动态树功能&&右侧文章的分页查询功能

（2）spa项目开发之动态树功能&&右侧文章的分页查询功能

（1）SPA项目开发之登录注册

今日目标：

1，表单验证

2，增删改功能的实现

准备工作：在组件中对该表进行增删改查开发 

四个与后台交互获取数据库中的数据

目标效果：

 一，表单验证

一  编辑界面布局（把rules加到表单验证里面去）

  
    
      
        
          
        
        
          
        
      
      

        取消
        保存
        
      
    

二  定义属性方法及表单校验规则

data() {
      return {
        listData: [],
        // 窗体名字
        title: '',
        // 默认关闭
        editFormVisible: false,
        formInline: {
          page: 1,
          rows: 10,
          total: 0,
          title: ''
        },
        editForm: {
          title: '',
          body: '',
          id: 0
        },
        rules: {
          title: [{
              required: true,
              message: '请输入文章标题',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 5,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur'
            }
          ],
          body: [{
            required: true,
            message: '请输入文章内容',
            trigger: 'blur'
          }],
        }

表单验证规则，都放在rules里

 运行效果：

二，增删改查功能的实现

一  增加相对应的按钮和方法

添加

二  方法

清空，新增，编辑，删除（index：当前页的第几条数据 row：获取当前行的数据）

提交：

 三  总代码

OK！到这就结束了，希望能帮到你！！！