健身电商小程序

健身电商小程序项目简介这是一个完整的健身电商平台系统包含微信小程序端和PC管理后台。系统实现了商品展示、购物车、订单管理、地址管理、商品评价、收藏等核心电商功能采用前后端分离架构适合作为微信小程序全栈开发学习项目或计算机设计参考。技术栈后端技术技术版本/说明运行环境Node.jsWeb框架Express 4.16.1数据库MySQL 5.7数据库驱动mysql身份认证jsonwebtoken (JWT)文件上传multer跨域处理corsUUID生成uuid热重载nodemon管理后台技术技术版本/说明前端框架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粒子效果vue-particles小程序端技术技术版本/说明开发框架微信小程序原生框架开发语言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)用户反馈列表回复处理项目结构fitShop_min_express_mysql_all/ ├── 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/ │ │ ├── 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 # 项目配置 │ ├── 图片资源/ # 项目图片资源 ├── 截图/ # 项目截图 ├── 小程序审核材料/ # 小程序审核相关 ├── fitShop.sql # 数据库SQL文件 ├── mysql.sh # MySQL脚本 ├── mysql操作手册.md # MySQL操作说明 ├── 数据库创建方法.md # 数据库创建说明 ├── 运行必读.docx # 运行说明文档 ├── 电商小程序.xmind # 项目思维导图 ├── 健身商城-小程序.mp4 # 小程序演示视频 └── 商城商城-admin.mp4 # 管理后台演示视频数据模型用户表 (users){id:int,// 用户IDphone:varchar(255),// 手机号password:varchar(255),// 密码username:varchar(255),// 用户名sex:varchar(255),// 性别nickname:varchar(255),// 昵称openId:varchar(1100),// 微信OpenIDavatar:varchar(255),// 头像role:int// 角色 (0普通用户, 99管理员)}商品表 (product){id:int,// 商品IDtitle: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,// 分类IDprice_max:double,// 最高价格price_min:double,// 最低价格limit:int,// 限购数量sku_length:int,// SKU数量create_time:timestamp,// 创建时间update_time:timestamp// 更新时间}分类表 (cate){id:int,// 分类IDtitle:varchar(100),// 分类名称cover:varchar(100),// 分类图标create_time:timestamp,// 创建时间update_time:timestamp// 更新时间}订单表 (orders){id:int,// 订单IDuser_id:int,// 用户IDtotal_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,// 详情IDuser_id:int,// 用户IDorder_id:int,// 订单IDproduct_id:int,// 商品IDproduct_title:varchar(1000),// 商品名称product_cover:varchar(1000),// 商品图片product_price:double,// 商品单价product_count:int,// 商品数量product_price_total:double,// 商品总价sku_id:int,// SKU IDspecs:varchar(1000),// 规格信息create_time:timestamp,// 创建时间update_time:timestamp// 更新时间}地址表 (address){id:int,// 地址IDuser_id:int,// 用户IDusername: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// 更新时间}商品属性键表 (product_attr_key){id:int,// 属性IDproduct_id:int,// 商品IDname:varchar(255),// 属性名称如颜色、尺寸created_at:timestamp,// 创建时间updated_at:timestamp// 更新时间}商品SKU表 (product_sku){id:int,// SKU IDproduct_id:int,// 商品IDspecs:varchar(255),// 规格值price:double,// 价格stock:int,// 库存created_at:timestamp,// 创建时间updated_at:timestamp// 更新时间}评论表 (comment){id:int,// 评论IDuser_id:int,// 用户IDproduct_id:int,// 商品IDorder_id:int,// 订单IDcontent:varchar(1000),// 评论内容cover:varchar(1000),// 评论图片create_time:timestamp,// 创建时间update_time:timestamp// 更新时间}收藏表 (star){id:int,// 收藏IDuser_id:int,// 用户IDproduct_id:int// 商品ID}问题反馈表 (question){id:int,// 反馈IDuser_id:int,// 用户IDcover:varchar(2000),// 图片remark:varchar(1000),// 反馈内容email:varchar(100),// 邮箱reply:varchar(1000),// 回复内容create_time:timestamp,// 创建时间update_time:timestamp// 更新时间}TabBar配置{tabBar:{selectedColor:#FF6B35,list:[{pagePath:pages/index/index,text:首页},{pagePath:pages/cate/cate,text:分类},{pagePath:pages/shopCart/shopCart,text:购物车},{pagePath:pages/my/my,text:我的}]}}商品分类分类名称说明运动补剂蛋白粉、氨基酸等代餐零食燕麦、代餐粉等服饰配件运动袜、运动鞋等低卡饮品电解质水、益生菌等肉类蛋白鸡肉肠、牛肉等生鲜粗粮玉米、荞麦面等器械装备筋膜枪、哑铃等道件护具弹力圈、泡沫轴等运行环境要求后端环境Node.js 14.0MySQL 5.7npm 或 yarn管理后台Node.js 14.0npm 或 yarn现代浏览器Chrome、Firefox、Edge等小程序端微信开发者工具最新稳定版基础库版本 2.19.0需要有效的AppID快速开始1. 数据库配置创建MySQL数据库CREATEDATABASEfitShopCHARACTERSETutf8mb4COLLATEutf8mb4_general_ci;导入数据库文件mysql-uroot-pfitShopfitShop.sql修改数据库配置编辑express/config/db.jsvardbmysql.createConnection({database:fitShop,// 数据库名称port:3306,// 端口号host:localhost,// 主机地址user:root,// 用户名password:root,// 密码修改为你的密码});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// 修改为你的后端地址默认账号管理后台手机号18715023xxxx密码123456小程序端支持微信授权登录或使用手机号登录订单状态说明状态码状态名称说明0待支付订单已创建等待支付1已付款支付成功等待发货2待收货已发货等待收货3已签收订单完成4已取消订单已取消5已退款订单已退款界面预览项目包含演示视频文件健身商城-小程序.mp4- 小程序端完整功能演示商城商城-admin.mp4- 管理后台完整功能演示扩展建议如需进一步完善项目可考虑以下扩展微信支付集成微信支付功能优惠券系统添加优惠券领取和使用积分系统购物积分累计和兑换会员等级VIP会员体系秒杀活动限时秒杀功能拼团功能多人拼团购买分销系统推广返佣机制物流追踪接入物流查询API数据统计完善销售数据分析消息推送订单状态推送通知注意事项本项目为学习演示项目部分数据为模拟数据生产环境部署需要配置HTTPS小程序上线需要完成微信认证和相关资质审核涉及电商交易需符合相关法规要求建议定期备份数据库数据常见问题Q: 数据库连接失败A: 检查MySQL服务是否启动数据库配置是否正确Q: 图片无法显示A: 检查后端服务是否启动图片路径配置是否正确Q: 小程序无法请求后端A: 检查request.js中的baseUrl配置开发时需在微信开发者工具中关闭不校验合法域名Q: 管理后台登录失败A: 确认数据库中users表有管理员账号role99Q: 商品SKU无法选择A: 检查商品是否正确配置了SKU规格信息许可证本项目仅供学习交流使用请勿用于商业用途。