spring

品牌型号：联想拯救者R7000

系统：Windows 10专业版

软件版本：Spring Boot 4.0.2

如今大多数项目都是前后端分离开发，在后端开发中，一般使用Spring Boot框架，前端使用Vue框架。我们在实际工作中，可能会遇到前后端数据不通、项目部署后无法访问等问题，本文将为大家介绍Spring Boot和Vue怎么实现前后端交互，Spring Boot和Vue项目怎么部署的相关内容。

一、Spring Boot和Vue怎么实现前后端交互

前后端交互的流程是前端发起请求、后端处理请求、返回数据给前端、前端渲染数据，整个交互流程需完成接口设计、前端请求封装、跨域处理、数据交互，下面我就详细为大家介绍一下Spring Boot和Vue实现前后端交互的步骤。

1、后端Spring Boot接口设计

工作中一般采用RESTful风格设计接口，比如开发用户管理功能时，查询用户列表用GET请求，新增用户用POST请求。同时，为了方便前后端解析数据，需要统一响应格式，一般包含状态码（code）、消息（msg）、数据（data）三个字段，避免前端解析数据时出现错误。我们会创建统一响应类，成功时返回200状态码和数据，失败时返回对应错误码和提示信息，避免因响应格式不统一导致的联调问题。

2、前端Vue请求封装

工作中如果每个接口都重复编写请求代码，会造成代码冗余。此时我们会用Axios封装全局请求，配置基础路径、请求超时时间、请求头，同时添加请求拦截器和响应拦截器。比如在请求拦截器中自动携带Token，无需每个请求手动添加。在响应拦截器中统一处理报错，例如开发商品列表查询功能时，前端只需调用封装好的请求方法，传入接口参数，即可获取后端返回的商品数据。

3、跨域问题

这是前后端交互中经常会遇到的坑点，前端Vue项目默认端口为5173，后端Spring Boot默认端口为8080，由于端口不同，会出现浏览器同源策略拦截，导致请求失败。针对这种情况，我们可以后端全局配置跨域，编写配置类实现WebMvcConfigurer接口，允许所有来源、所有请求方法跨域。或者部署时通过Nginx反向代理，从根源避免跨域。

二、Spring Boot和Vue项目怎么部署

项目开发完成后，需要部署到服务器，前后端分离开发的场景中，一般是分开部署，下面我就分别为大家介绍一下Spring Boot后端项目和Vue前端项目的部署方案。

1、后端Spring Boot项目

后端一般使用Jar包部署，本地打包前，先检查项目配置文件，例如application.yml中端口、数据库连接等参数，不能直接将本地的配置直接打包上线。可以借助maven工具打包，最终生成【.jar】格式的包，打包完成后，建议先在本地执行【java -jar xxxx.jar】命令查看能否正常启动，确认无报错后再上传至服务器部署。

上传到服务器后，需要检查服务器安装的JDK版本与打包后的程序JDK版本是否一致，比如项目用JDK17开发，服务器就不能用JDK8，否则会无法启动，在服务器可以通过【java -version】命令查看安装的JDK版本。

我们可以直接执行【java -jar 包名.jar】部署Jar包，生产环境一般采用后台静默运行的方式，并且指定配置文件，具体命令可以参考下图。为了更快捷的部署，可以编写sh脚本，因为每次部署的命令都是相同的，新版本打包后重新上传，再次执行脚本即可重新部署。

2、Vue前端部署

一般是将项目打包为静态资源，通过Nginx代理访问。工作中打包前需修改vue.config.js文件，将publicPath设置为“/”，表示部署在根目录，避免静态资源加载失败。如果项目使用history路由，需要配置Nginx兜底，否则刷新页面会出现404错误。执行【npm run build】命令生成dist文件夹，将该文件夹上传到Linux服务器的Nginx静态资源目录，然后修改Nginx配置文件，配置静态资源映射和反向代理，将前端请求转发到后端接口地址，配置完毕后，执行【sudo systemctl reload nginx】重启Nginx，即可通过服务器IP访问前端页面。

三、总结

以上就是Spring Boot和Vue怎么实现前后端交互，Spring Boot和Vue项目怎么部署的相关内容。本文为大家介绍了Spring Boot和Vue实现数据交互的方式，基本流程是：后端封装接口，前端组装数据调用接口，处理跨域问题拿到接口返回值，这也是目前大多数前后端分离项目的开发方式。开发完毕后需要部署前后端项目，文中也为大家简单介绍了前后端的部署方式，希望对你有所帮助。