# ShopSync

**Repository Path**: CodingKeep/ShopSync

## Basic Information

- **Project Name**: ShopSync
- **Description**: 基于Spring Boot + Mysql + MyBatis-Plus + ECharts + Vue 3 + Bootstrap 5 + Vite 实现的电商后台系统
- **Primary Language**: Java
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-01
- **Last Updated**: 2026-07-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 电商信息管理系统 - 登录 / 注册 / 学生信息管理

本项目使用 **Spring Boot + Mysql + MyBatis-Plus + ECharts + Vue 3 + Bootstrap 5 + Vite** 实现一个电商后台系统的 **登录 / 注册 / 仪表盘 + 学生信息管理 + 订单管理与可视化**。

### 功能说明（前端）

- **技术栈**: Vue 3、Vite、Bootstrap 5
- **登录页面**:
  - 使用 **手机号 + 密码** 登录（取消验证码功能）
  - 手机号需为 11 位大陆手机号
  - 密码为 **6–10 位字母与数字组合**
  - 支持“记住本次登录”，登录成功后使用 `localStorage` 记住登录状态和当前仪表盘 Tab
  - 右下角提供 **“忘记密码？”** 入口，可跳转到密码重置页面
- **注册页面**:
  - 字段：**用户名、密码、手机号、邮箱**，全部必填
  - 用户名需为 **5–10 位字母或数字**
  - 密码沿用登录规则（6–10 位字母数字组合）
  - 填写完成后调用后端 `/api/auth/register` 接口完成注册
  - 注册成功后自动回填登录表单（手机号 + 密码），并切回登录视图
  - 提供“返回登录页面”按钮
- **忘记密码页面**:
  - 通过登录页“忘记密码？”按钮进入
  - 输入注册时使用的手机号与新密码
  - 前端校验通过后调用 `/api/auth/reset-password` 接口重置密码，成功后自动回到登录页并回填新密码
- **仪表盘 / 后台首页（主控台数据概览）**:
  - 登录成功后跳转到「电商信息管理系统 · 仪表盘」
  - 左侧为固定导航：主控台、用户管理、订单管理、销售统计
  - 主控台右侧包含：
    - **核心指标卡片**：今日成交额、支付用户数、转化率、客单价
    - **销售额趋势图**：近 7 天销售额折线图（使用 ECharts 渲染）
    - **订单状态分布环图**：各状态（待付款 / 已付款 / 待发货 / 已发货 / 已完成 / 已取消 / 退款中 / 已退款）占比
    - **最近订单列表**：按时间倒序展示最近 10 条订单（模拟实时滚动），显示订单号、用户、金额、时间
  - 支持“退出登录”和刷新后保持登录状态（利用 `localStorage` 记住登录与当前选中菜单）
- **学生信息管理（用户管理模块）**:
  - 通过表格展示 `student_info` 表中的学生信息
  - 表头：**学号、姓名、年龄、班级、性别、籍贯、操作**
  - 每页显示 15 条记录，提供“上一页 / 下一页”分页按钮
  - 查询条件：
    - 学号精确查询（`student_number`）
    - 姓名模糊查询（`LIKE name`）
    - 班级筛选（精确等值）
  - 每行提供 **修改 / 删除** 按钮
  - 下方提供 **新增 / 修改学生信息** 表单，可新增记录或对选中行进行编辑保存
- **订单管理模块**:
  - 通过表格展示 `orders` 表中的订单信息
  - 表头：**订单号、用户、金额、支付方式、状态、下单时间、操作**
  - 每页显示 15 条记录，提供“上一页 / 下一页”分页按钮
  - 查询条件：
    - 订单号精确查询（`order_no`）
    - 用户姓名模糊查询
    - 订单状态筛选（待付款 / 已付款 / 待发货 / 已发货 / 已完成 / 已取消 / 退款中 / 已退款）
  - 每行提供 **详情 / 发货 / 取消** 按钮：
    - 当前示例中“详情”为弹窗展示订单基础信息
    - “取消”调用后端接口将订单状态修改为已取消并刷新列表（发货按钮预留，未实现）
