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

优质文章学习记录

— 8 min read
【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安装与配置

  1. 自定义安装

下载JDK
访问 Oracle 官方 JDK下载页面 或 OpenJDK下载页面 ，根据自己的系统选择合适的 Windows 版本进行下载

在这里插入图片描述
默认安装路径：C:\Program Files\Java\jdk-21 建议保持默认，或者选择D:\Java\jdk-21这样的非系统盘路径 记住这个路径，后面配置环境变量要用！
  1. 配置环境变量
配置JAVA_HOME变量 1. 右键点击"此电脑" → 选择"属性" 2. 点击"高级系统设置" → 点击"环境变量" 3. 在"系统变量"区域点击"新建" 配置Path变量 4. 在"系统变量"中找到Path变量，点击"编辑" 5. 点击"新建"，添加以下路径：
在这里插入图片描述


在这里插入图片描述


4. 验证Java安装

# CMD输入指令，检查Java版本java-version

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

在这里插入图片描述

2.2 MySQL 8.0安装与配置

  1. 配置环境变量

配置帐号密码
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安装与配置

  1. 配置环境变量

解压
下载完成后是压缩包的形式，解压到你指定的目录下

在这里插入图片描述

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

在这里插入图片描述
配置Maven变量 4. 右键点击"此电脑" → 选择"属性" 5. 点击"高级系统设置" → 点击"环境变量" 6. 在"系统变量"区域点击"新建" 配置Path变量 7. 在"系统变量"中找到Path变量，点击"编辑" 8. 点击"新建"，添加以下路径：
在这里插入图片描述


在这里插入图片描述


3. 验证Maven安装

# CMD输入指令 mvn -v

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

在这里插入图片描述

三、环境校验

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

在这里插入图片描述

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

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

Read more

前端文本测量成了卡死一切创新的最后瓶颈，pretext实现突破了

前端文本测量成了卡死一切创新的最后瓶颈，pretext实现突破了

亲爱的前端开发者（以及所有关心界面未来的人），我最近把大量精力砸进了一个听起来小众、实则能重塑整个网页布局范式的项目。过去几年，我们一直在抱怨 CSS 强大却难以捉摸，DOM 测量方便却代价高昂。尤其在 AI 时代，界面需要动态、响应式、甚至上万元素同时运行时，文本测量成了卡死一切创新的最后瓶颈——它既是基础，又是地狱。 现在，这个瓶颈被彻底攻破了。我发现了一个开源纯 TypeScript 的用户态文本测量引擎，名叫 Pretext。它不需要 CSS、不依赖 DOM 测量，就能精准计算任意文本在任意宽度下的排版结果，支持整个网页的完整布局。体积只有几 KB，却能处理浏览器所有怪癖，支持全球语言（包括韩文混排 RTL 阿拉伯文和平台表情），还能轻松跑出 120fps 的复杂交互。 看效果 TypeScript 的用户态文本测量引擎，名叫 Prete 很多人以为 CSS

WebP格式简记

文章目录 * 概述 * 开发背景 * 核心技术原理 * 有损压缩 * 无损压缩 * 动画与扩展功能 * 核心技术特性 * 兼容性现状与性能 * 全平台生态支持 * 编解码性能表现 * 实际应用与生态 * 核心应用要点 * 工具与生态支持 * 优缺点与发展趋势 * 核心优缺点 * 发展趋势 概述 WebP（Web Picture）是由Google开发的开源光栅图像格式，自2010年推出以来，凭借高压缩效率与全功能支持的技术特性，逐步成为替代JPEG、PNG、GIF的现代Web图像标准，更是网页性能优化、移动端资源轻量化的核心选择。 该格式基于视频编码技术创新，完美解决了传统图像格式在压缩率、功能兼容性上的痛点，目前已被纳入W3C标准，成为跨端图像传输的主流方案，其核心目标是提升网页加载速度、降低带宽消耗，特别适用于Web和移动应用场景。 对于绝大多数Web应用而言，将JPEG/PNG/GIF迁移至WebP可带来显著的性能收益，且实施成本低、风险可控，WebP已从“可选优化”转变为现代Web开发的标准实践。

前端代码分割与懒加载：让你的应用飞起来

前端代码分割与懒加载：让你的应用飞起来 毒舌时刻 代码分割和懒加载？听起来就像是前端工程师为了掩饰自己代码写得太烂而发明的借口。你写的代码那么大，加载时间那么长，不分割能行吗？ 你以为随便分割一下代码就能解决性能问题？别做梦了！如果分割策略不合理，反而会导致更多的网络请求，让应用变得更慢。 为什么你需要这个 1. 减少初始加载时间：通过代码分割，只加载当前页面所需的代码，减少初始加载时间，提高用户体验。 2. 优化资源利用：只加载用户需要的代码，避免加载不必要的资源，优化内存和带宽使用。 3. 提高首屏渲染速度：快速加载首屏所需的代码，让用户尽快看到页面内容。 4. 支持大型应用：对于大型应用，代码分割可以避免打包后的文件过大，导致加载时间过长。 反面教材 // 这是一个典型的不使用代码分割的应用 import React from 'react'; import ReactDOM from 'react-dom'; import Home
Cursor区域限制问题解决方案：AI模型访问技术突破与环境隔离实践

Cursor区域限制问题解决方案：AI模型访问技术突破与环境隔离实践

地区限制|cursor7月最新续杯后地区限制region讲解现场找解决方法 引言 随着AI编程助手的普及，Cursor作为一款强大的AI编程工具受到了众多开发者的青睐。然而，近期Cursor的模型提供商对某些地区实施了访问限制，导致部分用户无法正常使用特定AI模型。本文将深入分析Cursor区域限制的技术原理，并提供完整的解决方案，帮助开发者在受限环境下依然能够充分利用Cursor的AI能力。 问题描述 最近，一些用户在使用Cursor时遇到了以下错误提示： This model provider doesn't serve your region 或者： Your request has been blocked as our system... 这表明Cursor的某些模型提供商开始实施基于地理位置的访问限制策略。根据Cursor官方文档，当模型提供商实施地区限制时，受限的模型将不会出现在用户的Cursor界面中，或者在尝试使用时会被阻止。 技术难题分析 1. 区域识别机制 首先，我们需要理解Cursor如何判断用户所在地区。经过测试，发现主要基