美妆电商小程序

美妆电商小程序项目简介这是一个完整的美妆电商平台系统包含微信小程序端和PC管理后台。系统实现了商品展示、购物车、订单管理、地址管理、商品评价、收藏等核心电商功能专注于美妆护肤品类支持商品多规格SKU管理。采用前后端分离架构适合作为微信小程序全栈开发学习项目或计算机设计参考。技术栈后端技术技术版本/说明运行环境Node.jsWeb框架Express 4.16.1数据库MySQL 5.7数据库驱动mysql 2.18.1身份认证jsonwebtoken 9.0.2文件上传multer跨域处理cors 2.8.5HTTP请求axios 1.6.3热重载nodemon 3.0.2UUID生成uuid 9.0.1管理后台技术技术版本/说明前端框架Vue 2.6.11UI组件库Element UI 2.15.6路由管理Vue Router 3.0.7状态管理Vuex 3.4.0HTTP请求Axios 0.24.0图表库ECharts 5.3.1富文本编辑器Quill 1.3.7CSS预处理器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)字段类型说明idint用户ID主键自增usernamevarchar(10)用户名nicknamevarchar(255)昵称avatarvarchar(1000)头像openIdvarchar(100)微信OpenIDphonevarchar(11)手机号passwordvarchar(100)密码roleint角色 (0普通用户, 99管理员)activeint状态 (0禁用, 1正常)sexint性别create_timetimestamp创建时间update_timetimestamp更新时间商品表 (product)字段类型说明idint商品ID主键自增titlevarchar(255)商品名称contentlongtext商品详情富文本covervarchar(255)封面图imgslongtext图集is_hotint是否热门 (0否 1是)is_newint是否最新 (0否 1是)is_likeint是否推荐 (0否 1是)remarkvarchar(100)备注cate_idint分类IDprice_mindouble最低价格price_maxdouble最高价格limitint限购数量sku_lengthintSKU数量create_timetimestamp创建时间update_timetimestamp更新时间分类表 (cate)字段类型说明idint分类ID主键自增titlevarchar(100)分类名称covervarchar(100)分类图标create_timetimestamp创建时间update_timetimestamp更新时间商品属性键表 (product_attr_key)字段类型说明idint属性键ID主键自增namevarchar(255)属性名称如颜色、尺寸product_idint关联商品IDcreated_attimestamp创建时间updated_attimestamp更新时间商品属性值表 (product_attr_value)字段类型说明idint属性值ID主键自增valuevarchar(255)属性值如红色、XLproduct_attr_key_idint关联属性键IDproduct_idint关联商品IDcreated_attimestamp创建时间updated_attimestamp更新时间商品SKU表 (product_sku)字段类型说明idintSKU ID主键自增product_idint关联商品IDpricedecimal(10,2)售价origin_pricedecimal(10,2)原价stockint库存product_attr_value_idsvarchar(255)关联属性值IDcovervarchar(255)SKU封面图specsvarchar(1000)规格信息created_attimestamp创建时间updated_attimestamp更新时间订单表 (orders)字段类型说明idint订单ID主键自增user_idint用户IDtotal_pricedouble订单总价phonevarchar(100)联系电话usernamevarchar(100)收货人addressvarchar(100)收货地址statusint状态 (0待支付 1已付款 2待收货 3已签收 4已取消 5已退款)order_novarchar(30)订单号express_numvarchar(30)快递单号create_timetimestamp下单时间pay_timetimestamp付款时间send_timetimestamp发货时间update_timetimestamp更新时间订单详情表 (order_detail)字段类型说明idint详情ID主键自增user_idint用户IDorder_idint订单IDproduct_idint商品IDproduct_titlevarchar(1000)商品名称product_covervarchar(1000)商品图片product_pricedouble商品单价product_countint商品数量product_price_totaldouble商品总价sku_idintSKU IDspecsvarchar(1000)规格信息create_timetimestamp创建时间update_timetimestamp更新时间地址表 (address)字段类型说明idint地址ID主键自增user_idint用户IDusernamevarchar(100)收货人phonevarchar(100)联系电话provincevarchar(100)省份cityvarchar(100)城市districtvarchar(100)区县addressvarchar(1000)详细地址address_detailvarchar(100)门牌号is_defaultint是否默认 (0否 1是)create_timetimestamp创建时间update_timetimestamp更新时间购物车表 (shop_cart)字段类型说明idint购物车ID主键自增user_idint用户IDproduct_idint商品IDproduct_countint商品数量sku_idintSKU IDcreate_timetimestamp创建时间update_timetimestamp更新时间评论表 (comment)字段类型说明idint评论ID主键自增user_idint用户IDproduct_idint商品IDorder_idint订单IDcontentvarchar(1000)评论内容covervarchar(1000)评论图片create_timetimestamp创建时间update_timetimestamp更新时间收藏表 (star)字段类型说明idint收藏ID主键自增user_idint用户IDproduct_idint商品IDcreate_timetimestamp创建时间update_timetimestamp更新时间问题反馈表 (question)字段类型说明idint反馈ID主键自增user_idint用户IDcovervarchar(2000)图片remarkvarchar(1000)反馈内容emailvarchar(100)邮箱replyvarchar(1000)回复内容create_timetimestamp创建时间update_timetimestamp更新时间美妆商品分类分类名称说明臻享高端臻品系列护肤护肤品类洁面、爽肤水、精华、面霜等彩妆彩妆品类粉底、眼影、腮红等香氛香水香氛类礼物礼盒套装健康健康美容类口红口红唇膏类香水香水类订单状态说明状态码状态名称说明0待支付订单已创建等待支付1已付款支付成功等待发货2待收货已发货等待收货3已签收订单完成4已取消订单已取消5已退款订单已退款运行环境要求后端环境Node.js 14.0MySQL 5.7 / 8.0npm 或 yarn管理后台Node.js 14.0npm 或 yarn现代浏览器Chrome、Firefox、Edge等小程序端微信开发者工具最新稳定版基础库版本 2.19.0需要有效的AppID快速开始1. 数据库配置创建MySQL数据库CREATEDATABASEmzShopCHARACTERSETutf8mb4COLLATEutf8mb4_general_ci;导入数据库文件mysql-uroot-pmzShopmzShop.sql修改数据库配置编辑express/config/db.js修改数据库连接信息{database:mzShop,port:3306,host:localhost,user:root,password:你的密码}2. 启动后端服务# 进入后端目录cdexpress# 安装依赖npminstall# 启动服务开发模式npmrun dev后端服务默认运行在http://localhost:50023. 启动管理后台# 进入管理后台目录cdadmin# 安装依赖npminstall# 启动开发服务器npmrun dev管理后台默认运行在http://localhost:80804. 运行小程序打开微信开发者工具选择导入项目选择min目录填入AppID可使用测试号点击导入5. 配置小程序API地址编辑min/utils/request.js修改API基础地址constbaseUrlhttp://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表有管理员账号role99Q: 商品SKU无法选择A: 检查商品是否正确配置了SKU规格信息属性键和属性值许可证本项目仅供学习交流使用请勿用于商业用途。