# 基于Vue+ElementPlus+Pinia的图书商城后台管理系统

**Repository Path**: dcwedu/book-mall-manage

## Basic Information

- **Project Name**: 基于Vue+ElementPlus+Pinia的图书商城后台管理系统
- **Description**: 基于Vue+ElementPlus+Pinia的图书商城后台管理系统
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 9
- **Forks**: 1
- **Created**: 2022-08-18
- **Last Updated**: 2025-06-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, Element-UI, Pinia

## README

# GROUP FOUR在线书城及中后台管理系统

gitee仓库：

前端仓库：https://gitee.com/dcwedu/book-mall-front

后端源码：https://wedu.lanzoub.com/idPhV2dfuhpi

管理系统仓库：https://gitee.com/dcwedu/book-mall-manage

## 一、数据库设计

### 1.用户信息

| 字段名   | userID | username    | sex        | telephone   | email       | createDate | userState            | isAdmin    |
| -------- | ------ | ----------- | ---------- | ----------- | ----------- | ---------- | -------------------- | ---------- |
| 数据类型 | int    | varchar(20) | varchar(1) | varchar(11) | varchar(50) | datetime   | boolean              | boolean    |
| 备注     | 用户ID | 用户名      | 性别       | 手机号      | 邮箱        | 创建时间   | 用户状态（是否禁用） | 是否管理员 |

### 2.图书信息（两表联查）

| 字段名   | bookID | title        | author       | ISBN        | coverImg | categoryID | price | stockNum | soldNum  | pubDate                     | publisher    | language     | summary  |
| -------- | ------ | ------------ | ------------ | ----------- | -------- | ---------- | ----- | -------- | -------- | --------------------------- | ------------ | ------------ | -------- |
| 数据类型 | int    | varchar(255) | varchar(255) | varchar(13) | longtext | int        | float | int      | int      | datetime                    | varchar(255) | varchar(255) | longtext |
| 备注     | 图书ID | 图书名       | 作者         | ISBN号      | 图片链接 | 图书分类ID | 价格  | 库存数量 | 售出数量 | 出版时间，日期格式：YYYY-MM | 出版社       | 语言         | 简介     |

### 3.订单信息（两表联查）

| 字段名   | userID | bookID | orderID  | payState                 | orderState                                                   | orderAddress     | name         | telephone      |
| -------- | ------ | ------ | -------- | ------------------------ | ------------------------------------------------------------ | ---------------- | ------------ | -------------- |
| 数据类型 | int    | int    | int      | int                      | int                                                          | varchar(255)     | varchar(255) | varchar(11)    |
| 备注     | 用户ID | 图书ID | 订单编号 | 0表示未支付，1表示已支付 | 0表示已关闭，1表示购物车，2表示已提交订单，3表示已发货，4表示已完成 | 收货地址详细信息 | 收货人姓名   | 收货人联系方式 |

### 4.收货地址（两表联查）

| 字段名   | addressID | userID | region       | detail       | code       | name        | telephone   | status   |
| -------- | --------- | ------ | ------------ | ------------ | ---------- | ----------- | ----------- | -------- |
| 数据类型 | int       | int    | varchar(255) | varchar(255) | varchar(6) | varchar(20) | varchar(11) | boolean  |
| 备注     | 地址ID    | 用户ID | 省市区       | 详细地址     | 邮政编码   | 收货人      | 电话        | 是否默认 |

### 5.图书分类

| 字段名   | categoryID | category     |
| -------- | ---------- | ------------ |
| 数据类型 | int        | varchar(255) |
| 备注     | 图书分类ID | 图书分类     |

## 二、后端接口

#### 1.人员分工

| 人员   | 分工               |
| ------ | ------------------ |
| 包杭   | 图书管理，地址管理 |
| 余金海 | 订单管理，分类管理 |
| 何宾   | 用户管理           |

#### 2.接口文档

https://www.apifox.cn/apidoc/shared-6e213fb0-0ca9-4f55-9795-3d385bb91d04

#### 3.图片存储

图片采用阿里云OSS存储，HTTP请求头设置为Content-type=image/jpg，Content-disposition=inline，此时访问文件公网链接提供预览而非下载。

#### 4.后端环境

| 分类       | 环境                                               |
| ---------- | -------------------------------------------------- |
| 主要框架   | Springboot                                         |
| 管理工具   | maven                                              |
| ORM        | mybatis-plus，mybatis-plus-generator，mysql-driver |
| OSS        | aliyun-sdk-oss                                     |
| 接口文档   | swagger生成json转apifox                            |
| 其他工具类 | lombok，java-jwt，validation                       |

## 三、前端页面

#### 1.人员分工

| 人员   | 分工                                                         |
| ------ | :----------------------------------------------------------- |
| 卢朦   | 主页，用户登录/注册                                          |
| 蔡克隆 | 我的订单，图书详情页，图书分类页面                           |
| 王赟诚 | 框架搭建，购物车，结算页面，我的地址，个人信息，内容/样式完善，后台管理系统 |

#### 2.前端环境

##### 1)图书商城

| 分类         | 环境                                      |
| ------------ | ----------------------------------------- |
| 框架         | Vue3.x                                    |
| 包管理器     | npm                                       |
| 构建工具     | webpack                                   |
| 组件库       | ElementPlus，ElementPlus Icons，Hover.css |
| 插件         | vue-router，vuex，axios                   |
| CSS预处理器  | sass/scss                                 |
| 模拟后端环境 | json-server                               |

##### 2)后台管理系统

| 分类         | 环境                              |
| ------------ | --------------------------------- |
| 框架         | Vue3.x                            |
| 包管理器     | npm                               |
| 构建工具     | webpack                           |
| 组件库       | ElementPlus，ElementPlus Icons    |
| 插件         | pinia，axios，vue-router，Echarts |
| CSS预处理器  | sass/scss                         |
| 模拟后端环境 | json-server                       |

#### 3.原型设计

参考提供的文档，按照实际情况进行了重新设计。

## 四、遇到的问题

### 1.MD5加密与解密问题

在测试过程中，我们碰到了一个问题：修改密码后存在一定可能性使登录传入密码的加密结果与数据库中密码的加密结果不一致（同一个字符串的加密方式不同），百度说可能是系统环境导致的MD5算法问题。

**解决方式：尚未解决。**

### 2.OSS访问公网外链直接下载而非预览

项目开始的第二天，我们确定了使用阿里云OSS对图书封面进行存储，在调试过程中发现访问公网外链只能下载而不能预览。为了解决这个问题，我参考了百度和CSDN的解决方案，在经过数次测试后发现仅当HTTP请求头中的Content-type被设置为image/jpg且Content-disposition被设置为inline才能进行预览，之前一直踩了Content-type为image/jpeg的坑。实测发现png也不能预览，所以最后规定了只能上传jpg/jpeg格式的图片。

### 3.统一图片大小

阿里云OSS中自带图片处理，只需新建一个样式固定大小，并在公网外链的query参数中加入这个样式即可。如我们的样式：book-cover: image/auto-orient,1/resize,m_fixed,w_135,h_195/quality,q_90，只需在公网外链的query参数中加入?x-oss-process=style/book-cover对图片进行处理即可。

### 4.后台管理系统的搭建

对于后台管理系统的搭建，我纠结了很久用什么框架，之前用fantastic-admin写了两个页面，感觉封装集成度太高了，就没有继续使用这个框架，最终还是使用vue自己搭了一个。