凤梨系列奶茶点餐小程序-酒店常州论坛

凤梨系列奶茶点餐小程序

项目简介

这是一个完整的前后端分离奶茶点餐系统，包含微信小程序（用户端）、商家后台管理系统（Admin端）和后端服务（Express）。项目实现了完整的奶茶点餐业务流程，支持到店取餐和外卖配送，适合作为全栈开发学习项目或计算机设计参考。

技术栈

微信小程序（用户端）

技术	版本/说明
开发框架	uni-app
前端框架	Vue 2.x
状态管理	Vuex 3.x
UI组件库	uni-ui
网络请求	flyio
日期处理	moment.js
样式预处理	Sass
Node版本要求	14.21.3

商家后台管理系统（Admin端）

技术	版本/说明
前端框架	Vue 3.5
开发语言	TypeScript
构建工具	Vite 5.x
UI组件库	Element Plus 2.8
路由管理	Vue Router 4.x
状态管理	Vuex 4.x
网络请求	Axios
样式预处理	Sass
Node版本要求	20.18.0

后端服务

技术	版本/说明
运行环境	Node.js
Web框架	Express 4.x
数据库	MySQL 5.7+
ORM框架	Sequelize 6.x
身份认证	JWT (jsonwebtoken + express-jwt)
文件上传	Multer
密码加密	bcrypt
跨域处理	cors

项目特点

前后端分离架构：小程序、管理后台、后端服务独立部署
完整业务流程：涵盖用户注册登录、商品浏览、购物车、下单、订单管理等完整流程
多端适配：支持微信小程序、H5等多端编译
JWT身份认证：安全的Token认证机制
RESTful API：规范的接口设计
Sequelize ORM：优雅的数据库操作
响应式设计：管理后台适配不同屏幕尺寸

功能模块

小程序端功能

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

店铺信息展示（名称、营业时间、配送起送价）
推荐商品轮播展示
快捷入口导航

2. 点单模块 (`pages/product`)

商品分类左侧导航
商品列表展示（图片、名称、描述、价格、销量）
商品详情页（规格选择、甜度、温度、加料）
购物袋功能（添加、修改数量、删除）
订单确认页（配送方式、联系电话、备注）

3. 订单模块 (`pages/orderList`)

订单列表展示
订单状态筛选
订单详情查看
取餐码展示

4. 我的模块 (`pages/mine`)

用户信息展示
登录/注册功能
收货地址管理

管理后台功能

1. 登录模块 (`views/service`)

商家账号登录
Token认证

2. 店铺设置 (`views/setting`)

店铺基本信息设置
营业时间设置
配送起送价设置
联系电话设置

3. 首页推荐管理 (`views/home`)

推荐商品列表
添加/删除推荐商品
推荐封面图上传

4. 类目管理 (`views/type`)

商品分类列表
添加/删除分类
分类图标上传

5. 商品管理 (`views/product`)

商品列表展示
添加商品（名称、描述、图片、价格、规格、属性）
删除商品
商品图片上传

6. 订单管理 (`views/order`)

订单列表展示
订单详情查看
订单删除

项目结构

