前后端分离及整合

在传统的 Java Web 开发模式中，前端写好HTML。

接着，后端在 前端写好的HTML中**“嵌入”**JSP代码，如果后端在开发的过程中遇到页面显示上的问题，就会去找前端询问。

但是前端看不懂JSP代码，往往造成效率低的情况。

后来就有了前后端分离的概念

前后端开发人员提前约定好接口文档（参数、数据类型），然后并行开发，最后完成前后端集成。

前端 HTML 页面通过 Ajax 调用后端API（方法函数） 进行数据交互，提高开发效率。

前后端整合 整合的思路有两种：

一：把前端的资源打包放入到springboot项目中，打成jar包或者war包进行部署。

二：把前端资源放到Nginx代理服务器上，后端项目文件打成jar包或者war包启动。

具体采用哪种方式，看公司中已有的部署方式，在者就是根据自己的喜好进行整合部署。

项目案例（应该是方式一）

分别创建 Spring Boot 工程和 Vue 工程

Spring Boot 工程

Vue 工程

分别启动两个应用，用命令 npm run serve 启动 Vue 应用，成功之后如下图所示。

通过 :8080/ 即可访问 Vue 应用，启动 Spring Boot 应用，成功之后如下图所示。

通过 :8181/ 即可访问 Spring Boot 应用，比如用 Postman 访问它的数据接口。

后端服务接口调通，成功返回 JSON 数据，现在只需要让 Vue 应用调用后端接口即可，这里我们使用 axios 来请求后端接口，代码如下所示。

const _this = this
axios.get('http://localhost:8181/book/findByPage/1').then(function (resp) {
    _this.pageSize = resp.data.pageSize
    _this.total = resp.data.total
    _this.tableData = resp.data.data
})

请求成功后将数据动态加载到页面，即可看到结果，如下图所示。

原文链接：

原文链接：