微信小程序-点餐（美食屋）02开发实践

news2025/1/31 8:00:17

目录

概要

整体架构流程

（一）用户注册与登录

（二）菜品浏览与点餐

（三）订单管理

（四）后台管理

部分代码展示

1.index.wxml

2.list.wxml

3.checkout.wxml

4.detail.wxml

小结优点

概要

        01篇让我们成功搭建开发环境，现在让我们着手开发 “美食屋” 点餐系统了。下面，我会用 PHP 和 MySQL 实现系统核心功能，像用户注册登录、展示和管理菜品，以及处理订单。

        快一起动手，让 “美食屋” 从概念变成现实吧！

整体架构流程

以下是系统从用户操作到数据处理的完整流程：

（一）用户注册与登录

  1. 用户操作：

    • 用户在微信小程序中进行wx账号登录。

  2. 前端处理：

    • 小程序通过wx.request发送注册或登录请求到后端API接口。

  3. 后端处理：

    • 注册接口：

      • 检查用户名是否已存在。

      • 将用户信息存入数据库，密码加密存储。

      • 返回注册成功或失败的提示。

    • 登录接口：

      • 验证用户名和密码是否正确。

      • 返回登录成功或失败的提示，登录成功时返回用户ID。

  4. 前端响应：

    • 根据后端返回的结果，提示用户注册或登录成功/失败。

    • 登录成功后，存储用户ID到本地存储，用于后续操作。

（二）菜品浏览与点餐

  1. 用户操作：

    • 用户在小程序中浏览菜品列表，选择菜品加入购物车，提交订单。

  2. 前端处理：

    • 调用后端的菜品列表接口获取菜品数据，并展示在小程序页面上。

    • 用户选择菜品后，将菜品信息存储到本地购物车。

    • 用户提交订单时，将购物车中的菜品信息、用户ID等数据通过wx.request发送到后端订单提交接口。

  3. 后端处理：

    • 菜品列表接口：

      • 查询数据库中的菜品表，返回菜品信息。

    • 订单提交接口：

      • 计算订单总价。

      • 将订单信息存入订单表，将订单详情存入订单详情表。

      • 返回订单提交成功或失败的提示。

  4. 前端响应：

    • 根据后端返回的结果，提示用户订单提交成功/失败。

    • 订单提交成功后，清空购物车，跳转到订单详情页面。

（三）订单管理

  1. 用户操作：

    • 用户在小程序中查看订单列表、订单详情，进行支付、取消订单等操作。

  2. 前端处理：

    • 调用后端的订单列表接口获取订单数据，并展示在小程序页面上。

    • 用户操作订单时，通过wx.request调用后端的订单操作接口（如支付、取消订单）。

  3. 后端处理：

    • 订单列表接口：

      • 查询数据库中的订单表，根据用户ID返回订单列表。

    • 订单操作接口：

      • 根据用户操作更新订单状态（如支付成功后将订单状态改为“已支付”）。

  4. 前端响应：

    • 根据后端返回的结果，提示用户操作成功/失败。

    • 更新订单列表页面，显示最新的订单状态。

（四）后台管理

  1. 商家操作：

    • 商家通过后台管理系统查看订单、处理订单（如确认订单、完成订单）。

  2. 后端处理：

    • 提供后台管理接口，供商家管理系统调用。

    • 商家操作订单时，更新数据库中的订单状态。

  3. 前端响应：

    • 商家管理系统根据后端返回的结果，提示操作成功/失败。

    • 更新订单列表页面，显示最新的订单状态。

部分代码展示

1.index.wxml

        这段代码主要实现了首页的轮播图展示、开启点餐之旅的按钮、最新消息展示以及底部菜品分类图标展示的功能。

<!--index.wxml-->
<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
  <block wx:for="{
  
  { swiper }}" wx:key="*this">
    <swiper-item>
      <image src="{
  
  { item }}" />
    </swiper-item>
  </block>
</swiper>
<!-- 开启点餐之旅 -->
<view class="menu-bar">
  <view class="menu-block" bindtap="start">
    <view class="menu-start">开启点餐之旅→</view>
  </view>
