图书电商小程序

项目简介

这是一个完整的图书电商平台系统，包含微信小程序端和PC管理后台。系统实现了图书展示、购物车、订单管理、地址管理、图书评价、收藏等核心电商功能，专注于图书品类，采用前后端分离架构，适合作为微信小程序全栈开发学习项目或计算机设计参考。

技术栈

后端技术

技术	版本/说明
运行环境	Node.js
Web框架	Express 4.16.1
数据库	MySQL 5.7+
数据库驱动	mysql
身份认证	jsonwebtoken (JWT)
文件上传	multer
跨域处理	cors
UUID生成	uuid
热重载	nodemon

管理后台技术

技术	版本/说明
前端框架	Vue 2.6.11
UI组件库	Element UI 2.15.6
路由管理	Vue Router 3.0.7
状态管理	Vuex 3.4.0
HTTP请求	Axios 0.24.0
图表库	ECharts 5.3.1
富文本编辑器	Quill 1.3.7
CSS预处理器	Less

小程序端技术

技术	版本/说明
开发框架	微信小程序原生框架
开发语言	JavaScript (ES6+)
样式语言	WXSS
模板语言	WXML

项目特点

• 前后端分离：后端提供RESTful API，前端独立开发部署
• 完整电商流程：涵盖图书浏览、购物车、下单、支付、评价全流程
• 图书专业化：专注图书品类，支持作者、出版社等图书特有属性
• SKU规格管理：支持图书多规格（套装、版本等）
• 地址管理：支持多地址管理和默认地址设置
• 订单状态流转：待支付→已付款→待收货→已签收完整状态
• 数据可视化：管理后台集成ECharts图表展示
• 富文本支持：支持富文本图书详情编辑和展示

功能模块

小程序端功能

1. 首页模块 (pages/index)

• 轮播图展示
• 图书分类导航
• 热门图书推荐
• 新书上架展示
• 搜索功能入口

2. 图书分类模块 (pages/cate)

• 按分类浏览图书
• 分类列表展示
• 图书筛选

3. 图书详情模块 (pages/detail)

• 图书封面展示
• 图书基本信息（书名、价格、作者、出版社）
• SKU规格选择（套装、版本等）
• 图书详情富文本展示
• 用户评价查看
• 收藏功能
• 加入购物车
• 立即购买

4. 搜索模块 (pages/search)

• 关键词搜索
• 搜索结果展示
• 搜索历史
• 热门搜索

5. 购物车模块 (pages/shopCart)

• 购物车图书列表
• 图书数量修改
• 图书删除
• 全选/取消全选
• 价格计算
• 去结算

6. 订单模块

• 订单确认 (pages/comfirm)
• 订单列表 (pages/orderList)
• 订单详情 (pages/orderDetail)
• 订单状态查看
• 订单取消

7. 地址管理模块

• 地址列表 (pages/addressList)
• 新增/编辑地址 (pages/addressAddUpdate)
• 设置默认地址
• 省市区选择

8. 评价模块 (pages/comment)

• 图书评价
• 上传评价图片
• 评价列表查看

9. 个人中心模块 (pages/my)

• 用户信息展示
• 我的收藏 (pages/star)
• 我的订单
• 问题反馈 (pages/question)
• 用户信息编辑 (pages/userInfo)

管理后台功能

1. 首页仪表盘 (Welcome.vue)

• 数据统计概览
• 销售图表展示
• 订单趋势分析

2. 分类管理 (Cate)

• 图书分类列表
• 新增/编辑/删除分类
• 分类图标上传
• 分类排序

3. 图书管理 (Product)

• 图书信息列表
• 新增/编辑/删除图书
• 图书封面上传
• SKU规格管理
• 热门/新书标记
• 富文本详情编辑
• 库存管理
• 作者/出版社管理

4. 订单管理 (Order)

• 订单列表
• 订单状态管理
• 发货处理
• 订单详情查看
• 订单统计

5. 用户管理 (User.vue)

• 用户列表
• 用户信息查看
• 用户消费统计

6. 收藏管理 (Star.vue)

• 收藏记录列表
• 收藏统计分析

7. 问题反馈 (Question.vue)

• 用户反馈列表
• 回复处理
• 问题分类

项目结构

