springboot整合vue04-前后端数据交互
1.分页列表
打开elementui官网,地址:https://element.eleme.cn/#/zh-CN
找一个看顺眼的列表拷贝代码到vue工程;
然后找一个看顺眼的分页组件,拷贝代码到vue工程;
后台提供一个分页接口
@RestController @RequestMapping("/book") public class BookController { @Autowired private BookRepository books; @GetMapping("/query/{page}/{size}") public Page<Book> query(@PathVariable("page")Integer page, @PathVariable("size")Integer size ){ //封装一个分页对象 PageRequest pageRequest = PageRequest.of(page, size); //findAll的重载方法,传入一个PageRequest对象,返回一个Page对象 return books.findAll(pageRequest); } }
前端用axios做get请求分页接口
需要在created事件中请求;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | < template > < div > <!--列表--> < el-table :data="books" border style="width: 100%"> < el-table-column fixed prop="id" label="编号" width="120"> </ el-table-column > < el-table-column prop="name" label="书名" width="150"> </ el-table-column > < el-table-column prop="author" label="作者" width="120"> </ el-table-column > < el-table-column label="操作" width="100"> < template slot-scope="scope"> < el-button @click="handleClick(scope.row)" type="text" size="small">查看</ el-button > < el-button type="text" size="small">编辑</ el-button > </ template > </ el-table-column > </ el-table > <!--分页组件--> < el-pagination background :page-size="pageSize" layout="prev, pager, next" @current-change="page" :total="total"> </ el-pagination > </ div > </ template > < script > export default { name:'PageOne', methods: { handleClick(row) { console.log(row); }, page(currentPage){ const _this = this; axios.get("http://localhost:8090/book/query/"+(currentPage - 1)+"/5").then(function (resp) { _this.books=resp.data.content; _this.total=resp.data.totalElements; _this.pageSize=resp.data.size; }) } }, data() { return { books: [{ id: '1', name: '他改变了季汉', author: '诸葛村夫', }, { id: '2', name: '历史选择了曹老板', author: '王司徒', }, { id: '3', name: '刘黄书最后的革命', author: '小懿子', }], pageSize:'1', total:'10', } }, created(){ const _this = this; axios.get("http://localhost:8090/book/query/0/5").then(function (resp) { _this.books=resp.data.content; _this.total=resp.data.totalElements; _this.pageSize=resp.data.size; }) } } </ script > |
页面效果:
2.新增数据
在elementui官网找一个合适的表单,拷贝代码到vue工程,根据需要修改
后台增加一个插入数据的web接口:
@Autowired private BookRepository books; @RequestMapping("/add") public String add(@RequestBody Book book){ Book res = books.save(book); if(res != null){ return "success"; }else{ return "error"; } }
然后在vue工程中调用后台接口:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | < template > < div > < 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-form-item > </ el-form > </ div > </ template > < script > export default { name:'PageTwo', data() { return { ruleForm: { name: '', author: '' }, rules: { name: [ { required: true, message: '请输入书名', trigger: 'blur' }, { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' } ], author: [ { required: true, message: '请输入作者', trigger: 'blur' } ] } }; }, methods: { submitForm(formName) { const _this = this; //取vue对象 this.$refs[formName].validate((valid) => { if (valid) { //ajax请求 axios.post("http://localhost:8090/book/add", this.ruleForm).then(function (resp) { if(resp.data == 'success'){ _this.$router.push("/p1"); //添加成功跳到列表页 }else{ alert("error"); } }); } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } } </ script > |
3.编辑数据
需要先跳到详情页面,然后编辑,因此需要前端提供一个详情页面;
需要后端提供两个接口分别用来通过该id查询、保存编辑;
1)后端接口:
//通过id查询 @GetMapping("/get/{id}") public Book get(@PathVariable("id")Integer id){ return books.findById(id).get(); } //编辑 @RequestMapping("/edit") public String edit(@RequestBody Book book){ Book res = books.save(book); if(res != null){ return "success"; }else{ return "error"; } }
2)跳转到编辑页面
点击编辑按钮,要跳到编辑页面,并且将当前行的id传过去,用来通过id请求后台获取详情数据;
编辑按钮:
1 2 3 4 | < template slot-scope="scope"> < el-button @click="handleClick(scope.row)" type="text" size="small">删除</ el-button > < el-button @click="toEdit(scope.row)" type="text" size="small">编辑</ el-button > </ template > |
分析拷贝过来的列表代码,可以看出来:<template slot-scope="scope">标签下可以用scope.row取到当前行的信息;
用click事件绑定toEdit方法,传入的参数为列表的row;
得到了row,就能通过row.id取到当前行的id;
在method中添加一个toEdit方法用来跳转到编辑页面:
1 2 3 4 5 6 7 8 | toEdit(row){ //跳转到编辑页,并且将选中行的id传过去 this .$router.push({ path: '/p3' , query:{ id:row.id } }) } |
这里是用$router.push跳到编辑页的路由,需要在router目录下给编辑页面配置路由;
3)编辑页面
这个页面和新增数据页面类似,可以直接拷贝代码过去,适当修改即可;
需要在created事件中接收传过来的id,并且请求后台得到数据然后填到表单中;
可以用$route.query来得到传过来的参数;(一般$route用来取参数,而$router用来做跳转)
1 2 3 4 5 6 7 8 9 | created(){ const _this = this ; var id = this .$route.query.id; if (id > 0){ axios.get( "http://localhost:8090/book/get/" + id).then( function (resp) { _this.ruleForm = resp.data; }) } } |
做完表单填充后,还需要做保存编辑;
包括几个步骤:
一个ajax提交表单,请求后台的编辑接口;
保存成功后调回分页列表;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | methods: { submitForm(formName) { const _this = this ; //取vue对象 this .$refs[formName].validate((valid) => { if (valid) { //ajax请求 axios.post( "http://localhost:8090/book/edit" , this .ruleForm).then( function (resp) { if (resp.data == 'success' ){ _this.$router.push( "/p1" ); //添加成功跳到列表页 } else { alert( "error" ); } }); } else { console.log( 'error submit!!' ); return false ; } }); }, resetForm(formName) { this .$refs[formName].resetFields(); }, }, |
4.删除
1)后台提供一个删除接口:
@GetMapping("/del/{id}") public void delete(@PathVariable("id")Integer id){ books.deleteById(id); }
2)前端
给列表的删除操作绑定一个delete方法;
通过scope.row可以去到目标行的id;
然后用id做参数用axios请求后台;
删除完成后刷新列表;
为了防止误删,可以加一个提示弹框;
在elementui中找一个好看的弹框,将代码拷过来;
主要代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | del(row){ const _this = this ; _this.$confirm( '此操作将永久删除该文件, 是否继续?' , '提示' , { confirmButtonText: '确定' , cancelButtonText: '取消' , type: 'warning' }).then(() => { axios.get( "http://localhost:8090/book/del/" +row.id).then( function (resp) { _this.$message({ type: 'success' , message: '删除成功!' }); window.location.reload(); //刷新页面 }); }). catch (() => { this .$message({ type: 'info' , message: '已取消删除' }); }); } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步