SpringBoot整合Vue最佳实践

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

[toc]

开发环境

  • IDEA V2018.5

  • npm v6.4.x

  • vue-cli v2.9.x

创建项目

IDEA > Create New Project > Gradle

此处的 Frameworks全部取消勾选,接着就一直 Next，提示填写的地方填写，不需要填写的就用默认配置就 ok。

项目创建成功，项目结构应该是这样的。 

创建后台模块

▼ 项目 > 右键 > New > Module

▼ Spring Initializr

▼ 这一步按照正常项目信息填写。
注意：Type 属性需要选择 Gradle Config

▼ 按照自己需要的依赖进行选取

▼ 下一步默认，然后 Finish。之后需要等待 Gradle 进行模块的初始化，如果是首次创建 SpringBoot 项目，此处初始化可能需要比较长的时间，需要耐心和良好的网络环境。

成功后是如上所示结构，之后我们需要手动完善一些结构和配置

配置后台模块

一、配置模块依赖

在根项目的settings.gradle文件中增加 include 'server'

二、完善 server 项目工程结构

server 目录默认创建出来只有一个build.gradle文件，我们需要手工完善项目结构

如上图所示，可以看到，我们其实建立出来的就是一个标准的 java 工程结构。

  • src 目录下游 main 目录，正常情况此处src 下还需要有 test 目录，这里演示就略过了。

  • main 下面创建 java 和 resources 。

  • java 下面创建对应的包结构和 SpringBoot 的启动类，代码如图的右边区域，非初次接触 SpringBoot 对这个代码应该不陌生。

  • resources 目录下暂时就只创建配置文件application.yml。

三、配置后台数据源

加入了数据源的 SpringBoot 项目需要在application.yml中配置数据源信息，否则项目会启动失败。 

# 配置项目的数据源
spring:
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/test?characterEncoding=UTF-8&useUnicode=true&useSSL=false
    password: root
    username: root

到此后台模块创建配置完成

创建前端模块

▼ 项目 > 右键 > New > Module

前端模块这里选择 Gradle，然后注意右边 Frameworks 这里需要取消 java 的勾选

这一步只需要填写一下 ArtifactId，名字可以自己定义，不一定要照搬我的命名习惯。然后一直下一步 直到 Finish。

模块完成初始化后，结构如上图所示，多出一个 client 目录，也是只有一个 build.gradle 文件。由于这个我们之间选择的新增 Gradle 的模块，所以在 settings.gradle 文件中，工具自动帮我们把 include 补全了。

▼▼▼接下来就是比较关键的步骤了,敲黑板.....▼▼▼

我们需要将 client 模块初始化为 vue 项目。这里我们用到的 vue 提供的vue-cli模块。

关于 vue-cli 的安装请参考百度。

初始化 vue 项目

打开 idea 底部的 Terminal 

在控制台输入：

vue init webpack client

注意： 此处的项目名称一定需要和你的创建前端模块的名称一致。例如我的前端模块目录是 client，我这里就是vue init webpack client。然后其他的配置，的配置选项就是正常的 vue 初始化过程了。我这里选择的构建工具是 Yarn，不是 npm。此处的选择不影响后面的构建。

这一步完成后，基本的前端模块算初始化完成。接下来，我们需要将前端模块整合道 Gradle 中便于统一编译和管理。

配置前端模块

一、clinet/build.gradle配置

将clinet/build.gradle内容修改为如下：

plugins {
    id "com.moowork.node" version "1.2.0"
}
node {
    version = '8.7.0'
    yarnVersion = '1.3.2'
    download = true
}
task bootRun(dependsOn: 'start') {
    group = 'application'
    description = 'Run the client app (for use with gradle bootRun -parallel）'
}
task start(type: YarnTask, dependsOn: 'yarn') {
    group = 'application'
    description = 'Run the client app'
    args = ['run', 'start']
}
task build(type: YarnTask, dependsOn: 'yarn') {
    group = 'build'
    description = 'Build the client bundle'
    args = ['run', 'build']
}

此处主要是为Gradle 配置了几个任务。大致意思就是用 Gradle 来代理执行前端的编译命令。

二、build.gradle配置

这里需要配置是根项目下的build.gradle

在build.gradle 中追加下面代码

task copyHtml(type: Copy) {
    group = 'build'
    description = '复制编译后的index.html到 server 的 resource 目录'
    from 'client/dist/index.html'
    into 'server/build/resources/main/static'
}
task copyStatic(type: Copy, dependsOn: 'copyHtml') {
    group = 'build'
    description = '复制编译后的静态文件到 server 的 resource 目录'
    from 'client/dist/static'
    into 'server/build/resources/main/static/static'
}
copyStatic.mustRunAfter('client:build')
task mergeBuild(dependsOn: ['client:build', ':copyStatic', 'server:bootJar']) {
    group = 'build'
    description = '合并编译输出'
}
task independentBuild(dependsOn: ['client:build', 'server:bootJar']) {
    group = 'build'
    description = '独立编译输出'
}

此处主要解释一下mergeBuild和independentBuild

mergeBuild：合并编译输出

合并编译输出输出的意思，表示前后端开发的时候是分模块分离开发，但是最终编译到发布项目的时候，会将前端编译的静态内容和html 复制道后台SpringBoot 项目的静态资源目录中,从而达到一体发布。

independentBuild:独立编译输出

独立编译输出区别于mergeBuild是不会复制前端文件到SpringBoot端来，所以我们在部署项目的时候，需要单独部署前端服务。

三、配置前端开发模式代理

client/config/index.js 修改proxyTable和port两处配置，如图所示。端口修改是因为，SpringBoot 运行的默认端口也是8080，为了不冲突，前端修改端口。proxyTable表示在开发阶段，前端所有已/server开头的请求,都代理到http://localhost:8080后台服务进行处理，pathRewrite意思是代理的转发时，剔除/server部分。

例：

前台请求：http://localhost:8081/server/user/list

实际代理执行请求：http://localhost:8080/user/list

端口和路径都发生了变化

到此项目的初始配置就基本完成。

最后：如何运行项目

找到 idea 右边栏上的 Gradle 选项卡，打开找到 vueb 下面的 Tasks>appplication>bootRun 右键选择Create 'vueb [bootRun]'...

在 Arguments 中增加-parallel参数，然后 ok。

最后在运行栏中可以看到配置的启动项。点击旁边的三角形就可以同时启动前端和后端服务。

最后可以看到控制台提示两个启动成功的信息，则表示项目构建成功。

上图所示，表示 SpringBoot 项目启动成功

上图所示，前端项目启动成功，我们可以访问http://localhost:8081

Over

以上是 SpringBoot整合Vue最佳实践 的全部内容， 来源链接： utcz.com/z/376597.html

回到顶部