一句话介绍:这是一套前后端分离的时尚美妆电商网站,前台用户逛商品、下订单,后台管理员管商品、管订单、管轮播图。技术栈是当下企业最主流的 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套》
《微信小程序合集》

Logo

电商企业物流数字化转型必备!快递鸟 API 接口,72 小时快速完成物流系统集成。全流程实战1V1指导,营造开放的API技术生态圈。

更多推荐