Vue表單數(shù)據(jù)修改與刪除功能實(shí)現(xiàn)
數(shù)據(jù)修改功能
將之前的 BookManage 頁面的按鈕改為想要的功能
可以注意到修改按鈕的標(biāo)簽以及綁定了事件 handleClick
點(diǎn)擊之后其可以在控制臺(tái)打印出當(dāng)前行對(duì)象的內(nèi)容
觀看視頻時(shí)，關(guān)于修改數(shù)據(jù)，彈幕分為了兩派
一派認(rèn)為因該直接從頁面中獲取現(xiàn)有的數(shù)據(jù)信息加以修改，再提交給后端并存儲(chǔ)到數(shù)據(jù)庫，此流程業(yè)務(wù)簡單，減輕服務(wù)器負(fù)荷。
還有一派認(rèn)為因該依據(jù)關(guān)鍵信息或唯一標(biāo)識(shí)，從后臺(tái)請(qǐng)求這一系列數(shù)據(jù)，在此基礎(chǔ)上進(jìn)行修改，再提交給后端并存儲(chǔ)到數(shù)據(jù)庫，此流程數(shù)據(jù)安全。
我認(rèn)為確實(shí)應(yīng)該從后端拿數(shù)據(jù)，畢竟前端顯示的數(shù)據(jù)不一定是完整信息，最全最新的內(nèi)容肯定是在數(shù)據(jù)庫當(dāng)中，所有從后端拿數(shù)據(jù)重新修訂再保存到數(shù)據(jù)庫更加安全嚴(yán)謹(jǐn)。
相較于視頻中新增一個(gè)頁面的方式，我選擇以彈出框來展示修改頁面，這樣我認(rèn)為更切合實(shí)際場景
修改對(duì)話框
其核心內(nèi)容就是 dialogFormVisible 這個(gè)屬性在點(diǎn)擊關(guān)鍵字時(shí)改為 true（默認(rèn)是false）
所以運(yùn)用到原來的頁面上，當(dāng)點(diǎn)擊“修改”時(shí)，把這個(gè)屬性置為 true 即可
彈出的表單用原來的新增頁面進(jìn)行代碼結(jié)合復(fù)用
將一下代碼拆分放入對(duì)應(yīng)位置即可
<template>
<div>
<el-button type="text" @click="dialogFormVisible = true">修改 Dialog</el-button>
<el-dialog title="修改" :visible.sync="dialogFormVisible">
<el-form style="width: 80%" :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')">立即創(chuàng)建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">確 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogFormVisible: false,
formLabelWidth: '120px',
ruleForm: {
name: '',
author: ''
},
rules: {
name: [
{ required: true, message: '書名不能為空', trigger: 'blur' }
],
author: [
{ required: true, message: '作者不能為空', trigger: 'blur' }
],
}
};
},
methods: {
submitForm(formName) {
const _this = this;
this.$refs[formName].validate((valid) => {
if (valid) {
axios.post("http://localhost:8181/book/save",this.ruleForm).then(function (resp) {
if (resp.data == "success"){
_this.$alert("《"+_this.ruleForm.name+"》添加成功", '成功', {
confirmButtonText: '確定',
callback: action => {
_this.$router.push("/BookMange");
}
});
}else{
_this.$message.error("添加失敗");
}
})
} else {
console.log('添加失敗');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
}
}
</script>
最終效果如下
視頻教程的做法
創(chuàng)建額外的頁面，當(dāng)點(diǎn)擊修改按鈕時(shí)，進(jìn)行頁面跳轉(zhuǎn)，并用 query 傳遞操作的 id 信息
handleClick(row) {
this.$router.push({
path: '/update',
query:{
id: row.id
}
})
},
在新的頁面初始化地方進(jìn)行接收參數(shù)，請(qǐng)求后端數(shù)據(jù)
需要跳轉(zhuǎn)用 $router ，需要接收參數(shù)用 $route
拓展閱讀
route 和 router的區(qū)別
params 和 query 傳遞參數(shù)的區(qū)別
后端提供接口
之前 bookRepository 繼承的 JPA 接口中，也已經(jīng)寫好了 findById() 函數(shù)，對(duì)我們來說相當(dāng)方便，只是這個(gè)接口返回的對(duì)象是 Optional 的對(duì)象，其可以把空的對(duì)象也能正常包裝并返回，避免出現(xiàn)空指針異常導(dǎo)致程序崩潰，Optional講解
再調(diào)用 get() 方法以獲取到對(duì)象，結(jié)果也是能正確輸出的
則下一步寫入handler接口供外部調(diào)用
@GetMapping("/findById/{id}")
public Book findById(@PathVariable("id") Integer id){
return bookRepository.findById(id).get();
}
經(jīng)測試也是可以使用的，故在前端調(diào)用
前端調(diào)用接口
當(dāng)點(diǎn)擊 修改 操作時(shí)，對(duì)調(diào)用函數(shù) handleClick 進(jìn)行修改
handleClick(row) {
const _this = this;
this.dialogFormVisible = true;
axios.get("http://localhost:8181/book/findById/"+row.id).then(function (resp) {
_this.ruleForm = resp.data;
})
},
即可實(shí)現(xiàn)點(diǎn)擊后出現(xiàn)彈窗+載入修改的目錄信息
修改完成后提交
將之前的立即創(chuàng)建改成符合業(yè)務(wù)邏輯的“修改完成”
然后對(duì)函數(shù) submitForm 改裝一下即可
其實(shí)目前實(shí)際使用看來，不改裝也能滿足業(yè)務(wù)邏輯需求，JPA 的save函數(shù)自動(dòng)幫我們把對(duì)象存進(jìn)去了
JPA是判定了當(dāng)前參數(shù)是否攜帶主鍵，如果沒有就存入，如果有就修改內(nèi)容
但為了業(yè)務(wù)嚴(yán)謹(jǐn)，并且以后可能遇到更復(fù)雜的業(yè)務(wù)邏輯，針對(duì)修改功能還是有必要專門開辟接口的
且根據(jù) REST 規(guī)范，更新應(yīng)該使用 PUT 請(qǐng)求
所以直接在 handler 里面新增接口
@PutMapping("/update")
public String update(@RequestBody Book book){
Book result = bookRepository.save(book);
if (result != null){
return "success";
}
else {
return "fail";
}
}
將此處的 post 改為 put ，接口網(wǎng)址改成 update
即可實(shí)現(xiàn)修改功能
數(shù)據(jù)刪除功能
后端開設(shè)接口
@DeleteMapping("/deleteById/{id}")
public void delete(@PathVariable("id") Integer id){
bookRepository.deleteById(id);
}
前端調(diào)用
按鈕組件綁定函數(shù)
deleteBook(row){
const _this = this;
axios.delete("http://localhost:8181/book/deleteById/"+row.id).then(function (resp) {
if (resp.status == 200){
_this.$alert("《"+row.name+"》刪除成功", '成功', {
confirmButtonText: '確定并刷新',
callback: action => {
_this.$router.go(0);
}
});
}else{
_this.$message.error("刪除失敗");
}
})
},
最終成果展示
主頁面js代碼
<script>
export default {
methods: {
handleClick(row) {
const _this = this;
this.dialogFormVisible = true;
axios.get("http://localhost:8181/book/findById/"+row.id).then(function (resp) {
_this.ruleForm = resp.data;
})
},
deleteBook(row){
const _this = this;
axios.delete("http://localhost:8181/book/deleteById/"+row.id).then(function (resp) {
if (resp.status == 200){
_this.$alert("《"+row.name+"》刪除成功", '成功', {
confirmButtonText: '確定并刷新',
callback: action => {
_this.$router.go(0);
}
});
}else{
_this.$message.error("刪除失敗");
}
})
},
page(currentPage){
const _this = this;
axios.get("http://localhost:8181/book/findPart/"+currentPage+"/3").then(function (resp) {
_this.tableData = resp.data.content;
_this.total = resp.data.totalElements;
})
},
submitForm(formName) {
const _this = this;
this.$refs[formName].validate((valid) => {
if (valid) {
axios.put("http://localhost:8181/book/update",this.ruleForm).then(function (resp) {
if (resp.data == "success"){
_this.$alert("《"+_this.ruleForm.name+"》修改成功", '成功', {
confirmButtonText: '確定',
callback: action => {
_this.$router.go(0);
}
});
}else{
_this.$message.error("修改失敗");
}
})
} else {
console.log('添加失敗');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
},
created(){
const _this = this;
axios.get("http://localhost:8181/book/findPart/1/3").then(function (resp) {
_this.tableData = resp.data.content;
_this.total = resp.data.totalElements;
})
},
data() {
return {
total: null,
tableData: null,
dialogFormVisible: false,
dialogFormVisible: false,
formLabelWidth: '120px',
ruleForm: {
name: '',
author: ''
},
rules: {
name: [
{ required: true, message: '書名不能為空', trigger: 'blur' }
],
author: [
{ required: true, message: '作者不能為空', trigger: 'blur' }
],
}
}
}
}
</script>
相關(guān)文章
這篇文章主要介紹了vue-cli中安裝方法(圖文詳細(xì)步驟)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
淺談Vue.js應(yīng)用的四種AJAX請(qǐng)求數(shù)據(jù)模式
本篇文章主要介紹了淺談Vue.js應(yīng)用的四種AJAX請(qǐng)求數(shù)據(jù)模式，本文將詳細(xì)介紹在Vue應(yīng)用程序中實(shí)現(xiàn)AJAX的四個(gè)方法，有興趣的可以了解一下2017-08-08
vue3中配置文件vue.config.js不生效的解決辦法
這篇文章主要介紹了vue3中配置文件vue.config.js不生效的解決辦法,文中通過代碼示例講解的非常詳細(xì),對(duì)大家解決問題有一定的幫助,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了vue3如何自定義message彈窗問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
淺析Vue3中Excel下載模板并導(dǎo)入數(shù)據(jù)功能的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了Vue3中的Excel數(shù)據(jù)管理,即下載模板并導(dǎo)入數(shù)據(jù)功能的實(shí)現(xiàn),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2024-05-05
vue+elementui 對(duì)話框取消 表單驗(yàn)證重置示例
今天小編就為大家分享一篇vue+elementui 對(duì)話框取消 表單驗(yàn)證重置示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了Vue--keep-alive使用實(shí)例詳解,keep-alive標(biāo)簽主要用于保留組件狀態(tài)或避免重新渲染，用示例代碼介紹Vue的keep-alive的用法，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue實(shí)現(xiàn)圖片按比例縮放問題操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue引入組件的幾種方法匯總,包括常用的局部引入,這里需要注意在哪個(gè)頁面需要就在那個(gè)頁面引入、注冊(cè)、使用,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10
這篇文章主要介紹了Vue2響應(yīng)式系統(tǒng)，響應(yīng)式系統(tǒng)主要實(shí)現(xiàn)某個(gè)依賴了數(shù)據(jù)的函數(shù)，當(dāng)所依賴的數(shù)據(jù)改變的時(shí)候，該函數(shù)要重新執(zhí)行，下文更多相關(guān)介紹需要的小伙伴可以參考一下2022-04-04