准备工作

前端：

• 开发工具：WebStorm
• 前端运行环境：Node.js、npm

后端

• 开发工具：IntelliJ IDEA Community
• Java：JDK 17
• Java 构建工具：Maven
• 数据库MySQL Community

版本：

环境：

• WebStorm 2021
• IntelliJ IDEA Community 2025.1.1.1
• Java：17.0.19
• Maven：3.9.16
• Node：v16.18.0
• npm：8.19.2

项目技术栈：

• 后端：Spring Boot 3.3.5
• 前端：Vue 3.5.13
• TypeScript：5.7.2
• Vite：4.5.5
• @vitejs/plugin-vue：4.6.2

注意 因为我的node是16 原本vite要配置成6的 现在要兼容node 配置成了4：Vite：4.5.5

下载：注意我是下载到D盘，安装到E盘

下载 JDK 17 ZIP

官方来源可以用微软 OpenJDK，Windows zip 版即可：

Download the Microsoft Build of OpenJDK | Microsoft Learn

你找：

• OpenJDK 17
• Windows
• x64
• zip

下载后放到

D:\install-cache

文件名类似：

microsoft-jdk-17.x.x-windows-x64.zip

 下载 Maven ZIP

官方 Apache 页面：

Download Apache Maven – Maven

下载：

apache-maven-3.9.16-bin.zi

放到：

D:\install-cache

下载sql

https://dev.mysql.com/downloads/windows/

下载：

mysql-installer-web-community-8.0.46.0.msi

安装：

1.选择Server only 点击下一步

2. 点击 Execute 等待下载完成  

3.下载完成 出现 绿色对号 点击next 下一步

4. 点击 Execute 等待下载完成  

5. 注意取消勾选 Open Windows Firewall ports for network access

6.继续跟着如下图所示，直到出现finish 安装完成

安装完成

配置ieda连sql

1.application.yml

这个你的root密码 就是刚刚要你记住的密码

server:
  port: 8080

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/fullstack_demo?useSSL=false&serverTimezone=Asia/Shanghai&characterEncoding=utf8
    username: root
    password: 你的root密码
    driver-class-name: com.mysql.cj.jdbc.Driver

app:
  cors:
    allowed-origin: http://localhost:5173

2.pom.xml 已加入 MySQL 驱动 mysql-connector-j

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

  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>3.3.5</version>
    <relativePath/>
  </parent>

  <groupId>com.example</groupId>
  <artifactId>fullstack-demo</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <name>fullstack-demo</name>
  <description>Vue3 + TypeScript + Java full stack demo</description>

  <properties>
    <java.version>17</java.version>
  </properties>

  <dependencies>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-validation</artifactId>
    </dependency>
    <dependency>
      <groupId>com.mysql</groupId>
      <artifactId>mysql-connector-j</artifactId>
      <scope>runtime</scope>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-test</artifactId>
      <scope>test</scope>
    </dependency>
  </dependencies>

  <build>
    <plugins>
      <plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
      </plugin>
    </plugins>
  </build>
</project>

安装 MySQL 图形管理工具MySQL Workbench

注：如果你喜欢使用命令 则可选择不下载这个

第一步：打开 MySQL Installer

这样找：

1. 点 Windows 开始菜单
2. 搜：MySQL Installer
3. 打开：MySQL Installer - Community
4. 

第二步：看有没有 Workbench

打开安装器后，看产品列表里有没有：

• MySQL Workbench

如果没有，就：

1. 点 Add
2. 在产品列表里找到：
   • Applications
   • MySQL Workbench
3. 加进去
4. 点 Next
5. 点 Execute
6. 等它安装完成

第三步：下载完成 进行安装 点击next，再点Execute

第四步：安装完成，点击next 出现 finish

第五步：可直接点击finish 打开MySQL Workbench

打开方式：

1. 点击finish 会直接打开MySQL Workbench
2. 菜单 搜索打开  MySQL Workbench

第六步：新建链接 配置数据库图形管理工具

