【Web商城系统开发Spring Boot + Vue】之环境搭建

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 一、介绍
• 二、环境搭建
• • 2.1 Java JDK安装与配置
  • 2.2 MySQL 8.0安装与配置
  • 2.3 Node.js安装与配置
  • 2.4 Maven安装与配置
• 三、环境校验

一、介绍

近期接触了一个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 访问 MySQL 8.0下载页面 ，根据自己的系统选择合适的 Windows 版本进行下载 直接下载第一个

执行安装包 选择自定义安装，Custom：用户自定义安装

选择安装组件 如图选择安装能够满足MySQL开发的基本组件。 选择之后，继续下一步即可。

配置MySQL服务 配置类型和网络

配置帐号密码 MySQL安装完成之后，需要给root用户设置密码，这里密码设置完成之后，务必牢记，后续使用root用户访问MySQL服务时必须使用该密码。 看个人需求，是否需要设置为开机自启动 往后默认点击即可

配置Path变量
4. 在"系统变量"中找到Path变量，点击"编辑"
5. 点击"新建"，添加以下路径：

7. 验证MySQL安装

# CMD输入指令，检查Java版本
mysql –version
# 连接MySQL服务器
mysql -u root -p
# 输入你设置的密码（如123456）

输出以下mysql版本后，此时mysql环境配置成功

2.3 Node.js安装与配置

下载Node.js 访问 Node.js下载页面 ，根据自己的系统选择合适的 Windows 版本进行下载

安装程序 双击安装包，点【Next】按钮，此处可根据个人需求修改安装路径，修改完毕后继续点击【Next】按钮 可根据自身需求进行，此处我选择默认安装 不选中，直接点击【Next】按钮，之后直接点击install，进行安装 3.环境配置 找到安装目录，新建两个文件夹【node_global】和【node_cache】 创建完毕后，使用管理员身份打开cmd命令窗口，输入

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，输入以下信息，校验下是否能够全部输出，此时输出正常的话，环境基本配置完毕，可进行工程编译，打包等操作。

送你们一条美丽的–分割线–

🌷🌷🍀🍀🌾🌾🍓🍓🍂🍂🙋🙋🐸🐸🙋🙋💖💖🍌🍌🔔🔔🍉🍉🍭🍭🍋🍋🍇🍇🏆🏆📸📸⛵⛵⭐⭐🍎🍎👍👍🌷🌷