SpringBoot4+Vue3三端化妆品小程序商城：完整部署与二次开发指南

一听到“化妆品交易小程序”很多人的第一反应是这不就是套着商品列表、购物车、订单三个模块的普通 demo 吗实际拆开看这个项目的价值点在“三端齐全、链路完整、适合当商城类二次开发模板”而不是单纯教你写一个列表页。项目定位是 SpringBoot4 Vue3 的化妆品交易小程序整个系统可以拆成三个工程来看后端负责商品、订单、会员、权限这些业务逻辑Vue3 负责电商后台管理微信小程序负责 C 端用户的浏览和下单。三层放在一起就组成了一条完整的化妆品电商闭环。这篇博客不是复制项目官方文档而是按一套更实用的路径来讲先判断这个项目能解决什么问题、硬件和软件门槛在哪然后从数据库导入一直讲到后台登录、小程序下单、接口联调最后把最容易踩的坑一次性整理出来。如果你准备拿它做毕业设计、课程设计或者只想把手里的 SpringBoot 电商项目跑起来做二次开发这篇文章可以直接照着操作。1. 项目是什么化妆品电商的完整三端结构“SpringBoot4 Vue3 小程序”是现在商城类项目里很常见的组合。后端一般承担最重的业务逻辑用户身份校验、商品管理、订单状态流转、购物车、收货地址、后台管理员权限。Vue3 管理端面向运营和管理人员用来维护商品分类、上下架商品、处理订单、查看会员数据。小程序端面向普通消费者实现从浏览商品到确认收货的完整购买路径。从这类电商源码的常规结构来看三端职责通常会这样划分终端面向对象常用功能后端服务统一业务入口用户登录、商品查询、订单创建、支付回调处理、后台 RBAC 权限控制管理后台Vue3运营、管理员商品分类维护、商品上架/下架、库存变更、订单发货、轮播图配置、会员管理小程序端C 端消费者首页商品展示、商品搜索、商品详情、加入购物车、下单、订单列表、个人中心化妆品类目相比普通服装、数码类商城多了一层对“分类、品牌、规格、保质期”这些字段的精细要求。比如面部护理要区分肤质彩妆要区分色号身体护理要看容量规格。如果项目设计是按这种维度做的后续扩展功能会轻松很多。单看标题里的“化妆品交易”会让人觉得业务窄实际上它属于标准的 B2C 商城模型。你今天用这个项目跑化妆品明天把商品表和分类表数据清掉换成食品、日用品、图书同样能跑通。这也是这类电商模板最值得学习的地方。不过有一点要提醒不同博主发的同名源码目录结构、包名、表前缀可能都不一样。下面的部署流程是标准的三端启动路径但遇到具体项目时一定要以实际 README、SQL 文件、application.yml 为准。2. 核心能力速览能力项说明项目类型化妆品电商交易系统 / 商城小程序后端技术SpringBoot4 系列具体版本以项目 pom.xml 为准前端后台Vue3建议配合 Vite 使用C 端形态微信小程序需微信开发者工具导入角色设计普通用户、后台管理员、超级管理员视项目设计而定典型业务分类管理、商品管理、购物车、下单、订单管理、会员管理、轮播图配置数据库MySQL以脚本初始化表结构和演示数据推荐人群毕设、课程设计、SpringBoot Vue3 全栈练习、商城二开是否支持 API支持后端本身就是接口服务是否支持批量任务后台若是完整版一般支持批量上下架、批量发货等需实测确认合规提醒演示项目不能直接作为生产交易系统使用这个表格里的参数不是某个固定版本的全部事实判断标准是“常见完整商城源码应具备的能力范围”。拿到手后第一步先把后端跑起来再打开接口文档看每个模块到底写了哪些接口会比看标题更准确。3. 适用场景与使用边界这个项目适合三类人。第一类是在做毕业设计的学生需要一个前端、后端、小程序端“三端凑齐”的完整业务闭环答辩时能讲清楚数据表关系和订单状态流转。第二类是刚学完 JavaWeb 和 Vue 的开发者想找一个真实项目练手看 SpringBoot 怎么设计接口、Vue3 怎么对接后端、小程序怎么处理用户登录态。第三类是准备接私活或做外包需要一个电商基础版再往上叠功能的人。同时也存在明显使用边界。学习型源码通常不会把微信支付商户号、真实短信服务、真实备案流程给你配齐很多地方会用模拟支付或者手动改单代替。直接拿它做商用生产系统风险很大没有经营者资质、没有产品备案信息、没有退款对账体系也没有化妆品广告合规审核。所以如果你是想做一个能上线的化妆品销售平台可以把这套代码当基础原型但必须叠加真实支付、售后、物流查询、内容审核和化妆品合规能力。另外很多源码里的商品图片、品牌 Logo 来自网络公开页面属于演示素材。如果你的项目要展示、答辩、上线或商用建议把所有图片素材替换成自己有权使用的资源不要直接套用真实化妆品品牌的商标和广告图。还需要注意一个版权边界问题。所谓“精品项目”在很多场景下是付费源码或半开源项目使用者并不一定拥有再分发、二次售卖、打包转载的权利。写代码和部署学习没问题但如果要公开分享二次修改后的版本出发前先确认项目原始授权协议。4. 环境准备与前置条件这里不需要特别高配的机器属于常规 JavaWeb 开发环境。核心要求是能装 JDK、能跑 Maven、能启动 MySQL、能编译 Vue3 工程、能打开微信开发者工具。建议清单如下软件版本建议用途JDK看项目要求Spring Boot 3.x 及以上通常需要 JDK 17运行后端Maven3.6后端依赖管理和打包MySQL5.7 或 8.0业务数据持久化Navicat / DataGrip任意导入 SQL、查看表结构Node.js18 更好编译 Vue3 管理后台npm / pnpmnpm 随 Node 附带前端依赖安装微信开发者工具最新稳定版运行小程序端Postman / Apifox任意调试后端接口IDEA2022导入后端项目如果你的电脑是 16GB 内存跑这一整套完全够用IDEA 开发后端占 1GB 左右Vue3 的 dev server 占几百 MBMySQL 一般占有几百 MB微信开发者工具占用稍高但整体不像 AI 模型那样需要独显和显存。实际资源占用要以本机任务管理器为准。如果你不确定后端是 JDK 8 还是 JDK 17最稳的办法不是先装最新版而是把项目源码拿到后打开pom.xml看java.version标签写了什么。Spring Boot 2.x 系列经常会配 JDK 8 或 11Spring Boot 3.x 以及标题中强调的 SpringBoot4 这类新版本往往要求 JDK 17 以上。决定安装哪个 JDK 只认这一条不要凭标题猜。后端依赖是否还需要 Redis要看项目里有没有spring-boot-starter-data-redis依赖。如果只是登录验证码和权限控制有些项目会直接用 MySQL 表做Redis 不是必须项。看到application.yml里有redis配置但本地没有 Redis可以在 Windows 启动一个 Redis 或使用 Docker 起 Redis也可以阅读代码确认是否必填。5. 本地部署与启动流程按照“数据库 → 后端 → 管理后台 → 小程序”的顺序来部署这是最不容易出错的路线。一次只启动一个终端遇到问题可以精确锁定在哪一层。5.1 初始化数据库从标题看这是标准商城系统因此数据库初始化脚本应该在源码的sql或db目录下。常见文件名有cosmetic_mall.sql、shop.sql、database.sql。操作步骤打开 Navicat 或命令行客户端连接本地 MySQL。新建数据库字符集选utf8mb4排序规则选utf8mb4_general_ci或utf8mb4_unicode_ci。运行 SQL 脚本导入表结构和演示数据。检查核心表数量。一个完整商城项目至少会有用户表、商品表、分类表、订单表、订单明细表、购物车表、轮播图表、管理员表。一个常见的 MySQL 8 连接配置如下具体字段名要以项目为准server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/cosmetic_mall?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 123456 mybatis-plus: mapper-locations: classpath*:mapper/**/*.xml configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl如果项目使用的是application.properties配置写法会不同。实际项目经常出现数据库账号密码和 SQL 里的库里名不匹配的问题所以导入完脚本后第一件事就是检查配置文件里的库名、账号、密码和本地环境是否一致。5.2 启动后端服务拿到后端工程后用 IDEA 打开。第一次打开会自动下载 Maven 依赖这个过程视网络情况可能需要几分钟到几十分钟。如果 IDEA 没有自动识别 Maven 项目右键pom.xml选择 Add as Maven Project。依赖下载完成后找到启动类。启动类命名通常是Application或项目名Application在类上会有SpringBootApplication注解。直接运行 main 方法。如果希望用命令行启动可以进入后端根目录后执行mvn clean package -DskipTests java -jar target/化妆品项目.jarjar文件名按实际构建结果修改。启动成功的标志是控制台出现 Spring Boot 启动 Banner并打印 Tomcat started on port(s): 8080 之类的信息。5.3 启动 Vue3 管理后台管理后台前端目录一般是独立的名字可能叫admin-web、vue-admin、system-web。进入目录后先安装依赖npm install如果npm install因为网络问题卡住或报错可以切换镜像源后再安装npm config set registry https://registry.npmmirror.com/ npm install开发环境启动命令一般是npm run dev启动后控制台会打印一个本地访问地址常见是http://localhost:5173/或http://localhost:3000/。Vue3 Vite 工程默认跑在 5173 端口如果端口被占用可以用npm run dev -- --port 5174换一个。Vue3 管理后台一般会通过环境变量区分接口地址通常在.env.development文件里示例VITE_BASE_API http://localhost:8080/api如果你的后端端口不是 8080需要同步修改这个地址。这一步在管理后台登录失败时几乎是头号原因。5.4 导入并运行小程序端微信开发者工具导入小程序端目录目录名一般叫miniprogram、wx-app或frontend。导入时需要注意 AppID 问题如果自己有注册小程序 AppID 就填自己的没有的话可以点“测试号”也能完成基本功能体验。小程序里的接口地址位于utils/config.js或utils/request.js附近。开发环境联调时如果后端跑在本地需要把baseUrl改成http://127.0.0.1:8080/api这类局域网可访问的地址。随后在微信开发者工具的“详情 → 本地设置”里勾选“不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书”这样本地 HTTP 接口才能正常请求。小程序请求库的常见配置结构如下核心是统一维护一个请求前缀const BASE_URL http://127.0.0.1:8080/api function request(url, method, data) { return new Promise((resolve, reject) { wx.request({ url: BASE_URL url, method: method || GET, data: data || {}, header: { Content-Type: application/json, // 登录后需要把 token 放进来 token: wx.getStorageSync(token) || }, success(res) { if (res.data.code 200) { resolve(res.data) } else { wx.showToast({ title: res.data.message || 请求失败, icon: none }) reject(res.data) } }, fail(err) { reject(err) } }) }) } module.exports { BASE_URL, request }这里的BASE_URL、请求头里的 token 字段名都只是示例。项目里的实际写法和后端规定的参数要严格对齐否则会出现“小程序能打开但接口全部失败”。5.5 启动顺序总结序号终端启动方式成功标志1MySQL服务启动Navicat 能连上数据库2后端 SpringBootIDEA 运行 main / java -jar控制台显示端口启动成功3Vue3 管理后台npm run dev浏览器能打开后台登录页4小程序端微信开发者工具导入模拟器能打开小程序首页遵守这个顺序有一个现实原因后端依赖数据库Vue3 和小程序都依赖后端接口。反过来调会比较痛苦因为你登录页都打不开了根本不知道是数据库没连上还是端口配错。6. 后台管理与小程序端功能测试链路部署成功后先用“最小业务闭环”来验证项目是否真的能跑通而不是只停留在“页面打开了”这个层面。完整商城链路建议按下面的顺序测试。6.1 管理后台登录与权限验证使用项目提供的管理员账号登录 Vue3 后台。登录成功后会进入仪表盘或首页能看到商品总数、订单数量、会员数量等展示数据。如果登录后跳回登录页或提示未授权通常是请求头里的 token 参数名和后端不一致或者登录接口路径配错。如果页面能正常打开但数据全是 0优先检查数据库是否导入成功。比如分类表、商品表里有没有演示数据。这类商城模板一开始通常会自带基础商品数据全 0 说明 SQL 没执行完整。6.2 分类管理验证在后台找到“商品分类”菜单新增一个测试分类比如“面部护理”或“彩妆”。保存后再回到列表确认新增分类显示正常且状态字段正确。这一步能快速判断后端写入 MySQL 是否正常。6.3 商品发布验证进入商品管理点击新增商品。填写商品名称、选择分类、上传封面、设置价格和库存保存后到商品列表查看状态。执行到这里你已经验证了“分类→商品”这条后台数据链路是通的。对于化妆品类项目可以额外测试字段是否完善商品图片是否支持多图、是否包含商品规格如色号/容量/肤质、是否支持库存多规格拆分。“支持规格”和“只支持一个总库存”对商城体验差异很大建议实测时重点记录。6.4 小程序端完整购物链路在小程序模拟器里进入首页刷新商品列表确认后台新增的测试商品出现。如果后台新增了商品但小程序看不到优先看两件事商品是否处于上架状态小程序的请求接口是否打到了同一个后端。购物链路建议完整走一遍点击商品进入商品详情页。选择规格、数量加入购物车。打开购物车确认金额计算正确。提交订单进入支付页面。使用模拟支付或演示支付完成支付。在订单列表中查看订单状态。这里如果你没有真实的微信支付商户号项目多数都会内置一套模拟支付方案。测试时要注意观察订单状态是否从“待支付”流转为“待发货”。如果卡在支付成功回调这一步说明后端支付逻辑没完全跑通需要看日志排查。6.5 订单发货闭环回到 Vue3 后台的订单管理找到小程序端刚生成的订单。执行发货或确认操作再回到小程序端查看订单状态。到这里你已经验证了一个较完整的电商闭环后台建分类 → 后台发商品 → 用户加购物车 → 提交订单 → 后台发货。判断这套商城源码是否值得继续用主要就看这条闭环跑起来是否顺畅、有没有逻辑阻断。假如连最基本的“下单-发货-状态更新”都需要改后端代码说明项目缺陷较多后续二开成本会很高。7. 接口 API 联调与批量操作思路后端 SpringBoot 启动后本身就是一套 HTTP API。完整的商城项目会集成接口文档工具常见有 Swagger 和 Knife4j启动后可以访问http://127.0.0.1:8080/doc.html或http://127.0.0.1:8080/swagger-ui/index.html如果项目没有集成接口文档也可以利用 IDEA 的 HTTP Client 或 Postman 手动测试。下面给两个通用接口示例路径需要根据项目实际接口调整。管理员登录接口的常见 curl 请求# 管理员登录示例实际路径需以项目的 Controller 为准 curl -X POST http://127.0.0.1:8080/api/admin/login \ -H Content-Type: application/json \ -d {username: admin, password: 123456}小程序端获取商品列表的请求# 商品列表接口示例实际路径以项目为准 curl -X GET http://127.0.0.1:8080/api/goods/list?pageNum1pageSize10 \ -H token: 登录后的 token接口调用有一个通用规律后台接口和管理员接口通常需要携带 token请求头参数名可能是token、Authorization、或者satoken。如果项目集成了 Sa-Token登录后返回的 token 名和请求头字段会与 Spring Security 不同。调试时先看后端登录接口返回了什么字段再把这个字段值放到后续请求里。在 Vue3 项目中接口封装一般放在src/api目录下。示例import request from /utils/request export function getGoodsList(params) { return request({ url: /goods/list, method: get, params }) }真正的请求基础路径会集中在utils/request.js中通过 axios 实例统一配置。批量操作在后台管理里很常见。比如批量上架、批量下架、批量调整库存、批量发货。这类接口通常接收一个 id 数组{ ids: [1, 2, 3, 4], status: 1 }如果你要拿接口做自动化脚本批量处理时建议每批不超过 100 条加 1 秒到 2 秒的延迟避免短时间并发请求压垮本地开发库。大批量操作时先在小批量数据上确认返回结果再提交全量任务。8. 资源占用与性能观察这类电商项目不是重资源消耗型应用但如果你要在一个配置普通的 Windows / Mac 上同时跑后端、Vue3 和小程序依然要留意资源占用峰值。以本机操作为例可以重点观察这几个指标观察对象观察方式常见风险后端进程内存IDEA 控制台或任务管理器MyBatis 打印大量 SQL 日志日志文件膨胀MySQL 进程任务管理器数据量上来后慢查询增多Vue3 dev server浏览器 Network 面板Vite 冷启动编译变慢小程序工具内存微信开发者工具性能面板页面图片过多导致内存占用上升如果你的电脑只有 8GB 内存建议不要同时开着多个浏览器标签、IDEA 大项目和小程序模拟器一起跑容易卡顿。可以先关掉不需要的服务或者把 MyBatis 的 SQL 日志级别从 DEBUG 改成 INFO。从工程性能角度看一个小型商城比较容易出现瓶颈的地方是商品列表接口。如果数据库里商品数量达到几千条且后台首页还需要统计订单量、会员量、销售额不合理的 SQL 会导致接口越来越慢。建议从一开始就做好三件事商品表、订单表必须建立合理索引尤其是状态字段和查询条件字段。列表查询优先分页不要一次性查全表。首页高频热点数据可以加 Redis 缓存缓存失效时间控制在 30 到 60 秒。实际运行过程中观察指标不用太复杂打开后台首页看接口返回时间是否在 500ms 以内切换商品分类看是否出现明显白屏小程序端连续滑动商品列表看是否有内存持续增长。只要能稳定通过这几个基础场景项目在演示和课程设计里性能基本够用。9. 最常见的问题与排查方法这类项目在部署阶段的大量报错都不是功能 bug而是环境配置不一致导致的。下面这些坑基本涵盖了新手导入 SpringBoot Vue3 小程序商城时最容易遇到的问题。问题现象可能原因排查方式解决方案后端启动直接报错提示数据库连接失败MySQL 没启动、库名不对、账号密码错误检查 application.yml 配置Navicat 手动测试连接修正数据库配置启动 MySQL 服务SQL 脚本导入失败数据库字符集不匹配、脚本版本与数据库版本冲突看导入工具报错提示检查表名是否重复新建 utf8mb4 数据库后重新导入登录后台显示 401 或未登录token 请求头字段不对、登录接口地址配错F12 打开 Network查看登录接口返回调整 token 字段名或接口前缀Vue3 npm install 卡住npm 默认源访问慢查看终端进度切换 npmmirror 镜像源Vue3 后台能打开列表接口 404前端 VITE_BASE_API 与后端 context-path 不一致检查 .env 文件和后端日志改成统一前缀小程序请求失败请求地址指向 localhost、未开启不校验域名在开发者工具中点击请求看 errMsg改成电脑局域网 IP勾选不校验合法域名商品列表有数据但小程序不显示商品为下架状态、分类状态不对、接口缺少分页参数后台查看商品状态浏览器访问接口改为上架状态补充分页参数8080 端口占用之前启动过服务或别的应用占用命令行执行 netstat -ano | findstr 8080关掉占用进程或修改后端口订单支付后状态不更新模拟支付回调没写、代码里支付流程不完整查看后端日志和订单状态字段学习演示项目可在后台手动确认订单生产必须接真实支付node-sass 等依赖安装报错新老依赖冲突、Node 版本过新查看 node -v 和报错版本删除 node_modules 后重新安装尽量用项目 README 指定版本这里最容易忽略的两个隐蔽问题一个是数据库时区。如果 MySQL 连接串里没有serverTimezoneAsia/Shanghai订单创建时间可能会比本地时间少 8 小时。另一个是 MyBatis-Plus 的驼峰映射如果表字段是下划线命名而实体使用驼峰没有开启 map-underscore-to-camel-case 会导致部分字段查出来是 null。排查问题时不要一上来就改代码。先看后端控制台日志再看浏览器 Network 面板的请求和响应最后检查请求的数据是否真正到达后端。绝大多数“前端调不通”的问题都能通过“打开浏览器 Network → 点击登录 → 看网络请求状态码”这一步快速定位。10. 上线前的工程化建议如果这个项目只是用于毕设答辩或本地演示跑通购物链路后基本就够了。但如果想把它整理成简历项目、个人作品甚至部署到云服务器上展示下面这些工程化建议会明显加分。第一区分开发环境和生产环境配置。不要把本机数据库账号密码写死到代码里更不要把这段配置直接提交到公开仓库。SpringBoot 项目可以按application-dev.yml和application-prod.yml拆分Vue3 项目用.env.development和.env.production拆分。部署时通过启动参数指定当前环境。第二后端打包后要能独立运行。验收标准是执行mvn clean package把生成的 jar 放到服务器再执行java -jar 项目.jar不依赖 IDEA 也能启动。README 里要写清楚这一步而不是只写“用 IDEA 运行”。第三Vue3 管理后台应该先构建成静态文件再用 Nginx 托管。典型配置是构建后的dist目录指向 Nginx 的 root接口请求反代到后端的8080端口避免生产环境跨域问题。一个通用的 Nginx 配置参考如下server { listen 80; server_name your-domain.com; # 前端静态资源 root /opt/project/admin/dist; index index.html; # 刷新路由不走 404 location / { try_files $uri $uri/ /index.html; } # 后端接口反向代理 location /api/ { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }第四演示项目里的管理员默认密码和测试账号必须改掉。很多商城源码默认密码是admin/123456如果服务器被扫描到攻击者可以直接进后台改商品、删订单甚至通过上传接口传恶意文件。第五如果涉及图片上传不要直接把用户上传文件保存到项目目录下。要么使用对象存储服务要么建立独立的文件上传目录并做静态资源映射同时对上传文件做扩展名和文件类型校验。第六数据备份要做自动化。每天定时备份 MySQL 数据库尤其是订单表这一类业务数据不能只用本地 Navicat 手动备份。备份文件要和服务器的 Web 目录隔离。11. 项目评估与后续扩展方向回到最初的问题这种 SpringBoot4 Vue3 的化妆品交易小程序到底值不值得花时间可以从三个角度看。如果是做毕业设计它很合适因为三端都全从数据库到后端接口再到小程序端能讲的技术点足够多。如果是做课程设计只要能跑通登录、商品展示、购物车、下单这几条主流程已经能覆盖多数评分标准。如果是做商城二开基础它的价值在于省去了从零搭后台框架和权限模型的时间你可以直接在这个骨架上换业务、加模块。到手之后第一个要验证的功能不是商品展示而是“管理员后台发布商品后小程序能否实时读取到这个商品”。只要这条链路通说明数据库、后端、小程序三端已经对齐后面的购物车和订单功能大概率没有大问题。这个项目最容易踩的坑不是某个代码写错而是“环境版本没有对齐”。JDK 版本、MySQL 版本、Node 版本三样里只要错一样都会消耗大量排查时间。建议开始前先看项目的 README如果没有 README就先看pom.xml、package.json里的版本号再决定安装环境。后续可以扩展的方向也很清晰接入真实微信支付和退款增加商品多规格库存联动使用 Redis 缓存首页热点商品并做防重提交引入定时任务自动取消超时未支付订单在管理后台增加销售额统计报表把文件上传迁移到 OSS。每加一个功能都能让这个商城项目离实际生产更近一步。如果你对这个项目感兴趣建议先保存这篇部署流程实际拿到源码后按“初始化数据库 → 启动后端 → 启动后台 → 运行小程序”的顺序操作一遍。跑通最小闭环后再逐个功能去验证项目的能力边界。毕竟“能打开页面”不代表“项目可用”真正可用指的是你从商品上架到订单发货整个过程走完后系统依然稳定、数据没有错乱。