美妆电商小程序-港品优选

美妆电商小程序

项目简介

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

技术栈

后端技术

技术	版本/说明
运行环境	Node.js
Web框架	Express 4.16.1
数据库	MySQL 5.7+
数据库驱动	mysql 2.18.1
身份认证	jsonwebtoken 9.0.2
文件上传	multer
跨域处理	cors 2.8.5
HTTP请求	axios 1.6.3
热重载	nodemon 3.0.2
UUID生成	uuid 9.0.1

管理后台技术

技术	版本/说明
前端框架	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 3.0.4
粒子效果	vue-particles 1.0.9

小程序端技术

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

项目特点

前后端分离：后端提供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`)

用户反馈列表
回复处理

项目结构

beauty-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 # 评论接口 │ │ │ ├── order.js # 订单接口 │ │ │ ├── product.js # 商品接口 │ │ │ ├── question.js # 问题反馈接口 │ │ │ ├── star.js # 收藏接口 │ │ │ └── user.js # 用户接口 │ │ ├── web/ # 小程序端API │ │ │ ├── address.js # 地址接口 │ │ │ ├── cate.js # 分类接口 │ │ │ ├── comment.js # 评论接口 │ │ │ ├── order.js # 订单接口 │ │ │ ├── product.js # 商品接口 │ │ │ ├── question.js # 问题反馈接口 │ │ │ ├── shopcart.js # 购物车接口 │ │ │ ├── star.js # 收藏接口 │ │ │ └── user.js # 用户接口 │ │ ├── index.js # 路由入口 │ │ └── upload.js # 文件上传 │ ├── util/ │ │ ├── index.js # 工具函数 │ │ └── wechat.js # 微信相关工具 │ ├── app.js # Express应用配置 │ └── package.json │ ├── min/ # 微信小程序 │ ├── components/ # 自定义组件 │ │ ├── productItem/ # 商品列表项组件 │ │ └── wxParse/ # 富文本解析组件 │ ├── images/ # 图片资源 │ │ ├── order/ # 订单相关图标 │ │ └── tabbar/ # TabBar图标 │ ├── pages/ # 页面目录 │ │ ├── index/ # 首页 │ │ ├── cate/ # 分类页 │ │ ├── search/ # 搜索页 │ │ ├── detail/ # 商品详情 │ │ ├── shopCart/ # 购物车 │ │ ├── comfirm/ # 订单确认 │ │ ├── orderList/ # 订单列表 │ │ ├── orderDetail/ # 订单详情 │ │ ├── addressList/ # 地址列表 │ │ ├── addressAddUpdate/ # 地址编辑 │ │ ├── comment/ # 评价页 │ │ ├── star/ # 我的收藏 │ │ ├── my/ # 个人中心 │ │ ├── userInfo/ # 用户信息 │ │ └── question/ # 问题反馈 │ ├── utils/ │ │ ├── api.js # API接口封装 │ │ ├── request.js # 请求封装 │ │ ├── feedback.js # 反馈工具 │ │ └── util.js # 工具函数 │ ├── app.js # 小程序入口 │ ├── app.json # 小程序配置 │ ├── app.wxss # 全局样式 │ └── project.config.json # 项目配置 │ ├── 图片资源/ # 项目图片资源 ├── mzShop.sql # 数据库SQL文件 ├── mysql.sh # MySQL脚本 ├── mysql操作手册.md # MySQL操作说明 ├── 数据库创建方法.md # 数据库创建说明 ├── 新 - 运行必读.docx # 运行说明文档 ├── 电商小程序.xmind # 项目思维导图 ├── 美妆商城-小程序.mp4 # 小程序演示视频 └── 美妆商城-admin.mp4 # 管理后台演示视频

数据模型

用户表 (user)

字段	类型	说明
id	int	用户ID，主键自增
username	varchar(10)	用户名
nickname	varchar(255)	昵称
avatar	varchar(1000)	头像
openId	varchar(100)	微信OpenID
phone	varchar(11)	手机号
password	varchar(100)	密码
role	int	角色 (0普通用户, 99管理员)
active	int	状态 (0禁用, 1正常)
sex	int	性别
create_time	timestamp	创建时间
update_time	timestamp	更新时间

商品表 (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
price_min	double	最低价格
price_max	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	更新时间

商品属性键表 (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)	属性值（如红色、XL）
product_attr_key_id	int	关联属性键ID
product_id	int	关联商品ID
created_at	timestamp	创建时间
updated_at	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	更新时间

订单表 (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	更新时间

购物车表 (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
create_time	timestamp	创建时间
update_time	timestamp	更新时间

问题反馈表 (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	更新时间

美妆商品分类

分类名称	说明
臻享	高端臻品系列
护肤	护肤品类（洁面、爽肤水、精华、面霜等）
彩妆	彩妆品类（粉底、眼影、腮红等）
香氛	香水香氛类
礼物	礼盒套装
健康	健康美容类
口红	口红唇膏类
香水	香水类

订单状态说明

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

运行环境要求

后端环境

Node.js 14.0+
MySQL 5.7+ / 8.0+
npm 或 yarn

管理后台

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

小程序端

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

快速开始

1. 数据库配置

创建MySQL数据库

CREATEDATABASEmzShopCHARACTERSETutf8mb4COLLATEutf8mb4_general_ci;

导入数据库文件

mysql-uroot-pmzShop<mzShop.sql

修改数据库配置
编辑express/config/db.js，修改数据库连接信息：

{database:"mzShop",port:"3306",host:"localhost",user:"root",password:"你的密码"}

2. 启动后端服务

# 进入后端目录cdexpress# 安装依赖npminstall# 启动服务（开发模式）npmrun dev

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

3. 启动管理后台

# 进入管理后台目录cdadmin# 安装依赖npminstall# 启动开发服务器npmrun dev

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

4. 运行小程序

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

5. 配置小程序API地址

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

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

默认账号

管理后台

手机号：1871502XXXX
密码：123456

小程序端

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

界面预览

项目包含演示视频文件：

美妆商城-小程序.mp4- 小程序端完整功能演示
美妆商城-admin.mp4- 管理后台完整功能演示

扩展建议

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

微信支付：集成微信支付功能
肌肤测试：AI肌肤检测和产品推荐
美妆教程：视频教程和美妆技巧
会员等级：VIP会员体系和积分系统
优惠券系统：优惠券领取和使用
拼团功能：多人拼团购买
直播带货：直播购物功能
AR试妆：虚拟试妆功能
社区功能：用户分享和互动
物流追踪：接入物流查询API

注意事项

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

常见问题

Q: 数据库连接失败？

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

Q: 图片无法显示？

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

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

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

Q: 管理后台登录失败？

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

Q: 商品SKU无法选择？

A: 检查商品是否正确配置了SKU规格信息（属性键和属性值）

许可证

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

企业官网建设流程全解析

美妆电商小程序

项目简介

技术栈

后端技术

管理后台技术

小程序端技术

项目特点

功能模块

小程序端功能

1. 首页模块 (pages/index)

2. 商品分类模块 (pages/cate)

3. 商品详情模块 (pages/detail)

4. 搜索模块 (pages/search)

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

6. 订单模块

7. 地址管理模块

8. 评价模块 (pages/comment)

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

管理后台功能

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

2. 分类管理 (Cate)

3. 商品管理 (Product)

4. 订单管理 (Order)

5. 用户管理 (User.vue)

6. 收藏管理 (Star.vue)

7. 问题反馈 (Question.vue)

项目结构

数据模型

用户表 (user)

商品表 (product)

分类表 (cate)

商品属性键表 (product_attr_key)

商品属性值表 (product_attr_value)

商品SKU表 (product_sku)

订单表 (orders)

订单详情表 (order_detail)

地址表 (address)

购物车表 (shop_cart)

评论表 (comment)

收藏表 (star)

问题反馈表 (question)

美妆商品分类

订单状态说明

运行环境要求

后端环境

管理后台

小程序端

快速开始

1. 数据库配置

2. 启动后端服务

3. 启动管理后台

4. 运行小程序

5. 配置小程序API地址

默认账号

管理后台

小程序端

界面预览

扩展建议

注意事项

常见问题

Q: 数据库连接失败？

Q: 图片无法显示？

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

Q: 管理后台登录失败？

Q: 商品SKU无法选择？

许可证

热门文章

文章分类

标签云

相关文章

ChatGPT Sites不是建站工具，而是静态快照生成器

DeepSeek LeetCode 89. 格雷编码 Java实现

14MB开源终端uniTerm v1.9：多协议轻量替代MobaXterm实战解析

需要专业的网站建设服务？

1. 首页模块 (`pages/index`)

2. 商品分类模块 (`pages/cate`)

3. 商品详情模块 (`pages/detail`)

4. 搜索模块 (`pages/search`)

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

8. 评价模块 (`pages/comment`)

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

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

2. 分类管理 (`Cate`)

3. 商品管理 (`Product`)

4. 订单管理 (`Order`)

5. 用户管理 (`User.vue`)

6. 收藏管理 (`Star.vue`)

7. 问题反馈 (`Question.vue`)