Vue+SpringBoot项目交互及打jar包运行

最近开始接触了前后端分离的项目，前端使用的Vue，后端使用的Springboot，数据库使用的mongo，在这里分享一下关于前后端交互以及打包之中遇到的问题及经验。

一、Vue及SpringBoot项目

Vue及SpringBoo的环境及项目搭建过程就不再介绍。首先看下我的项目结构：

back-end中放的是一个SpringBoot项目，forn-end中放的是一个Vue项目，具体的项目结构:
back-end

forn-end

二、前后端交互

因为前后端我都在开发，所以在开发时需要分别运行两个项目，并让前后端可以正常交互，方便开发。

前端

首先进入forn-end目录下命令行运行

npm run dev

Vue项目启动成功，可以看到我们项目运行在了本地8080端口

如果需要修改端口或者IP地址可在 项目名\config\index.js中修改

后端

我们的前端项目已经启动，在启动SpringBoot项目时注意启动的端口不要冲突，在application.properties配置

server.port=9090 //我的配置

SpringBoot项目启动成功，可以看到项目成功连接到了mongoDB，并是以端口9090启动

交互

我们的前端项目以8080端口启动，后端项目以9090启动，那我们的通过axios去访问后端的接口的时候就需要写URL，为了方便修改且降低耦合，这里我们给axios配置一个baseURL（ 基础url前缀）

//Vue项目 路由配置文件中配置 我的路径：forn-end\src\router\index.js
import axios from 'axios'
...//省略一百二十三个字
Vue.prototype.$http = axios;
Vue.prototype.$http = axios.create({
  baseURL: 'http://127.0.0.1:9090/'
});

然后我们就可以在相应的method中通过定义的全局变量$http发送请求了

this.$http.post("equipment/queryType", "params").then((res) => {//url ,params
          const data = res.data;
          if ("AAAAAAA" === data.return_code) {
            this.options.equipment_type = data.data;
          } else {
            this.$message({
              showClose: true,
              message: res.data.message,
              type: 'warning'
            })
          }
        }).catch((res) => {
          this.$message({
            showClose: true,
            message: res.data.message,
            type: 'error'
          })
        });
});

请求发送成功了，并取到了相应的数据

三、项目打包

我们在开发完成后，会将代码提到Gitlab上，通过Gitlab的持续集成打成jar包，部署在kubernetes上运行，在提交前，我们在本地自行测试是否可以正常打包，根据需要修改gitlab.ci文件的配置。
因为我们要将前后端代码打到一起，也不存在两个端口的问题，所以之前配置的baseURL就没有用了，但是如果有配置上下文根则需要配置，此处因为我SpringBoot项目新配置了上下文根/app

server.servlet.context-path=/app

所以baseURL配置如下：

//Vue项目 路由配置文件中配置 我的路径：forn-end\src\router\index.js
import axios from 'axios'
...//省略一百二十三个字
Vue.prototype.$http = axios;
Vue.prototye.$http = axios.create({
  baseURL: '/app'
});

然后开始进行打包，进入forn-end目录下命令行运行（请在阅读Step步骤之后执行）

npm run-script build

稍等片刻可以看到Build complete，打包完成

然后我们打开项目目录forn-end\dist，会发现多了一个dist文件夹，包括一个static文件夹和一个index.html

我们双击index.html，如果可以正常进入页面，那么是没问题的，但是我打完包后会报net::ERR_FILE_NOT_FOUND，没有找到静态资源文件，发现请求资源的路径是不正确的

查看index.html发现静态资源的路径是绝对路径，需要改成相对路径

因为index.html是打包时自动生成的，所以我们修改\config\index.js中build下的assetsPublicPath值为"./"，保存，重新打包

Step再次打开index.html就可以正常访问了，我们的Vue项目已经打包完成了

现在我们需要将static文件夹及index.html文件放在如下路径下

然后进入SpringBoot项目根目录下back-end/，cmd命令行运行（powershell会报错）

mvn clean package -Dmaven.test.skip=true

运行成功后，会在当前目录下生成一个target文件夹，打开后会有一个jar包

直接命令行，运行即可

java -jar XXXXX-1.0-SNAPSHOT.jar

有什么问题欢迎留言哦
~