book-all-mini-program/
├── admin/                          # 管理后台（Vue2 + Element UI）
│   ├── public/                     # 静态资源
│   ├── src/
│   │   ├── api/                    # API接口封装
│   │   ├── assets/                 # 静态资源
│   │   ├── components/             # 公共组件
│   │   ├── filters/                # 过滤器
│   │   ├── router/                 # 路由配置
│   │   ├── store/                  # Vuex状态管理
│   │   ├── utils/                  # 工具函数
│   │   ├── views/                  # 页面视图
│   │   │   ├── Cate/               # 分类管理
│   │   │   ├── Order/              # 订单管理
│   │   │   ├── Product/            # 图书管理
│   │   │   ├── Home.vue            # 主布局
│   │   │   ├── Login.vue           # 登录页
│   │   │   ├── Question.vue        # 问题反馈
│   │   │   ├── Star.vue            # 收藏管理
│   │   │   ├── User.vue            # 用户管理
│   │   │   └── Welcome.vue         # 首页仪表盘
│   │   ├── App.vue                 # 根组件
│   │   └── main.js                 # 入口文件
│   ├── package.json
│   └── vue.config.js               # Vue配置
│
├── express/                        # 后端服务（Express + MySQL）
│   ├── bin/
│   │   └── www                     # 启动入口
│   ├── config/
│   │   ├── db.js                   # 数据库配置
│   │   └── index.js                # 全局配置
│   ├── public/
│   │   └── images/                 # 上传图片存储
│   ├── routes/
│   │   ├── admin/                  # 管理端API
│   │   │   ├── alldata.js          # 统计数据接口
│   │   │   ├── cate.js             # 分类接口
│   │   │   ├── comment.js          # 评论接口
│   │   │   ├── index.js            # 路由入口
│   │   │   ├── order.js            # 订单接口
│   │   │   ├── product.js          # 图书接口
│   │   │   ├── question.js         # 问题反馈接口
│   │   │   ├── star.js             # 收藏接口
│   │   │   └── user.js             # 用户接口
│   │   ├── web/                    # 小程序端API
│   │   │   ├── address.js          # 地址接口
│   │   │   ├── cate.js             # 分类接口
│   │   │   ├── comment.js          # 评论接口
│   │   │   ├── index.js            # 路由入口
│   │   │   ├── order.js            # 订单接口
│   │   │   ├── product.js          # 图书接口
│   │   │   ├── question.js         # 问题反馈接口
│   │   │   ├── shopcart.js         # 购物车接口
│   │   │   ├── star.js             # 收藏接口
│   │   │   └── user.js             # 用户接口
│   │   ├── index.js                # 路由入口
│   │   └── upload.js               # 文件上传
│   ├── util/                       # 工具函数
│   ├── app.js                      # Express应用配置
│   └── package.json
│
├── min/                            # 微信小程序
│   ├── components/                 # 自定义组件
│   ├── images/                     # 图片资源
│   ├── pages/                      # 页面目录
│   │   ├── index/                  # 首页
│   │   ├── cate/                   # 分类页
│   │   ├── search/                 # 搜索页
│   │   ├── detail/                 # 图书详情
│   │   ├── shopCart/               # 购物车
│   │   ├── comfirm/                # 订单确认
│   │   ├── orderList/              # 订单列表
│   │   ├── orderDetail/            # 订单详情
│   │   ├── addressList/            # 地址列表
│   │   ├── addressAddUpdate/       # 地址编辑
│   │   ├── comment/                # 评价页
│   │   ├── star/                   # 我的收藏
│   │   ├── my/                     # 个人中心
│   │   ├── userInfo/               # 用户信息
│   │   └── question/               # 问题反馈
│   ├── utils/                      # 工具函数
│   ├── app.js                      # 小程序入口
│   ├── app.json                    # 小程序配置
│   ├── app.wxss                    # 全局样式
│   └── project.config.json         # 项目配置
│
├── 图片资源/                        # 项目图片资源
│   ├── cate/                       # 分类图片
│   └── goods/                      # 图书图片
├── db_book_shop.sql                # 数据库SQL文件
├── mysql.sh                        # MySQL脚本
├── mysql操作手册.md                 # MySQL操作说明
├── 数据库创建方法.md                # 数据库创建说明
├── 新 - 运行必读.docx              # 运行说明文档
└── 演示视频.mp4                    # 项目演示视频

数据模型

用户表 (user)

{
  id: int,                    // 用户ID
  phone: varchar(11),         // 手机号
  password: varchar(100),     // 密码
  username: varchar(10),      // 用户名
  nickname: varchar(255),     // 昵称
  openId: varchar(100),       // 微信OpenID
  avatar: varchar(1000),      // 头像
  sex: int,                   // 性别
  role: int,                  // 角色 (0普通用户, 99管理员)
  active: int                 // 状态 (0禁用, 1正常)
}

