极简全栈，从 0 到 1，从开发到部署，前端 Vue 3 + TypeScript + Vite + VS code，后端 Spring Boot 3 + Java + Maven + IDEA

编写目的：通过一个极简的全栈项目，从 0 到 1，从开发到部署，实现客户端打开浏览器点击发送按钮，发送网络请求，服务器接收请求，处理业务逻辑，返回响应，客户端接收响应，展示数据。通过这一流程，更好地理解整个开发过程中涉及的各个方面的技术知识。

技术栈：前后端分离

开发环境：windows

前端开发：Vue 3 + TypeScript + Vite + VS code

后端开发：Spring Boot 3 + Java + Maven + IDEA

部署环境：windows

代理服务：Nginx

应用服务：JVM（内置 Tomcat）

源代码管理：Git

源代码托管平台：Gitee

---

一、安装开发环境（前端）

1、安装 VS Code

官网下载：https://code.visualstudio.com

安装插件（根据实际情况选择安装，简单应用推荐安装前面5个）：

插件	说明
Vue (Official)	Vue - Official（以前叫 Volar）是 Vue.js 官方推荐的 VS Code 插件，旨在为 Vue.js 开发提供强大的支持。它适用于 Vue 2 和 Vue 3 项目，集成了语法高亮、智能提示、错误检查等功能，是 Vue 开发者提升开发效率的得力助手。
Vue 3 Snippets	提供大量预设代码片段
Path Intellisense	专注于文件路径自动补全的扩展插件。 当您在代码中输入 ./、../ 或 / 时，插件会自动列出当前工作区内匹配的文件和文件夹供您选择。 允许您通过配置为特定目录或外部库定义便捷的别名（例如将 @ 映射为 src 目录），简化复杂项目的路径引用。
Auto Close Tag	自动添加 HTML/XML 的结束标签
Auto Rename Tag	自动重命名配对的 HTML/XML 标签。 无论是开始标签还是结束标签，修改其中之一时，插件会自动同步更新另一个配对的标签，确保它们始终保持一致。
Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code	UI中文汉化
Code Spell Checker	代码拼写检查插件，检查代码变量名、注释甚至文档中的英文拼写错误，并用波浪线标出，从而避免一些因拼写错误导致的低级 bug。
Prettier - Code formatter	代码格式化工具
ESLint	提供实时代码检查、自动修复和高度可定制性的支持
Lingma - Alibaba Cloud AI Coding Assistant	阿里云基于通义大模型开发的智能编码辅助工具，提供行级/函数级实时续写、自然语言生成代码、单元测试生成、代码注释生成、代码解释、研发智能问答、异常报错排查等能力，并针对阿里云 SDK/OpenAPI 的使用场景进行了特别优化，旨在助力开发者高效、流畅地编码。
VS Code Counter	统计项目代码行数
IntelliJ IDEA Keybindings	将 JetBrains IntelliJ IDEA 及其系列 IDE（如 WebStorm、PyCharm、PHP Storm 等）的键盘快捷键映射到了 VS Code 中。
JavaScript (ES6) code snippets	提供大量常用的 ES6 及后续版本的语法代码片段
HTML CSS Support	HTML CSS Support 插件极大地增强了 VS Code 在 HTML 文件中处理 CSS 和类名的智能感知（IntelliSense）能力。它让编写 HTML 时链接 CSS 和引用类名/ID 变得非常智能和高效。
open in browser	直接在浏览器中打开HTML文件
File Utils	File Utils 插件是一款专为提升文件操作效率而设计的扩展工具，它能让开发者直接在 VSCode 环境内更直观、快捷地完成各种文件和目录管理任务，无需在资源管理器或终端之间来回切换。
Mithril Emmet	Mithril Emmet 插件专为使用 Mithril.js 框架的开发者设计，它能将简写的 Emmet 语法实时转换为 Mithril 的 m() 函数调用，极大提升了编写视图代码的效率。

2、安装 Node.js 

Node.js 是一个基于 Chrome V8 JavaScript 引擎 构建的开源、跨平台的 JavaScript 运行时环境，主要用于服务器端编程。它允许开发者使用 JavaScript 编写高性能的后端服务，突破了 JavaScript 仅在浏览器中运行的限制。

