FigmaCN终极指南：3分钟解锁全中文设计界面，设计师效率飙升
2026/7/24 23:38:20
一、项目概述
1.1 项目背景
传统线下实体商城以及普通线上电商平台缺少完整的积分运营体系，无法利用积分激励用户持续消费，商家难以通过积分玩法提升用户粘性。普通电商系统大多仅支持商品买卖，缺少积分兑换、积分累计、商品收藏、积分与金额双模式购买等功能。
为解决线上商城商品售卖 + 积分运营一体化需求，开发基于 SpringBoot 的商城积分系统，采用 SpringBoot + Vue 前后端分离架构，分为前台用户商城门户与后台管理系统；支持普通金额购买、积分兑换商品、商品收藏、订单管理、商品分类管理，实现商城商品数字化管理与积分营销体系。
1.2 项目目标
前台普通用户：注册登录、浏览商品、查看商品详情、收藏商品、加入购物车、金额购买商品、积分兑换商品、管理个人订单、查看订单状态（未支付 / 已支付 / 已完成 / 退款 / 取消）。
后台管理员：管理前台用户账号、后台管理员账号、商品类型分类、商品信息、首页轮播图、用户收藏数据、商城订单信息；完成商品新增、编辑、上下线管理。
搭建前后端分离架构，实现商品线上展示、交易、积分兑换一体化，通过积分机制吸引用户消费，提升商城活跃度。
1.3 技术选型
后端技术栈
核心框架：SpringBoot 2.7.x
ORM 框架：MyBatis / MyBatis-Plus
数据库：MySQL8.0
工具包：Lombok、Hutool
文件上传：商品图片、首页轮播图、用户头像存储
权限认证：Token 会话登录鉴权
项目构建：Maven
前端技术栈
基础框架：Vue2/Vue3 + Vue-CLI
UI 组件库：Element UI / Element Plus
HTTP 请求：Axios
路由：Vue Router
图片上传组件、购物车数量加减组件
部署环境
SpringBoot 内置 Tomcat；支持 Windows/Linux 服务器部署；前端打包 dist 静态资源部署 Nginx，反向代理后端接口解决跨域。
1.4 系统角色划分
前台普通用户
前台页面注册账号、登录系统；浏览商品、收藏商品、下单购买、积分兑换、管理个人订单。后台管理员
登录后台管理平台，拥有全部后台权限：用户管理、管理员账号维护、商品类型管理、商品管理、轮播图管理、收藏管理、订单管理。
二、系统功能需求分析
2.1 前台用户门户功能
顶部导航栏：首页、商品、个人中心
注册模块
用户注册账号，填写账号、密码、确认密码、手机号，上传头像，完成注册。登录模块
账号密码登录，登录后可进行下单、收藏、积分兑换等操作。首页模块
首页轮播图展示，商品推荐展示，快速进入商品列表。商品列表模块
展示全部商品，支持分类筛选；点击商品进入商品详情页面。商品详情模块
展示商品标题、价格、所需积分、商品类型、售后服务、品牌、商品图片、收藏数量；提供功能：收藏 / 取消收藏、数量加减、加入购物车、立即购买、积分兑换。订单提交页面
选择购买数量，填写订单备注，展示商品清单、总价，提交订单并余额支付。个人订单模块
分页展示个人全部订单；按状态筛选：全部、未支付、已支付、已完成、已退款、已取消；支持取消订单、申请退款操作。个人中心
查看个人信息、我的收藏、全部订单、账户积分、账户余额。
2.2 后台管理系统功能
后台登录页面：账号密码登录后台管理平台。
后台左侧菜单栏：
首页：后台欢迎首页
商品类型管理
维护商品分类信息；支持按类型名称搜索；新增、修改、删除分类，查看分类详情。用户管理
管理前台注册用户账号，查询、启用 / 禁用用户账号。管理员管理
维护后台管理员登录账号，新增、编辑、删除管理员。轮播图管理
管理前台首页轮播图片，新增、修改、删除轮播图。我的收藏管理
查看所有用户商品收藏记录，统计商品收藏数据。商品管理
商品列表：按商品标题搜索商品；表格展示商品标题、类型、售后服务、品牌、商品图片、积分、售价；
功能：新增商品、修改商品、删除商品、查看商品详情；录入商品图片、价格、积分、品牌、售后、分类信息。
商品订单管理
查看平台全部用户订单，查看订单详情，跟进订单交易状态。
三、数据库核心表设计
（1）user 前台用户表
| 字段名 | 类型 | 说明 |
|---|---|---|
| id | bigint | 主键自增 |
| username | varchar | 登录账号（唯一） |
| password | varchar | 登录密码 |
| phone | varchar | 手机号 |
| avatar | varchar | 头像地址 |
| balance | decimal | 账户余额 |
| points | int | 账户积分 |
| create_time | datetime | 注册时间 |
（2）admin 后台管理员表
| 字段名 | 类型 | 说明 |
|---|---|---|
| id | bigint | 主键 |
| username | varchar | 管理员账号 |
| password | varchar | 密码 |
| real_name | varchar | 管理员名称 |
（3）goods_type 商品类型表
| 字段名 | 类型 | 说明 |
|---|---|---|
| id | bigint | 主键 |
| type_name | varchar | 商品分类名称（美妆、其他等） |
| remark | varchar | 备注 |
（4）goods 商品表
| 字段名 | 类型 | 说明 |
|---|---|---|
| id | bigint | 主键 |
| title | varchar | 商品标题 |
| type_id | bigint | 商品分类 ID |
| service | varchar | 售后服务（7 天无理由退换） |
| brand | varchar | 商品品牌 |
| img | varchar | 商品图片地址 |
| points | int | 兑换所需积分 |
| price | decimal | 商品售价 |
| collect_num | int | 收藏数量 |
| content | text | 商品详情介绍 |
（5）swiper 轮播图表
| 字段名 | 类型 | 说明 |
|---|---|---|
| id | bigint | 主键 |
| img_url | varchar | 轮播图片 |
| link_url | varchar | 跳转地址 |
| sort | int | 排序号 |
（6）collect 商品收藏表
| 字段名 | 类型 | 说明 |
|---|---|---|
| id | bigint | 主键 |
| user_id | bigint | 用户 ID |
| goods_id | bigint | 商品 ID |
| create_time | datetime | 收藏时间 |
（7）cart 购物车表
| 字段名 | 类型 | 说明 |
|---|---|---|
| id | bigint | 主键 |
| user_id | bigint | 用户 ID |
| goods_id | bigint | 商品 ID |
| num | int | 购买数量 |
| create_time | datetime | 加入时间 |
（8）orders 订单主表
| 字段名 | 类型 | 说明 |
|---|---|---|
| id | bigint | 主键 |
| order_no | varchar | 订单编号 |
| user_id | bigint | 下单用户 ID |
| goods_id | bigint | 商品 ID |
| goods_num | int | 购买数量 |
| total_price | decimal | 订单总价 |
| remark | text | 订单备注 |
| pay_type | varchar | 支付方式：余额支付 / 积分兑换 |
| order_status | varchar | 订单状态：未支付 / 已支付 / 已完成 / 已退款 / 已取消 |
| create_time | datetime | 下单时间 |
| pay_time | datetime | 支付时间 |
四、系统业务流程设计
4.1 前台用户购物流程
用户访问商城首页，浏览轮播图、商品；未注册用户先完成账号注册、登录。
用户进入商品列表，筛选分类，点击商品查看详情。
用户可收藏商品，也可选择数量加入购物车 / 立即购买。
提交订单，填写备注，选择余额支付；积分充足可选择积分兑换。
支付完成，订单状态更新为【已支付】；用户在个人订单列表查看全部订单。
未支付订单支持取消；已支付订单支持申请退款。
4.2 后台管理员业务流程
管理员账号登录后台管理系统。
基础数据维护：新增商品分类、上传首页轮播图。
商品运营：新增商品信息，上传商品图片，填写价格、积分、品牌、售后信息；可随时修改、下架商品。
用户运营：管理前台注册用户账号，查看所有用户收藏记录。
订单管理：查看平台所有用户订单，监控订单交易状态。
五、页面原型说明
5.1 前台用户页面
用户注册页面
输入账号、密码、确认密码、手机号，上传头像，完成注册。前台登录页面
账号密码输入框，登录进入商城首页。商品详情页面
展示商品大图、标题、售价、积分、分类、品牌、售后；收藏按钮、数量加减、加入购物车、立即购买、积分兑换按钮。订单提交页面
展示商品清单、数量、总价；支持填写订单备注，余额支付。个人订单页面
订单状态标签筛选（全部 / 未支付 / 已支付 / 已完成 / 已退款 / 已取消）；列表展示订单编号、商品、价格、下单时间，提供取消、退款操作。
5.2 后台管理页面
后台登录页面
账号密码登录入口，登录后进入后台主界面。商品类型管理页面
分类名称搜索框；表格展示所有商品分类；支持新增、修改、删除、查看详情。商品管理页面
商品标题搜索；表格展示商品标题、类型、服务、品牌、商品图片、积分、售价；新增弹窗录入完整商品信息。收藏管理页面
查询全部用户商品收藏数据，统计商品收藏热度。
六、核心接口设计
6.1 用户注册登录接口
POST /api/user/register 用户前台注册 POST /api/user/login 用户前台登录 POST /api/admin/login 管理员后台登录 GET /api/user/info 获取登录用户信息6.2 商品分类与商品接口
GET /api/goods/type/list 获取商品分类列表 GET /api/goods/list 前台商品列表（搜索+分类筛选） GET /api/goods/{id} 获取商品详情 POST /admin/goods/save 后台新增商品 PUT /admin/goods/update 修改商品信息 DELETE /admin/goods/{id} 删除商品6.3 收藏接口
POST /api/collect/save 收藏商品 POST /api/collect/cancel 取消收藏 GET /api/collect/my 获取我的收藏 GET /admin/collect/list 后台查询全部收藏记录6.4 购物车接口
POST /api/cart/save 加入购物车 GET /api/cart/list 查询我的购物车6.5 订单接口
POST /api/order/create 创建订单 POST /api/order/pay 订单余额支付 GET /api/order/my 查询个人订单（支持状态筛选） PUT /api/order/cancel 取消订单 PUT /api/order/refund 申请退款 GET /admin/order/list 后台查询全部订单6.6 轮播图接口
GET /api/swiper/list 前台获取首页轮播图 POST /admin/swiper/save 后台新增轮播图七、系统部署方案
数据库部署
安装 MySQL8.0，执行 SQL 初始化脚本，创建数据表、初始化测试账号。后端部署
SpringBoot 项目打包 Jar 包，使用java -jar xxx.jar启动；yml 配置数据库连接、文件上传存储路径。前端部署
Vue 项目执行npm run build打包 dist 静态文件，部署 Nginx；配置反向代理转发后端接口，解决跨域。文件存储
商品图片、轮播图、用户头像默认本地存储，可扩展阿里云 OSS 对象存储。
八、系统测试要点
功能测试
用户注册登录、商品浏览、收藏、下单支付、订单取消退款完整流程；后台商品分类、商品 CRUD、轮播图管理功能正常；图片上传、搜索、分页正常。权限测试
未登录用户无法下单、收藏；前台用户不能访问后台地址；积分兑换时校验用户积分余额，余额不足无法兑换。业务逻辑测试
购买商品后扣除用户余额；积分兑换扣除账户积分；收藏商品自动累加收藏数量；订单状态流转正常。兼容性测试
前台商城页面、后台管理系统适配 Chrome、Edge 主流浏览器。
九、系统扩展方向
增加商品评价功能，用户购买后可以发表商品评论
增加优惠券模块，支持满减优惠券、积分优惠券发放
增加会员等级体系，不同等级购物享受折扣、积分加速
接入支付宝 / 微信真实支付接口
后台增加可视化数据看板：商品销量排行、热门收藏、订单交易额统计
开发小程序端商城，实现移动端便捷购物
十、项目总结
基于 SpringBoot 的商城积分系统采用前后端分离架构，分为前台线上商城门户与后台商品管理平台两大模块。系统区分普通消费者与后台管理员两种角色，整合商品分类管理、商品展示、商品收藏、购物车、订单交易、积分兑换、首页轮播管理等核心电商功能。
系统创新性融入积分兑换模式，支持余额购买与积分兑换双消费模式，帮助商家搭建积分营销体系，提升用户留存与复购。系统操作简单、业务流程清晰，适用于中小型线上积分商城，具备较高实用价值。
十一、项目资料
👇🏻 精彩专栏推荐订阅👇🏻 在下方专栏👇🏻不然下次找不到哟
《Java精品推荐项目》
《springboot+vue项目100套》
《ssm项目100套》
《微信小程序合集》