如何使用 Vue.js 前端设置 Spring Boot

在本文中，您将学习如何设置一个由Spring Boot后端和Vue.js前端组成的Maven多模块项目。本文不会创建应用程序本身，仅介绍项目的设置。

介绍

许多应用程序由后端和前端组成。但是，您将如何组织和构建您的项目，以及如何部署后端和前端？有许多选项可供选择，没有一种尺寸适合所有人。您必须做出适合您的用例的决策。无论哪种情况，都必须将后端代码和前端代码彼此分开。这样，以后更容易改变。那么，您需要做出哪些决定？

• 是否要同时打包和部署后端和前端？
• 您是否需要能够从一开始就扩展和缩减应用程序？
• 是否希望前端与后端分开更新？

您需要根据应用程序类型和非功能需求进行明智选择。在本文中，您将学习如何为由Spring Boot后端部分和Quasar前端部分（Quasar是基于Vue.js框架）组成的应用程序设置项目结构。两者都打包在 Spring Boot jar 文件中，并作为一个单元部署。这将使您能够快速入门，并且在需要时将选项打开以将两者分开。在后一种情况下，您需要在像NGINX这样的Web服务器中部署前端部分。作为构建工具，将使用Maven。

本博客中使用的资源可在 GitHub 上找到。

先决条件

• 基本的弹簧启动知识。
• 基本类星体（Vue.js）知识或其他前端框架。
• 基础 Linux 知识。
• 基本的Maven知识。

除此之外，您还需要安装 Java 17、Node.js 和 npm。安装 Node.js 的说明可以在官方文档中找到。选择适用于您的操作系统的说明，并确保使用 LTS 版本。

以下是使用 Ubuntu 22.04 时的说明：

壳

1

$ curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash - &&\ -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash - &&\

2

$ sudo apt-get install -y nodejs apt-get install -y nodejs

在此之后，验证安装：

壳

1

$ node -v -v

2

v18.12.1

更新 npm：

1

$ sudo npm install -g npm@9.2.0 npm install -g npm@9.2.0

安装类星体框架，这将允许您创建响应式Web应用程序。它就像 Vue.js 之上的一层：

1

$ sudo npm install -g @quasar/cli npm install -g @quasar/cli

项目概况

如前所述，您将创建一个 Maven 多模块项目，该项目由 Spring Boot 后端应用程序和类星体前端组成。项目结构如下：

壳

1

myspringbootvueplanet

2

├── backend

3

│   └── pom.xml 

4

├── frontend

5

│   └── pom.xml 

6

└── pom.xml

主项目被称为并有自己的pom。它由模块后端和模块前端组成，每个前端都有自己的pom文件。在接下来的部分中，将创建此结构，并创建目录和 pom 文件的内容。myspringbootvueplanet

弹簧启动后端

首先，您将从 Spring Boot 后端开始：

• 导航到 Spring Initializr。
• 选择 Java 17
• 选择马文
• 添加 Spring Web 依赖项。
• 下载项目并解压缩。

在主项目目录中创建一个目录，并将该目录移动到此新的后端目录。接下来，将 pom 文件复制到目录中：backendsrcbackend

壳

1

$ mkdir backend backend

2

$ mv src/ backend/src src/ backend/src

3

$ cp pom.xml backend/pom.xml pom.xml backend/pom.xml

主项目中的pom需要进行调整，以便它知道后端模块。更改内容，如下所示。

注意：包装更改为：pom

.XML

1

 version="1.0" encoding="UTF-8"?> version="1.0" encoding="UTF-8"?>

2

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

3

    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">

4

    <modelVersion>4.0.0modelVersion><modelVersion>4.0.0modelVersion>

5

6

    <groupId>com.mydeveloperplanet.myspringbootvueplanetgroupId><groupId>com.mydeveloperplanet.myspringbootvueplanetgroupId>

7

    <artifactId>myspringbootvueplanetartifactId><artifactId>myspringbootvueplanetartifactId>

8

    <version>0.0.1-SNAPSHOTversion><version>0.0.1-SNAPSHOTversion>

