👉 【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()
}
});
})
},