fengli-mike-tea/ ├── express/ # 后端服务目录 │ ├── app.js # 应用入口文件 │ ├── middleware.js # 中间件（文件上传、图片删除等） │ ├── package.json # 后端依赖配置 │ ├── resource/ # 静态资源目录 │ │ └── image/ # 图片存储目录 │ │ ├── product/ # 商品图片 │ │ ├── type/ # 分类图标 │ │ ├── user/ # 用户头像 │ │ └── recommend/ # 推荐封面图 │ ├── router/ # 路由目录 │ │ ├── user.js # 用户相关接口 │ │ ├── product.js # 商品相关接口 │ │ └── order.js # 订单相关接口 │ └── router_handler/ # 数据库模型 │ ├── dbConfig.js # 数据库配置 │ └── models.js # Sequelize模型定义 │ ├── uniapp/ # 小程序目录 │ ├── src/ │ │ ├── api/ # API接口封装 │ │ ├── components/ # 公共组件 │ │ │ └── login/ # 登录组件 │ │ ├── pages/ # 页面目录 │ │ │ ├── home/ # 首页 │ │ │ ├── product/ # 点单页 │ │ │ │ ├── index.vue # 商品列表 │ │ │ │ ├── detail.vue # 商品详情 │ │ │ │ └── confirmOrder.vue # 确认订单 │ │ │ ├── orderList/ # 订单页 │ │ │ │ ├── index.vue # 订单列表 │ │ │ │ └── detail.vue # 订单详情 │ │ │ └── mine/ # 我的页 │ │ ├── static/ # 静态资源 │ │ │ └── icon/ # TabBar图标 │ │ ├── store/ # Vuex状态管理 │ │ ├── utils/ # 工具函数 │ │ ├── App.vue # 应用入口组件 │ │ ├── main.js # 应用入口文件 │ │ ├── pages.json # 页面路由配置 │ │ └── manifest.json # 应用配置 │ ├── package.json # 小程序依赖配置 │ └── project.config.json # 微信小程序项目配置 │ ├── admin/ # 管理后台目录 │ ├── src/ │ │ ├── assets/ # 静态资源 │ │ ├── components/ # 公共组件 │ │ ├── http/ # 网络请求 │ │ │ └── api/ # API接口 │ │ ├── layout/ # 页面布局 │ │ ├── router/ # 路由配置 │ │ ├── store/ # Vuex状态管理 │ │ ├── style/ # 全局样式 │ │ ├── utils/ # 工具函数 │ │ ├── views/ # 页面目录 │ │ │ ├── home/ # 首页推荐管理 │ │ │ ├── order/ # 订单管理 │ │ │ ├── product/ # 商品管理 │ │ │ ├── service/ # 登录页 │ │ │ ├── setting/ # 店铺设置 │ │ │ └── type/ # 类目管理 │ │ ├── App.vue # 应用入口组件 │ │ └── main.ts # 应用入口文件 │ ├── package.json # 管理后台依赖配置 │ ├── vite.config.ts # Vite配置 │ └── index.html # HTML模板 │ ├── 封面/ # 项目截图 ├── order.sql # 数据库初始化脚本 └── README.md # 项目说明

数据模型

用户表 (user)

