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

目录

概要

整体架构流程

(一)用户注册与登录

(二)菜品浏览与点餐

(三)订单管理

(四)后台管理

部分代码展示

1.index.wxml

2.list.wxml

3.checkout.wxml

4.detail.wxml

小结优点

概要

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

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

微信小程序-点餐(美食屋)02开发实践_第1张图片

整体架构流程

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

(一)用户注册与登录

  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

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



  
    
      
    
  



  
    开启点餐之旅→
  



  


  
    
  

2.list.wxml

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



  满{
  
  { promotion.k }}元减{
  
  { promotion.v }}元(在线支付专享)


  
  
    
      {
  
  { item.name }}
    
  
  
  
    
      {
  
  { category.name }}
      
        
          
        
        
          {
  
  { food.name }}
          {
  
  { priceFormat(food.price) }}
        
        
          
        
      
    
  



  
  
    
      已选商品
      
        清空购物车
      
    
    
      
        {
  
  { item.name }}
        
          {
  
  { priceFormat(item.price * item.number) }}
        
        
          
          {
  
  { item.number }}
          
        
      
    
  



  
  



  
  
    
      {
  
  { cartNumber }}
    
    购物车是空的
    
      
        {
  
  { priceFormat(cartPrice - promotion.v )}}
        {
  
  { priceFormat(cartPrice) }}
      
      {
  
  { priceFormat(cartPrice) }}
    
  
  选好了


  module.exports = function (price) {
    return '¥ ' + parseFloat(price)
  }
3.checkout.wxml

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



  
  请确认您的订单
  
  
    订单详情
    
      
      
        
          
          
            {
  
  { item.name }}
            x {
  
  { item.number }}
          
        
        {
  
  { priceFormat(item.price * item.number) }}
      
      
      
        
          满减优惠
        
        - {
  
  { priceFormat(promotion) }}
      
      
      
        小计
        {
  
  { priceFormat(price) }}
      
    
  
  
  
    
    
  



  合计:{
  
  { priceFormat(price) }}
  去支付



  module.exports = function (price) {
    return price ? '¥ ' + parseFloat(price) : ''
  }


  module.exports = function (promotion) {
    return parseFloat(promotion) > 0
  }
4.detail.wxml

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



  
    取餐号
    
      
        {
  
  { code }}
        正在精心制作中…
      
      备注:{
  
  { comment }}
      美食制作中,尽快为您服务☺
    
  


  订单详情
  
    
    
      
        
        
          {
  
  { item.name }}
          x {
  
  { item.number }}
        
      
      {
  
  { priceFormat(item.price * item.number) }}
    
    
    
      
        满减优惠
      
      - {
  
  { priceFormat(promotion) }}
    
    
    
      小计
      {
  
  {priceFormat(price)}}
    
  


  
    订单号码
    {
  
  { sn }}
  
  
    下单时间
    {
  
  { create_time }}
  
  
    付款时间
    {
  
  { pay_time }}
  
  
    取餐时间
    {
  
  { taken_time }}
  

取餐号{
  
  { code }} 您已取餐
请凭此页面至取餐柜台领取美食

  module.exports = function (price) {
    return price ? '¥ ' + parseFloat(price) : ''
  }


  module.exports = function (promotion) {
    return parseFloat(promotion) > 0
  }

小结优点

  1. 前后端分离

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

  2. 数据交互标准化

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

  3. 扩展性强

    • 后端接口可独立扩展,支持多端接入(如小程序、Web端等)。

  4. 安全性高

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

你可能感兴趣的:(微信小程序,微信小程序,小程序,美食,html,php)