保姆级教程:Spring Boot+Vue前后端分离开发:第六天
第六天任务概要
在前五天的学习中,我们选择了一种布局,完成了路由的设置,实现了后台数据在前端页面的展示,同时实现了数据的添加操作。在本节中,我们紧接着上一节的代码,实现数据的删除与修改。
第一步:实现数据修改操作
1.打开DataManage.vue,修改最右侧两列选项的名称:
2.处理修改的方法:将id传到后台,然后后台找到id=1的数据,然后进行修改操作。因此将Page3.vue重命名为DataUpdate.vue,并修改部分代码:
3.打开index.js,修改导航栏与页面引入:
4.由于点击“修改”按钮需要跳转到DataUpdate.vue,同时需要获得每一行的id值对数据进行修改,因此在DataManage.vue中添加点击事件与相应方法:
edit(row) {
this.$router.push({
path:'/update',//跳转到'/update'指向的页面
query:{
id:row.id //获得id
}
}) //指向index.js中的“path: '/update'”
},
同时在DataUpdate.vue中添加created(){}方法:
created() {
this.$route.query.id //获取id值,实现通过id对数据的修改。注意:页面跳转用$router,获取数据用$route
}
6.由于需要查询id,才能修改后端数据,因此打开后端项目,在BookController中编写后端查询代码:
/**
* 实现数据修改
* @param id
* @return
*/
//数据修改之前的查询操作
@GetMapping("/findById/{id}")//http://localhost:8081/book/findById/1
public Book findById(@PathVariable("id") Integer id){
return bookRepository.findById(id).get();//注:findById(id)返回的不是Book对象类型,而是在对向外围包裹了一层,因此最终需要通过get()获取最终对象。
}
//开始修改操作
@PutMapping("/update")
public String update(@RequestBody Book book){
Book result=bookRepository.save(book);
if(result!=null){
return "success";
}else{
return "error";
}
}
7.打开前端项目,修改DataUpdate.vue部分代码,在这里贴一下完整代码,不同之处读者可以进行对比:
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><!--model用于实现数据绑定-->
<el-form-item label="数据编号" >
<el-input v-model="ruleForm.id" readOnly></el-input><!--v-model用于实现子数据的绑定 其中readOnly表示数据是只读的-->
</el-form-item>
<el-form-item label="数据名称" prop="name"><!--对应data()里rules数组里面的name属性-->
<el-input v-model="ruleForm.name"></el-input><!--v-model用于实现子数据的绑定-->
</el-form-item>
<el-form-item label="作者" prop="author"><!--对应data()里rules数组里面的author属性-->
<el-input v-model="ruleForm.author"></el-input>
</el-form-item>
<el-form-item>
<el-button :plain="true" 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>
</template>
<script>
export default {
name: "DataUpdate",
data() {
return {
ruleForm: {//要提交的数据
id: '',
name: '',
author: ''
},
rules: {
name: [
{ required: true, message: '请输入数据名称', trigger: 'blur' },
{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
],
author: [
{ required: true, message: '请输入持有者名称', trigger: 'blur' },
{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
]
}
};
},
methods: {
test(){
console.log(this.ruleForm)
},
submitForm(formName) {
const _this=this //这个this指的是vue的this
this.$refs[formName].validate((valid) => { //这个this指的是submitForm
if (valid) {
axios.put('http://localhost:8081/book/update',_this.ruleForm).then(function(resp){//提交数据时,将ruleForm直接追加到post()的第二个参数
});
_this.$message({
message: _this.ruleForm.name+'修改成功,请刷新页面',
type: 'success'
});
_this.$router.push('/DataManage')//添加完成后,跳转到相应页面
} else {
console.log('提交失败!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
},
created() {
//this.$route.query.id //获取id值,实现通过id对数据的修改。注意:页面跳转用$router,获取数据用$route
const _this=this
axios.get('http://localhost:8081/book/findById/'+this.$route.query.id).then(function (resp) {//实现数据修改
_this.ruleForm=resp.data//将修改以后的数据添加到ruleForm中
})
}
}
</script>
<style scoped>
</style>
修改功能完成,读者可以重启前后端项目进行尝试
第二步:实现数据删除操作
执行删除操作则无需再跳转到新的页面,因此无需编写前端相应的代码。
1.打开后端项目,在BookController.java编写后端删除代码:
/**
* 实现数据删除
*/
@DeleteMapping("/deleteById/{id}")
public void deleteById(@PathVariable("id") Integer id){
bookRepository.deleteById(id);
}
2.打开前端项目,在DataManage.vue中编写删除函数,并实现前后端关联:
<el-button @click="deleteData(scope.row)" type="text" size="small">删除</el-button>
deleteData(row){
const _this=this
axios.delete('http://localhost:8081/book/deleteById/'+row.id).then(function (resp) {
})
_this.$message({
message: '数据'+row.name+'删除成功,请刷新页面',
type: 'success'
});
_this.$router.push('/DataManage')//添加完成后,跳转到相应页面
window.location.reload()//实现删除页面后页面的动态刷新
},
第三步:消除无用导航栏
打开router/index.js,在相应路由上设置true与false:
打开Index.vue,添加:
v-if="item.show"
至此,该小demo已全部完成。具体细节可能没有讲清楚,大家可以自行查资料,网上都有,甚至比我都有讲的详细。谢谢大家支持!!!