</view>
<!-- 最新消息展示 -->
<view class="ad-box">
  <image src="{
  
  { ad }}" class="ad-image" />
</view>
<view class="bottom-box">
  <view class="bottom-pic" wx:for="{
  
  { category }}" wx:key="index">
    <image src="{
  
  { item }}" class="bottom-image" />
  </view>
</view>
2.list.wxml

        定义了一个页面，主要用于展示商品列表、购物车功能以及相关的促销信息。页面分为多个部分，包括顶部的折扣信息、商品分类和商品列表区域、购物车界面、满减优惠提示以及底部的操作栏。   

<!--pages/list/list.wxml-->
<view class="discount">
  <text class="discount-txt">减</text>满{
  
  { promotion.k }}元减{
  
  { promotion.v }}元（在线支付专享）
</view>
<view class="content">
  <!-- 左侧菜单栏区域 -->
  <scroll-view class="category" scroll-y>
    <view wx:for="{
  
  { foodList }}" wx:key="id" class="category-item category-{
  
  { activeIndex == index ? 'selected' : 'unselect' }}" data-index="{
  
  { index }}" bindtap="tapCategory">
      <view class="category-name">{
  
  { item.name }}</view>
    </view>
  </scroll-view>
  <!-- 右侧商品列表区域 -->
  <scroll-view class="food" scroll-y scroll-into-view="category_{
  
  { tapIndex }}" scroll-with-animation bindscroll="onFoodScroll">
    <block wx:for="{
  
  { foodList }}" wx:for-item="category" wx:key="id" wx:for-index="category_index">
      <view class="food-category" id="category_{
  
  { category_index }}">{
  
  { category.name }}</view>
      <view class="food-item" wx:for="{
  
  { category.food }}" wx:for-item="food" wx:key="id">
        <view class="food-item-pic">
          <image mode="widthFix" src="{
  
  { food.image_url }}" />
        </view>
        <view class="food-item-info">
          <view>{
  
  { food.name }}</view>
          <view class="food-item-price">{
  
  { priceFormat(food.price) }}</view>
        </view>
        <view class="food-item-opt">
          <i class="iconfont" data-category_index="{
  
  { category_index }}" data-index="{
  
  { index }}" bindtap="addToCart"></i>
        </view>
      </view>
    </block>
  </scroll-view>
</view>
<!-- 购物车界面 -->
<view class="shopcart" wx:if="{
  
  { showCart }}">
  <view class="shopcart-mask" bindtap="showCartList" wx:if="{
  
  { showCart }}"></view>
  <view class="shopcart-wrap">
    <view class="shopcart-head">
      <view class="shopcart-head-title">已选商品</view>
      <view class="shopcart-head-clean" bindtap="cartClear">
        <i class="iconfont"></i>清空购物车
      </view>
    </view>
    <view class="shopcart-list">
      <view class="shopcart-item" wx:for="{
  
  { cartList }}" wx:key="id">
        <view class="shopcart-item-name">{
  
  { item.name }}</view>
        <view class="shopcart-item-price">
          <view>{
  
  { priceFormat(item.price * item.number) }}</view>
        </view>
        <view class="shopcart-item-number">
          <i class="iconfont shopcart-icon-dec" data-id="{
  
  { index }}" bindtap="cartNumberDec"></i>
          <view>{
  
  { item.number }}</view>
          <i class="iconfont shopcart-icon-add" data-id="{
  
  { index }}" bindtap="cartNumberAdd"></i>
        </view>
      </view>
    </view>
  </view>
</view>
<!-- 满减优惠信息 -->
<view class="promotion">
  <label wx:if="{
  
  { promotion.k - cartPrice > 0 }}">满{
  
  { promotion.k }}立减{
  
  { promotion.v }}元，还差{
  
  { promotion.k - cartPrice }}元</label>
  <label wx:else>已满{
  
  { promotion.k }}元可减{
  
  { promotion.v }}元</label>