npm（Node Package Manager），通常需要先安装 Node.js，因为 npm 是 Node.js 的默认包管理工具。

Node.js中文官网地址：https://nodejs.org/zh-cn

Node.js中文官网下载地址：https://nodejs.org/zh-cn/download

查看本地 Node.js 的版本

node -v

查看 npm 的版本

npm -v

二、安装开发环境（后端）

1、安装 JDK 17

1.1、安装 JDK 17

OpenJDK 官网：https://openjdk.org/

OpenJDK 官网，这里是 OpenJDK 开源项目的源头，主要提供源码，通常不直接提供可下载的二进制安装包，它更多是提供项目信息、源码和指向其他提供预构建二进制文件的站点的链接。需从以下提供商官网下载：

提供商官网	特点
Eclipse Temurin Build of OpenJDK (推荐)	由 Eclipse 基金会提供，经过全面测试，兼容性好，支持多种平台和版本。
Oracle JDK	Oracle 官方构建，对于个人开发和学习免费，但在生产环境使用时需注意许可协议。
Microsoft Build of OpenJDK	由微软构建和维护，针对 Windows 和 Azure 环境有优化和支持。
Azul Zulu Builds of OpenJDK	Azul Systems 提供，提供多种版本和平台支持，包括免费的社区版。
Oracle Builds of OpenJDK	Oracle 官方构建，提供当前使用的 OpenJDK JDK 24 和 测试版 OpenJDK JDK 25/26，若想下载过往历史版本的需访问：https://jdk.java.net/archive/

信创代表产品 ：

1、Alibaba Dragonwell JDK

• GitHub Releases
  你可以根据需要的版本访问对应的仓库 Releases 页面下载：

  • Dragonwell 8: https://github.com/alibaba/dragonwell8/releases

  • Dragonwell 11: https://github.com/dragonwell-project/dragonwell11/releases

  • Dragonwell 17: https://github.com/dragonwell-project/dragonwell17/releases

  • Dragonwell 21: https://github.com/dragonwell-project/dragonwell21/releases

• 国内镜像站 (阿里云 OSS)
  你也可以直接从阿里云OSS镜像站下载，速度可能更快。你可以通过访问 http://dragonwell-jdk.io/ 官网获取最新的下载链接，或者根据已知的URL模式直接下载，例如 Dragonwell 8 的一个文件地址为：https://dragonwell.oss-cn-shanghai.aliyuncs.com/8/8.5.5-FP1/Alibaba_Dragonwell_8.5.5-FP1_Linux_x64.tar.gz。

• 通过包管理器安装 (Alibaba Cloud Linux 3)
  如果你的系统是 Alibaba Cloud Linux 3，使用 yum 安装是最简单的方式，且会自动配置好软链接，无需手动设置环境变量。

  bash

  # 对于 Dragonwell 8
  sudo yum install -y java-1.8.0-alibaba-dragonwell-devel
  # 对于 Dragonwell 11
  sudo yum install -y java-11-alibaba-dragonwell-devel
  # 对于 Dragonwell 17
  sudo yum install -y java-17-alibaba-dragonwell-devel
  # 对于 Dragonwell 21
  sudo yum install -y java-21-alibaba-dragonwell-devel

2、Tencent kona JDK

• GitHub 官方仓库
  你可以根据需要的版本访问对应的仓库 Releases 页面：

  • TencentKona-8: https://github.com/Tencent/TencentKona-8/releases

  • TencentKona-11: https://github.com/Tencent/TencentKona-11/releases

  • TencentKona-17: https://github.com/Tencent/TencentKona-17/releases

  • TencentKona-21: https://github.com/Tencent/TencentKona-21/releases

• 国内镜像站 (cnb.cool)
  国内镜像的仓库地址如下，同样可以在对应的 Releases 页面找到下载文件：

  • https://cnb.cool/tencent/TencentKona/TencentKona-8

  • 其他版本只需将URL中的版本号（如8）替换为11, 17, 21即可。

3、龙芯 JDK

