SpringBoot3 + Vue3 非遗传承商城小程序的设计与实现-育师

温馨提示：本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系方式的名片！

1. 项目背景与意义

非物质文化遗产是中华民族悠久历史和灿烂文化的重要载体，承载着独特的技艺、记忆与精神内涵。然而，随着现代生活方式的变迁，许多非遗项目面临传承人老龄化、传播渠道狭窄、市场化程度低等现实困境。如何借助互联网技术让非遗“活”起来、传下去，成为当前文化保护领域的重要课题。

本项目以非遗传承商城小程序为切入点，采用 SpringBoot3 与 Vue3 前后端分离架构，构建一个集非遗文化展示、传承人故事、手工艺品在线交易于一体的数字化平台。通过小程序轻量化、易传播的特点，降低非遗消费门槛，帮助非遗产品触达更广泛的年轻用户群体，实现文化价值与商业价值的双赢。

2. 系统需求分析

2.1 功能需求

非遗传承商城小程序面向普通消费者、非遗传承人和平台管理员三类角色，核心功能包括：

用户端：微信授权登录、非遗项目浏览、商品分类检索、商品详情查看、购物车管理、订单提交与支付、订单查询、个人中心、收藏与评价。
传承人端：非遗项目入驻申请、商品上架与下架、库存管理、订单发货、销售数据统计。
管理端：非遗项目审核、传承人资质审核、商品管理、订单管理、用户管理、内容运营与数据看板。

2.2 非功能需求

性能：首页首屏加载时间不超过 2 秒，商品列表接口响应时间不超过 500 毫秒。
安全：用户密码采用 BCrypt 加密存储，接口统一进行 JWT 鉴权，敏感操作记录操作日志。
可用性：系统支持 7×24 小时稳定运行，核心业务具备异常兜底与降级策略。
可维护性：前后端代码分层清晰，接口文档规范，便于后续迭代扩展。

3. 系统总体设计

3.1 技术选型

项目采用前后端分离架构，具体技术栈如下：

层次	技术选型	说明
前端框架	Vue3 + Vite	组合式 API，构建高效、响应式的小程序管理后台
小程序端	uni-app	一套代码多端发布，兼容微信小程序
后端框架	SpringBoot3	基于 JDK17，快速构建 RESTful 服务
持久层	MyBatis-Plus	简化 CRUD 操作，内置分页插件
数据库	MySQL 8.0	存储业务数据，支持事务与索引优化
缓存	Redis	缓存热点数据，实现分布式会话与限流
鉴权	Spring Security + JWT	无状态认证，保障接口安全
接口文档	Knife4j	在线调试与接口文档生成

3.2 系统架构设计

系统整体采用分层架构，自上而下分为表现层、业务层、数据访问层和基础设施层。小程序端与 Vue3 管理后台通过 HTTP 请求访问后端统一网关，后端基于 SpringBoot3 提供 RESTful 接口，数据层通过 MyBatis-Plus 与 MySQL 交互，Redis 承担缓存与热点数据加速职责。

flowchart TD A[微信小程序端 uni-app] --> B[后端接口层 SpringBoot3] C[Vue3 管理后台] --> B B --> D[业务服务层 Service] D --> E[数据访问层 MyBatis-Plus] E --> F[(MySQL 数据库)] B --> G[(Redis 缓存)] D --> H[第三方服务 微信支付/对象存储]

3.3 数据库设计

系统核心数据表包括用户表、非遗项目表、传承人表、商品表、订单表、订单明细表、购物车表、收藏表和评价表。以商品表和订单表为例，商品表记录商品名称、所属非遗项目、传承人、价格、库存、封面图等字段；订单表记录订单编号、用户、总金额、支付状态、收货信息等字段，并通过外键与订单明细表关联，保证数据一致性。

4. 核心功能模块设计与实现

4.1 用户认证与授权模块

小程序端用户通过微信授权登录，后端接收微信 code 后调用微信接口换取 openid，首次登录自动注册用户账号并签发 JWT 令牌。管理后台用户采用账号密码登录，密码经 BCrypt 加密存储，登录成功后签发带角色信息的 JWT。Spring Security 过滤器链统一拦截请求，解析令牌并校验权限，实现接口级访问控制。

@Service public class UserServiceImpl implements UserService { @Autowired private UserMapper userMapper; @Autowired private StringRedisTemplate redisTemplate; @Override public LoginVO wxLogin(String code) { // 调用微信接口换取 openid String openid = wxService.code2Session(code); User user = userMapper.selectByOpenid(openid); if (user == null) { user = new User(); user.setOpenid(openid); user.setNickname("非遗爱好者"); userMapper.insert(user); } // 生成 JWT 令牌 String token = JwtUtil.createToken(user.getId(), user.getRole()); return new LoginVO(token, user); } }

4.2 非遗项目展示模块

非遗项目展示模块是平台的文化内容核心。首页通过轮播图、分类导航和推荐项目三个区域呈现非遗文化。后端提供项目列表接口，支持按类别、地区、热度进行筛选排序，并缓存热门项目数据到 Redis，降低数据库压力。项目详情页展示非遗的历史渊源、工艺特色、传承人介绍以及相关商品，增强用户对非遗文化的认知与认同。

4.3 商品交易模块

商品交易模块包含商品浏览、购物车、订单提交与支付全流程。用户可将心仪的非遗商品加入购物车，提交订单时后端校验库存并生成订单号，调用微信支付接口完成支付。支付成功后异步回调更新订单状态，并扣减库存。订单状态流转清晰，支持待付款、待发货、待收货、已完成和已取消五种状态。

@Transactional public OrderVO createOrder(CreateOrderDTO dto, Long userId) { // 1. 校验购物车商品与库存 List<CartItem> items = cartService.checkAndLockStock(dto.getCartIds()); // 2. 生成订单主表 Order order = new Order(); order.setOrderNo(OrderNoGenerator.generate()); order.setUserId(userId); order.setTotalAmount(items.stream().mapToLong(CartItem::getAmount).sum()); order.setStatus(OrderStatus.PENDING_PAYMENT); orderMapper.insert(order); // 3. 生成订单明细 for (CartItem item : items) { OrderItem detail = new OrderItem(); detail.setOrderId(order.getId()); detail.setProductId(item.getProductId()); detail.setQuantity(item.getQuantity()); detail.setPrice(item.getPrice()); orderItemMapper.insert(detail); } // 4. 清空已下单购物车 cartService.removeByIds(dto.getCartIds()); return new OrderVO(order); }

4.4 传承人管理模块

传承人管理模块支持非遗传承人入驻申请、资质审核与商品管理。传承人提交入驻申请时需填写个人简介、技艺类别、传承谱系和资质证明材料，管理员审核通过后开通传承人店铺权限。传承人可自主上架商品、维护库存、处理订单发货，并通过销售看板查看经营数据，实现非遗技艺的市场化运营。

4.5 管理后台模块

管理后台基于 Vue3 + Element Plus 构建，包含数据看板、非遗项目管理、传承人审核、商品管理、订单管理和用户管理等功能页面。数据看板通过 ECharts 展示平台交易额趋势、热门非遗类别分布、订单量统计等关键指标，为平台运营决策提供数据支撑。管理后台采用动态路由与权限指令实现菜单级和按钮级权限控制。