写点什么

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

用户头像
夏悸
关注
发布于: 2020 年 06 月 05 日
Vue&SpringBoot前后端项目分离构建

开发环境

  • 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去执行。

最终获取到接口返回内容进行输出。



到此开发环境的搭建就基本完成。当然,这里只是简单的把项目的基本结构搭建出来。真正的项目还需进行更多的配置和其他组件的使用。



本文简单的叙述了如何构建前后端的开发结构。

下一篇文章,将给大家介绍项目开发完成后,要怎么样部署到生产环境。

发布于: 2020 年 06 月 05 日阅读数: 93
用户头像

夏悸

关注

分享♥成长 2019.10.30 加入

教书育人

评论

发布
暂无评论
Vue&SpringBoot前后端项目分离构建