Vue表單數(shù)據(jù)修改與刪除功能實(shí)現(xiàn)

更新時(shí)間：2023年10月14日 12:52:40 作者：makerjack001

本文通過(guò)實(shí)例代碼介紹了Vue表單數(shù)據(jù)修改與刪除功能實(shí)現(xiàn),結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友跟隨小編一起看看吧

數(shù)據(jù)修改功能

將之前的 BookManage 頁(yè)面的按鈕改為想要的功能

可以注意到修改按鈕的標(biāo)簽以及綁定了事件 handleClick

點(diǎn)擊之后其可以在控制臺(tái)打印出當(dāng)前行對(duì)象的內(nèi)容

觀看視頻時(shí)，關(guān)于修改數(shù)據(jù)，彈幕分為了兩派
一派認(rèn)為因該直接從頁(yè)面中獲取現(xiàn)有的數(shù)據(jù)信息加以修改，再提交給后端并存儲(chǔ)到數(shù)據(jù)庫(kù)，此流程業(yè)務(wù)簡(jiǎn)單，減輕服務(wù)器負(fù)荷。
還有一派認(rèn)為因該依據(jù)關(guān)鍵信息或唯一標(biāo)識(shí)，從后臺(tái)請(qǐng)求這一系列數(shù)據(jù)，在此基礎(chǔ)上進(jìn)行修改，再提交給后端并存儲(chǔ)到數(shù)據(jù)庫(kù)，此流程數(shù)據(jù)安全。

我認(rèn)為確實(shí)應(yīng)該從后端拿數(shù)據(jù)，畢竟前端顯示的數(shù)據(jù)不一定是完整信息，最全最新的內(nèi)容肯定是在數(shù)據(jù)庫(kù)當(dāng)中，所有從后端拿數(shù)據(jù)重新修訂再保存到數(shù)據(jù)庫(kù)更加安全嚴(yán)謹(jǐn)。

相較于視頻中新增一個(gè)頁(yè)面的方式，我選擇以彈出框來(lái)展示修改頁(yè)面，這樣我認(rèn)為更切合實(shí)際場(chǎng)景

修改對(duì)話框

其核心內(nèi)容就是 dialogFormVisible 這個(gè)屬性在點(diǎn)擊關(guān)鍵字時(shí)改為 true（默認(rèn)是false）

所以運(yùn)用到原來(lái)的頁(yè)面上，當(dāng)點(diǎn)擊“修改”時(shí)，把這個(gè)屬性置為 true 即可

彈出的表單用原來(lái)的新增頁(yè)面進(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="書(shū)名" 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: '書(shū)名不能為空', 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)建額外的頁(yè)面，當(dāng)點(diǎn)擊修改按鈕時(shí)，進(jìn)行頁(yè)面跳轉(zhuǎn)，并用 query 傳遞操作的 id 信息

handleClick(row) {
    this.$router.push({
        path: '/update',
        query:{
            id: row.id
        }
    })
},

在新的頁(yè)面初始化地方進(jìn)行接收參數(shù)，請(qǐng)求后端數(shù)據(jù)

需要跳轉(zhuǎn)用 $router ，需要接收參數(shù)用 $route

拓展閱讀
route 和 router的區(qū)別
 params 和 query 傳遞參數(shù)的區(qū)別

后端提供接口

之前 bookRepository 繼承的 JPA 接口中，也已經(jīng)寫(xiě)好了 findById() 函數(shù)，對(duì)我們來(lái)說(shuō)相當(dāng)方便，只是這個(gè)接口返回的對(duì)象是 Optional 的對(duì)象，其可以把空的對(duì)象也能正常包裝并返回，避免出現(xiàn)空指針異常導(dǎo)致程序崩潰，Optional講解

再調(diào)用 get() 方法以獲取到對(duì)象，結(jié)果也是能正確輸出的
則下一步寫(xiě)入handler接口供外部調(diào)用

@GetMapping("/findById/{id}")
public Book findById(@PathVariable("id") Integer id){
    return bookRepository.findById(id).get();
}

經(jīng)測(cè)試也是可以使用的，故在前端調(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í)際使用看來(lái)，不改裝也能滿足業(yè)務(wù)邏輯需求，JPA 的save函數(shù)自動(dòng)幫我們把對(duì)象存進(jìn)去了
JPA是判定了當(dāng)前參數(shù)是否攜帶主鍵，如果沒(méi)有就存入，如果有就修改內(nèi)容

但為了業(yè)務(wù)嚴(yán)謹(jǐn)，并且以后可能遇到更復(fù)雜的業(yè)務(wù)邏輯，針對(duì)修改功能還是有必要專門(mén)開(kāi)辟接口的
且根據(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ù)刪除功能

后端開(kāi)設(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("刪除失敗");
        }
    })
},

最終成果展示

主頁(yè)面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: '書(shū)名不能為空', trigger: 'blur' }
                    ],
                    author: [
                        { required: true, message: '作者不能為空', trigger: 'blur' }
                    ],
                }
            }
        }
    }
</script>