【Web商城系统开发Spring Boot + Vue】之环境搭建
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
一、介绍
近期接触了一个Web商城系统开发的项目，作为项目学习案例分享给大家。这套系统采用了当前主流的前后端分离架构：前端基于Vue 3 + Element Plus，后端使用Spring Boot 3 + MyBatis，技术栈——Java 21、MySQL 8.0、Vite构建工具。通过本项目实践，学习者可全面提升Web应用开发能力，掌握电商类的完整开发流程与关键技术。
本博客主要讲解相关环境配置，工程源码梳理完成后，会在另一篇博客中进行讲解。
🛒 项目技术栈概览
- 项目类型：线上商城系统（包含用户端购物、管理后台、订单处理等核心功能）
- 前端技术：Vue 3 + Element Plus + Vite
- 后端技术：Spring Boot 3 + MyBatis
- 数据库：MySQL 8.0
- 构建工具：Maven + npm
- 开发环境：Windows 11
🔧 各组件在项目中的作用：
✅ Java JDK 21 • 后端服务的"运行引擎" • Spring Boot框架的基础环境 • 编译和执行Java代码 ✅ MySQL 8.0 • 数据存储-存储用户、商品、订单等所有数据 • 提供高效的查询性能 ✅ Node.js 16+ • 前端项目的"运行环境" • 自带npm包管理器 • 支持Vite快速构建 ✅ Maven 3.6+ • Java项目的"管家" • 自动管理第三方依赖库 • 一键编译、测试、打包 • 规范项目结构 二、环境搭建
2.1 Java JDK安装与配置
- 自定义安装
下载JDK
访问 Oracle 官方 JDK下载页面 或 OpenJDK下载页面 ，根据自己的系统选择合适的 Windows 版本进行下载
默认安装路径：C:\Program Files\Java\jdk-21 建议保持默认，或者选择D:\Java\jdk-21这样的非系统盘路径 记住这个路径，后面配置环境变量要用！ - 配置环境变量
配置JAVA_HOME变量 1. 右键点击"此电脑" → 选择"属性" 2. 点击"高级系统设置" → 点击"环境变量" 3. 在"系统变量"区域点击"新建" 配置Path变量 4. 在"系统变量"中找到Path变量，点击"编辑" 5. 点击"新建"，添加以下路径： 
4. 验证Java安装
# CMD输入指令，检查Java版本java-version输出以下java版本后，此时java环境配置成功
2.2 MySQL 8.0安装与配置
- 配置环境变量
配置帐号密码
MySQL安装完成之后，需要给root用户设置密码，这里密码设置完成之后，务必牢记，后续使用root用户访问MySQL服务时必须使用该密码。
看个人需求，是否需要设置为开机自启动
往后默认点击即可
配置MySQL服务
配置类型和网络
选择安装组件
如图选择安装能够满足MySQL开发的基本组件。
选择之后，继续下一步即可。
执行安装包
选择自定义安装，Custom：用户自定义安装
下载MySQL
访问 MySQL 8.0下载页面 ，根据自己的系统选择合适的 Windows 版本进行下载
直接下载第一个
配置Path变量 4. 在"系统变量"中找到Path变量，点击"编辑" 5. 点击"新建"，添加以下路径： 
7. 验证MySQL安装
# CMD输入指令，检查Java版本 mysql --version# 连接MySQL服务器 mysql -u root -p# 输入你设置的密码（如123456）输出以下mysql版本后，此时mysql环境配置成功
2.3 Node.js安装与配置
安装程序
双击安装包，点【Next】按钮，此处可根据个人需求修改安装路径，修改完毕后继续点击【Next】按钮
可根据自身需求进行，此处我选择默认安装
不选中，直接点击【Next】按钮，之后直接点击install，进行安装
3.环境配置
找到安装目录，新建两个文件夹【node_global】和【node_cache】
创建完毕后，使用管理员身份打开cmd命令窗口，输入
下载Node.js
访问 Node.js下载页面 ，根据自己的系统选择合适的 Windows 版本进行下载
npm config set prefix "D:\Program\nodejs\node_global"npm config set cache "D:\Program\nodejs\node_cache" ```text 配置NODE_PATH变量 1. 右键点击"此电脑" → 选择"属性"2. 点击"高级系统设置" → 点击"环境变量"3. 在"系统变量"区域点击"新建" 配置Path变量 4. 在"系统变量"中找到Path变量，点击"编辑"5. 点击"新建"，添加以下路径： 
4.验证Node.js安装
# CMD输入指令node-v输出以下node版本后，此时node 环境配置成功
2.4 Maven安装与配置
- 配置环境变量
解压
下载完成后是压缩包的形式，解压到你指定的目录下
下载Maven
访问 Maven下载页面 ，根据自己的系统选择合适的 Windows 版本进行下载
配置Maven变量 4. 右键点击"此电脑" → 选择"属性" 5. 点击"高级系统设置" → 点击"环境变量" 6. 在"系统变量"区域点击"新建" 配置Path变量 7. 在"系统变量"中找到Path变量，点击"编辑" 8. 点击"新建"，添加以下路径： 
3. 验证Maven安装
# CMD输入指令 mvn -v输出以下mvn版本后，此时mvn 环境配置成功
三、环境校验
打开cmd，输入以下信息，校验下是否能够全部输出，此时输出正常的话，环境基本配置完毕，可进行工程编译，打包等操作。
送你们一条美丽的--分割线--
🌷🌷🍀🍀🌾🌾🍓🍓🍂🍂🙋🙋🐸🐸🙋🙋💖💖🍌🍌🔔🔔🍉🍉🍭🍭🍋🍋🍇🍇🏆🏆📸📸⛵⛵⭐⭐🍎🍎👍👍🌷🌷
