logo
qshenzhang/litemall
Public
0
0
WeChat Login
CodeIssuesPull requestsEventsPackagesInsights
master
litemall/README.md
dylancheong<neocheung@163.com>
feat: 完善Docker部署配置和修复构建问题
4569cfbf
0 commits

litemall-admin 管理控制台系统分析

项目概述

litemall-admin 是一个基于 Vue 2.x + Element UI 构建的商城管理后台系统，为litemall电商系统提供完整的管理功能，支持商品管理、订单管理、用户管理、营销活动、系统配置等核心业务功能。

系统架构

技术架构

mermaid
graph TB
    subgraph "前端架构层"
        A[Vue管理后台<br/>litemall-admin]
        B[微信小程序用户端<br/>litemall-wx]
        C[Vue用户移动端<br/>litemall-vue]
        D[Renard微信小程序<br/>renard-wx]
    end
    
    subgraph "后端服务层"
        E[管理员API<br/>litemall-admin-api]
        F[微信API<br/>litemall-wx-api]
        G[统一服务<br/>litemall-all]
    end
    
    subgraph "核心业务层"
        H[核心模块<br/>litemall-core]
        I[数据库模块<br/>litemall-db]
    end
    
    subgraph "数据存储层"
        J[(MySQL数据库)]
        K[(Redis缓存)]
    end
    
    A --> E
    B --> F
    C --> F
    D --> F
    E --> H
    F --> H
    G --> H
    H --> I
    I --> J
    I --> K

技术栈

前端技术栈

  • 框架: Vue 2.6.10
  • UI库: Element UI 2.15.6
  • 路由管理: Vue Router 3.0.2
  • 状态管理: Vuex 3.1.0
  • HTTP客户端: Axios 0.21.2
  • 国际化: Vue I18n 8.28.2
  • 构建工具: Vue CLI Service 4.4.4
  • 包管理: npm 3.0.0+

后端技术栈

  • 框架: Spring Boot 2.x
  • 安全: Spring Security
  • 数据: Spring Data JPA
  • 数据库: MySQL 8.0
  • ORM: MyBatis
  • 缓存: Redis
  • API文档: Swagger

核心业务模块

1. 仪表盘 (Dashboard)

功能描述: 系统首页数据统计展示 主要特性:

  • 访问统计
  • 订单概览
  • 商品统计
  • 用户统计 相关页面: views/dashboard/index.vue

2. 用户管理模块

2.1 用户信息管理

功能描述: 管理平台用户信息 核心功能:

  • 用户列表查询
  • 用户信息编辑
  • 用户状态管理
  • 用户权限分配 相关页面:
  • views/user/user.vue - 用户列表
  • views/user/address.vue - 收货地址管理
  • views/user/collect.vue - 收藏管理
  • views/user/footprint.vue - 足迹管理
  • views/user/history.vue - 浏览历史
  • views/user/feedback.vue - 意见反馈

2.2 权限管理

功能描述: 基于RBAC模型的权限控制系统 权限标识:

  • GET /admin/user/list - 用户查询
  • POST /admin/user/create - 用户创建
  • GET /admin/user/detail - 用户详情
  • POST /admin/user/update - 用户更新
  • POST /admin/user/delete - 用户删除

3. 商城管理模块

3.1 商品管理

功能描述: 完整的商品生命周期管理 核心功能:

  • 商品信息维护
  • 商品分类管理
  • 品牌管理
  • 商品规格管理
  • 库存管理 相关页面:
  • views/goods/list.vue - 商品列表
  • views/goods/create.vue - 商品创建
  • views/goods/edit.vue - 商品编辑
  • views/mall/category.vue - 分类管理
  • views/mall/brand.vue - 品牌管理

3.2 订单管理

功能描述: 订单全流程管理 核心功能:

  • 订单查询
  • 订单详情查看
  • 发货管理
  • 售后服务
  • 退款处理 相关页面:
  • views/mall/order.vue - 订单列表
  • views/mall/aftersale.vue - 售后管理

3.3 营销活动管理

功能描述: 促销和营销活动管理 活动类型:

  • 广告管理
  • 优惠券管理
  • 团购规则
  • 专题活动 相关页面:
  • views/promotion/ad.vue - 广告管理
  • views/promotion/coupon.vue - 优惠券管理
  • views/promotion/grouponRule.vue - 团购规则
  • views/promotion/topic.vue - 专题管理

4. 系统管理模块

4.1 系统配置

功能描述: 系统参数配置管理 配置项:

  • 商城基础配置
  • 快递公司配置
  • 订单配置
  • 微信小程序配置 相关页面:
  • views/config/mall.vue - 商城配置
  • views/config/express.vue - 快递配置
  • views/config/order.vue - 订单配置
  • views/config/wx.vue - 微信配置

