电商后台管理系统

2020/5/12 vue

项目地址:http://lpeng.top/shop (opens new window)

# 1. 项目概述

# 1.1 基本业务概述

根据不同的应用场景,电商系统一般都提供了 PC 端移动 APP移动 Web微信小程序等多种终端访问方式。

graph LR

B[PC端] -->A(服务器)
C[PC后台管理] -->A(服务器)
D[小程序] -->A(服务器)
E[移动Web] -->A(服务器)
F[移动APP] -->A(服务器)

A(服务器) --> G(数据库)
1
2
3
4
5
6
7
8
9

# 1.2 功能

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


graph TD

A[电商后台管理系统] -->B(用户登录)

A --> C(退出登录)
A --> D(用户管理)
A --> E(权限管理)
A --> F(商品管理)
A --> G(订单管理)
A --> H(数量统计)

E --> I(角色权限)
E --> J(权限列表)

F --> 1(商品列表)
F --> 2(分类管理)
F --> 3(参数管理)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 1.3 开发模式

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


graph LR

A[用户] -->B(前端项目SPA) -->C(后端项目) -->D[数据库]

1
2
3
4
5

# 1.4 技术选型

  1. 前端项目技术栈

    • Vue
    • Vue-router
    • Element-UI
    • Axios
    • Echarts
  2. 后端项目技术栈

    • Node.js
    • Express
    • Jwt(接口验证)
    • Mysql·
    • Sequelize(操作数据库的框架)

# 2. 项目初始化

# 2.1 前端项目初始化步骤

  1. 安装 Vue 脚手架
  2. 通过 Vue 脚手架创建项目
  3. 配置 Vue-router 路由
  4. 配置 Element-UI 组件库
  5. 配置 axios 库
  6. less 开发依赖
  7. 初始化 git 远程仓库
  8. 将本地项目托管到 Github 或 码云 中

# 2.2 后台项目环境安装配置

  1. 安装 MySQL 数据库
  2. 安装 Node.js 环境
  3. 配置项目相关信息
  4. 启动项目
  5. 使用 Postman 测试后台项目接口是否正常