凤梨系列奶茶点餐小程序

项目简介

这是一个完整的前后端分离奶茶点餐系统，包含微信小程序（用户端）、商家后台管理系统（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,              // 管理员ID
  account: 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,              // 分类ID
  name: String,            // 分类名称
  image: String,           // 分类图标
  createdAt: DateTime,     // 创建时间
  updatedAt: DateTime,     // 更新时间
  isDeleted: Boolean       // 软删除标记
}

商品表 (product)

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

订单表 (order)

{
  id: Number,              // 订单ID
  orderType: Number,       // 订单类型（1:到店取餐 2:外卖配送）
  amount: Number,          // 订单金额
  dealNum: Number,         // 商品数量
  code: String,            // 取餐码
  phone: String,           // 联系电话
  remark: Text,            // 备注
  userId: String,          // 用户ID
  product: 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. 数据库配置

1. 创建MySQL数据库

CREATE DATABASE `order` DEFAULT CHARACTER SET utf8mb4;

2. 导入数据库脚本

mysql -u root -p order < order.sql

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

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

2. 启动后端服务

cd express
npm install
npm run dev

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

3. 启动管理后台

# 切换Node版本到20.18.0
nvm use 20.18.0

cd admin
npm install
npm run dev

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

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

4. 启动小程序

# 切换Node版本到14.21.3
nvm use 14.21.3

cd uniapp
npm install
npm run 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生成
const token = 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开始，同一天递增
let code = '1001';
if (isSameDay(new Date(last.createdAt), new Date())) {
  code = Number(last.code) + 1 + '';
}

扩展建议

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

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

注意事项

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

许可证

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