</view>
<!-- 小球动画 -->
<view class="operate">
  <view class="operate-shopcart-ball" hidden="{
  
  { !cartBall.show }}" style="left: {
  
  { cartBall.x }}px; top: {
  
  { cartBall.y }}px;"></view>
  <view class="operate-shopcart" bindtap="showCartList">
    <i class="iconfont operate-shopcart-icon {
  
  { cartNumber > 0 ? 'operate-shopcart-icon-activity' : '' }}">
      <span wx:if="{
  
  { cartNumber > 0 }}">{
  
  { cartNumber }}</span>
    </i>
    <view class="operate-shopcart-empty" wx:if="{
  
  { cartNumber === 0 }}">购物车是空的</view>
    <view class="operate-shopcart-price" wx:else>
      <block wx:if="{
  
  { cartPrice >= promotion.k }}">
        <view>{
  
  { priceFormat(cartPrice - promotion.v )}}</view>
        <text>{
  
  { priceFormat(cartPrice) }}</text>
      </block>
      <view wx:else>{
  
  { priceFormat(cartPrice) }}</view>
    </view>
  </view>
  <view class="operate-submit {
  
  { cartNumber !== 0 ? 'operate-submit-activity' : '' }}" bindtap="order">选好了</view>
</view>
<wxs module="priceFormat">
  module.exports = function (price) {
    return '¥ ' + parseFloat(price)
  }
</wxs>
3.checkout.wxml

        主要实现了订单确认页面的展示，包含订单信息、备注、支付等功能。

<!--pages/order/checkout/checkout.wxml-->
<view class="content">
  <!-- 标题 -->
  <view class="content-title">请确认您的订单</view>
  <!-- 订单信息-->
  <view class="order">
    <view class="order-title">订单详情</view>
    <view class="order-list">
      <!-- 订单商品列表项 -->
      <view class="order-item" wx:for="{
  
  { order_food }}" wx:key="id">
        <view class="order-item-left">
          <image class="order-item-image" mode="widthFix" src="{
  
  { item.image_url }}" />
          <view>
            <view class="order-item-name">{
  
  { item.name }}</view>
            <view class="order-item-number">x {
  
  { item.number }}</view>
          </view>
        </view>
        <view class="order-item-price">{
  
  { priceFormat(item.price * item.number) }}</view>
      </view>
      <!-- 满减信息 -->
      <view class="order-item" wx:if="{
  
  { checkPromotion(promotion) }}">
        <view class="order-item-left">
          <i class="order-promotion-icon">减</i>满减优惠
        </view>
        <view class="order-promotion-price">- {
  
  { priceFormat(promotion) }}</view>
      </view>
      <!-- 小计 -->
      <view class="order-item">
        <view class="order-item-left">小计</view>
        <view class="order-total-price">{
  
  { priceFormat(price) }}</view>
      </view>
    </view>
  </view>
  <!-- 备注功能 -->
  <view class="content-comment">
    <label>备注</label>
    <textarea placeholder="如有其他要求，请输入备注" bindinput="inputComment"></textarea>
  </view>
</view>
<!-- 支付功能 -->
<view class="operate">
  <view class="operate-info">合计：{
  
  { priceFormat(price) }}</view>
  <view class="operate-submit" bindtap="pay">去支付</view>
</view>
<!-- 处理商品价格格式 -->
<wxs module="priceFormat">
  module.exports = function (price) {
    return price ? '¥ ' + parseFloat(price) : ''
  }
</wxs>
<wxs module="checkPromotion">
  module.exports = function (promotion) {
    return parseFloat(promotion) > 0
  }
</wxs>
4.detail.wxml

        此页面主要分为四个部分：顶部取餐号展示区、订单详情区、订单信息列表区、提示信息区。同时，使用了两个 wxs 模块来处理价格格式化和满减优惠判断。

<!--pages/order/detail/detail.wxml-->
<view class="top">
  <view class="card" wx:if="{
  
  { !is_taken }}">
    <view class="card-title">取餐号</view>
    <view class="card-content">
      <view class="card-info">
        <text class="card-code">{
  
  { code }}</text>
        <text class="card-info-r">正在精心制作中…</text>
      </view>
      <view class="card-comment" wx:if="{
  
  { comment }}">备注：{
  
  { comment }}</view>
      <view class="card-tips">美食制作中，尽快为您服务☺</view>
    </view>
  </view>
