时尚美妆电商网站 —— 从 0 到 1 搞定 SpringBoot + Vue 前后端分离实战项目

一句话介绍：这是一套前后端分离的时尚美妆电商网站，前台用户逛商品、下订单，后台管理员管商品、管订单、管轮播图。技术栈是当下企业最主流的 SpringBoot + Vue，可直接用于毕业设计、课程设计和练手学习。

适合谁：想做毕设 / 课程设计、想入门前后端分离、想在简历上写一个"能跑、好看、业务完整"项目的同学。

这个项目到底长什么样

项目分成两个端：一个是顾客逛的"前台商城"，一个是管理员用的"后台管理系统"。下面按页面顺序带你快速过一遍真实运行效果。

管理员登录页

管理员输入账号密码后进入后台，是整个管理系统的入口。

后台首页与整体布局

采用企业后台经典布局：左侧可折叠菜单栏 + 顶部面包屑导航 + 右侧主内容区。这种布局几乎所有管理系统都在用，学会一套就能复用无数套。

前台商城首页

暖色调美妆风格，顶部导航、轮播广告大图、商品卡片推荐，第一眼就和"白底大表格"的学生作业拉开差距。

功能模块一览：不只是"增删改查"

很多同学的项目只有一个商品表在 CRUD，而这个项目把一条完整的电商业务链跑通了：管理员录商品 → 用户浏览下单 → 后台处理订单 → 用户查看 / 退款。

前台用户端（顾客看到的）

• **首页：**导航栏、轮播广告图、商品推荐卡片，展示商品图、标题、售价。

• **商品列表与详情：**浏览全部美妆商品，点进去看图片、视频、品牌、库存、会员价。

• **个人中心与订单：**查看自己的订单，按状态筛选（未支付 / 已支付 / 已发货 / 已完成 / 已退款 / 已取消），并支持一键退款，退款成功有前端弹窗提示。

后台管理员端（admin 登录后）

模块	能干什么	亮点
商品分类管理	维护美妆品类（水乳、口红、香水、眼影……），支持名称搜索、新增、修改、删除、查看详情。	商品与分类联动，是电商的基础骨架。
商品信息管理	管理美妆商品：标题、分类、品牌、服务、商品视频、商品图片、库存、价格、会员价；支持搜索、新增、改、删、详情、查看评论。	新增弹窗支持图片 + 视频双上传。
轮播图管理	上传、修改、删除首页 Banner，前台实时展示。	运营可自助换广告，不用改代码。
用户管理	维护网站注册的普通用户账号。	多角色（普通用户 / 管理员）分离。
管理员管理	维护后台操作员账号。	为后续加权限控制留好了位置。
商品订单管理	查看所有用户订单，跟进发货、处理状态。	订单状态流转是核心业务。

对应页面截图

商品分类管理：

商品信息管理：

新增商品弹窗（注意看：能传视频、传图片）：

轮播图管理：

用户管理：

商品订单管理：

技术栈：学完就能写进简历

后端（SpringBoot）

• SpringBoot 2.x：一键启动，不用手配 Tomcat

• MyBatis / MyBatis-Plus：快速 CRUD + 分页插件

• MySQL：存商品、分类、用户、订单、轮播图

• Maven：依赖一键导入

• SpringMVC + JSON：前后端接口交互

• 文件上传组件：图片 / 视频上传

前端（Vue2）

• Vue2：数据双向绑定

• Element UI：表格 / 表单 / 弹窗 / 分页

• Axios：调后端接口

• Vue-Router：菜单路由 + 面包屑

• Swiper：首页轮播图

• HTML + CSS：美妆暖色风格

**架构关键词：前后端分离。**后端只写接口、操作数据库，返回 JSON；前端只负责页面渲染和调接口。这是现在互联网公司的主流开发模式——传统 JSP 那种"页面和代码写一起"的老项目可以放下了。

技术亮点：答辩时能讲出花的 8 个加分项

下面这些点，不管是写进论文、还是答辩时口头讲，都是直接能拿分的内容。

亮点 1：前后端分离架构（企业主流）

前端 Vue 独立跑页面，后端 SpringBoot 提供 RESTful 接口，两边用 JSON 通信。不是"一个 Controller 既写逻辑又返页面"的老式做法。学完这个，你就理解了现代 Web 项目的协作方式。

