👉 【Spring Boot + Vue 前后端分离 - 图书管理Demo】——【一】环境准备
👉 【Spring Boot + Vue 前后端分离 - 图书管理Demo】——【二】查操作
修改
流程:
- 前端主页面点击修改按钮
- 后端根据id查询此图书信息
findById
- 前端发送ajax请求获取数据并跳转到修改页面
BookUpdate.vue
- 前端传递修改后的信息给后端
update
函数处理 - 返回主页面
BookHandler.hava
/**
* 根据Id查询图书信息
*/
@GetMapping("/findById/{id}")
public Book findById(@PathVariable("id") Integer id){
return bookRepository.findById(id).get();
}
/**
* 修改图书信息
*
* PUT请求:如果两个请求相同,后一个请求会把第一个请求覆盖掉。(所以PUT用来改资源)
* Post请求:后一个请求不会把第一个请求覆盖掉。(所以Post用来增资源)
*/
@PutMapping("/update")
public String update(@RequestBody Book book){
Book result = bookRepository.save(book);
if(result != null){
return "success";
}else{
return "error";
}
}
BookUpdate.vue
核心代码
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
<script>
export default {
data() {
return {
// 数据
ruleForm: {
id: '',
name: '',
author: '',
publish: '',
pages: '',
price: '',
},
//校验规则
rules: {
name: [
{ required: true, message: '图书名称不能为空', trigger: 'blur' }
],
author: [
{ required: true, message: '作者姓名不能为空', trigger: 'blur' }
],
publish: [
{ required: true, message: '出版社不能为空', trigger: 'blur' }
],
price: [
{ required: true, message: '价格不能为空', trigger: 'blur' }
],
}
};
},
methods: {
submitForm(formName) {
const _this = this
this.$refs[formName].validate((valid) => {
if (valid) {
/*put和后端的PutMapping对应!!!*/
axios.put('http://localhost:8181/book/update', this.ruleForm).then(function(resp){
if(resp.data == 'success'){
// 消息弹出框---- element官网找个模板直接复制
_this.$alert('《' + _this.ruleForm.name + '》修改成功!', '提示', {
confirmButtonText: '确定',
callback: action => {
// 跳转界面
_this.$router.push('/BookManager')
}
});
}
})
} else {
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
},
created() {
const _this = this
axios.get('http://localhost:8181/book/findById/' + this.$route.query.id ).then(function(resp){
_this.ruleForm = resp.data
})
}
}
</script>
添加
BookHandler.java
/**
* 添加图书
*
* RequestBody 通过映射把前端Json数据转化成java对象
*/
@PostMapping("/add")
public String save(@RequestBody Book book){
Book result = bookRepository.save(book);
if(result != null){
return "success";
}else{
return "error";
}
}
AddBook.vue
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
methods: {
submitForm(formName) {
const _this = this
this.$refs[formName].validate((valid) => {
if (valid) {
axios.post('http://localhost:8181/book/add', this.ruleForm).then(function(resp){
if(resp.data == 'success'){
// 消息弹出框---- element官网找个模板直接复制
_this.$alert('《' + _this.ruleForm.name + '》添加成功!', '提示', {
confirmButtonText: '确定',
callback: action => {
// 跳转界面
_this.$router.push('/BookManager')
}
});
}
})
} else {
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
删除
删除之后直接返回主界面
BookHandler.java
@DeleteMapping("/delete/{id}")
public void delete(@PathVariable("id") Integer id){
bookRepository.deleteById(id);
}
BookManger.vue
<template slot-scope="scope">
<el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
<el-button @click="deleteBook(scope.row)" type="text" size="small">删除</el-button>
<!--delete是关键字,不能自定义-->
</template>
deleteBook(row){
const _this = this
axios.delete('http://localhost:8181/book/delete/' + row.id).then(function(resp){
// 消息弹出框---- element官网找个模板直接复制
_this.$alert('《' + row.name + '》删除成功!', '提示', {
confirmButtonText: '确定',
callback: action => {
// 动态刷新此页面
window.location.reload()
}
});
})
},