</view>
<view class="order">
  <view class="order-title">订单详情</view>
  <view class="order-list">
    <!-- 订单商品列表项 -->
    <view class="order-item" wx:for="{
  
  { order_food }}" wx:key="id">
      <view class="order-item-left">
        <image class="order-item-image" mode="widthFix" src="{
  
  { item.image_url }}" />
        <view>
          <view class="order-item-name">{
  
  { item.name }}</view>
          <view class="order-item-number">x {
  
  { item.number }}</view>
        </view>
      </view>
      <view class="order-item-price">{
  
  { priceFormat(item.price * item.number) }}</view>
    </view>
    <!-- 满减信息 -->
    <view class="order-item" wx:if="{
  
  { checkPromotion(promotion) }}">
      <view class="order-item-left">
        <i class="order-promotion-icon">减</i>满减优惠
      </view>
      <view class="order-promotion-price">- {
  
  { priceFormat(promotion) }}</view>
    </view>
    <!-- 小计 -->
    <view class="order-item">
      <view class="order-item-left">小计</view>
      <view class="order-total-price">{
  
  {priceFormat(price)}}</view>
    </view>
  </view>
</view>
<view class="list">
  <view>
    <text>订单号码</text>
    <view>{
  
  { sn }}</view>
  </view>
  <view>
    <text>下单时间</text>
    <view>{
  
  { create_time }}</view>
  </view>
  <view>
    <text>付款时间</text>
    <view>{
  
  { pay_time }}</view>
  </view>
  <view wx:if="{
  
  { is_taken }}">
    <text>取餐时间</text>
    <view>{
  
  { taken_time }}</view>
  </view>
</view>
<view class="tips" wx:if="{
  
  { is_taken }}">取餐号{
  
  { code }} 您已取餐</view>
<view class="tips" wx:else>请凭此页面至取餐柜台领取美食</view>
<wxs module="priceFormat">
  module.exports = function (price) {
    return price ? '¥ ' + parseFloat(price) : ''
  }
</wxs>
<wxs module="checkPromotion">
  module.exports = function (promotion) {
    return parseFloat(promotion) > 0
  }
</wxs>

小结优点

  1. 前后端分离：

    • 前端专注于用户体验，后端专注于数据处理，提高开发效率和系统可维护性。

  2. 数据交互标准化：

    • 使用JSON格式进行数据交互，便于前后端解析和处理。

  3. 扩展性强：

    • 后端接口可独立扩展，支持多端接入（如小程序、Web端等）。

  4. 安全性高：

    • 数据通过HTTPS传输，后端对用户密码加密存储，保障用户信息安全。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2284233.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

WPF基础 | WPF 常用控件实战：Button、TextBox 等的基础应用

WPF基础 | WPF 常用控件实战：Button、TextBox 等的基础应用

WPF基础 | WPF 常用控件实战&#xff1a;Button、TextBox 等的基础应用 一、前言二、Button 控件基础2.1 Button 的基本定义与显示2.2 按钮样式设置2.3 按钮大小与布局 三、Button 的交互功能3.1 点击事件处理3.2 鼠标悬停与离开效果3.3 按钮禁用与启用 四、TextBox 控件基础4.…
阅读更多...
CentOS7使用源码安装PHP8教程整理

CentOS7使用源码安装PHP8教程整理

CentOS7使用源码安装PHP8教程整理 下载安装包解压下载的php tar源码包安装所需的一些依赖扩展库安装前的配置修改配置文件1、进入php8的安装包 配置环境变量开机自启启动服务创建软连接常见问题1、checking for icu-uc > 50.1 icu-io icu-i18n... no2、configure: error: Pa…
阅读更多...
08-Elasticsearch

08-Elasticsearch

黑马商城作为一个电商项目&#xff0c;商品的搜索肯定是访问频率最高的页面之一。目前搜索功能是基于数据库的模糊搜索来实现的&#xff0c;存在很多问题。 首先&#xff0c;查询效率较低。 由于数据库模糊查询不走索引&#xff0c;在数据量较大的时候&#xff0c;查询性能很…
阅读更多...
SQL在DBA手里-改写篇

SQL在DBA手里-改写篇

