vue_shop：电商后台管理系统

在线演示地址

项目 API 接口文档

一、项目简介

1. 系统功能

电商后台管理系统具有管理用户账号、商品分类、商品信息、订单、数据统计等业务功能。

2. 开发模式(前后端分离)

电商后台管理系统整体采用前后端分离的开发模式，其中前端项目是基于 Vue 技术栈的 SPA 项目。

3. 技术选型

• 前端项目技术栈
  • Vue
  • Vue-router
  • Element-UI
  • Axios
  • Echarts
• 后端项目技术栈
  • Node.js
  • Express
  • Jwt
  • Mysql
  • Sequelize

二、界面展示

1. 管理员登录

2. 用户管理：用户列表

3. 权限管理：角色列表

4. 权限管理：权限列表

5. 商品管理：商品列表

6. 商品管理：商品详情

7. 商品管理：添加商品

8. 商品管理：分类参数

9. 商品管理：商品分类

10. 订单管理：订单列表

11. 数据统计：数据报表

三、功能简介

1. 登录功能

1. 业务流程

1 在登录页面输入用户名和密码 2 调用后台接口进行验证 3 通过验证之后，根据后台的响应状态跳转到项目主页

2. 登录业务的相关技术点

1 http 是无状态的 2 通过 cookie 在客户端记录状态 3 通过 session 在服务器端记录状态 4 通过 token 方式维持状态

3. token 原理分析

2. 用户管理

通过后台管理用户的账号信息，具体包括用户信息的展示、添加、修改、删除、角色分配、账号启用/注销等功能。

• 用户信息列表展示
• 添加用户
• 修改用户
• 删除用户
• 启用或禁用用户
• 用户角色分配
• 用户查询

3. 权限管理

通过权限管理模块控制不同的用户可以进行哪些操作，具体可以通过角色的方式进行控制，即每个用户分配一个特定的角色，角色包括不同的功能权限。

• 角色信息列表展示
• 权限信息列表展示
• 添加角色
• 修改角色
• 删除角色
• 角色权限分配
• 角色权限删除

4. 分类管理

商品分类用于在购物时，快速找到所要购买的商品，可以通过电商平台主页直观的看到。

• 商品分类树状列表展示
• 添加分类
• 修改分类
• 删除分类

5. 参数管理

商品参数用于显示商品的固定的特征信息，可以通过电商平台商品详情页面直观的看到。

• 动态参数列表展示
• 静态属性列表展示
• 标签展示
• 标签删除
• 添加参数
• 修改参数
• 删除参数

6. 商品管理

商品管理模块用于维护电商平台的商品信息，包括商品的类型、参数、图片、详情等信息。通过商品管理模块可以 实现商品的添加、修改、展示和删除等功能。

• 商品列表展示
• 商品详情面板
• 添加商品（商品信息、参数属性、图片和详情）
• 修改商品
• 删除商品
• 商品查询

7. 订单管理

订单管理模块用于维护商品的订单信息，可以查看订单的商品信息、物流信息，并且可以根据实际的运营情况对订 单做适当的调整。

• 订单列表展示
• 修改收货地址
• 物流信息展示

8. 数据统计

数据统计模块主要用于统计电商平台运营过程的中的各种统计数据，并通过直观的可视化方式展示出来，方便相关 运营和管理人员查看。

• 数据报表展示

四、项目优化：

1. 生成打包报告，根据报告优化项目

根据VUE UI面板中的项目编译日志，优化项目

2. 第三方库启用CDN

3. Element-UI组件按需加载

4. 路由懒加载

5. 首页内容定制（页面标题，条件引入CDN）

6. 修改webpack配置，删除main.js，新建main-prod.js和main-dev.js，分别用于开发环境和发布环境

7. 页面加载时显示进度条

8. alias别名配置

9. vue_router改为history模式，服务器设置nginx转发：try_files $uri $uri/ /index.html;

10. 分包：network网络封装，工具类common，视图views