- **商品管理模块**:
  - 接入后端 `/api/products` MyBatis-Plus 接口，表格展示商品 ID、名称、价格、库存、分类、上下架状态、创建时间
  - 支持按名称模糊搜索、分类/状态筛选，并提供多选复选框
  - 新增批量上/下架按钮，调用 `/api/products/batch/status` 接口一次性更新多个商品状态
  - 下方表单可完成商品的新增、编辑、删除，字段包含名称、价格、库存、分类、状态、图片 URL、描述等
- **销售统计模块**:
  - 时间选择：提供“近 7 天 / 近 30 天”快捷切换（可扩展自定义日期）
  - 核心指标卡：销售额、订单量、客单价、退款率，并显示与上一周期的差值
  - 图表：
    - 折线 + 柱状图展示销售额与订单量趋势
    - 环形图展示新客 / 老客占比
    - 两张横向柱状图展示“销售额 Top10 商品”和“销量 Top10 商品”
  - 底部提供“导出数据”按钮，可将当前统计结果下载为 CSV 文件（便于用 Excel 打开或进一步处理）
- **研发任务看板（DevOps 模块）**:
  - 左侧新增“研发看板”菜单，展示研发任务的总览、状态分布、优先级以及即将到期的事项
  - 支持按关键词、业务模块、负责人、状态、优先级组合筛选，表格展示每条任务的进度、关联订单 / 商品、起止时间
  - 可在前端直接新增 / 编辑 / 删除任务，或一键将任务状态切换为“待上线 / 已上线”，联动后端 `dev_tasks` 表
  - 与订单、商品等业务数据关联，方便追踪“业务需求 → 开发实现 → 上线验证”的闭环

### 本地运行步骤

1. 安装依赖
```bash
npm install

2. 启动前端开发服务器

```bash
npm run dev

启动后，浏览器访问终端中提示的地址（ `http://localhost:5173`）即可看到登录首页。

3. 运行前端单元测试