背景 最近运营需要做月报汇总交易情况&#xff0c;之前一直是他们手工出的数据&#xff0c;他们想做成月初自动发送邮件&#xff0c;从而减轻他们的工作量。于是他们提供SQL我们在邮件服务器配置做定时发送任务。 表介绍&#xff08;表及字段已做脱敏处理&#xff09; trans…
阅读更多...
企业财务管理系统的需求设计和实现

企业财务管理系统的需求设计和实现

该作者的原创文章目录&#xff1a; 生产制造执行MES系统的需求设计和实现 企业后勤管理系统的需求设计和实现 行政办公管理系统的需求设计和实现 人力资源管理HR系统的需求设计和实现 企业财务管理系统的需求设计和实现 董事会办公管理系统的需求设计和实现 公司组织架构…
阅读更多...
Couchbase UI: Server

Couchbase UI: Server

在 Couchbase UI 中的 Server&#xff08;服务器&#xff09;标签页主要用于管理和监控集群中的各个节点。以下是 Server 标签页的主要内容和功能介绍&#xff1a; 1. 节点列表 显示集群中所有节点的列表&#xff0c;每个节点的详细信息包括&#xff1a; 节点地址&#xff1…
阅读更多...
【软件设计师中级】-笔记缩减版本-计算机系统基础知识

【软件设计师中级】-笔记缩减版本-计算机系统基础知识

1. 计算机系统基础知识 1.1. 计算机系统硬件基本组成硬件 中央处理器&#xff08;CPU&#xff09;硬件系统的核心 运算器 控制器 存储器&#xff08;记忆设备&#xff09; 内部存储器&#xff08;速度高&#xff0c;容量小&#xff09;&#xff1a;临时存放程序、数据及中间结…
阅读更多...
SAP MM 记录一次SAP外协采购收货提示 这种物料的特殊库存 O 0100003359 14019002不存在的问题

SAP MM 记录一次SAP外协采购收货提示 这种物料的特殊库存 O 0100003359 14019002不存在的问题

根据采购订单收货&#xff0c;调用时 BAPI_GOODSMVT_CREATE时返回 { "TYPE":"E", "ID":"M7", "NUMBER":"076", "MESSAGE":"这种物料的特殊库存 O 0100003359 14019002不存在"…
阅读更多...
在 Ubuntu22.04 上安装 Splunk

在 Ubuntu22.04 上安装 Splunk

ELK感觉太麻烦了&#xff0c;换个日志收集工具 Splunk 是一种 IT 工具&#xff0c;可帮助在任何设备上收集日志、分析、可视化、审计和创建报告。简单来说&#xff0c;它将“机器生成的数据转换为人类可读的数据”。它支持从虚拟机、网络设备、防火墙、基于 Unix 和基于 Windo…
阅读更多...
计算机网络 （60）蜂窝移动通信网

计算机网络 （60）蜂窝移动通信网

一、定义与原理 蜂窝移动通信网是指将一个服务区分为若干蜂窝状相邻小区并采用频率空间复用技术的移动通信网。其原理在于&#xff0c;将移动通信服务区划分成许多以正六边形为基本几何图形的覆盖区域&#xff0c;称为蜂窝小区。每个小区设置一个基站&#xff0c;负责本小区内移…
阅读更多...
壁纸设计过程中如何增加氛围感

壁纸设计过程中如何增加氛围感

在壁纸设计过程中&#xff0c;增加氛围感是提升整体视觉效果和情感传达的关键。以下是一些具体的方法和技巧&#xff0c;帮助你在设计中营造出强烈的氛围感&#xff1a; 一、色彩运用 选择主题色&#xff1a; 根据你想要传达的情感选择主色调。例如&#xff0c;温暖的色调&…
阅读更多...
|Python新手小白中级教程|第二十九章：面向对象编程（Python类的拓展延伸与10道实操题目）（5）

|Python新手小白中级教程|第二十九章：面向对象编程（Python类的拓展延伸与10道实操题目）（5）