龙芯中科技术股份有限公司的官方门户网址是：http://www.loongson.cn/

JDK下载地址：https://www.loongnix.cn/zh/api/java/

安装包安装（自动设置环境变量，最好查核一下） 或 解压安装（手动设置环境变量）

1.2、设置环境变量

增加：JAVA_HOME

修改：PATH，追加 %JAVA_HOME%\bin

2、安装 IDEA 社区版

安装 IntelliJ IDEA Community Edition

官网下载：https://www.jetbrains.com/idea/download/?section=windows

安装插件

插件	说明
Lombok	IntelliJ IDEA 的 Lombok 插件是一款非常实用的工具，它能通过注解的方式减少 Java 代码中的样板代码（如 getter、setter、构造函数等），显著提升开发效率。
Chinese (Simplified) Language Pack / 中文语言包	UI中文汉化

3、安装 Maven

3.1、安装 Maven

官网下载：https://maven.apache.org/download.cgi

解压安装

3.2、设置环境变量

增加：MAVEN_HOME

修改：PATH，追加 %MAVEN_HOME%\bin

3.3、设置 Maven 本地仓库

在 Ｍaven 根目录下，新建目录：如，mvn_repo

修改配置文件 conf\settings.xml，修改本地仓库路径为：

  <localRepository>D:\Develop\apache-maven-3.9.6\mvn_repo</localRepository>

3.4、设置 Maven 镜像地址

改用阿里云 Maven 镜像地址，以加速依赖下载

    <mirror>
      <id>alimaven</id>
      <name>aliyun maven</name>
      <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
      <mirrorOf>central</mirrorOf>
    </mirror>

3.5、查看 Maven 版本

mvn --version

三、安装 Vue3 + TypeScript 项目（前端）

新建项目根目录 D:\MyCode\wyinofsys-base

打开 VS Code

打开文件夹 D:\MyCode\wyinofsys-base

打开终端（相当于打开cmd）

 输入安装命令

npm create vue@latest

输入项目名称：wyinfosys-client

简单安装只选择 TypeScript，其他的后续可以追加安装

选择 Yes，创建一个空的 Vue 项目

项目初始化完成，查看目录内容，如下：

进入项目根目录，

cd wyinfosys-client

安装项目

npm install

安装完成，但是这里提示【在用的 node 版本】与【项目要求的 node 版本】不一致。

四、新建 Spring Boot 3 项目（后端）

1、新建项目

打开 IDEA

新建项目

2、设置 Maven

3、配置 pom.xml

配置 pom.xml

<?xml 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"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.weiyu</groupId>
    <artifactId>wyinfosys-server</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>jar</packaging>

    <!-- 继承 Spring Boot 的父项目 -->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>3.2.12</version>
    </parent>

    <!-- 属性 -->
    <properties>
        <!-- JDK 版本 -->
        <maven.compiler.source>17</maven.compiler.source>
        <maven.compiler.target>17</maven.compiler.target>
        <!-- 项目构建编码 -->
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>

    <!-- 依赖项 -->
    <dependencies>
        <!-- Spring Boot Web Starter 依赖 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    </dependencies>

    <!-- 构建 -->
    <build>
        <!-- 插件 -->
        <plugins>
            <!-- Spring Boot Maven 插件 -->
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

加载 Maven 更新

4、创建主应用类

将 Main.java 重构为 WyInfoSysServerApplication.java（主要是为了命名规范：项目名称 + Application 作为主应用的类名）

代码修改为：

package com.weiyu;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class WyInfoSysServerApplication {
    public static void main(String[] args) {
        SpringApplication.run(WyInfoSysServerApplication.class, args);
    }
}

五、运行 Spring Boot 3 项目（后端）

右键点击 WyInfoSysServerApplication 类，点击【运行‘WyInfoSysServerApplication.main()'】

项目正常启动

六、运行 Vue 3 项目（前端）

 直接运行项目：

npm run dev

运行报错，提示【在用的 node 版本】与【项目要求的 node 版本】不一致，按提示升级至 v20.19.5（LTS）

查看 node 和 npm 的版本：