图书表 (product)

{
  id: int,                    // 图书ID
  title: varchar(255),        // 书名
  content: longtext,          // 图书详情（富文本）
  cover: varchar(255),        // 封面图
  imgs: longtext,             // 图集
  is_hot: int,                // 是否热门 (0否 1是)
  is_new: int,                // 是否新书 (0否 1是)
  is_like: int,               // 是否推荐 (0否 1是)
  remark: varchar(100),       // 备注
  cate_id: int,               // 分类ID
  author: varchar(100),       // 作者
  booker: varchar(100),       // 出版社
  price_max: double,          // 最高价格
  price_min: double,          // 最低价格
  limit: int,                 // 限购数量
  sku_length: int,            // SKU数量
  create_time: timestamp,     // 创建时间
  update_time: timestamp      // 更新时间
}

分类表 (cate)

{
  id: int,                    // 分类ID
  title: varchar(100),        // 分类名称
  cover: varchar(100),        // 分类图标
  create_time: timestamp,     // 创建时间
  update_time: timestamp      // 更新时间
}

订单表 (orders)

{
  id: int,                    // 订单ID
  user_id: int,               // 用户ID
  total_price: double,        // 订单总价
  phone: varchar(100),        // 联系电话
  username: varchar(100),     // 收货人
  address: varchar(100),      // 收货地址
  status: int,                // 状态 (0待支付 1已付款 2待收货 3已签收 4已取消 5已退款)
  order_no: varchar(30),      // 订单号
  express_num: varchar(30),   // 快递单号
  create_time: timestamp,     // 下单时间
  pay_time: timestamp,        // 付款时间
  send_time: timestamp,       // 发货时间
  update_time: timestamp      // 更新时间
}

订单详情表 (order_detail)

{
  id: int,                    // 详情ID
  user_id: int,               // 用户ID
  order_id: int,              // 订单ID
  product_id: int,            // 图书ID
  product_title: varchar(1000), // 图书名称
  product_cover: varchar(1000), // 图书图片
  product_price: double,      // 图书单价
  product_count: int,         // 图书数量
  product_price_total: double, // 图书总价
  sku_id: int,                // SKU ID
  specs: varchar(1000),       // 规格信息
  create_time: timestamp,     // 创建时间
  update_time: timestamp      // 更新时间
}

地址表 (address)

{
  id: int,                    // 地址ID
  user_id: int,               // 用户ID
  username: varchar(100),     // 收货人
  phone: varchar(100),        // 联系电话
  province: varchar(100),     // 省份
  city: varchar(100),         // 城市
  district: varchar(100),     // 区县
  address: varchar(1000),     // 详细地址
  address_detail: varchar(100), // 门牌号
  is_default: int,            // 是否默认 (0否 1是)
  create_time: timestamp,     // 创建时间
  update_time: timestamp      // 更新时间
}

图书SKU表 (product_sku)

{
  id: int,                    // SKU ID
  product_id: int,            // 图书ID
  price: decimal(10,2),       // 售价
  origin_price: decimal(10,2), // 原价
  stock: int,                 // 库存
  product_attr_value_ids: varchar(255), // 属性值ID
  cover: varchar(255),        // SKU封面图
  specs: varchar(1000),       // 规格信息
  created_at: timestamp,      // 创建时间
  updated_at: timestamp       // 更新时间
}

图书属性键表 (product_attr_key)

{
  id: int,                    // 属性键ID
  name: varchar(255),         // 属性名称（如套装、版本）
  product_id: int,            // 图书ID
  created_at: timestamp,      // 创建时间
  updated_at: timestamp       // 更新时间
}

图书属性值表 (product_attr_value)

{
  id: int,                    // 属性值ID
  value: varchar(255),        // 属性值（如上册、下册）
  product_attr_key_id: int,   // 属性键ID
  product_id: int,            // 图书ID
  created_at: timestamp,      // 创建时间
  updated_at: timestamp       // 更新时间
}

购物车表 (shop_cart)

{
  id: int,                    // 购物车ID
  user_id: int,               // 用户ID
  product_id: int,            // 图书ID
  product_count: int,         // 数量
  sku_id: int,                // SKU ID
  create_time: timestamp,     // 创建时间
  update_time: timestamp      // 更新时间
}

评论表 (comment)

