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

琉底骅网络

于 2023-03-25 15:15:41 发布

阅读量355

点赞数

文章标签：前端 vue.js spring boot

本文链接：https://blog.csdn.net/weixin_56863624/article/details/129767484

版权

在本文中，您将学习如何设置一个由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 时的说明：

壳

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

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

在此之后，验证安装：

壳

$ node -v -v

v18.12.1

更新 npm：

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

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

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

项目概况

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

壳

myspringbootvueplanet

├── backend

│   └── pom.xml

├── frontend

│   └── pom.xml

└── pom.xml

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

弹簧启动后端

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

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

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

壳

$ mkdir backend backend

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

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

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

注意：包装更改为：pom

.XML

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

<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"

    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">

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

    <groupId>com.mydeveloperplanet.myspringbootvueplanet</groupId><groupId>com.mydeveloperplanet.myspringbootvueplanet</groupId>

    <artifactId>myspringbootvueplanet</artifactId><artifactId>myspringbootvueplanet</artifactId>

    <version>0.0.1-SNAPSHOT</version><version>0.0.1-SNAPSHOT</version>

    <name>MySpringBootVuePlanet</name><name>MySpringBootVuePlanet</name>

    <description>Demo project for Spring Boot with Vue frontend</description><description>Demo project for Spring Boot with Vue frontend</description>

    <packaging>pom</packaging><packaging>pom</packaging>

    <modules><modules>

        <module>backend</module><module>backend</module>

    </modules></modules>

</project>project>

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

更改以下行：

.XML

<artifactId>myspringbootvueplanet</artifactId>artifactId>myspringbootvueplanet</artifactId>

到：

.XML

<artifactId>backend</artifactId>artifactId>backend</artifactId>

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

.XML

<parent>parent>

  <groupId>org.springframework.boot</groupId><groupId>org.springframework.boot</groupId>

  <artifactId>spring-boot-starter-parent</artifactId><artifactId>spring-boot-starter-parent</artifactId>

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

  <relativePath/> <!-- lookup parent from repository --><relativePath/> <!-- lookup parent from repository -->

</parent>parent>

<groupId>com.mydeveloperplanet.myspringbootvueplanet</groupId>groupId>com.mydeveloperplanet.myspringbootvueplanet</groupId>

<artifactId>backend</artifactId>artifactId>backend</artifactId>

<version>0.0.1-SNAPSHOT</version>version>0.0.1-SNAPSHOT</version>

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

壳

$ mvn clean verify clean verify

类星体前端

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

壳

$ npm init quasar init quasar

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

Project folder: … frontend

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

Pick script type: › Typescript

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

Package name: … frontend

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

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

Author: … mydeveloperplanet <mymail@address.com>

Pick a Vue component style: › Composition API

Pick your CSS preprocessor: › Sass with SCSS syntax

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

Pick an ESLint preset: › Prettier

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

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

.XML

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

<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"

         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">

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

  <groupId>com.mydeveloperplanet.myspringbootvueplanet</groupId><groupId>com.mydeveloperplanet.myspringbootvueplanet</groupId>

  <artifactId>frontend</artifactId><artifactId>frontend</artifactId>

  <version>0.0.1-SNAPSHOT</version><version>0.0.1-SNAPSHOT</version>

  <build><build>

    <plugins><plugins>

      <plugin><plugin>

        <groupId>com.github.eirslett</groupId><groupId>com.github.eirslett</groupId>

        <artifactId>frontend-maven-plugin</artifactId><artifactId>frontend-maven-plugin</artifactId>

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

        <executions><executions>

          <execution><execution>

            <id>install node and npm</id><id>install node and npm</id>

            <goals><goals>

              <goal>install-node-and-npm</goal><goal>install-node-and-npm</goal>

            </goals></goals>

            <configuration><configuration>

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

            </configuration></configuration>

          </execution></execution>

          <execution><execution>

            <id>npm install</id><id>npm install</id>

            <goals><goals>

              <goal>npm</goal><goal>npm</goal>

            </goals></goals>

            <configuration><configuration>

              <arguments>install</arguments><arguments>install</arguments>

            </configuration></configuration>

          </execution></execution>

          <execution><execution>

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

            <goals><goals>

              <goal>npm</goal><goal>npm</goal>

            </goals></goals>

            <configuration><configuration>

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

            </configuration></configuration>

          </execution></execution>

          <execution><execution>

            <id>npx quasar build</id><id>npx quasar build</id>

            <goals><goals>

              <goal>npx</goal><goal>npx</goal>

            </goals></goals>

            <configuration><configuration>

              <arguments>quasar build</arguments><arguments>quasar build</arguments>

            </configuration></configuration>

          </execution></execution>

        </executions></executions>

      </plugin></plugin>

    </plugins></plugins>

  </build></build>

</project>project>

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

.XML

<modules>modules>

  <module>backend</module><module>backend</module>

  <module>frontend</module><module>frontend</module>

</modules>modules>

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

壳

$ mvn clean verify clean verify

结合后端和前端

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

.XML

<build>build>

  <plugins><plugins>

    <plugin><plugin>

      <artifactId>maven-resources-plugin</artifactId><artifactId>maven-resources-plugin</artifactId>

      <executions><executions>

        <execution><execution>

          <id>copy frontend content</id><id>copy frontend content</id>

          <phase>generate-resources</phase><phase>generate-resources</phase>

          <goals><goals>

            <goal>copy-resources</goal><goal>copy-resources</goal>

          </goals></goals>

          <configuration><configuration>

            <outputDirectory>target/classes/static</outputDirectory><outputDirectory>target/classes/static</outputDirectory>

            <overwrite>true</overwrite><overwrite>true</overwrite>

            <resources><resources>

              <resource><resource>

                <directory>../frontend/dist/spa</directory><directory>../frontend/dist/spa</directory>

              </resource></resource>

            </resources></resources>

          </configuration></configuration>

        </execution></execution>

      </executions></executions>

    </plugin></plugin>

  </plugins></plugins>

</build>build>

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

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

再次构建应用程序：

壳

$ mvn clean verify clean verify

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

壳

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

琉底骅网络

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何使用 Vue.js 前端设置 Spring Boot

在本文中，您将学习如何为由Spring Boot后端部分和Quasar前端部分（Quasar是基于Vue.js框架）组成的应用程序设置项目结构。但是，您将如何组织和构建您的项目，以及如何部署后端和前端？在本文中，您将学习如何设置一个由Spring Boot后端和Vue.js前端组成的Maven多模块项目。如前所述，您将创建一个 Maven 多模块项目，该项目由 Spring Boot 后端应用程序和类星体前端组成。在接下来的部分中，将创建此结构，并创建目录和 pom 文件的内容。更改内容，如下所示。
复制链接

扫一扫