保姆级教程：Spring Boot+Vue前后端分离开发（第六天）

第六天任务概要

在前五天的学习中，我们选择了一种布局，完成了路由的设置，实现了后台数据在前端页面的展示，同时实现了数据的添加操作。在本节中，我们紧接着上一节的代码，实现数据的删除与修改。

第一步：实现数据修改操作

1.打开DataManage.vue，修改最右侧两列选项的名称：

2.处理修改的方法：将id传到后台，然后后台找到id=1的数据，然后进行修改操作。因此将Page3.vue重命名为DataUpdate.vue，并修改部分代码：

3.打开index.js，修改导航栏与页面引入：

4.由于点击“修改”按钮需要跳转到DataUpdate.vue，同时需要获得每一行的id值对数据进行修改，因此在DataManage.vue中添加点击事件与相应方法：

            edit(row) {
                this.$router.push({
                    path:'/update',//跳转到'/update'指向的页面
                    query:{
                        id:row.id //获得id
                    }
                }) //指向index.js中的“path: '/update'”
            },

同时在DataUpdate.vue中添加created(){}方法：

        created() {
            this.$route.query.id //获取id值，实现通过id对数据的修改。注意：页面跳转用$router,获取数据用$route
        }

6.由于需要查询id，才能修改后端数据，因此打开后端项目，在BookController中编写后端查询代码：

        /**
     * 实现数据修改
     * @param id
     * @return
     */
    //数据修改之前的查询操作
    @GetMapping("/findById/{id}")//http://localhost:8081/book/findById/1
    public Book findById(@PathVariable("id") Integer id){
        return bookRepository.findById(id).get();//注：findById(id)返回的不是Book对象类型，而是在对向外围包裹了一层，因此最终需要通过get()获取最终对象。
    }
    //开始修改操作
    @PutMapping("/update")
    public String update(@RequestBody Book book){
        Book result=bookRepository.save(book);
        if(result!=null){
            return "success";
        }else{
            return "error";
        }
    }

7.打开前端项目，修改DataUpdate.vue部分代码，在这里贴一下完整代码，不同之处读者可以进行对比：

<template>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><!--model用于实现数据绑定-->
        <el-form-item label="数据编号" >
            <el-input v-model="ruleForm.id" readOnly></el-input><!--v-model用于实现子数据的绑定 其中readOnly表示数据是只读的-->
        </el-form-item>

        <el-form-item label="数据名称" prop="name"><!--对应data()里rules数组里面的name属性-->
            <el-input v-model="ruleForm.name"></el-input><!--v-model用于实现子数据的绑定-->
        </el-form-item>

        <el-form-item label="作者" prop="author"><!--对应data()里rules数组里面的author属性-->
            <el-input v-model="ruleForm.author"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button :plain="true" type="primary" @click="submitForm('ruleForm')">提交修改</el-button>
            <el-button @click="resetForm('ruleForm')">重置修改</el-button>
            <el-button @click="test()">测试</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        name: "DataUpdate",
        data() {
            return {
                ruleForm: {//要提交的数据
                    id: '',
                    name: '',
                    author: ''
                },
                rules: {
                    name: [
                        { required: true, message: '请输入数据名称', trigger: 'blur' },
                        { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                    ],
                    author: [
                        { required: true, message: '请输入持有者名称', trigger: 'blur' },
                        { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            test(){
                console.log(this.ruleForm)
            },
            submitForm(formName) {
                const _this=this //这个this指的是vue的this
                this.$refs[formName].validate((valid) => { //这个this指的是submitForm
                    if (valid) {
                        axios.put('http://localhost:8081/book/update',_this.ruleForm).then(function(resp){//提交数据时，将ruleForm直接追加到post()的第二个参数
                        });
                        _this.$message({
                            message: _this.ruleForm.name+'修改成功,请刷新页面',
                            type: 'success'
                        });
                        _this.$router.push('/DataManage')//添加完成后，跳转到相应页面
                    } else {
                        console.log('提交失败！');
                        return false;
                    }
                });

            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
        created() {
            //this.$route.query.id //获取id值，实现通过id对数据的修改。注意：页面跳转用$router,获取数据用$route
            const _this=this
            axios.get('http://localhost:8081/book/findById/'+this.$route.query.id).then(function (resp) {//实现数据修改
                _this.ruleForm=resp.data//将修改以后的数据添加到ruleForm中
            })
        }
    }
</script>

<style scoped>

</style>

修改功能完成，读者可以重启前后端项目进行尝试

第二步：实现数据删除操作

执行删除操作则无需再跳转到新的页面，因此无需编写前端相应的代码。
1.打开后端项目，在BookController.java编写后端删除代码：

    /**
     * 实现数据删除
     */
    @DeleteMapping("/deleteById/{id}")
    public void deleteById(@PathVariable("id") Integer id){
        bookRepository.deleteById(id);
    }

2.打开前端项目，在DataManage.vue中编写删除函数，并实现前后端关联：

<el-button @click="deleteData(scope.row)" type="text" size="small">删除</el-button>

            deleteData(row){
                const _this=this
                axios.delete('http://localhost:8081/book/deleteById/'+row.id).then(function (resp) {
                })
                _this.$message({
                    message: '数据'+row.name+'删除成功,请刷新页面',
                    type: 'success'
                });
                _this.$router.push('/DataManage')//添加完成后，跳转到相应页面
                window.location.reload()//实现删除页面后页面的动态刷新
            },

第三步：消除无用导航栏

打开router/index.js，在相应路由上设置true与false：

打开Index.vue，添加：

v-if="item.show"

至此，该小demo已全部完成。具体细节可能没有讲清楚，大家可以自行查资料，网上都有，甚至比我都有讲的详细。谢谢大家支持！！！