项目使用 [Vitest](https://vitest.dev) 做基础单元测试，覆盖：

- 表单校验函数（手机号 / 密码 / 验证码等）
- `App.vue` 登录 / 注册视图切换逻辑
- 仪表盘“用户管理 / 学生信息”视图加载与查询参数（姓名模糊查询、班级筛选）行为

```bash
npm run test       # 单次执行
npm run test:watch # 监听模式
```

### 目录结构（简要）

- `index.html`：Vite 入口 HTML，挂载 `#app`
- `src/main.js`：应用入口，注册 Vue、引入 Bootstrap 与全局样式
- `src/App.vue`：**登录 / 注册 / 仪表盘 / 学生信息管理 / 商品管理 / 订单管理 / 销售统计 / 研发看板主体组件**
- `src/assets/main.css`：全局样式，包含科技感背景、登录卡片、左侧导航栏、表格、统计卡片等样式
- `src/utils/validators.js`：抽离的表单校验逻辑（登录 + 注册），便于复用与测试
- `tests/validators.spec.js`：表单校验单元测试
- `tests/App.spec.js`：组件级单测，验证登录/注册视图切换、学生信息列表、订单列表取消操作等
- `db/schema.sql`：MySQL 初始化脚本，会创建 `test2023` 数据库以及 `users`、`student_info`、`orders`、`order_items` 四张表
- `vitest.config.js`、`vitest.setup.js`：Vitest 配置（jsdom 环境、mock `alert`）
- `server/`：Spring Boot 后端（登录接口、学生信息增删改查接口、设计模式示例）

如需继续扩展（例如真正的注册页面、路由、多页面等），可以在当前基础上新增 `vue-router` 与更多组件/视图。

### 数据库

与后台联调，在本地 MySQL 中创建 `test2023` 数据库（默认用户 `root` / 密码 `123456`），并执行：

```bash
mysql -u root -p < db/schema.sql
```

脚本会创建：

- `users` 表：包含 `id / username / password_hash / email / phone / salt / role / created_at / status` 字段，默认用户角色为 `user`、状态 `active`（作业演示中使用明文密码字段，真实项目请存储哈希+盐）。
- `student_info` 表：学生信息表，字段包括 `id / student_number / name / age / class_name / gender / hometown`，并预置约 20 条测试数据。
- `orders` 表：订单信息表，字段包括 `id / order_no / user_id / user_name / total_amount / status / pay_method / created_at / pay_time / address / logistics_no / remark`，并预置若干不同状态订单数据（待付款 / 待发货 / 已发货 / 退款中等）。
- `order_items` 表：订单商品明细，字段包括 `order_no / product_id / product_name / category / quantity / unit_price / total_amount`，用于销售统计模块的商品排行、品类分析等。
- `products` 表：商品主数据，包含价格、库存、分类、上下架状态、图片 URL 等字段，方便前端商品管理模块展示与批量操作。
- `dev_tasks` 表：研发任务/需求追踪，记录任务标题、业务模块、优先级、状态、负责人、关联订单/商品、起止时间、进度百分比等信息，对应“研发看板”模块。

### 后端（Spring Boot + 设计模式示例）

1. 进入 `server` 目录并启动：

```bash
cd server
mvn spring-boot:run
```

2. 参考默认账号（如 `13800000000`）、密码（例如 `ab1234`，请与数据库中 `users.password_hash` 一致）。
   - 登录接口：`POST http://localhost:8080/api/auth/login`
   - 注册接口：`POST http://localhost:8080/api/auth/register`
   - 忘记密码接口：`POST http://localhost:8080/api/auth/reset-password`

3. MyBatis-Plus 学生信息管理：

- 接口前缀：`/api/students`
- 分页查询：`GET /api/students?page=1&size=15&studentNumber=20230001&name=张&className=计科2301`
- 新增记录：`POST /api/students`，请求体为 `StudentInfo` JSON
- 修改记录：`PUT /api/students/{id}`
- 删除记录：`DELETE /api/students/{id}`

4. 仪表盘统计与订单管理接口：

- 仪表盘统计：`GET /api/dashboard/stats`，返回核心指标、订单状态占比、金额趋势、最近订单列表等数据，供主控台图表与列表使用。
- 订单管理：
  - `GET /api/orders?page=1&size=15&orderNo=202312010001&userName=张三&status=PAID`
  - `POST /api/orders/{id}/cancel`：将指定订单状态改为已取消。
5. 销售统计接口：

- `GET /api/analytics/sales?range=7d`：获取销售 KPI、趋势、商品排名、新老客占比；支持 `range=30d` 或 `range=custom&startDate=2025-11-01&endDate=2025-11-30`。
- 后续可扩展导出、钻取、按商品跳转订单列表等交互（需求文档中提到的“数据联动”可以在此基础上拓展）。

5. 后端设计模式说明（示例实现）：

- **创建型**：
  - `VerificationStrategyFactory` 根据渠道动态选择验证码策略（SMS / Bypass）。
  - `OrderServiceImpl` 中的 `toSummary` 方法负责将 `Order` 创建为列表展示用的 `OrderSummaryDto`。
- **结构型**：
  - `AuthFacade` 提供统一登录入口，封装鉴权、验证码校验、仪表盘生成。
  - `DashboardStatsController` + `DashboardStatsService` 对外暴露单一 `/api/dashboard/stats` 接口，聚合多种统计数据。
  - `SalesAnalyticsController` + `SalesAnalyticsService` 对外暴露 `/api/analytics/sales`，统一提供 KPI、趋势、排行、用户分析等数据。
- **行为型**：
  - `VerificationStrategy`、`SmsVerificationStrategy`、`BypassVerificationStrategy` 实现策略模式（可插拔验证码策略）。
  - 订单查询与统计通过组合条件（Specification / 流式过滤）体现不同行为分支；销售统计模块根据不同时间窗口动态计算数据、并支持对比上个周期。
- **单例型**：
  - `VerificationCodeStore`（枚举单例）集中存储/校验验证码。

登录成功后会返回一个仪表盘数据，其中包含左侧菜单（用户管理 / 订单管理 / 销售统计）及状态提示；前端会在“用户管理 / 学生信息”页通过 MyBatis-Plus 的 REST 接口实现学生信息的增删改查，并在“订单管理 / 主控台”中通过 REST 接口实现订单列表与数据可视化。