{
  id: int,                    // 评论ID
  user_id: int,               // 用户ID
  product_id: int,            // 图书ID
  order_id: int,              // 订单ID
  content: varchar(1000),     // 评论内容
  cover: varchar(1000),       // 评论图片
  create_time: timestamp,     // 创建时间
  update_time: timestamp      // 更新时间
}

收藏表 (star)

{
  id: int,                    // 收藏ID
  user_id: int,               // 用户ID
  product_id: int             // 图书ID
}

问题反馈表 (question)

{
  id: int,                    // 反馈ID
  user_id: int,               // 用户ID
  cover: varchar(2000),       // 图片
  remark: varchar(1000),      // 反馈内容
  email: varchar(100),        // 邮箱
  reply: varchar(1000),       // 回复内容
  create_time: timestamp,     // 创建时间
  update_time: timestamp      // 更新时间
}

图书分类

分类名称	说明
文艺	文学、艺术类图书
教育	教材、教辅类图书
经管	经济、管理类图书
人文社科	人文、社会科学类图书
生活	生活、休闲类图书
科技	科学、技术类图书
童书	儿童读物

运行环境要求

后端环境

• Node.js 14.0+
• MySQL 5.7+
• npm 或 yarn

管理后台

• Node.js 14.0+
• npm 或 yarn
• 现代浏览器（Chrome、Firefox、Edge等）

小程序端

• 微信开发者工具（最新稳定版）
• 基础库版本 2.19.0+
• 需要有效的AppID

快速开始

1. 数据库配置

1. 创建MySQL数据库

CREATE DATABASE db_book_shop CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

2. 导入数据库文件

mysql -u root -p db_book_shop < db_book_shop.sql

3. 修改数据库配置 编辑 express/config/db.js：

var db = mysql.createConnection({
  database: 'db_book_shop', // 数据库名称
  port: '3306', // 端口号
  host: 'localhost', // 主机地址
  user: 'root', // 用户名
  password: 'root', // 密码（修改为你的密码）
});

2. 启动后端服务

# 进入后端目录
cd express

# 安装依赖
npm install

# 启动服务（开发模式）
npm run dev

后端服务默认运行在 http://localhost:5002

3. 启动管理后台

# 进入管理后台目录
cd admin

# 安装依赖
npm install

# 启动开发服务器
npm run dev

管理后台默认运行在 http://localhost:8080

4. 运行小程序

1. 打开微信开发者工具
2. 选择"导入项目"
3. 选择 min 目录
4. 填入AppID（可使用测试号）
5. 点击"导入"

5. 配置小程序API地址

编辑 min/utils/request.js，修改API基础地址：

const baseUrl = 'http://localhost:5002'; // 修改为你的后端地址

默认账号

管理后台

• 手机号：1871502XXXX
• 密码：123456

小程序端

• 支持微信授权登录
• 或使用手机号登录

订单状态说明

状态码	状态名称	说明
0	待支付	订单已创建，等待支付
1	已付款	支付成功，等待发货
2	待收货	已发货，等待收货
3	已签收	订单完成
4	已取消	订单已取消
5	已退款	订单已退款

界面预览

项目包含演示视频文件：

• 演示视频.mp4 - 完整功能演示

扩展建议

如需进一步完善项目，可考虑以下扩展：

1. 微信支付：集成微信支付功能
2. 图书推荐：基于用户阅读偏好推荐图书
3. 电子书：支持电子书在线阅读
4. 会员等级：VIP会员体系和积分系统
5. 优惠券系统：优惠券领取和使用
6. 拼团功能：多人拼团购买
7. 书评社区：用户书评分享和互动
8. 阅读打卡：阅读打卡和阅读统计
9. 物流追踪：接入物流查询API
10. ISBN扫码：扫描ISBN条码快速查找图书

注意事项

1. 本项目为学习演示项目，部分数据为模拟数据
2. 生产环境部署需要配置HTTPS
3. 小程序上线需要完成微信认证和相关资质审核
4. 涉及电商交易需符合相关法规要求
5. 建议定期备份数据库数据

常见问题

Q: 数据库连接失败？

A: 检查MySQL服务是否启动，数据库配置是否正确

Q: 图片无法显示？

A: 检查后端服务是否启动，图片路径配置是否正确

Q: 小程序无法请求后端？

A: 检查request.js中的baseUrl配置，开发时需在微信开发者工具中关闭"不校验合法域名"

Q: 管理后台登录失败？

A: 确认数据库中user表有管理员账号（role=99）

Q: 图书SKU无法选择？

A: 检查图书是否正确配置了SKU规格信息

许可证

本项目仅供学习交流使用，请勿用于商业用途。