4.2 日志管理

功能描述: 系统操作日志记录和查询 日志类型:

  • 用户操作日志
  • 管理员操作日志
  • 系统异常日志 相关页面: views/sys/log.vue

4.3 管理员管理

功能描述: 管理员账号管理 核心功能:

  • 管理员账号管理
  • 角色权限分配 相关页面: views/sys/admin.vue - 管理员管理

4.4 角色管理

功能描述: 基于RBAC的角色权限管理 权限控制:

  • 角色创建
  • 权限分配
  • 权限修改 相关页面: views/sys/role.vue - 角色管理

业务时序图

用户登录时序图

mermaid
sequenceDiagram
    participant U as 用户
    participant L as litemall-admin
    participant A as litemall-admin-api
    participant S as Spring Security
    
    U->>L: 输入用户名密码
    L->>A: 发送登录请求
    A->>S: 验证用户凭据
    S-->>A: 返回验证结果
    A-->>L: 返回Token和用户信息
    L->>L: 存储Token到Vuex
    L->>L: 更新用户状态

商品管理时序图

mermaid
sequenceDiagram
    participant A as 管理员
    participant L as litemall-admin
    participant P as litemall-admin-api
    participant D as MySQL数据库
    
    A->>L: 访问商品列表页面
    L->>P: GET /admin/goods/list
    P->>D: 查询商品数据
    D-->>P: 返回商品列表
    P-->>L: 返回商品数据
    L->>L: 渲染商品列表
    
    A->>L: 点击创建商品
    L->>P: POST /admin/goods/create
    P->>D: 插入商品数据
    D-->>P: 返回创建结果
    P-->>L: 返回商品ID
    L->>L: 跳转商品编辑页面

订单处理时序图

mermaid
sequenceDiagram
    participant U as 用户
    participant A as litemall-admin
    participant P as litemall-admin-api
    participant D as 数据库
    
    U->>A: 下单购买商品
    A->>P: GET /admin/order/list
    P->>D: 查询订单信息
    D-->>P: 返回订单数据
    P-->>A: 显示订单列表
    
    A->>A: 点击发货
    A->>P: POST /admin/order/ship
    P->>D: 更新订单状态
    D-->>P: 返回更新结果
    P-->>A: 显示发货成功

数据库设计

主要数据表 ER 图