9

    <name>MySpringBootVuePlanetname><name>MySpringBootVuePlanetname>

10

    <description>Demo project for Spring Boot with Vue frontenddescription><description>Demo project for Spring Boot with Vue frontenddescription>

11

    <packaging>pompackaging><packaging>pompackaging>

12

13

    <modules><modules>

14

        <module>backendmodule><module>backendmodule>

15

    modules>modules>

16

17

project>project>

后端 pom 也需要更改。将 更改为 。artifactIdbackend

更改以下行：

.XML

1

<artifactId>myspringbootvueplanetartifactId>artifactId>myspringbootvueplanetartifactId>

到：

.XML

1

<artifactId>backendartifactId>artifactId>backendartifactId>

并删除标签。pom 的上部如下：name

.XML

1

<parent>parent>

2

  <groupId>org.springframework.bootgroupId><groupId>org.springframework.bootgroupId>

3

  <artifactId>spring-boot-starter-parentartifactId><artifactId>spring-boot-starter-parentartifactId>

4

  <version>3.0.1version><version>3.0.1version>

5

  <relativePath/> <relativePath/> 

6

parent>parent>

7

<groupId>com.mydeveloperplanet.myspringbootvueplanetgroupId>groupId>com.mydeveloperplanet.myspringbootvueplanetgroupId>

8

<artifactId>backendartifactId>artifactId>backendartifactId>

9

<version>0.0.1-SNAPSHOTversion>version>0.0.1-SNAPSHOTversion>

通过从项目的根目录执行以下命令来验证 Maven 项目是否生成：

壳

1

$ mvn clean verify clean verify

类星体前端

要使用 Quasar 框架创建基本的 Vue.js 前端应用程序，您可以从存储库的根目录执行以下命令，并根据需要回答问题：

壳

1

$ npm init quasar init quasar

2

What would you like to build? › App with Quasar CLI, let's go!'s go!

3

Project folder: … frontend

4

Pick Quasar version: › Quasar v2 (Vue 3 | latest and greatest)3 | latest and greatest)

5

Pick script type: › Typescript

6

Pick Quasar App CLI variant: › Quasar App CLI with Vite

7

Package name: … frontend

8

Project product name: (must start with letter if building mobile apps) … myspringbootvueplanetstart with letter if building mobile apps) … myspringbootvueplanet

9

Project description: … A demo project for Spring Boot with Vue/Quasarfor Spring Boot with Vue/Quasar

10

Author: … mydeveloperplanet 

11

Pick a Vue component style: › Composition API

12

Pick your CSS preprocessor: › Sass with SCSS syntax

13

Check the features needed for your project: › ESLintfor your project: › ESLint

14

Pick an ESLint preset: › Prettier

15

Install project dependencies? (recommended) › Yes, use npmnpm

此时，已在包含前端应用程序的存储库的根目录中创建了一个前端目录。将以下 pom 添加到前端目录。在这个pom中，你使用前端-maven-plugin，它允许你通过Maven构建前端应用程序：

.XML

1

 version="1.0" encoding="UTF-8"?> version="1.0" encoding="UTF-8"?>

2

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

3

         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">

4

  <modelVersion>4.0.0modelVersion><modelVersion>4.0.0modelVersion>

5

  <groupId>com.mydeveloperplanet.myspringbootvueplanetgroupId><groupId>com.mydeveloperplanet.myspringbootvueplanetgroupId>

6

  <artifactId>frontendartifactId><artifactId>frontendartifactId>

7

  <version>0.0.1-SNAPSHOTversion><version>0.0.1-SNAPSHOTversion>

8

9

  <build><build>

10

    <plugins><plugins>

11

      <plugin><plugin>

12

        <groupId>com.github.eirslettgroupId><groupId>com.github.eirslettgroupId>

13

        <artifactId>frontend-maven-pluginartifactId><artifactId>frontend-maven-pluginartifactId>

14

        <version>1.12.1version><version>1.12.1version>

15

        <executions><executions>

16

          <execution><execution>

17

            <id>install node and npmid><id>install node and npmid>

