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

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

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

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

將之前的 BookManage 頁面的按鈕改為想要的功能

可以注意到修改按鈕的標簽以及綁定了事件 handleClick

點擊之后其可以在控制臺打印出當前行對象的內(nèi)容

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

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

相較于視頻中新增一個頁面的方式，我選擇以彈出框來展示修改頁面，這樣我認為更切合實際場景

修改對話框

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

所以運用到原來的頁面上，當點擊“修改”時，把這個屬性置為 true 即可

彈出的表單用原來的新增頁面進行代碼結(jié)合復用
將一下代碼拆分放入對應位置即可

<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)建額外的頁面，當點擊修改按鈕時，進行頁面跳轉(zhuǎn)，并用 query 傳遞操作的 id 信息

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

在新的頁面初始化地方進行接收參數(shù)，請求后端數(shù)據(jù)

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

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

后端提供接口

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

再調(diào)用 get() 方法以獲取到對象，結(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)用接口

當點擊修改操作時，對調(diào)用函數(shù) handleClick 進行修改

handleClick(row) {
    const _this = this;
    this.dialogFormVisible = true;
    axios.get("http://localhost:8181/book/findById/"+row.id).then(function (resp) {
        _this.ruleForm = resp.data;
    })
},

即可實現(xiàn)點擊后出現(xiàn)彈窗+載入修改的目錄信息

修改完成后提交

將之前的立即創(chuàng)建改成符合業(yè)務邏輯的“修改完成”

然后對函數(shù) submitForm 改裝一下即可
其實目前實際使用看來，不改裝也能滿足業(yè)務邏輯需求，JPA 的save函數(shù)自動幫我們把對象存進去了
JPA是判定了當前參數(shù)是否攜帶主鍵，如果沒有就存入，如果有就修改內(nèi)容

但為了業(yè)務嚴謹，并且以后可能遇到更復雜的業(yè)務邏輯，針對修改功能還是有必要專門開辟接口的
且根據(jù) REST 規(guī)范，更新應該使用 PUT 請求
所以直接在 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

即可實現(xiàn)修改功能

數(shù)據(jù)刪除功能

后端開設接口

@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>