Spring Boot+Vue 添加修改删除数据（四）

Element UI 表单数据校验

定义 rules 对象，在 rules 对象中设置表单各个选项的校验规则

rules: {
   name: [
          { required: true, message: 'error', trigger: 'blur' },
          { min: 3, max: 5, message: '⻓度在 3 到 5 个字符', trigger: 'blur' }
        ]
}

required: true, 是否为必填项
message: 'error', 提示信息
trigger: 'blur'，触发事件

1.添加数据

后台

    @GetMapping("save")
    public String save(@RequestBody Book book){
        Book save = bookRepository.save(book);
        if (save!=null){
            return "success";
        }else {
            return "error";
        }
    }

前端

提交表单数据方式

this.$ajax.post("http://localhost:8181/book/save",this.ruleForm)  直接提交表单

2.修改删除数据

PageOne.vue

PageThree.vue

    @GetMapping("findById/{id}")
    public Book findById(@PathVariable("id") Integer id){
        return bookRepository.findById(id).get();
    }

    @PutMapping("/update")
    public String update(@RequestBody Book book){
        Book save = bookRepository.save(book);
        if (save!=null){
            return "success";
        }else {
            return "error";
        }
    }

    @DeleteMapping("del/{id}")
    public void del(@PathVariable("id") Integer id){
        bookRepository.deleteById(id);
    }

导航调整代码如下

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import PageOne from "../views/PageOne"
import PageTwo from "../views/PageTwo"
// import App from "../App";
import index from "../views/index"
import PageThree from "../views/PageThree";
Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: '图书管理',
    component: index,
    show:true,
    redirect:"/pageOne",
    children:[
      {
        path:'/pageOne',
        name:'查询图书',
        component:PageOne
      },
      {
        path:'/pageTwo',
        name:'添加图书',
        component:PageTwo
      }
    ]
  }
  ,{
      path: '/pageThree',
      component: PageThree,
      show:false
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

App.vue