Vue&SpringBoot 前后端项目分离构建

关注

发布于: 2020 年 06 月 05 日

开发环境IDEA 2020.1.2
@vue/cli 4.2.3
yarn 1.22.0
SpringBoot 2.3.0
gradle 6.3
创建项目1、创建主工程打开IDEA -> 选择Create New Project
项目类型选择Gradle，注意项目默认类型会选中Java，这里我们创建的是根项目，把此默认选项取消
填写项目信息，Finish
完成后，项目将进入主界面。如果你是首次使用gradle项目，那么依据网络状况将会需要一定时间进行gradle的初始化。初始化完成，将看到如下界面。
﻿
2、创建后端模块在项目上右键 -> New -> Module
这一步和第一步创建主工程步骤一下，此处按默认选项，不需要进行其他操作直接Next
这一步只需要填写合适的模块名称后Finish即可。
完成后，等待构建刷新，可以看到server模块已经初始化完成。
3、配置SpringBoot依赖1、打开https://start.spring.io/，这是Spring官网提供的SpringBoot项目初始化工具。
此处配置如图所示。
网站最底部有几个按钮，功能可以自己细品。这里主要用到第二个Explore按钮。点击此按钮可以看到出现如下界面。网站生成了一个在线的项目结构供我们使用。并且默认打开了build.gradle文件。
此处我们只需要点击上面的Copy按钮将build.gradle文件的内容复制到，上一步创建的后端模块server下面的build.gradle文件中。
如果这里刷新的时候提示当前gradle版本和SpringBoot构建版本不一致，则需要修改当前项目的gradle版本。如果没有提示错误，则可以跳过此步骤。
修改方式如下图，找到gradle目录下面的gradle-wrapper.properties文件，将里面的对应的gradle下载路径版本改为能够匹配的版本号，然后再刷新gradle依赖。
创建SpringBoot启动类和配置文件
配置文件，简单的配置一个服务端口
四部曲启动项目
1、打开右侧导航栏的Gradle选项卡
2、点击Gradle的刷新按钮
3、刷新完成后可以看到自动创建的项目启动项
4、点击启动项右侧的启动按钮运行项目
启动成功，Console最后输出服务端口和启动耗时。
Tomcat started on port(s): 8081 (http) with context path ''
Started VuesbApplication in 3.937 seconds (JVM running for 5.574)
打开浏览器，访问http://localhost:8081可以出现SpringBoot的404错误页面
后台配置完成。
4、创建前端模块1、打开底部导航栏的Terminal选项卡
2、输入 vue create <前端项目名称>
3、根据vue命令提示创建出项目，并初始化。
创建vue.config.js，配置vue的devServer服务代理，实现vue和后端服务的通信。
module.exports = {
  devServer: {
    port: 8088,
    proxy: {
      '^/api': {
        target: 'http://localhost:8081',
        pathRewrite: {'^/api': ''}
      }
    }
  }
};
此配置，定义了前端模块运行的端口和一个代理转发。会将前端模块所有以/api开头的请求转发到后台服务的8081端口进行处理。
到此前端的基本配置已经完成，下面配置前端项目的启动项。
按如图所示，选择Edit Configurations
如下图所示进行配置
完成可以看到项目已经有两个运行项目
和启动后台服务模块一样，点击运行按钮进行项目启动
启动成功
访问http://localhost:8088/可以看到vue项目的默认页面
前后端通信1、创建后端服务接口在server模块创建一个Controller定义了一个获取服务端口的接口
启动后台服务，访问http://localhost:8081/server/port，可以看到界面输出：server端口:8081
到此接口已经定义好，接下来看前端如何调用接口。
2、前端调用接口
fetch('/api/server/port').then(function (response) {
  return response.text();
}).then(function (text) {
  alert(text)
});
通过vue.config.js里面代理配置，
前端请求http://localhost:8088/api/server/port将被转发到后端http://localhost:8081/server/port去执行。
最终获取到接口返回内容进行输出。
﻿
到此开发环境的搭建就基本完成。当然，这里只是简单的把项目的基本结构搭建出来。真正的项目还需进行更多的配置和其他组件的使用。
﻿
本文简单的叙述了如何构建前后端的开发结构。
下一篇文章，将给大家介绍项目开发完成后，要怎么样部署到生产环境。