<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="id"> <el-input v-model="ruleForm.id" readonly></el-input> </el-form-item> <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: { id:1, 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; 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; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); }, test() { // 我们通过测试发现我们的文本会出现在这里... console.log(this.ruleForm); }, }, created(){ // 获取传递过来的参数 const _this = this; axios.get('http://localhost:8181/findbyid/'+this.$route.query.id).then(function(response){ _this.ruleForm = response.data }) }, mounted() { console.log('更新',this) }, }; </script>
6.操作表单数据-(删除数据)
(1).SpringBoot后端布局
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前端布局
1.传递本行的信息 <el-button type="text" size="small" @click="delete_one(scope.row)">删除</el-button 2.进行删除 methods{ // 删除的操作 delete_one(row) { console.log("sdsdsd", row); const _this = this; axios; this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }) .then(() => { this.$message({ type: "success", message: "删除成功!", }); axios .get("http://localhost:8181/deletedid/" + row.id) .then(function (respsone) { console.log("删除->", respsone); _this.$router.push("/AddBook"); }); }) .catch(() => { this.$message({ type: "info", message: "已取消删除", }); }); }, },
BookMange.vue
<template> <div> <el-button type="text" @click="open" v-show="'false'"></el-button> <el-table :data="tableData" border style="width: 100%"> <el-table-column fixed prop="id" label="编号" width="150" ></el-table-column> <el-table-column prop="name" label="书名" width="120"> </el-table-column> <el-table-column prop="author" label="作者" width="120"></el-table-column> <el-table-column fixed="right" label="操作" width="100"> <template slot-scope="scope"> <el-button @click="edit(scope.row)" type="text" size="small" >修改</el-button > <el-button type="text" size="small" @click="delete_one(scope.row)" >删除</el-button > </template> </el-table-column> </el-table> <!-- 分页的操作 : 这里的页数是: 总条数/每页的条数--> <el-pagination background layout="prev, pager, next" page-size="6" :total="totalPage" @current-change="page" ></el-pagination> </div> </template> <script> import axios from "axios"; export default { methods: { edit(row) { // 获取本行所有的属性封装成一个对象 console.log(row); // 利用query传递参数 this.$router.push({ path: "/BookUpdate", query: { id: row.id, }, }); }, page(currentpage) { //得到的参数是我们的页码 const _this = this; axios .get("http://localhost:8181/findAll/" + currentpage + "/6") .then(function (response) { console.log(response); // 传送数据- 页面信息 _this.tableData = response.data.content; // 传递总页数- _this.totalPage = response.data.totalElements; }) .catch({}) .finally({}); }, // 删除的操作 delete_one(row) { console.log("sdsdsd", row); const _this = this; axios; this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }) .then(() => { this.$message({ type: "success", message: "删除成功!", }); axios .get("http://localhost:8181/deletedid/" + row.id) .then(function (respsone) { console.log("删除->", respsone); _this.$router.push("/AddBook"); }); }) .catch(() => { this.$message({ type: "info", message: "已取消删除", }); }); }, }, data() { return { tableData: [], totalPage: 0, }; }, mounted() { const _this = this; axios .get("http://localhost:8181/findAll/1/6") .then(function (response) { console.log(response); // 传送数据- 页面信息 _this.tableData = response.data.content; // 传递总页数- _this.totalPage = response.data.totalElements; }) .catch({}) .finally({}); }, }; </script>
(四)、总结
1.SpringBoot接受数据风格
- 只能用Resultful风格进行接受前端传来的数据
2.前端传向后端
- axios.get(‘http:xxxx’,).then()
- axios.post(‘http:xxxx’,参数).then()
3.前端传向前端
- vm.$router.push({path:‘/xxx’,query{},params{}})
- vm.$router.replace({path:‘/xxx’,query{},params{}})
4.自动刷新页面
window.location.reload() // 自动刷新页面