{id:Number,// 用户ID（自增主键）account:String,// 账号name:String,// 用户昵称avatar:String,// 头像路径phone:String,// 手机号addressObj:Text,// 收货地址（JSON字符串）password:String,// 密码createdAt:DateTime,// 创建时间updatedAt:DateTime,// 更新时间isDeleted:Boolean// 软删除标记}

管理员表 (admin)

{id:Number,// 管理员IDaccount:String,// 账号name:String,// 店铺名称avatar:String,// 店铺头像desc:Text,// 店铺描述phone:String,// 联系电话openingTime:Time,// 营业开始时间closingTime:Time,// 营业结束时间minPriceDelivery:Number,// 起送价格address:Text,// 店铺地址password:String,// 密码createdAt:DateTime,// 创建时间updatedAt:DateTime,// 更新时间isDeleted:Boolean// 软删除标记}

商品分类表 (product_type)

{id:Number,// 分类IDname:String,// 分类名称image:String,// 分类图标createdAt:DateTime,// 创建时间updatedAt:DateTime,// 更新时间isDeleted:Boolean// 软删除标记}

商品表 (product)

{id:Number,// 商品IDname:String,// 商品名称describe:Text,// 商品描述image:String,// 商品图片defaultPrice:Number,// 默认价格sales:Number,// 销量typeId:Number,// 分类IDprice:String,// 规格价格（JSON字符串）totalStore:Number,// 总库存attribute:String,// 商品属性（JSON字符串）isRecommend:Boolean,// 是否推荐cover:String,// 推荐封面图createdAt:DateTime,// 创建时间updatedAt:DateTime,// 更新时间isDeleted:Boolean// 软删除标记}

订单表 (order)

{id:Number,// 订单IDorderType:Number,// 订单类型（1:到店取餐 2:外卖配送）amount:Number,// 订单金额dealNum:Number,// 商品数量code:String,// 取餐码phone:String,// 联系电话remark:Text,// 备注userId:String,// 用户IDproduct:Text,// 商品信息（JSON字符串）createdAt:DateTime,// 创建时间updatedAt:DateTime,// 更新时间isDeleted:Boolean// 软删除标记}

API接口文档

用户相关接口

接口	方法	说明	认证
`/user/register`	POST	用户注册	否
`/user/login`	POST	用户登录	否
`/user/info`	GET	获取用户信息	是
`/admin/login`	POST	管理员登录	否
`/admin/info`	GET	获取管理员信息	是
`/admin/update`	POST	更新店铺信息	是

商品相关接口

接口	方法	说明	认证
`/product/productList`	GET	获取商品列表	否
`/product/add`	POST	添加商品	是
`/product/delete`	POST	删除商品	是
`/productType/typeList`	GET	获取分类列表（含商品）	否
`/productType/add`	POST	添加分类	是
`/productType/delete`	POST	删除分类	是
`/recommend/list`	GET	获取推荐商品列表	否
`/recommend/add`	POST	添加推荐商品	是
`/recommend/delete`	POST	删除推荐商品	是
`/uploadImage/:field`	POST	上传图片	是
`/removeImage`	POST	删除图片	是

订单相关接口

接口	方法	说明	认证
`/order/orderList`	GET	获取订单列表	是
`/order/:id`	GET	获取订单详情	是
`/order/add`	POST	创建订单	是
`/order/delete`	POST	删除订单	是

页面路由配置

小程序页面路由

{"pages":["pages/home/index",// 首页（默认启动页）"pages/product/index",// 点单页"pages/orderList/index",// 订单列表"pages/mine/index",// 我的"components/login/index",// 登录页"components/login/register/index",// 注册页"pages/product/detail",// 商品详情"pages/product/confirmOrder",// 确认订单"pages/orderList/detail"// 订单详情]}

TabBar配置

{"tabBar":{"color":"#515151","selectedColor":"#1E48CE","list":[{"pagePath":"pages/home/index","text":"首页"},{"pagePath":"pages/product/index","text":"点单"},{"pagePath":"pages/orderList/index","text":"订单"},{"pagePath":"pages/mine/index","text":"我的"}]}}

运行环境要求

Node.js：需要安装多版本管理工具（如nvm）
- 小程序端：Node 14.21.3
- 管理后台：Node 20.18.0
MySQL：5.7及以上版本
微信开发者工具：最新稳定版

快速开始

1. 数据库配置

创建MySQL数据库

CREATEDATABASE`order`DEFAULTCHARACTERSETutf8mb4;

导入数据库脚本

mysql-uroot-porder<order.sql

确保MySQL配置如下（或修改express/router_handler/dbConfig.js）

{host:'localhost',user:'root',password:'root',database:'order'}

2. 启动后端服务

cdexpressnpminstallnpmrun dev

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

3. 启动管理后台

# 切换Node版本到20.18.0nvm use20.18.0cdadminnpminstallnpmrun dev

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

管理后台登录账号：admin / 123456

4. 启动小程序

# 切换Node版本到14.21.3nvm use14.21.3cduniappnpminstallnpmrun serve

编译完成后，使用微信开发者工具打开uniapp/dist/dev/mp-weixin目录

5. 真机调试

在微信开发者工具中点击"预览"按钮，扫码在手机上体验

预置测试数据

商品分类

分类名称	分类ID
新品来袭	101
水果茶	102
醇香奶茶	103
牛乳茶	104
沁爽柠檬茶	105
轻松现泡茶	106
豪气1L装	107
加小料区	108

商品名称	默认价格	分类
手剥鲜石榴茉莉	¥16	新品来袭
百香凤梨	¥15	水果茶
双球冰淇淋红茶	¥14	醇香奶茶
杨枝甘露	¥17	水果茶
黑糖珍珠奶茶	¥11	醇香奶茶

测试用户

账号	密码	说明
13544556622	123456	普通用户
test	123456	测试用户
admin	123456	管理员账号

核心业务逻辑

1. 用户登录认证

// JWT Token生成consttoken=jwt.sign({account:info.account,phone:info.phone,id:info.id},process.env.secret_key,{expiresIn:'1h'},);

2. 商品规格与属性

// 商品价格规格price:[{size:'中杯',price:15,store:20},{size:'大杯',price:18,store:20},];// 商品属性选项attribute:[{name:'规格',items:['中杯','大杯']},{name:'甜度',items:['7分糖','5分糖','3分糖']},{name:'温度',items:['正常冰','少冰','去冰']},];

3. 订单取餐码生成

// 每日取餐码从1001开始，同一天递增letcode='1001';if(isSameDay(newDate(last.createdAt),newDate())){code=Number(last.code)+1+'';}

扩展建议

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

微信支付集成：接入微信支付完成真实支付流程
订单状态流转：添加待支付、制作中、待取餐、已完成等状态
优惠券系统：实现优惠券领取和使用功能
会员积分：添加会员等级和积分兑换功能
商品评价：用户下单后可对商品进行评价
数据统计：管理后台添加销售数据统计图表
消息推送：订单状态变更时推送消息通知
多门店支持：扩展为多门店连锁管理系统
库存管理：实现商品库存预警和自动下架
打印小票：对接小票打印机自动打印订单

注意事项

本项目为学习演示项目，未接入真实支付功能
生产环境部署时请修改JWT密钥和数据库密码
图片上传功能需确保express/resource/image目录有写入权限
小程序发布上线需替换为自己的AppID
涉及食品类小程序上线需符合相关资质要求

许可证

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

企业官网建设流程全解析