springboot怎么添加响应标头 springboot添加功能

SpringBoot

SpringBoot 基础篇

文章目录

• SpringBoot
• SpringBoot 基础篇
• 4 基于 SpringBoot 的SSMP 整合案例

• 4.14 添加功能

• 4.14.1 弹出添加窗口
• 4.14.2 添加实现
• 4.14.3 添加消息
• 4.14.4 取消按钮
• 4.14.5 小结

4 基于 SpringBoot 的SSMP 整合案例

4.14 添加功能

4.14.1 弹出添加窗口

添加功能从点击这个按钮开始，首先应该把添加窗口弹出

在代码中找到

<el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>

可以看到它已经绑定了一个点击事件【当然这是黑马老师的资料，以后还是自己能写】

就是它了

再次在页面布局中找到“添加界面”

<!-- 新增标签弹层 -->

<div class="add-form">

    <el-dialog title="新增图书" :visible.sync="dialogFormVisible">

        <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right"
                 label-width="100px">

            <el-row>

                <el-col :span="12">

                    <el-form-item label="图书类别" prop="type">

                        <el-input v-model="formData.type"/>

                    </el-form-item>

                </el-col>

                <el-col :span="12">

                    <el-form-item label="图书名称" prop="name">

                        <el-input v-model="formData.name"/>

                    </el-form-item>

                </el-col>

            </el-row>


            <el-row>

                <el-col :span="24">

                    <el-form-item label="描述">

                        <el-input v-model="formData.description" type="textarea"></el-input>

                    </el-form-item>

                </el-col>

            </el-row>

        </el-form>

        <div slot="footer" class="dialog-footer">

            <el-button @click="cancel()">取消</el-button>

            <el-button type="primary" @click="handleAdd()">确定</el-button>

        </div>

    </el-dialog>

</div>

就是它了，它现在之所以没显示

因为这个属性值为false，

OK，现在的工作就是要在点击新增按钮后，把这个数据改为true

//弹出添加窗口
handleCreate() {
    this.dialogFormVisible = true;
},

重启服务器测试

没毛病

4.14.2 添加实现

当我们在添加窗口输入数据后，点击确定按钮，就应该把数据保存

就这个事件

//添加
handleAdd() {
    axios.post('/books', this.formData).then((res) => {
        //1. 关闭弹层
        this.dialogFormVisible = false;
        //2. 重新加载数据
        this.getAll();
    });
},

重启服务器，测试

OK，基础功能就是做好了

现在还有个问题，万一添加失败了咋处理？而且不管成功失败咱们都得重新把数据加载一次

//添加
handleAdd() {
    axios.post('/books', this.formData).then((res) => {
        if (res.data.flag) {
            //1. 关闭弹层
            this.dialogFormVisible = false;
        }
    }).finally(() => {
        //2. 重新加载数据
        this.getAll();
    });
},

这样写就好了

4.14.3 添加消息

添加成功后，弹一个消息弹窗提示用户

//添加
handleAdd() {
    axios.post('/books', this.formData).then((res) => {
        if (res.data.flag) {
            //1. 关闭弹层
            this.dialogFormVisible = false;
            this.$message.success("添加成功");
        } else {
            this.$message.error("添加失败");
        }
    }).finally(() => {
        //2. 重新加载数据
        this.getAll();
    });
},

这样就完善了

看下效果

记得刷新

但是还有个问题，当我再次点击添加时

上次操作的数据还在，不好【因为双向绑定，数据持久】【所以要么打开时清理一下、要么关闭时清理一下】

//弹出添加窗口
handleCreate() {
    this.dialogFormVisible = true;
    this.resetForm();
},

//重置表单
resetForm() {
    this.formData = {};
},

这样就行了

4.14.4 取消按钮

//取消
            cancel() {
                this.dialogFormVisible = false;
                this.$message.info("当前操作取消");
            },

这样就OK了

看看效果：

OK

小结一下

• 弹出添加窗口

//弹出添加窗口
handleCreate() {
this.dialogFormVisible = true;
},

• 清除数据

//重置表单
resetForm() {
this.formData = {};
},

//弹出添加窗口
handleCreate() {
this.dialogFormVisible = true;
this.resetForm();
},

• 添加

//添加
handleAdd () {
//发送异步请求
axios.post("/books",this.formData).then((res)=>{
//如果操作成功，关闭弹层，显示数据
if(res.data.flag){
this.dialogFormVisible = false;
this.$message.success("添加成功");
}else {
this.$message.error("添加失败");
}
}).finally(()=>{
this.getAll();
});
},

• 取消添加

//取消
cancel(){
this.dialogFormVisible = false;
this.$message.info("操作取消");
},

4.14.5 小结

1. 请求方式使用POST调用后台对应操作
2. 添加操作结束后动态刷新页面加载数据
3. 根据操作结果不同，显示对应的提示信息
4. 弹出添加Div时清除表单数据