一、环境配置

Ⅰ.环境下载列表(基于 Windows X64平台)

安装内容 安装版本 安装链接
Java JDK JDK 25 点击即可自动下载
Maven Maven 3.9.11 及以上 点击即可自动下载
NodeJS NodeJs 24.10.0 及以上 点击即可自动下载
Git Git 2.51.1 及以上 点击即可自动下载
IDEA(后端编程IDE) IDEA 2024.2.4 及以上(使用 终极版本) 官方下载链接 ; 如果想长期使用而不是白嫖30天,点击这里下载破解资源(附带交程)
Vscode(前端编程IDE) VsCode 1.105.0 及以上 点击即可自动下载
MySQL MySQL 8.0.44 及以上 点击即可自动下载
Navicat Navicat Premium Lite 17 及以上 点击即可自动下载

Ⅱ.环境安装保姆级教程

安装路径统一安装在非系统盘D盘,如果电脑没有分区只有系统盘C盘,则根据下方教程将安装根目录 D:\更改为 C:\

(一)、安装流程

1.Java JDK 安装
  • 双击打开下载好的 jdk-25_windows-x64_bin.exe 安装包执行文件(见下图)

  • 安装程序页面 点击下一步(见下图)

    image-20251022161350343

  • 点击 更改,修改安装路径(见下图)

    image-20251022161450307

  • 在选择安装路径选择非系统盘 D:\,然后创建一个新的文件夹 WorkEnv (注意大小写规范!)并双击选择该文件夹后再创建一个新的文件夹 Java 并选择

image-20251022161713060

image-20251022162002026

image-20251022163042857

image-20251022163110429

  • 确保选择的安装路径是 D:\WorkEnv\Java\ 后点击 确定最后点击 下一步进行安装,安装完成界面参考下图

image-20251022162549493

  • 最后打开文件资源管理器,查看路径 D:\WorkEnv\Java下是否有如下图片展示的文件结构,如果有则说明安装成功

image-20251022163416321

2.Maven 安装
  • 找到并解压名为 maven-mvnd-1.0.3-windows-amd64.zip 的压缩包,解压路径为 D:\WorkEnv\Maven

image-20251022163920905

  • 解压后在路径 D:\WorkEnv\Maven\maven-mvnd-1.0.3-windows-amd64\maven-mvnd-1.0.3-windows-amd64中的文件结构如果与下图一致,则安装成功

    image-20251022164445421

3.Node Js 安装
  • 找到并打开Git安装包(如下图)

  • 点击 Next

    image-20251022164904872

  • 接受协议并且点击 Next

    image-20251022165009060

  • 点击 Change修改安装路径,在 D:\WorkEnv\路径创建新的文件夹 NodeJs并双击该文件夹选择为安装路径,确保安装的路径为 D:\WorkEnv\NodeJs 后点击 OK后在安装页面再次确定安装路径后点击 Next开始安装

    image-20251022165146693

    image-20251022165348246

    image-20251022165546969

  • 点击 Next

    image-20251022165657564

  • 再次点击 Next

    image-20251022165734565

  • 点击 Install

    image-20251022165817448

  • 点击 Finish 完成安装

    image-20251022165916472

  • 文件资源管理器打开路径 D:\WorkEnv\NodeJs检查文件结构是否与下图一致,若一致则完成安装流程

    image-20251022170102879

4.Git 安装
  • 找到 Git-2.51.1-64-bit.exe安装包并双击打开

