前后端分离模式下后端 Spring Boot 集成前端 Vue 的一种解决方案

前后端分离已经是当下非常常见的一种开发模式。相较于传统的开发模式,前后端分离能够将前后端解耦,这意味着无论是开发、测试还是部署等任意阶段都能独立进行,极大地提升了研发的效率,并且增加了系统的灵活性和可维护性。

通常在这种模式下,前后端是分离在各自独立的项目中的,部署的时候也是分别部署。但是有时候我们想要将前端整合到 Spring Boot 中进行打包部署。比如项目比较小,分离部署成本高等情况。再者,我们开发的时候,后端同学可能只需要关注后端的设计实现,而不需要去搭建前端项目。

以我自己开发的一款 Dubbo 接口测试工具为例。我采用了前后端分离的开发模式,共有两个项目,datt-service 是后端项目,datt-web 是 Web 前端项目。调试的时候,我就需要分别启动前端和后端,但是可能我只是想调试后端代码,却依旧不得不将前端一起启动。 为了解决上述所说的问题,我们可以将前端项目编译成静态文件,将其作为 Spring Boot 项目的静态资源。这样 Spring Boot 项目启动的时候,会自动部署前端静态资源,这样我们就可以不用单独部署前端项目,而能够专注于后端开发了。

1 前端工程设置

首先,我们可以选择将两个工程都放在同一项目文件路径下,当然也可以不选择这么做,这样只是为了方便管理。 接着我们需要设置前端的编译打包路径。

在 Vue.js 中,我们可以通过设置 vue.config.js 来设置前台代码的编译输出路径。当然我们也可以选择在package.json 中添加 --dest target/dist 来设置编译输出路径。这里我通过设置 vue.config.js 来设置编译输出路径。 然后我们执行一次编译 yarn run build,可以看到,成功在相应的路径下编译出了我们的静态文件。

2 后端工程设置

此时我们可以将刚刚编译出的前端文件拷贝到后端工程的 /resources/static 路径下。这是 Spring Boot 存放静态资源文件的路径。 启动后端 Spring Boot 项目,访问后端的地址,比如 http://localhost:8001,应该是能够正常访问的。 但是我们不可能每次都通过拷贝的方式来打包部署。这时候就可以借助 Maven 的插件 maven-reources-plugin 来代替我们刚刚手动拷贝的动作。

我们打开后端项目的 pom 文件,在其中添加 maven-reources-plugin 插件,并为插件指定了拷贝的源路径为前端工程的编译路径,目的路径就是我们后端 Spring Boot 静态资源的存放路径。这样,每次前端编译后,在后端项目执行 Maven 编译打包的时候就能自动拷贝到后端工程下了。

3 编译运行测试

我们执行 maven clean package 命令。等待命令执行结束后,可以看到前端编译的静态资源文件被成功拷贝到后端项目中。 此时启动后端项目,访问 http://localhost:8001 应该同样能够访问成功。至此,我们已经成功将 Vue.js 集成到 Spring Boot 项目中了。

相关推荐
程序员张31 小时前
SpringBoot计时一次请求耗时
java·spring boot·后端
速易达网络6 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
lyj1689977 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
麦兜*8 小时前
Spring Boot启动优化7板斧(延迟初始化、组件扫描精准打击、JVM参数调优):砍掉70%启动时间的魔鬼实践
java·jvm·spring boot·后端·spring·spring cloud·系统架构
KK溜了溜了8 小时前
JAVA-springboot 整合Redis
java·spring boot·redis
大只鹅8 小时前
解决 Spring Boot 对 Elasticsearch 字段没有小驼峰映射的问题
spring boot·后端·elasticsearch
天河归来8 小时前
使用idea创建springboot单体项目
java·spring boot·intellij-idea
IT_10249 小时前
Spring Boot项目开发实战销售管理系统——数据库设计!
java·开发语言·数据库·spring boot·后端·oracle
武昌库里写JAVA9 小时前
Oracle如何使用序列 Oracle序列使用教程
java·开发语言·spring boot·学习·课程设计
我在北京coding10 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js