在传统的 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 应用,成功之后如下图所示。
通过 http://localhost:8080/ 即可访问 Vue 应用,启动 Spring Boot 应用,成功之后如下图所示。
通过 http://localhost: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
})
请求成功后将数据动态加载到页面,即可看到结果,如下图所示。
原文链接:https://cloud.tencent.com/developer/article/1520380
原文链接:https://blog.csdn.net/yaoyaowudi123/article/details/84974954