准备工作前端开发工具WebStorm前端运行环境Node.js、npm后端开发工具IntelliJ IDEA CommunityJavaJDK 17Java 构建工具Maven数据库MySQL Community版本环境WebStorm 2021IntelliJ IDEA Community 2025.1.1.1Java17.0.19Maven3.9.16Nodev16.18.0npm8.19.2项目技术栈后端Spring Boot 3.3.5前端Vue 3.5.13TypeScript5.7.2Vite4.5.5vitejs/plugin-vue4.6.2注意 因为我的node是16 原本vite要配置成6的 现在要兼容node 配置成了4Vite4.5.5下载注意我是下载到D盘安装到E盘下载 JDK 17 ZIP官方来源可以用微软 OpenJDKWindows zip 版即可Download the Microsoft Build of OpenJDK | Microsoft Learn你找OpenJDK 17Windowsx64zip下载后放到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下载sqlhttps://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 access6.继续跟着如下图所示直到出现finish 安装完成安装完成配置ieda连sql1.application.yml这个你的root密码 就是刚刚要你记住的密码server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/fullstack_demo?useSSLfalseserverTimezoneAsia/ShanghaicharacterEncodingutf8 username: root password: 你的root密码 driver-class-name: com.mysql.cj.jdbc.Driver app: cors: allowed-origin: http://localhost:51732.pom.xml 已加入 MySQL 驱动 mysql-connector-jproject xmlnshttp://maven.apache.org/POM/4.0.0 xmlns:xsihttp://www.w3.org/2001/XMLSchema-instance xsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd modelVersion4.0.0/modelVersion parent groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-parent/artifactId version3.3.5/version relativePath/ /parent groupIdcom.example/groupId artifactIdfullstack-demo/artifactId version0.0.1-SNAPSHOT/version namefullstack-demo/name descriptionVue3 TypeScript Java full stack demo/description properties java.version17/java.version /properties dependencies dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-validation/artifactId /dependency dependency groupIdcom.mysql/groupId artifactIdmysql-connector-j/artifactId scoperuntime/scope /dependency dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-test/artifactId scopetest/scope /dependency /dependencies build plugins plugin groupIdorg.springframework.boot/groupId artifactIdspring-boot-maven-plugin/artifactId /plugin /plugins /build /project安装 MySQL 图形管理工具MySQL Workbench注如果你喜欢使用命令 则可选择不下载这个第一步打开 MySQL Installer这样找点 Windows 开始菜单搜MySQL Installer打开MySQL Installer - Community第二步看有没有 Workbench打开安装器后看产品列表里有没有MySQL Workbench如果没有就点 Add在产品列表里找到ApplicationsMySQL Workbench加进去点 Next点 Execute等它安装完成第三步下载完成 进行安装 点击next再点Execute第四步安装完成点击next 出现 finish第五步可直接点击finish 打开MySQL Workbench打开方式点击finish 会直接打开MySQL Workbench菜单 搜索打开 MySQL Workbench第六步新建链接 配置数据库图形管理工具已经新建好链接了 不需要新建 直接点击左下角卡片点击 Local instance MySQL80输入你安装 MySQL 时设置的 root 密码 若记得直接填若不记得在 application.yml 里面找一下 上面有配置输入密码后就是此页面注创建数据库 等后面 实战项目 这里先配置好即可下载 IntelliJ IDEAhttps://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?pwdxjsh此压缩包 可简单运行后面有实战项目 新建表前后端运行等前端页面项目负责页面、按钮、表单、列表、路由、请求接口技术栈Vue3 TypeScript Vite前端目录详细解释1.package.json前端项目依赖和命令npm run dev、npm run build 都从这里来2.vite.config.tsVite 配置里面配了开发端口 5173也配了代理/api - http://localhost:8080这就是前后端联调能通的关键之一3.index.html前端入口 HTML4.src/main.tsVue 应用启动入口相当于把整个前端挂载到页面上5.src/App.vue当前主页面组件你现在看到的那个页面就是它渲染的6.src/style.css当前页面样式背景、卡片、按钮、排版都在这里后端接口项目负责接口、业务逻辑、返回数据、后面还会负责数据库技术栈Spring Boot Maven Java后端目录详细解释1.pom.xmlMaven 项目核心配置管 Java 版本、Spring Boot 版本、依赖、打包方式2.src/main/resources/application.ymlSpring Boot 配置文件现在主要配置端口 8080后面接数据库也会写这里3.FullstackDemoApplication.java后端启动入口SpringApplication.run(...) 就是启动整个后端4.HealthController.java接口控制器提供 GET /api/health前端点击按钮时就是调这里5.ApiResponse.java统一返回格式把接口统一包装成codemessagedata6.README.md后端的简单运行说明后端这套代码是怎么工作的前端请求GET /api/healthSpring Boot 找到 HealthController.java执行 health() 方法方法里构造status UPservice fullstack-demo再通过 ApiResponse.java 包装成统一 JSON返回给前端你现在先记住 4 层就够了Application启动层Controller接口层Service业务层后面会加Mapper/Repository数据库层后面会加启动前端前端启动cd /d F:\fullstack-demo\frontendnpm run dev成功标志Local: http://127.0.0.1:5173/后端后端启动cd /d F:\fullstack-demo\backendmvn spring-boot:run成功标志Tomcat started on port 8080Started FullstackDemoApplication浏览器访问前端页面http://127.0.0.1:5173后端接口http://127.0.0.1:8080/api/health前后端联调需不需要域名不需要。本地联调用前端5173后端8080前端通过 Vite 代理把 /api 转发给后端域名通常是上线后才需要而且一般按年付费。