亮点 2：图片 + 视频双文件上传

新增美妆商品时，可以上传商品图片和商品视频，后端接收文件保存到服务器，数据库只存访问路径，前端直接回显预览。很多课程设计项目连文件上传都没有，这一项在答辩时非常显眼。

亮点 3：完整的电商业务闭环

不是玩具 CRUD，而是一条真实业务链：管理员录商品 → 用户浏览 → 下单 → 后台发货 → 用户查看订单 → 支持退款。涉及库存、会员价、订单状态流转，业务逻辑是"活"的。

亮点 4：经典后台布局 + 面包屑导航

左侧可折叠菜单 + 顶部面包屑 + 主内容区。面包屑会自动记录你当前在哪个菜单下，清晰知道自己在哪一页。这套布局几乎可以套用到任何管理系统。

亮点 5：搜索 + 分页 + 弹窗式 CRUD

商品、分类列表都支持关键词检索；所有业务表都有"新增弹窗、单行修改、删除、详情查看"，配合分页组件。底层用 MyBatis-Plus 分页，不用手写复杂分页 SQL。

亮点 6：美妆主题的精美前台

前台不是简陋白底页，而是暖色调美妆风格：Swiper 轮播大图、商品卡片、柔和配色。毕设答辩时，"页面好看"本身就是印象分。

亮点 7：订单状态机 + 退款业务

订单有未支付、已支付、已发货、已完成、已退款、已取消多种状态，用户可以点标签筛选，还能发起退款并收到前端弹窗反馈。理解"订单状态怎么流转"，是电商类项目的进阶知识点。

亮点 8：登录鉴权

管理员账号密码校验通过后才能进后台，未登录访问会被拦住；登录后页面右上角展示当前管理员名称。后续想升级成 Sa-Token / JWT 权限方案，这个骨架可以直接往上套。

学这个项目，你到底能收获什么

• ✅ 用 SpringBoot 快速搭后端，理解 Controller → Service → Mapper → Entity 分层

• ✅ 用 MyBatis-Plus 简化数据库操作，写条件查询和分页

• ✅ 写 RESTful 接口，搞懂前后端 JSON 交互

• ✅ 用 Vue + Element UI 快速搭出后台管理页面

• ✅ 实现文件上传（图片 / 视频）这个高频面试点

• ✅ 跑通电商核心业务：商品、分类、订单、库存、退款

• ✅ 学会前后端分离项目怎么本地跑、怎么打包部署

• ✅ 顺便学会怎么写课程设计 / 毕设文档，讲清项目思路

拿到项目后，还能自己往上加这些功能

基础版已经能交作业了，但如果你想让项目"更有分量"（毕设冲优秀、简历更亮眼），这些都是很好的二次开发方向：

1. 用户注册、登录、会员积分体系

2. 购物车模块：加入购物车、批量下单

3. 商品评论与评分（项目里已有查看评论入口，可补全）

4. 模拟支付流程

5. 商品收藏 / 浏览历史

6. 后台首页用 ECharts 做销售统计、订单量图表

7. 商品详情页优化、规格选择

怎么把项目跑起来

1. 准备环境：JDK 8、MySQL 5.7 / 8.0、Maven、Node.js。

2. 后端：导入 SpringBoot 项目，修改 application.yml 里的数据库连接，执行 SQL 脚本建表，运行启动类。

3. 前端：进入前端目录，npm install 装依赖，npm run serve 启动。

4. 浏览器访问前端地址，用管理员账号登录后台即可。

写在最后

这套项目最大的价值，是它不像一个"学生作业"，而像一个真实在跑的小电商：前台有美感、后台有完整管理、业务有闭环、还带文件上传和订单流转。

对正在做毕设、课程设计，或者想真正入门前后端分离开发的同学来说，吃透它，你就掌握了当下企业最主流的 SpringBoot + Vue 开发方式——这比看十篇零散教程都管用。

项目资料

👇🏻 精彩专栏 推荐订阅 👇🏻 在下方专栏👇🏻不然下次找不到哟
《Java精品推荐项目》
《springboot+vue项目100套》
《ssm项目100套》
《微信小程序合集》