温馨提示本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系方式的名片1. 项目背景与需求分析随着电子商务的快速发展多商户入驻模式的 B2C 商城系统逐渐成为主流。与传统的单商户商城不同多商户平台允许不同商家在同一平台上独立开店、自主管理商品和订单平台方则负责统一运营、结算和流量分发。本文基于 Spring Boot 和 Vue3 技术栈设计并实现一套多商户入驻 B2C 商城系统涵盖商家入驻、商品管理、订单交易、支付结算等核心业务模块。在需求分析阶段系统主要面向三类角色平台管理员、入驻商家和普通消费者。平台管理员负责审核商家入驻、管理平台运营数据入驻商家可以发布商品、处理订单、查看经营报表消费者则可以在平台内浏览商品、下单购买、评价售后。三类角色的权限边界清晰业务流转闭环完整。2. 技术选型与架构设计本系统后端采用 Spring Boot 作为核心框架结合 Spring Security 实现认证与授权使用 MyBatis-Plus 作为持久层框架数据库选用 MySQL缓存层使用 Redis。前端采用 Vue3 搭配 Vite 构建工具状态管理使用 PiniaUI 组件库选用 Element Plus通过 Axios 与后端进行 RESTful API 通信。整体架构采用前后端分离模式后端按业务模块划分为商家端、用户端和管理端三个子服务通过统一的 API 网关进行路由转发。系统架构图如下flowchart TD A[消费者端 Vue3] -- B[API 网关] C[商家端 Vue3] -- B D[管理端 Vue3] -- B B -- E[用户服务] B -- F[商品服务] B -- G[订单服务] B -- H[支付服务] E -- I[(MySQL)] F -- I G -- I H -- J[(Redis)]3. 数据库设计数据库设计是整个商城系统的核心基础。根据业务需求系统主要包含用户表、商家表、商品表、分类表、订单表、订单明细表、购物车表、支付流水表和结算表等核心数据表。以下重点介绍几个关键表的设计思路。商家表用于存储入驻商家的基本信息包括商家名称、联系人、联系电话、入驻状态、审核状态等字段。入驻状态区分正常营业、暂停营业和已关闭审核状态则记录商家提交入驻申请后的审核进度。商品表关联商家 ID 和分类 ID包含商品名称、主图、价格、库存、上下架状态等字段。为了支持多商户场景商品表通过商家 ID 字段实现数据隔离确保商家只能操作自己的商品数据。订单表记录订单主信息包括订单编号、用户 ID、商家 ID、订单金额、支付状态、发货状态和收货状态等。订单明细表则记录订单中每个商品的快照信息包括商品名称、单价、数量和小计金额避免商品信息变更后影响历史订单的可追溯性。4. 后端核心模块实现后端核心模块主要包括商家入驻审核、商品管理、购物车与订单、支付与结算四个部分。下面结合关键代码说明各模块的实现思路。4.1 商家入驻审核模块商家入驻审核是平台运营的第一道关口。商家提交入驻申请后平台管理员对资质信息进行审核审核通过后商家方可登录商家端进行商品管理。审核状态流转包括待审核、审核通过和审核拒绝三种状态。Service public class MerchantApplyService { Autowired private MerchantMapper merchantMapper; public void submitApply(MerchantApplyDTO dto) { Merchant merchant new Merchant(); BeanUtils.copyProperties(dto, merchant); merchant.setStatus(MerchantStatus.PENDING); merchant.setAuditStatus(AuditStatus.WAITING); merchantMapper.insert(merchant); } public void audit(Long merchantId, Boolean pass, String reason) { Merchant merchant merchantMapper.selectById(merchantId); if (pass) { merchant.setAuditStatus(AuditStatus.APPROVED); merchant.setStatus(MerchantStatus.ACTIVE); } else { merchant.setAuditStatus(AuditStatus.REJECTED); merchant.setAuditReason(reason); } merchantMapper.updateById(merchant); } }4.2 商品管理模块商品管理模块需要严格遵循数据隔离原则。商家在创建、修改和删除商品时后端必须校验当前登录商家 ID 与商品所属商家 ID 是否一致防止越权操作。商品上下架操作同样需要校验归属关系。Service public class ProductService { Autowired private ProductMapper productMapper; public void createProduct(ProductDTO dto, Long merchantId) { Product product new Product(); BeanUtils.copyProperties(dto, product); product.setMerchantId(merchantId); product.setStatus(ProductStatus.OFF_SHELF); productMapper.insert(product); } public void updateProduct(ProductDTO dto, Long merchantId) { Product product productMapper.selectById(dto.getId()); if (!product.getMerchantId().equals(merchantId)) { throw new BusinessException(无权操作该商品); } BeanUtils.copyProperties(dto, product); productMapper.updateById(product); } }4.3 购物车与订单模块购物车模块采用 Redis 存储用户购物车数据以用户 ID 作为 key商品 ID 作为 field商品数量作为 value利用 Hash 结构实现高效的增删改查。订单模块则采用数据库事务保证数据一致性下单时同时扣减库存并生成订单记录。Service public class OrderService { Autowired private OrderMapper orderMapper; Autowired private ProductMapper productMapper; Autowired private StringRedisTemplate redisTemplate; Transactional(rollbackFor Exception.class) public Order createOrder(OrderCreateDTO dto, Long userId) { // 扣减库存 Product product productMapper.selectById(dto.getProductId()); if (product.getStock() dto.getQuantity()) { throw new BusinessException(库存不足); } product.setStock(product.getStock() - dto.getQuantity()); productMapper.updateById(product); // 生成订单 Order order new Order(); order.setOrderNo(generateOrderNo()); order.setUserId(userId); order.setMerchantId(product.getMerchantId()); order.setTotalAmount(product.getPrice() * dto.getQuantity()); order.setStatus(OrderStatus.UNPAID); orderMapper.insert(order); // 清除购物车中对应商品 redisTemplate.opsForHash().delete(cart: userId, dto.getProductId().toString()); return order; } }4.4 支付与结算模块支付模块对接第三方支付平台采用支付回调机制保证支付结果的可靠性。订单支付成功后系统将支付金额按比例进行平台分润和商家结算结算记录写入结算表商家可在商家端查看结算明细。Service public class PayService { Autowired private OrderMapper orderMapper; Autowired private SettlementMapper settlementMapper; public void handlePayCallback(String orderNo, BigDecimal amount) { Order order orderMapper.selectByOrderNo(orderNo); if (order null || order.getStatus() ! OrderStatus.UNPAID) { return; } order.setStatus(OrderStatus.PAID); orderMapper.updateById(order); // 生成结算记录平台抽成 5% BigDecimal platformFee amount.multiply(new BigDecimal(0.05)); BigDecimal merchantIncome amount.subtract(platformFee); Settlement settlement new Settlement(); settlement.setOrderNo(orderNo); settlement.setMerchantId(order.getMerchantId()); settlement.setPlatformFee(platformFee); settlement.setMerchantIncome(merchantIncome); settlementMapper.insert(settlement); } }5. 前端核心模块实现前端采用 Vue3 组合式 API 进行开发项目结构按功能模块划分包括用户端商城页面、商家端管理后台和平台管理后台三个部分。下面重点介绍用户端商品列表和商家端商品管理两个核心页面的实现。5.1 用户端商品列表页用户端商品列表页通过 Axios 调用后端商品查询接口支持按分类筛选、关键词搜索和价格排序。页面使用 Element Plus 的卡片组件展示商品信息点击商品卡片跳转到商品详情页。script setup import { ref, onMounted } from vue import { getProductList } from /api/product import { useRouter } from vue-router const router useRouter() const productList ref([]) const loading ref(false) const fetchProducts async () { loading.value true try { const res await getProductList({ page: 1, size: 20 }) productList.value res.data.records } finally { loading.value false } } const goDetail (id) { router.push({ path: /product/ id }) } onMounted(fetchProducts) /script template div classproduct-grid el-card v-foritem in productList :keyitem.id clickgoDetail(item.id) img :srcitem.mainImage classproduct-image / div classproduct-name{{ item.name }}/div div classproduct-price¥{{ item.price }}/div /el-card /div /template5.2 商家端商品管理页商家端商品管理页提供商品的新增、编辑、上下架和删除操作。页面通过 Pinia 管理商家登录状态请求接口时携带商家 Token后端根据 Token 解析商家 ID 进行数据隔离。script setup import { ref, onMounted } from vue import { getMerchantProducts, updateProductStatus } from /api/merchant import { ElMessage } from element-plus const productList ref([]) const fetchProducts async () { const res await getMerchantProducts() productList.value res.data } const toggleStatus async (item) { await updateProductStatus(item.id, item.status 1 ? 0 : 1) ElMessage.success(操作成功) fetchProducts() } onMounted(fetchProducts) /script6. 权限控制与安全设计系统采用 Spring Security 结合 JWT 实现认证与授权。用户登录成功后签发 JWT Token前端在请求头中携带 Token后端通过拦截器解析 Token 并获取用户身份信息。针对商家端接口额外校验当前用户是否为商家角色并校验数据归属权限。在安全设计方面系统对密码采用 BCrypt 加密存储防止明文泄露。商品价格、订单金额等敏感数据在后端统一校验前端仅做展示。支付回调接口使用签名校验机制防止伪造回调请求。同时系统对商家上传的商品图片进行格式和大小校验防止恶意文件上传。7. 系统部署与性能优化系统采用 Docker 容器化部署将前端静态资源、后端服务、MySQL 和 Redis 分别部署为独立容器通过 Docker Compose 统一编排管理。前端构建产物由 Nginx 托管并配置反向代理将 API 请求转发至后端服务。在性能优化方面商品列表接口使用 Redis 缓存热点数据减少数据库查询压力。商品详情页采用静态化方案将高频访问的商品详情页预渲染为静态 HTML提升访问速度。订单查询接口通过数据库索引优化和分页查询保证大数据量下的查询性能。8. 总结与展望本文基于 Spring Boot 和 Vue3 实现了一套多商户入驻 B2C 商城系统覆盖了商家入驻、商品管理、订单交易、支付结算等核心业务闭环。系统采用前后端分离架构后端模块化设计前端组件化开发具备良好的扩展性和可维护性。后续可以从以下几个方向继续优化引入消息队列实现订单超时自动取消和异步通知增加营销模块支持优惠券、秒杀和拼团等促销活动完善数据分析能力为平台运营和商家经营提供数据报表支持探索微服务架构演进将核心模块拆分为独立服务提升系统整体的伸缩性和稳定性。