mermaid
erDiagram
    USER ||--o{ ORDER : "用户下订单"
    USER ||--o{ ADDRESS : "用户收货地址"
    USER ||--o{ COLLECT : "用户收藏"
    USER ||--o{ FOOTPRINT : "用户足迹"}
    
    GOODS ||--o{ ORDER_GOODS : "订单商品明细"}
    GOODS ||--o{ CATEGORY : "商品分类"
    GOODS ||--o{ BRAND : "商品品牌"}
    GOODS ||--o{ COMMENT : "商品评论"}
    
    ADMIN ||--o{ ROLE : "管理员角色"
    ADMIN ||--o{ PERMISSION : "角色权限"}
    
    ORDER ||--o{ AFTERSALE : "售后订单"}
    
    COUPON ||--o{ USER_COUPON : "用户优惠券"}
    
    AD ||--o{ MALL_CONFIG : "广告配置"}
    
    GROUPON ||--o{ GROUPON_ACTIVITY : "团购活动"}
    
    TOPIC ||--o{ GOODS_TOPIC : "商品专题"}
    
    NOTICE ||--o{ USER_NOTICE : "用户通知"}
    
    SEARCH_HISTORY ||--o{ USER_SEARCH : "用户搜索历史"}
    
    COMMENT ||--o{ COMMENT_REPLY : "评论回复"}
    
    GrouponRules ||--o{ GROUPON_RULES : "团购规则"}
    
    KEYWORD ||--o{ SEARCH_KEYWORD : "搜索关键词"}
    
    FEEDBACK ||--o{ USER_FEEDBACK : "用户反馈"}
    
    SYSTEM_CONFIG ||--o{ CONFIG_GROUP : "系统配置组"}
    
    REGION ||--o{ GOODS_REGION : "商品地区"}
    
    EXPRESS ||--o{ EXPRESS_COMPANY : "快递公司"}
    
    ISSUE ||--o{ GOODS_ISSUE : "商品问题"}

API 接口规范

RESTful API 设计

系统采用RESTful API设计，主要接口如下：

用户管理API

  • GET /admin/user/list - 获取用户列表
  • POST /admin/user/create - 创建用户
  • GET /admin/user/detail/{id} - 获取用户详情
  • POST /admin/user/update - 更新用户信息
  • POST /admin/user/delete - 删除用户

商品管理API

  • GET /admin/goods/list - 获取商品列表
  • POST /admin/goods/create - 创建商品
  • GET /admin/goods/detail/{id} - 获取商品详情
  • POST /admin/goods/update - 更新商品信息
  • POST /admin/goods/delete - 删除商品

订单管理API

  • GET /admin/order/list - 获取订单列表
  • GET /admin/order/detail/{id} - 获取订单详情
  • POST /admin/order/ship - 订单发货
  • POST /admin/order/refund - 订单退款

营销活动API

  • GET /admin/coupon/list - 获取优惠券列表
  • POST /admin/coupon/create - 创建优惠券
  • GET /admin/ad/list - 获取广告列表
  • POST /admin/ad/create - 创建广告

认证与授权

系统采用基于JWT的认证机制：

认证流程

  1. 用户登录时提交用户名和密码
  2. 后端验证用户凭据
  3. 验证成功生成JWT Token
  4. 前端存储Token到Cookie和Vuex
  5. 后续请求携带Token进行认证

权限控制

基于RBAC (Role-Based Access Control) 模型：

  • 用户分配角色
  • 角色关联权限
  • 接口级权限验证
  • 前端路由守卫控制

核心组件说明

1. Layout组件

文件: src/views/layout/Layout.vue 功能: 应用主布局框架 特性:

  • 响应式侧边栏
  • 移动端适配
  • 动态路由渲染
  • 标签页管理

2. 权限控制组件

文件: src/permission.js 功能: 路由权限验证 实现方式:

// 全局权限指令
Vue.directive('permission', {
  inserted(el, binding) {
    const { perms } = binding.value
    if (perms && !checkPermission(perms)) {
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
})

3. HTTP请求封装

文件: src/utils/request.js 功能: 统一HTTP请求处理 特性:

  • 请求/响应拦截器
  • Token自动携带
  • 错误统一处理
  • 超时控制

4. 状态管理

文件: src/store/index.js 功能: Vuex状态管理 模块化:

  • app模块 - 应用状态
  • permission模块 - 权限状态
  • user模块 - 用户状态
  • tagsView模块 - 标签页状态

开发规范

代码规范

  • ESLint配置：统一代码风格检查
  • Git hooks：提交前代码检查
  • 组件命名：PascalCase
  • 文件命名：kebab-case

样式规范

  • SCSS模块化
  • Element UI主题定制
  • 响应式设计
  • 移动端适配

部署说明

开发环境

# 安装依赖
npm install

# 启动开发服务
npm run dev

生产环境

# 构建生产版本
npm run build

# 部署到服务器
# 1. 构建dist目录
# 2. 配置Nginx反向代理
# 3. 配置HTTPS证书

安全特性

认证安全

  • JWT Token认证
  • Token过期自动刷新
  • 密码加密传输
  • 登录失败锁定机制

权限安全

  • 细粒度权限控制
  • 路由级权限验证
  • 接口级权限检查
  • 操作日志记录

数据安全

  • SQL注入防护
  • XSS攻击防护
  • CSRF防护
  • 敏感数据加密

性能优化

前端优化

  1. 路由懒加载: 减少初始包大小
  2. 组件按需加载: 动态import组件
  3. 图片优化: 合理压缩和格式
  4. 代码分割: Webpack代码分割
  5. 缓存策略: 浏览器缓存优化

后端优化

  1. 数据库优化: 合理索引设计
  2. 缓存策略: Redis缓存热点数据
  3. 连接池: 数据库连接池配置
  4. 异步处理: 异步业务逻辑处理

扩展功能

多语言支持

  • Vue I18n国际化
  • 中英文切换
  • 动态语言包加载
  • Element UI多语言

主题定制

  • SCSS变量系统
  • Element UI主题定制
  • 暗色/亮色主题

移动端适配

  • 响应式布局
  • 触摸事件优化
  • 移动端专用组件

测试策略

单元测试

  • Jest单元测试框架
  • 组件级测试覆盖
  • 工具函数测试

集成测试

  • 端到端业务流程测试
  • 接口集成测试
  • 跨浏览器兼容性测试

维护与监控

日志系统

  • 操作日志记录
  • 错误日志收集
  • 性能监控
  • 异常告警

版本管理

  • Git版本控制
  • 自动化部署流程
  • 回滚机制

这个文档全面分析了litemall-admin管理控制台的架构设计、技术实现、业务流程和系统特性，为开发和维护提供了详细的技术指导和参考。

© 2026 Tencent, Inc. Supported by Tencent Cloud
About Us
Privacy Policy
Terms of Service
SLA
API
Docs
Showcase
Feedback
35/F,Tencent Building,Kejizhongyi Avenue,Nanshan District,Shenzhen
京ICP备11018762号-111
粤公网安备44030002006058号粤公网安备44030002006058号