image-20251022170141769

  • 点击 Install,默认路径安装即可(我的默认安装为 D:\Git

image-20251022170255998

image-20251022170402332

  • 取消 View Release Notes勾选,并点击 Finish完成安装

    image-20251022170701703

5.IDEA 破解版安装&激活

已经安装IDEA Ultimate并且订阅的同学可以跳过此步骤

  • 找到 IDEA-24.0-破解版.zip压缩包并解压

    image-20251022172020162

  • 确保解压文件夹有如下结构

image-20251022172146696

双击 ideaIU-2024.2.4.exe执行IDEA安装流程,并点击下一步image-20251022172257458

  • 点击 浏览 选择 磁盘D后点击 确定,安装软件会在 磁盘D自动创建目录如 D:\IntelliJ IDEA 2024.2.4,确定安装路径正确后点击 下一步

    image-20251022172452917

    image-20251022172638672

    image-20251022172724657

  • 勾选如图选项并点击下一步

    image-20251022172955876

  • 点击 安装 并等待安装完成

    image-20251022173034950

  • 安装结束后选择 否,我会在之后重新启动并点击 完成

    image-20251022173516541

  • 在桌面找寻IDEA快捷方式并双击打开 IDEA

image-20251022173808122

  • 点击 下一个

    image-20251022173929506

  • 同意协议并且点击 继续

    image-20251022175400574

  • 点击 不发送

image-20251022175450663

  • 出现下方页面后关闭 IDEA 并且在弹出窗口选择 退出

    image-20251022175620390

  • 打开刚刚打开的文件资源管理器,并进入文件夹 JetBrains全家桶激活(附带备用激活)

    image-20251022175805517

  • 进入文件夹 win2020-2024(一键激活)

    image-20251022175923468

  • 再次确定 IDEA是否已经被关闭,如果确定被关闭双击执行文件夹下的 IDEA激活.vbs

    image-20251022180127349

  • 在弹出的 “成功激活”页面点击确定后打开 IDEA软件

image-20251022180245233

  • 同上方步骤一样,再次按步骤分别点击 下一个确认继续 后会出现下方界面

    image-20251022180529063

  • 点击左下角的齿轮按钮打开软件设置并选择 管理许可证..

    image-20251022180659130

  • 如果出现下方页面则说明安装并激活成功!

    image-20251022180742228

说明:Ultimate 版本 IDEA 在创建项目后端时会更方便快捷

6.VsCode 安装&配置
  • 双击 VSCodeUserSetup-x64-1.105.1.exe 打开安装程序

    image-20251022181345420

  • 同意协议并点击 下一步

    image-20251022181503113

  • 点击 浏览 并在路径选择页面点击 本地磁盘 D 后会出现安装路径 D:\Microsoft VS Code并点击 确定

image-20251022181611895

  • 再次确定安装路径为 D:\Microsoft VS Code 后点击 下一步

    image-20251022181721012

  • 点击 下一步

    image-20251022181818382

  • 按照图片勾选选项后继续点击 下一步

    image-20251022181926238

  • 点击 安装 开始执行安装

    image-20251022181952648

  • 点击 完成 完成 VsCode 的安装

image-20251022182113505

  • 在打开的 VsCode页面中点击左侧扩展按钮,准备下载汉化插件以及JAVA插件

    image-20251022182433361

  • 搜索安装如下插件(弹出的页面选择 Trust Publisher & Install

    • 汉化包

      image-20251022182515060

    • JAVA JDK

      image-20251022182622573

      image-20251022182603286

      安装上述两个扩展会自动安装其他所需要的扩展(见下图)

      image-20251022182923181

    • Spring-boot

      image-20251022183000331

    • Vue

      image-20251022183105291

  • 以下为推荐的代码扩展安装,可以帮助你更好的编程(可选)

    • indent-rainbow

      查看代码缩进非常有用!

      image-20251022183416692

    • Rainbow Brackets

      在编程时能够好的避免或解决 ‘{}’ 数量不匹配带来的问题

      image-20251022183527825

7.MySql安装
  • 找到并打开安装程序 mysql-installer-community-8.0.44.0.msi后进入 MySQL Installer 页面选择 Custom并点击 Next

    image-20251022210405856

    image-20251022211106578

  • 通过在项目栏里的 选中 MySQL Server 8.0.44 - X64后点击 Next

    image-20251022211325621

    image-20251022211610793

  • Download部分点击 Execute进行数据库的下载,下载完成后点击 Next进入 Installation页面

    image-20251022211703142

    image-20251022212005389

  • Installation页面点击 Execute进行数据库的安装,安装完成后点击 Next进入 Production Configuration页面后再次点击 Next进入 Installation Complete页面的配置页面

    image-20251022212211882

  • 勾选 Show Advanced ..后点击 Next进入下一个页面继续点击 Next进入 Accounts and Roles

    image-20251022212438321

    image-20251022212534934

  • 输入root用户密码(建议使用123456方便记忆)并点击 Next进入下一个页面

    image-20251022212657042

    image-20251022212720622

    image-20251022212822874

  • 修改服务名称为 MySQL后继续点击 Next进入下一个页面选择 No .....后继续点击 Next进入下一个页面

    image-20251022212935651

  • 继续 Next

    image-20251022213026898

  • 继续 Next

    image-20251022213051402

  • 继续 NExt

    image-20251022213115574

  • 点击 Execute进行最后的配置后点击 Finish完成最后的安装

    image-20251022213219525

8.Navicat安装
  • 点击并打开安装包 navicat17_premium_lite_cs_x64.exe

    image-20251022213341117

  • 点击 下一步后选择 我同意后继续点击下一步

    image-20251022213443907

    image-20251022213452916

  • 点击 浏览选择安装地址为 D:\Navicat Premium Lite 17点击 下一步

    image-20251022213518633

    image-20251022213609206

  • 继续点击 下一步后点击 安装

    image-20251022213637498

    image-20251022213647046

  • 安装成功后打开 Navicat Premium Lite 17,注册并登录后进入软件

    image-20251022213808316

  • 一直点击下一步跳过 新功能通知,选择 不共享

    image-20251022213918611

  • 进入软件后点击左上角的 连接

    image-20251022214008360

    image-20251022214031249

  • 选择 MySQL点击 下一步后输入刚刚安装mysql的密码(123456或者是你另外定下来的)

    image-20251022214109392

  • 点击左下角 测试连接,如果下方提示连接成功,则点击 确定完成连接

    image-20251022214257786

  • 双击左侧的 MySQL即可连接数据库

    image-20251022214432818

(二)、系统环境变量的设置与安装验证

1.系统环境变量设置
  • 点击 Win 键后输入 查看高级系统设置并打开 系统属性页面

    image-20251022183802799

    image-20251022184042256

  • 点击 环境变量 并进入下方页面

    image-20251022184148073

  • 点击 系统中的 新建,并在 新建系统变量页面填写如下 变量名变量值后点击确定

    image-20251022184632207

  • 系统变量 中下拉并寻找 Path 这一栏并选中双击打开 编辑环境变量 页面

    image-20251022184723037

    image-20251022184822837

  • 新建以下变量

    • %JAVA_PATH%\bin

      image-20251022184938091

    • D:\WorkEnv\Maven\maven-mvnd-1.0.3-windows-amd64\maven-mvnd-1.0.3-windows-amd64\bin

      image-20251022185100841

    • D:\WorkEnv\Maven\maven-mvnd-1.0.3-windows-amd64\maven-mvnd-1.0.3-windows-amd64\mvn\bin

      image-20251022190120861

  • 新建好变量后点击 确定

    image-20251022190146185

  • 环境变量 页面再次点击 确定

    image-20251022185243719

  • 系统属性页面再次点击 确定 按钮

    image-20251022185315198

  • 系统环境变量配置到这里就结束了

2.安装环境的验证
  • 键盘键入 Win + I 组合键,在弹出的 运行 窗口输入 cmd并确定后打开命令提示符窗口

    image-20251022185548389

    image-20251022185627971

  • 开始按照以下顺序进行安装的验证

    • 输入 java --version,如果出现下方类似版本号则JAVA SDK的安装及环境变量配置成功!

      image-20251022185852085

    • 输入 mvn -v,如果出现下方类似版本号则Maven的安装及环境变量配置成功

      image-20251022190239516

    • 输入 node -v,如果出现下方类似的版本号则NodeJs的安装及环境变量配置成功

      image-20251022190504205

    • 输入 git -v,如果出现下方类似的版本号则Git的安装及环境变量配置成功

      image-20251022190608733

二、项目搭建

Ⅰ.使用IDEA创建项目后端环境

  • 打开 IDEA并且点击 新建项目

    image-20251022191211277

  • 新建项目 页面在左侧选择生成器 Spring Boot并且按照下图填写内容

    image-20251022191544762

  • 点击 JDK 选择 从磁盘添加JDK,并输入路径 D:\WorkEnv\Java并点击 确认

    image-20251022191645272

    image-20251022191905415

  • Java选择 25

    image-20251022192012555

  • 在确定你的项目名称以及Java JDK配置和管理包选择Maven之后点击 下一步

    image-20251022192243508

  • 新建项目页面勾选以下5个选项并点击 创建后耐心等待项目环境创建

    image-20251022192602909

    image-20251022192636432

  • 当右下角的下载任务完成并且出现以下文件结构则说明项目后端环境创建成功

    image-20251022192915274

  • 打开终端并输入 mvn spring-boot:run,执行命令后如果终端内容末尾有类似于日志记录的内容以及则代表项目后端成功搭建并且已经启动

    image-20251022194341500

后端项目启动命令: mvn spring-boot:run

Ⅱ.使用VsCode创建项目前端环境(搭建前端VUE环境教程)

  • 按下 Win键并输入 git bash后选择 以管理员身份运行

    image-20251022195618046

  • 运行以下命令进行Vue的安装

    • 输入并运行 npm install vue -g等待安装

      image-20251022195815963

      image-20251022195952563

    • 输入并运行 npm install @vue/cli -g

      image-20251022200823471

      image-20251022201753162

    • 输入并运行 npm install vue-router -g

      image-20251022200452245

      image-20251022200526607

  • 打开 VsCode并且打开刚刚创建的后端项目文件夹

image-20251022194717223

  • 键盘键入 Ctrl + J组合键打开终端,点击图片中展示的 然后选择 Git Bash并点击打开如下终端页面

image-20251022195021960

image-20251022195057038

image-20251022195144656

  • 输入并运行 vue create frontend

image-20251022201954789

  • 输入 y使用官方镜像源

    image-20251022202139933

  • 键入 Enter选择默认的 Vue3并耐心等待vue初始化

    image-20251022202208417

    image-20251022202738794

    image-20251022203229370

  • 输入并运行 cd frontend && npm run serve并耐心等待项目前端启动

    image-20251022203354440

  • 出现下方内容则说明前端成功启动

    image-20251022203539162

Ⅲ.前后端启动命令

  • 前端启动命令

    1
    cd frontend && npm run serve
  • 后端启动命令

    1
    mvn spring-boot:run