4.操作表单数据-(添加数据)
(1).SpringBoot后端布局
BookHander.java
因为是表单数据保证用户的隐私问题:所以我们使用Post传递。我们Java传递过去的是JSON对象。前端传递过来的也是JSON对象，我们只需要添加一个@RequestBody注解就好。
package com.jsxs.controller; import com.jsxs.pojo.Book; import com.jsxs.repository.BookRepository; import org.springframework.data.domain.Page; import org.springframework.data.domain.PageRequest; import org.springframework.data.domain.Pageable; import org.springframework.web.bind.annotation.*; import javax.annotation.Resource; /** * @Author Jsxs * @Date 2023/5/14 15:23 * @PackageName:com.jsxs.controller * @ClassName: BookHandler * @Description: TODO 以前我们的方法返回值为String目的是为了跳转页面，现在只是为了传递数据 * @Version 1.0 */ @RestController public class BookHandler { @Resource private BookRepository bookRepository; // 1.查找数据的方法 @GetMapping("/findAll/{page}/{size}") public Page<Book> findAll(@PathVariable("page") Integer page, @PathVariable("size") Integer size){ // 页数是从0开始的所以-1 Pageable pageable= PageRequest.of((page-1),size); // 第一个参数是 : 页数、 第二个数是: 一页几张 return bookRepository.findAll(pageable); } // 2.新增数据的方法 @PostMapping("/save") public String save(@RequestBody Book book){ //这个注解是将传递过来的Json对象转换为Java对象 Book result = bookRepository.save(book); if (result !=null){ System.out.println("数据"+book); return "恭喜添加成功"; }else { return "对不起添加失败"; } } }
(2).Vue前端布局
AddBook.vue
- data区域的name值一定要和实体类的字段名要一致。
- post提交
<template> <div> 提示框的样式 <el-button type="text" @click="open" v-show="'false'"></el-button> <!-- :model 用于绑定我们的数据 :rules用于绑定规则--> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" > <el-form-item label="图书名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item label="图书作者" prop="author"> <el-input v-model="ruleForm.author"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')" >立即创建</el-button > <el-button @click="resetForm('ruleForm')">重置</el-button> <el-button @click="test">测试</el-button> </el-form-item> </el-form> </div> </template> <script> import axios from "axios"; export default { data() { return { // 1. 表单的数据-->这里的字段名一定要和数据库的对应上 ruleForm: { name: "", author: "", }, isSuccess: false, // 2. 校验的规则 rules: { BookName: [ // 是否强制? 提示信息? 触发条件? { required: true, message: "请输入图书名称", trigger: "blur" }, { min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur", }, ], BookAuthor: [ { required: true, message: "请输入图书作者", trigger: "blur" }, { min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur", }, ], }, }; }, methods: { submitForm(formName) {// 这里传递过来的是data区域的值 const _this = this; //vm的this this.$refs[formName].validate((valid) => { //验证 if (valid) {// 假如规则都正确 // TODO: post形式传递一个对象 axios.post("http://localhost:8181/save", _this.ruleForm).then((Response) => { if (Response.status == 200) { //假如状态码正确，就进行下面的操作 console.log(Response); // 跳转路由 // _this.$router.push('/BookMange') // 带提示框的复杂路由跳转 _this.$alert("数据添加成功"+_this.name, "CKQN页面", { confirmButtonText: "确定", callback: (action) => { _this.$router.push('/BookMange') }, }); } console.log(Response); }); } else { console.log("error submit!!"); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); }, test() { // 我们通过测试发现我们的文本会出现在这里... console.log(this.ruleForm); }, }, }; </script>
submitForm(formName) { // 这里传递过来的是data区域的值 const _this = this; this.$refs[formName].validate((valid) => { if (valid) { // 假如规则都正确 // TODO: post形式传递一个对象 axios .post("http://localhost:8181/save", _this.ruleForm) .then((Response) => { if (Response.status == 200) { console.log(Response); // 简单跳转路由 // _this.$router.push('/BookMange') _this.$alert("数据添加成功"+_this.name, "CKQN页面", { // confirmButtonText: "确定", callback: (action) => { _this.$router.push('/BookMange') }, }); } console.log(Response); }); } else { console.log("error submit!!"); return false; } }); },
接受到的Response
5.操作表单:数据-(修改数据)
(1).SpringBoot后端布局
1.根据id查找数据
package com.jsxs.controller; import com.jsxs.pojo.Book; import com.jsxs.repository.BookRepository; import org.springframework.data.domain.Page; import org.springframework.data.domain.PageRequest; import org.springframework.data.domain.Pageable; import org.springframework.web.bind.annotation.*; import javax.annotation.Resource; /** * @Author Jsxs * @Date 2023/5/14 15:23 * @PackageName:com.jsxs.controller * @ClassName: BookHandler * @Description: TODO 以前我们的方法返回值为String目的是为了跳转页面，现在只是为了传递数据 * @Version 1.0 */ @RestController public class BookHandler { @Resource private BookRepository bookRepository; // 1.查找数据的方法 @GetMapping("/findAll/{page}/{size}") public Page<Book> findAll(@PathVariable("page") Integer page, @PathVariable("size") Integer size) { // 页数是从0开始的所以-1 Pageable pageable = PageRequest.of((page - 1), size); // 第一个参数是 : 页数、 第二个数是: 一页几张 return bookRepository.findAll(pageable); } // 2.新增数据的方法 @PostMapping("/save") public String save(@RequestBody Book book) { //这个注解是将传递过来的Json对象转换为Java对象 Book result = bookRepository.save(book); if (result != null) { System.out.println("数据" + book); return "恭喜添加成功"; } else { return "对不起添加失败"; } } // 3.通过id进行查找的方法 @GetMapping("/findbyid/{id}") public Book findById(@PathVariable("id") Integer id) { System.out.println("-------通过id查询数据成功!!"); return bookRepository.findById(id).get(); } // 4.通过id进行数据的修改 @PostMapping("/update") public String updateById(@RequestBody Book book){ Book save = bookRepository.save(book); if (save!=null){ return "修改数据成功"; }else { return "修改数据失败"; } } // 5.删除的操作 @GetMapping("/deletedid/{id}") public String deleteById(@PathVariable("id") Integer id){ bookRepository.deleteById(id); return "删除成功"; } }
(2).Vue前端布局
BootMange.vue
1. 点击按钮 <el-button @click="edit(scope.row)" type="text" size="small" >修改</el-button> 2.跳转路由并携带参数 methods: { edit(row) { // 获取本行所有的属性封装成一个对象 console.log(row); // 利用query传递参数 this.$router.push({ path: "/BookUpdate", query: { id: row.id, }, }); },
Bookupdate.vue
3.利用传递的参数进行查找id,并更新数据 created(){ // 获取传递过来的参数 const _this = this; axios.get('http://localhost:8181/findbyid/'+this.$route.query.id).then(function(response){ _this.ruleForm = response.data }) }, 4.提交数据 methods: { submitForm(formName) { // 这里传递过来的是data区域的值 const _this = this; this.$refs[formName].validate((valid) => { if (valid) { // 假如规则都正确 // TODO: post形式传递一个对象 axios .post("http://localhost:8181/update", _this.ruleForm) .then((Response) => { if (Response.status == 200) { console.log(Response); // 跳转路由 // _this.$router.push('/BookMange') _this.$alert("数据修改成功", "小提示", { confirmButtonText: "确定", callback: (action) => { _this.$router.push("/BookMange"); }, }); } console.log(Response); }); } else { console.log("error submit!!"); return false; } }); },
