后端的表现层接口开发完毕，就可以进行前端的开发了。

将前端页面保存到resources目录下的static目录中，建议执行maven的clean生命周期，避免缓存的问题出现。

前端页面的编写在此就不加赘述，需要可以在基于SpringBoot实现SSMP整合的案例源码下载。

前后端联通性测试

在进行具体的功能开发之前，先做联通性的测试，通过页面发送异步提交（axios），这一步调试通过后再进行进一步的功能开发。

//钩子函数，VUE对象初始化完成后自动执行
created() {
    //调用查询全部数据的操作
    this.getAll();
},

methods: {
    //列表
	getAll() {
    	//发送异步请求
		axios.get("/books").then((res)=>{
			console.log(res.data);
		});
    }
}

只要后台代码能够正常工作，前端能够在日志中接收到数据，就证明前后端是通的，也就可以进行下一步的功能开发了。

总结

1. 单体项目中页面放置在resources/static目录下
2. created钩子函数用于初始化页面时发起调用
3. 页面使用axios发送异步请求获取数据后确认前后端是否联通

页面基础功能开发

接下来开始页面基础功能的开发

列表功能（非分页版）

列表功能主要操作就是加载完数据，将数据展示到页面上，此处要利用VUE的数据模型绑定，发送请求得到数据，然后页面上读取指定数据即可。

页面数据模型定义

由el-table标签的属性可知，页面显示的数据来源为dataList

<el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
    ...
</el-table>

可以看到当前的dataList数据为空，需要给dataList添加数据

data:{
	dataList: [],		//当前页要展示的列表数据
	...
},

异步请求获取数据

因为res.data数据中包含flag和data ，而此处要加载res.data数据中的data数据，故要写为res.data.data。

//列表
getAll() {
    axios.get("/books").then((res)=>{
        this.dataList = res.data.data;
    });
},

这样在页面加载时就可以获取到数据，并且由VUE将数据展示到页面上了。

添加功能

添加功能用于收集数据的表单是通过一个弹窗展示的，因此在添加操作前首先要进行弹窗的展示，添加后隐藏弹窗即可。因为这个弹窗一直存在，因此当页面加载时首先设置这个弹窗为不可显示状态，需要展示，切换状态即可。

由新建按钮的@click属性可知，当前按钮的点击事件是handleCreate()方法

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

新增标签弹层的visible.sync="dialogFormVisible"

默认状态

data:{
	dialogFormVisible: false,	//添加表单是否可见
	...
},

切换为显示状态

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

由于每次添加数据都是使用同一个弹窗录入数据，所以每次操作的痕迹将在下一次操作时展示出来，需要在每次操作之前清理掉上次操作的痕迹。

定义清理数据操作

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

切换弹窗状态时清理数据

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

至此准备工作完成，下面就要调用后台完成添加操作了。

添加操作

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

1. 将要保存的数据传递到后台，通过post请求的第二个参数传递json数据到后台
2. 根据返回的操作结果决定下一步操作
   • 如果是true就关闭添加窗口，显示添加成功的消息
   • 如果是false保留添加窗口，显示添加失败的消息
3. 无论添加是否成功，页面均进行刷新，动态加载数据（对getAll操作发起调用）

取消添加操作

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

总结

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

删除功能

模仿添加操作制作删除功能，差别之处在于删除操作仅传递一个待删除的数据id到后台即可。

删除操作

由<el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>可知删除操作点击事件调用的是handleDelete方法

// 删除
handleDelete(row) {
    axios.delete("/books/"+row.id).then((res)=>{
        if(res.data.flag){
            this.$message.success("删除成功");
        }else{
            this.$message.error("删除失败");
        }
    }).finally(()=>{
        //重新获取数据
        this.getAll();
    });
},

删除操作提示信息

// 删除
handleDelete(row) {
    // 弹出提示框
    this.$confirm("此操作永久删除当前数据，是否继续？","提示",{type:'info'}).then(()=>{
        // 做删除业务
        axios.delete("/books/"+row.id).then((res)=>{
            if(res.data.flag){
            	this.$message.success("删除成功");
            }else{
            	this.$message.error("数据同步失败，自动刷新");
            }
        }).finally(()=>{
            this.getAll();
        });
    }).catch(()=>{
        // 取消删除
        this.$message.info("取消删除操作");
    });
}，	

总结

1. 请求方式使用Delete调用后台对应操作
2. 删除操作需要传递当前行数据对应的id值到后台
3. 删除操作结束后动态刷新页面加载数据
4. 根据操作结果不同，显示对应的提示信息
5. 删除操作前弹出提示框避免误操作

修改功能

修改功能可以说是列表功能、删除功能与添加功能的合体。几个相似点如下：

1. 页面也需要有一个弹窗用来加载修改的数据，这一点与添加相同，都是要弹窗
2. 弹出窗口中要加载待修改的数据，而数据需要通过查询得到，这一点与查询全部相同，都是要查数据
3. 查询操作需要将要修改的数据id发送到后台，这一点与删除相同，都是传递id到后台
4. 查询得到数据后需要展示到弹窗中，这一点与查询全部相同，都是要通过数据模型绑定展示数据
5. 修改数据时需要将被修改的数据传递到后台，这一点与添加相同，都是要传递数据

所以整体上来看，修改功能就是前面几个功能的大合体。

由<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>可知删除操作点击事件调用的是handleUpdate方法

查询并展示数据

//弹出编辑窗口
handleUpdate(row) {
    axios.get("/books/"+row.id).then((res)=>{
        //此处有可能初现flag==true,data==null的情况
        if(res.data.flag && res.data.data != null ){
            //展示弹层，加载数据。将data数据赋给formData
            this.formData = res.data.data;
            this.dialogFormVisible4Edit = true;
        }else{
            this.$message.error("数据同步失败，自动刷新");
        }
    }).finally(()=>{
        // 重新加载数据
        this.getAll();
    });
},

修改操作

//修改
handleEdit() {
    axios.put("/books",this.formData).then((res)=>{
        // 判断当前操作是否成功
        if(res.data.flag){
            // 关闭弹层
            this.dialogFormVisible4Edit = false;
            this.$message.success("修改成功");
        }else {
            this.$message.error("修改失败，请重试");
        }
    }).finally(()=>{
        // 重新加载数据
        this.getAll();
    });
},

总结

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

至此，页面的基础功能已经能正常运行。

基于SpringBoot实现SSMP整合的案例之九 (业务消息一致性与功能的扩展和维护)