ElementUI之增删改及表单验证

                       

                                 ⭐⭐本文章收录与ElementUI原创专栏：ElementUI专栏

                                     ⭐⭐   ElementUI的官网：ElementUI官网

目录

一.前言

二.使用ElementUI完成增删改

        2.1 后台代码

        2.2 前端代码

三.使用ElementUI完成表单验证

---

一.前言

        本章是继上一篇的基础之上在做完善，上一篇是教大家如何使用ElementUI制作动态菜单栏以及表格的分页查询，本章就是继续上篇完成剩下的增删改功能，采用的是前后端分离，大家如果有不懂的可以点击上方的ElementUI的专栏进去查看哟~

二.使用ElementUI完成增删改

        2.1 后台代码

               增删改的后端代码：

  @RequestMapping("/addBook")
    @ResponseBody
    public JsonResponseBody addBook(Book book){
        try {
            bookService.insert(book);
            return new JsonResponseBody<>("新增书本成功",true,0,null);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("新增书本失败",false,0,null);
        }
    }

    @RequestMapping("/editBook")
    @ResponseBody
    public JsonResponseBody editBook(Book book){
        try {
            bookService.updateByPrimaryKey(book);
            return new JsonResponseBody<>("编辑书本成功",true,0,null);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("编辑书本失败",false,0,null);
        }
    }

    @RequestMapping("/delBook")
    @ResponseBody
    public JsonResponseBody delBook(Book book){
        try {
            bookService.deleteByPrimaryKey(book.getId());
            return new JsonResponseBody<>("删除书本成功",true,0,null);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("删除书本失败",false,0,null);
        }
    }

    @RequestMapping("/queryBookPager")
    @ResponseBody
    public JsonResponseBody> queryBookPager(Book book, HttpServletRequest req){
        try {
            PageBean pageBean=new PageBean();
            pageBean.setRequest(req);
            List books = bookService.queryBookPager(book, pageBean);
            return new JsonResponseBody<>("OK",true,pageBean.getTotal(),books);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("分页查询书本失败",false,0,null);
        }
    }

        2.2 前端代码

        定义接口：         

        数据样式格式：都是去ElementUI官网copy的，然后根据自己的情况进行修改即可

        逻辑代码：新增和修改是共用一个弹框，然后用 if 判断，改变窗口的标题，接着根据窗体的标题来判断调用新增的方法还是修改的方法，删除的弹框的话也是在ElementUI官网中找的，获取id进行删除整条数据。

        看一下效果吧：

三.使用ElementUI完成表单验证

        第一步:去ElementUI官网搜索表单验证：会发现需要添加：

   第二步：指定需要验证的属性字段，添加：

第三步，写验证规则

rules: {
          bookname: [{
            required: true,
            message: '请输入书籍名称',
            trigger: 'blur'
          }],
          price: [{
            required: true,
            message: '请输入书籍价格',
            trigger: 'blur'
          }],
          booktype: [{
            required: true,
            message: '请输入书籍类型',
            trigger: 'blur'
          }]
        }

最后一步使用验证规则：

 

代码：

 dosub() {
        // 验证表单
        this.$refs['book'].validate((valid) => {
          if (valid) {
            //新增
            //路由
            let url = this.axios.urls.BOOK_ADD;
            if (this.title == '编辑界面') {
              url = this.axios.urls.BOOK_UPD;
            }
            let params = {
              id: this.book.id,
              bookname: this.book.bookname,
              price: this.book.price,
              booktype: this.book.booktype
            };
            console.info(params);
            this.axios.post(url, params).then(r => {
              console.info(r);
              this.clear();
              this.query({});
            }).catch(e => {

            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });


      }

 好啦，看看效果吧！！