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

第五天任务概要

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

第一步：修改导航栏名称

1.打开index.js，将前第一个导航栏的名称修改为“数据管理”，其子导航栏修改为“数据查询”与“数据添加”。同时将其他属性修改为箭头所指。

2.重命名这些路由相应的vue1页面，将Page1.vue重命名为DataManage.vue；将Page2.vue重命名为DataAdd.vue。

同时将DataManage.vue与DataAdd.vue里的name进行修改：


修改index.js里的文件引入：

第二步：实现数据添加

1.编写前端代码
打开https://element.eleme.cn/#/zh-CN，由于需要添加数据，因此需要进行form表单的提交，引入form组件。
找一个高大上的，复制其代码：


完整覆盖DataAdd.vue的代码内容，同时添加Template标签，并删除无用的输入框。完整代码如下：
DataAdd.vue：

<template>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><!--model用于实现数据绑定-->
        <el-form-item label="数据名称" prop="name"><!--对应data()里rules数组里面的name属性-->
            <el-input v-model="ruleForm.name"></el-input><!--用于实现子数据的绑定-->
        </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 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: "DataAdd",
        data() {
            return {
                ruleForm: {
                    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) {
                        alert('提交成功！');
                    } else {
                        console.log('提交失败！');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

<style scoped>

</style>

2.编写后端代码
打开Book.java，为id添加自增属性：

打开BookController.java，添加接口：

    @PostMapping("/add")
    public String add(@RequestBody Book book){//由于使用了@RestController会使前端提交的数据转换为json格式，因此需要通过@RequestBody转换为对象形式
        Book result=bookRepository.save(book);
        if(result!=null){
            return "success";
        }else{
            return "error";
        }
    }

3.在前端中添加axios实现前后端对接

axios.post('http://localhost:8081/book/add',_this.ruleForm).then(function(resp){//提交数据时，将ruleForm直接追加到post()的第二个参数
                        })

成功！此时重新启动后端，刷新前端进行添加查看效果。

第三步：输入提示框点缀

打开https://element.eleme.cn/#/zh-CN，选择Message消息提示，选择相应的代码：

将代码复制到提交成功的方法区中：

第四步：实现添加成功后的页面跳转

继续在DataAdd.vue中添加代码：

DataAdd.vue代码：

<template>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><!--model用于实现数据绑定-->
        <el-form-item label="数据名称" prop="name"><!--对应data()里rules数组里面的name属性-->
            <el-input v-model="ruleForm.name"></el-input><!--用于实现子数据的绑定-->
        </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: "DataAdd",
        data() {
            return {
                ruleForm: {//要提交的数据
                    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.post('http://localhost:8081/book/add',_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();
            }
        }
    }
</script>

<style scoped>

</style>

至此，数据添加操作完成。明天是最后一节，实现数据的修改与删除操作