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

一、项目背景与意义

直播电商已经成为电商行业增长最快的渠道之一，主播团队在开播前需要完成大量选品工作：从供应商处收集商品资料、评估价格与佣金、寄送样品、试用测评、确定上播排期。传统方式多依赖 Excel 表格和微信群沟通，容易出现商品信息分散、样品去向不明、选品进度不可追溯、多人协作冲突等问题。

本文设计并实现一套基于 Spring Boot + Vue3 的直播电商选品与样品管理系统，将商品库、选品流程、样品寄送与归还、直播排期、数据统计整合到统一平台，帮助直播团队提升选品效率、降低样品管理成本，并为后续的销售数据分析提供基础数据支撑。

二、系统需求分析

2.1 角色划分

• 管理员：负责用户与权限管理、基础数据维护、系统参数配置。
• 选品专员：录入商品信息、发起选品申请、跟进供应商报价与寄样。
• 主播/运营：查看候选商品、提交试用反馈、确认上播商品与排期。
• 供应商：提交商品资料、查看选品结果、跟踪样品状态。

2.2 核心功能需求

模块	主要功能
商品管理	商品分类、商品信息维护、图片与资质附件上传、SKU 与价格管理
选品流程	选品申请、多级审核、评分与标签、选品结果归档
样品管理	寄样登记、物流跟踪、签收确认、试用记录、归还与损耗登记
直播排期	直播间管理、场次排期、上播商品清单、坑位与佣金配置
数据统计	选品通过率、样品周转率、商品上播次数、供应商合作统计
系统管理	用户、角色、菜单权限、操作日志、字典与参数配置

2.3 非功能性需求

• 前后端分离，接口遵循 RESTful 风格，统一返回结构。
• 支持多角色细粒度权限控制，接口级鉴权。
• 关键业务操作留痕，支持操作日志审计。
• 列表查询支持分页、条件筛选与导出。

三、系统架构设计

3.1 总体架构

系统采用前后端分离架构：前端使用 Vue3 + Vite + Element Plus 构建管理后台，后端使用 Spring Boot 提供 RESTful 接口，MySQL 存储业务数据，Redis 缓存登录态与字典数据，文件资源存储于对象存储或本地文件服务。

flowchart LR
    A[Vue3 管理端] -->|HTTP/JSON| B[Spring Boot 应用]
    B --> C[(MySQL)]
    B --> D[(Redis)]
    B --> E[文件存储服务]
    B --> F[物流查询接口]
    B --> G[定时任务]

3.2 技术选型

层次	技术	说明
前端框架	Vue3 + Vite	组合式 API，构建速度快
UI 组件	Element Plus	后台管理常用组件库
状态管理	Pinia	管理用户信息与全局状态
后端框架	Spring Boot 3	快速构建 Web 应用
持久层	MyBatis-Plus	简化 CRUD 与分页
数据库	MySQL 8	业务数据存储
缓存	Redis	Token、字典、热点数据
鉴权	Spring Security + JWT	无状态认证与接口鉴权

3.3 分层结构

后端按 Controller、Service、Mapper、Entity、DTO/VO 分层，公共能力（统一响应、异常处理、日志切面、参数校验）抽取到 common 模块，便于后续扩展。

四、数据库设计

核心表设计如下，均包含创建时间、更新时间、逻辑删除标记等公共字段。

表名	说明	关键字段
sys_user	用户表	id、username、password、role_id、status
sys_role	角色表	id、role_name、role_code
product	商品表	id、name、category_id、supplier_id、price、commission_rate、status
product_category	商品分类表	id、name、parent_id、sort
supplier	供应商表	id、name、contact、phone、cooperation_status
selection_apply	选品申请表	id、product_id、applicant_id、audit_status、score、remark
sample	样品表	id、product_id、sample_no、status、send_time、receive_time、return_time
sample_record	样品流转记录	id、sample_id、action、operator_id、create_time
live_session	直播场次表	id、room_id、start_time、end_time、status
live_product	场次商品表	id、session_id、product_id、slot_no、live_price

五、核心功能实现

5.1 统一响应与全局异常处理

定义统一返回结构，前端只需判断 code 即可处理成功与失败场景。

public class Result<T> {
    private Integer code;
    private String message;
    private T data;
public static &lt;T&gt; Result&lt;T&gt; success(T data) {
    Result&lt;T&gt; r = new Result&lt;&gt;();
    r.setCode(200);
    r.setMessage("success");
    r.setData(data);
    return r;
}

public static &lt;T&gt; Result&lt;T&gt; fail(String message) {
    Result&lt;T&gt; r = new Result&lt;&gt;();
    r.setCode(500);
    r.setMessage(message);
    return r;
}
}