18

            <goals><goals>

19

              <goal>install-node-and-npmgoal><goal>install-node-and-npmgoal>

20

            goals>goals>

21

            <configuration><configuration>

22

              <nodeVersion>v18.12.1nodeVersion><nodeVersion>v18.12.1nodeVersion>

23

            configuration>configuration>

24

          execution>execution>

25

          <execution><execution>

26

            <id>npm installid><id>npm installid>

27

            <goals><goals>

28

              <goal>npmgoal><goal>npmgoal>

29

            goals>goals>

30

            <configuration><configuration>

31

              <arguments>installarguments><arguments>installarguments>

32

            configuration>configuration>

33

          execution>execution>

34

          <execution><execution>

35

            <id>npm install @quasar/cli -gid><id>npm install @quasar/cli -gid>

36

            <goals><goals>

37

              <goal>npmgoal><goal>npmgoal>

38

            goals>goals>

39

            <configuration><configuration>

40

              <arguments>install @quasar/cli -garguments><arguments>install @quasar/cli -garguments>

41

            configuration>configuration>

42

          execution>execution>

43

          <execution><execution>

44

            <id>npx quasar buildid><id>npx quasar buildid>

45

            <goals><goals>

46

              <goal>npxgoal><goal>npxgoal>

47

            goals>goals>

48

            <configuration><configuration>

49

              <arguments>quasar buildarguments><arguments>quasar buildarguments>

50

            configuration>configuration>

51

          execution>execution>

52

        executions>executions>

53

      plugin>plugin>

54

    plugins>plugins>

55

  build>build>

56

57

project>project>

现在，将前端模块添加到存储库根目录下的 pom 中：

.XML

1

<modules>modules>

2

  <module>backendmodule><module>backendmodule>

3

  <module>frontendmodule><module>frontendmodule>

4

modules>modules>

验证项目是否从存储库的根目录生成并执行以下命令：

壳

1

$ mvn clean verify clean verify

结合后端和前端

现在是时候将前端分发文件与后端应用程序打包了。为此，您需要将以下内容添加到后端 pom 的构建插件部分：

.XML

1

<build>build>

2

  <plugins><plugins>

3

    <plugin><plugin>

4

      <artifactId>maven-resources-pluginartifactId><artifactId>maven-resources-pluginartifactId>

5

      <executions><executions>

6

        <execution><execution>

7

          <id>copy frontend contentid><id>copy frontend contentid>

8

          <phase>generate-resourcesphase><phase>generate-resourcesphase>

9

          <goals><goals>

10

            <goal>copy-resourcesgoal><goal>copy-resourcesgoal>

11

          goals>goals>

12

          <configuration><configuration>

13

            <outputDirectory>target/classes/staticoutputDirectory><outputDirectory>target/classes/staticoutputDirectory>

14

            <overwrite>trueoverwrite><overwrite>trueoverwrite>

15

            <resources><resources>

16

              <resource><resource>

17

                <directory>../frontend/dist/spadirectory><directory>../frontend/dist/spadirectory>

18

              resource>resource>

19

            resources>resources>

20

          configuration>configuration>

21

        execution>execution>

22

      executions>executions>

23

    plugin>plugin>

24

  plugins>plugins>

25

build>build>

前端构建将可分发文件输出到目录中。maven-resouces-plugin 将复制这些资源并将它们添加到目录中。Spring Boot 应用程序会将这些页面提供给 http://localhost:8080/。默认情况下，Spring 将提供来自多个目录的静态内容。/frontend/dist/spa/target/classes/static

注意：在此更改之后，您将无法再并行运行模块构建，因为后端构建依赖于前端构建。当您使用 Maven 守护程序运行构建时，您必须添加标志以强制它按顺序构建。-T1

再次构建应用程序：

壳

1

$ mvn clean verify clean verify

通过执行以下命令从存储库的根目录启动应用程序：

壳

1

$ java -jar backend/target/backend-0.0.1-SNAPSHOT.jar -jar backend/target/backend-0.0.1-SNAPSHOT.jar