重新打开 VS Code，直接打开项目目录 D:\MyCode\wyinofsys-base\wyinfosys-client

打开终端（相当于打开cmd）

运行项目

npm run dev

打开浏览器，访问项目

七、前后端功能开发

1、前端功能开发

1.1、修改 App.vue，搭建页面数据视图模型

<script setup lang="ts">
import { ref } from "vue";

const msg = ref("");
</script>

<template>
  <h1>You did it!</h1>
  <p>
    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
    documentation
  </p>
  <button class="btn" @click="">点击发送（由 Vue 3 发送请求到 Spring Boot 3）</button>
  <div class="div">接收到后端的响应数据:{{ msg }}</div>
</template>

<style scoped>
.div,
.btn {
  margin: 30px;
}
</style>

1.2、修改 Vite 配置文件 vite.config.ts，增加服务配置解决跨域问题

跨域问题（CORS）：这是最常见的问题，浏览器会阻止前端向不同源（端口、协议或域名不同）的后端发送请求。

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueDevTools from "vite-plugin-vue-devtools";

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue(), vueDevTools()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  // 服务配置
  server: {
    // 代理设置
    proxy: {
      // 获取路径中包含有 /api 的请求
      "/api": {
        // 后台服务所在的源
        target: "http://localhost:8080",
        // 修改源
        changeOrigin: true,
        // 将 api 替换为 ''，如：api/test 替换为 /test，最终代理访问的 URL 为 http://localhost:8080/test
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});

1.3、修改 App.vue，使用浏览器原生的 fetch API，开发发送请求功能

<script setup lang="ts">
import { ref } from "vue";

const msg = ref("");

// 发送请求
const sendRequest = () => {
  // 使用浏览器原生的 fetch API，发起 GET 请求
  fetch("api/test")
    .then((response) => response.text())
    .then((data) => (msg.value = data));
};
</script>

<template>
  <h1>You did it!</h1>
  <p>
    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
    documentation
  </p>
  <button class="btn" @click="sendRequest">点击发送（由 Vue 3 发送请求到 Spring Boot 3）</button>
  <div class="div">接收到后端的响应数据:{{ msg }}</div>
</template>

<style scoped>
.div,
.btn {
  margin: 30px;
}
</style>

测试效果

因为这时后端还没有实现接收请求的功能，所以报错 404。

2、后端功能开发

增加 TestController.java，实现接收请求返回响应

package com.weiyu.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import static java.lang.Thread.sleep;

@RestController
public class TestController {
    @GetMapping("/test")
    public String test() throws InterruptedException {
        System.out.println("接收到客户端发来的 /api/test 请求，等待 10 秒后，返回响应");
        sleep(10000);
        return "~_~服务器接收到客户端发来的 /api/test 请求，这是响应数据~_~";
    }
}

八、前后端功能联调

1、前端发送请求

2、后端接收请求，进行业务处理（等待 10 秒），返回响应

3、前端接收响应，展示数据

九、构建 Vue 3 项目（前端）

打开终端

如果项目正在运行，Ctrl + C，选 y， 终止项目

构建项目

npm run build

查看项目根目录下的构建产出物 dist

---

十、构建 Spring Boot 3 项目（后端）

打包 jar

查看构建产出物 wyinfosys-server-1.0-SNAPSHOT.jar

---

十一、应用部署

1、部署前端应用

1.1、下载 Nginx

官网下载：https://nginx.org/en/download.html

解压安装，重命名目录，后面追加项目标识，如：nginx-1.28.0-wyinofsys-base

1.2、设置代理

修改 /conf/nginx.conf

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }

        # 设置代理
        # 处理跨域问题，nginx 用的是 80 端口，tomcat 用的是 8080 端口，这就存在跨域的情况
        # 将请求路径中包含有 /api/ 的，将其前面和其内容替换为 http://localhost:8080/
        # 比如：http://localhost/api/test
        # 替换：http://localhost:8080/test
        location /api/ {
		    proxy_pass http://localhost:8080/;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

1.3、部署前端应用，将 dist 目录的内容拷贝到 Nginx 根目录的 html 目录下

1.4、退出前端开发环境

关闭 VS Code

1.5、启动 Nginx

双击 nginx.exe

2、部署后端应用

2.1、退出后端开发环境

关闭 IDEA

2.2、运行 jar 包

打开 jar 包所在目录

在当前目录打开 cmd

输入命令

java -jar wyinfosys-server-1.0-SNAPSHOT.jar

回车运行 wyinfosys-server-1.0-SNAPSHOT.jar

十二、应用效果

访问 http://localhost/，注意这里已经是生产环境了，端口不是开发环境的 5173，而是默认端口 80

十三、源代码管理

1、新建远程仓库（使用国内 Gitee 代码托管平台）

登录 Gitee 官网：https://gitee.com/

点击右上角 + 号，选择【新建仓库】

复制这个项目地址，后面需要用到。

2、安装 Git

官网下载：https://git-scm.com/downloads

确保环境变量 Path 中有指向 ***\Git\cmd 的配置信息：如：D:\Develop\Git\cmd

查看 git 的版本

3、配置 Git 用户信息

打开命令行，设置你的用户名和邮箱（请替换成你的Gitee用户名和邮箱）：

git config --global user.name "你的Gitee用户名"
git config --global user.email "你的Gitee邮箱"

4、代码托管

4.1、使用 VS Code 图形化界面操作

4.1.1、初始化仓库

使用 VS Code 打开项目根目录  D:\MyCode\wyinofsys-base

初始化仓库

在项目根目录下，生成 .git 本地仓库目录

4.1.2、提交代码到本地仓库

暂存更改

提交

4.1.3、添加远程仓库

输入远程仓库的地址（上面新建远程仓库时有提供）：****/wyinfosysBase.git

推送，将本地仓库推送到远程仓库，使得本地仓库与远程仓库同步

查看远程仓库的情况

4.2、使用终端命令行操作

前置处理：

1、删除本地仓库，删除 D:\MyCode\wyinofsys-base 目录下的 .git 目录

2、清空远程仓库

4.2.1、初始化仓库

打开终端

打开项目根目录，初始化仓库

cd D:\MyCode\wyinofsys-base
git init

4.2.2、提交代码到本地仓库

git add .
git commit -m "feat init"

4.2.3、添加远程仓库

前置处理：

分支名称一致性：从 2020 年下旬开始，GitHub 等许多平台将默认分支从 master 更改为 main。

先查看本地当前分支

git branch

master 是 Git 的旧默认分支名

将本地当前分支重命名为 main

git branch -M main

添加远程仓库

git remote add origin https://gitee.com/你的路径/wyinfosysBase.git
git push -u origin "main"

查看远程仓库的情况：

5、开发代码

5.1、开发前端代码

使用 VS Code 打开前端项目目录 D:\MyCode\wyinofsys-base\wyinfosys-client

这样确保只显示前端代码，屏蔽后端代码以及其他目录的内容，专注开发前端代码

修改有显示标识

暂存更改

提交到本地仓库

推送到远程仓库

查看远程仓库的情况：

5.2、开发后端代码

使用 IDEA 打开后端项目目录 D:\MyCode\wyinofsys-base\wyinfosys-server

这样确保只显示后端代码，屏蔽前端代码以及其他目录的内容，专注开发后端代码

修改有显示标识

提交并推送，提交到本地仓库，并且推断到远程仓库

查看远程仓库的情况：

十四、下载项目

1、下载项目

本地还没有这个项目，则需要从代码托管平台下载项目

获取项目地址

新建项目目录，D:\MyCode\MyProject

在当前目录打开终端

执行项目下载命令

查看项目目录情况

2、调试开发环境

2.1、调试前端开发环境

使用 VS Code

打开前端项目目录 D:\MyCode\MyProject\wyinfosys-base\wyinfosys-client

查看终端（Alt + F12），安装项目

npm install

启动项目

npm run dev

2.2、调试后端开发环境

打开 IDEA

打开后端项目目录 D:\MyCode\MyProject\wyinfosys-base\wyinfosys-server

重新加载依赖

运行主应用程序

2.3、前后端联调

打开浏览器，访问 http://localhost:5173/

3、打开存储库

4、继续全栈