已经新建好链接了 不需要新建 直接点击左下角卡片 

• 点击 Local instance MySQL80
• 输入你安装 MySQL 时设置的 root 密码 若记得直接填，若不记得在 application.yml 里面找一下 上面有配置

输入密码后就是此页面：

注：创建数据库 等后面 实战项目 这里先配置好即可

下载 IntelliJ IDEA 

https://www.jetbrains.com/idea/download/other/

• 创建桌面快捷方式：勾上，保留
• 将 "bin" 文件夹添加到 PATH：勾上，保留
• 添加“将文件夹作为项目打开”：建议勾上
• 下面这些文件关联：
  • .java
  • .gradle
  • .groovy
  • .kt
  • .kts
  • .pom

这些都可以先不勾

所以你这一页我建议最终变成：

• 勾：桌面快捷方式
• 勾：加入 PATH
• 勾：将文件夹作为项目打开
• 不勾：下面所有文件关联

 IDEA 配置 JDK

注意IDEA 还没配置 JDK 不能运行：File → Project Structure → Project

目录

项目地址：

https://pan.baidu.com/s/1CYcd2rBozZf1SozxNLEzBg?pwd=xjsh

此压缩包 可简单运行，后面有实战项目 新建表，前后端运行等

前端页面项目

• 负责页面、按钮、表单、列表、路由、请求接口
• 技术栈：Vue3 + TypeScript + Vite

前端目录详细解释

1.package.json

• 前端项目依赖和命令
• npm run dev、npm run build 都从这里来

2.vite.config.ts

• Vite 配置
• 里面配了开发端口 5173
• 也配了代理：/api -> http://localhost:8080
• 这就是前后端联调能通的关键之一

3.index.html

• 前端入口 HTML

4.src/main.ts

• Vue 应用启动入口
• 相当于把整个前端挂载到页面上

5.src/App.vue

• 当前主页面组件
• 你现在看到的那个页面就是它渲染的

6.src/style.css

• 当前页面样式
• 背景、卡片、按钮、排版都在这里

后端接口项目

• 负责接口、业务逻辑、返回数据、后面还会负责数据库
• 技术栈：Spring Boot + Maven + Java

后端目录详细解释

1.pom.xml

• Maven 项目核心配置
• 管 Java 版本、Spring Boot 版本、依赖、打包方式

2.src/main/resources/application.yml

• Spring Boot 配置文件
• 现在主要配置端口 8080
• 后面接数据库也会写这里

3.FullstackDemoApplication.java

• 后端启动入口
• SpringApplication.run(...) 就是启动整个后端

4.HealthController.java

• 接口控制器
• 提供 GET /api/health
• 前端点击按钮时，就是调这里

5.ApiResponse.java

• 统一返回格式
• 把接口统一包装成：
• code
• message
• data

6.README.md

• 后端的简单运行说明

后端这套代码是怎么工作的

1. 前端请求：GET /api/health
2. Spring Boot 找到 HealthController.java
3. 执行 health() 方法
4. 方法里构造：
   • status = UP
   • service = fullstack-demo
5. 再通过 ApiResponse.java 包装成统一 JSON
6. 返回给前端

你现在先记住 4 层就够了

• Application：启动层
• Controller：接口层
• Service：业务层，后面会加
• Mapper/Repository：数据库层，后面会加

启动

前端

前端启动：

cd /d F:\fullstack-demo\frontend
npm run dev

成功标志：

Local: http://127.0.0.1:5173/

后端

后端启动：

cd /d F:\fullstack-demo\backend
mvn spring-boot:run

成功标志：

Tomcat started on port 8080
Started FullstackDemoApplication

浏览器访问：

• 前端页面：http://127.0.0.1:5173
• 后端接口：http://127.0.0.1:8080/api/health

前后端联调需不需要域名

不需要。
本地联调用：

• 前端：5173
• 后端：8080
• 前端通过 Vite 代理把 /api 转发给后端

 域名通常是上线后才需要，而且一般按年付费。