图书电商小程序

图书电商小程序

项目简介

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

技术栈

后端技术

管理后台技术

小程序端技术

项目特点

• 前后端分离：后端提供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. 数据库配置

CREATE DATABASE db_book_shop CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

mysql -u root -p db_book_shop < db_book_shop.sql

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. 运行小程序

5. 配置小程序API地址

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

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

默认账号

管理后台

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

小程序端

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

订单状态说明

界面预览

项目包含演示视频文件：

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

扩展建议

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

注意事项

常见问题

Q: 数据库连接失败？

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

Q: 图片无法显示？

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

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

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

Q: 管理后台登录失败？

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

Q: 图书SKU无法选择？

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

许可证

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