文章目录 前言1.类变量与实例变量2.静态方法和类方法1.静态方法2.类方法 3.实操使用1. 创建一个名为Person的类&#xff0c;包含属性name和age&#xff0c;并且有一个方法introduce()用于介绍自己的名字和年龄。2. 创建一个名为Circle的类&#xff0c;包含属性radius和color&am…
阅读更多...
UE求职Demo开发日志#12 完善击杀获得物品逻辑和UI

UE求职Demo开发日志#12 完善击杀获得物品逻辑和UI

1 实现思路 1.给WarehouseManager添加一个按TArray增加物品的函数 2.Enemy身上一个变量记录掉落物品&#xff0c;死亡时调用增加物品函数 3.同时调用UI显示 2 实现过程 2.1 在WarehouseManager里添加一个AddItemByArray函数 遍历数组调用添加函数 void UWarehouseManage…
阅读更多...
安装Ubuntu22.04

安装Ubuntu22.04

1.引用教程 如何安装Ubuntu Server 22.04 LTS_ubuntu22.04 server-CSDN博客 2.空间分配 要使用 docker 比较多所以分别的 docker 空间大
阅读更多...
【阅读笔记】基于整数+分数微分的清晰度评价算子

【阅读笔记】基于整数+分数微分的清晰度评价算子

本文介绍的是一种新的清晰度评价算子&#xff0c;整数微分算子分数微分算子 一、概述 目前在数字图像清晰度评价函数中常用的评价函数包括三类&#xff1a;灰度梯度评价函数、频域函数和统计学函数&#xff0c;其中灰度梯度评价函数具有计算简单&#xff0c;评价效果好等优点…
阅读更多...
scratch七彩六边形 2024年12月scratch三级真题 中国电子学会 图形化编程 scratch三级真题和答案解析

scratch七彩六边形 2024年12月scratch三级真题 中国电子学会 图形化编程 scratch三级真题和答案解析

目录 scratch七彩六边形 一、题目要求 1、准备工作 2、功能实现 二、案例分析 1、角色分析 2、背景分析 3、前期准备 三、解题思路 1、思路分析 2、详细过程 四、程序编写 五、考点分析 六、推荐资料 1、入门基础 2、蓝桥杯比赛 3、考级资料 4、视频课程 5、…
阅读更多...
Alfresco Content Services dockerCompose自动化部署详尽操作

Alfresco Content Services dockerCompose自动化部署详尽操作

Alfresco Content Services docker社区部署文档 Alfresco Content Services简介 Alfresco Content Services&#xff08;简称ACS&#xff09;是一款功能完备的企业内容管理&#xff08;ECM&#xff09;解决方案&#xff0c;主要面向那些对企业级内容管理有高要求的组织。具体…
阅读更多...
电子应用设计方案105：智能家庭AI拖把系统设计

电子应用设计方案105：智能家庭AI拖把系统设计

智能家庭 AI 拖把系统设计 一、引言 智能家庭 AI 拖把系统旨在为用户提供更高效、便捷和智能化的地面清洁解决方案&#xff0c;减轻家务劳动负担。 二、系统概述 1. 系统目标 - 自动清洁地面&#xff0c;包括吸尘、拖地和擦干功能。 - 智能识别地面材质和污渍程度&#xff0c…
阅读更多...
Spring整合Mybatis、junit纯注解

Spring整合Mybatis、junit纯注解

如何创建一个Spring项目 错误问题 不知道什么原因&#xff0c;大概是依赖版本不兼容、java版本不对的问题&#xff0c;折磨了好久就是搞不成。 主要原因看pom.xml配置 pom.xml配置 java版本 由于是跟着22年黑马视频做的&#xff0c;java版本换成了jdk-11&#xff0c;用21以…
阅读更多...
深入探讨数据库索引类型：B-tree、Hash、GIN与GiST的对比与应用

深入探讨数据库索引类型：B-tree、Hash、GIN与GiST的对比与应用

title: 深入探讨数据库索引类型：B-tree、Hash、GIN与GiST的对比与应用 date: 2025/1/26 updated: 2025/1/26 author: cmdragon excerpt: 在现代数据库管理系统中，索引技术是提高查询性能的重要手段。当数据量不断增长时，如何快速、有效地访问这些数据成为了数据库设计的核…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023