5.2 选品申请与审核流程

选品申请提交后进入待审核状态，审核人可进行通过、驳回或退回修改操作，每次状态变更写入流转记录，保证流程可追溯。

@Service
@RequiredArgsConstructor
public class SelectionApplyService {
private final SelectionApplyMapper applyMapper;
private final SelectionRecordMapper recordMapper;

@Transactional(rollbackFor = Exception.class)
public void audit(Long applyId, Integer auditStatus, String remark, Long operatorId) {
    SelectionApply apply = applyMapper.selectById(applyId);
    if (apply == null) {
        throw new BizException("选品申请不存在");
    }
    if (!AuditStatus.PENDING.getCode().equals(apply.getAuditStatus())) {
        throw new BizException("当前状态不允许审核");
    }
    apply.setAuditStatus(auditStatus);
    apply.setRemark(remark);
    applyMapper.updateById(apply);

    SelectionRecord record = new SelectionRecord();
    record.setApplyId(applyId);
    record.setAuditStatus(auditStatus);
    record.setOperatorId(operatorId);
    record.setRemark(remark);
    recordMapper.insert(record);
}
}

5.3 样品状态流转

样品状态包括待寄出、运输中、已签收、试用中、待归还、已归还、损耗等，状态变更通过枚举约束，避免非法流转。

public enum SampleStatus {
    WAIT_SEND("待寄出"),
    SHIPPING("运输中"),
    RECEIVED("已签收"),
    TRIAL("试用中"),
    WAIT_RETURN("待归还"),
    RETURNED("已归还"),
    DAMAGED("损耗");
private final String desc;

SampleStatus(String desc) {
    this.desc = desc;
}

public String getDesc() {
    return desc;
}
}

5.4 前端选品列表页

使用 Vue3 组合式 API 与 Element Plus 表格组件实现条件查询与分页。

<template>
  <el-table :data="list" v-loading="loading">
    <el-table-column prop="productName" label="商品名称" />
    <el-table-column prop="supplierName" label="供应商" />
    <el-table-column prop="auditStatus" label="审核状态">
      <template #default="{ row }">
        <el-tag :type="statusType(row.auditStatus)">{{ statusText(row.auditStatus) }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="申请时间" />
  </el-table>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { getApplyPage } from '@/api/selection'
const list = ref([])
const loading = ref(false)
const loadData = async () => {
loading.value = true
try {
const res = await getApplyPage({ pageNum: 1, pageSize: 10 })
list.value = res.data.records
} finally {
loading.value = false
}
}
onMounted(loadData)
</script>

5.5 权限控制

后端使用 Spring Security 结合 JWT 实现无状态认证，接口通过注解声明所需权限，前端根据用户权限动态渲染菜单与按钮。

@PreAuthorize("hasAuthority('selection:audit')")
@PostMapping("/audit")
public Result<Void> audit(@RequestBody @Valid AuditDTO dto) {
    selectionApplyService.audit(dto.getApplyId(), dto.getAuditStatus(),
            dto.getRemark(), SecurityUtils.getUserId());
    return Result.success(null);
}

六、系统测试与部署

6.1 测试要点

• 接口测试：使用 Postman 或 Apifox 覆盖选品审核、样品流转等核心接口。
• 权限测试：验证不同角色访问越权接口时返回 403。
• 并发测试：模拟多人同时审核同一申请，验证状态校验与事务回滚。

6.2 部署方式

前端打包为静态资源，通过 Nginx 托管并反向代理后端接口；后端使用 Maven 打包为可执行 Jar，配合 Docker 部署，数据库与 Redis 独立部署，便于横向扩展。

# 前端构建
npm run build
后端打包
mvn clean package -DskipTests
启动后端
java -jar selection-system.jar --spring.profiles.active=prod

七、总结与展望

本文完成了基于 Spring Boot + Vue3 的直播电商选品与样品管理系统的需求分析、架构设计、数据库设计与核心功能实现，解决了选品信息分散、样品流转不透明、协作效率低等问题。

后续可从以下方向继续优化：接入直播平台开放接口自动同步销售数据，基于历史选品数据构建商品评分模型辅助决策，增加移动端支持方便主播随时查看样品与排期，以及引入消息通知机制提升流程响应速度。