应用实战|只需几步,即可享有外卖订餐小程序

news2024/12/29 10:53:48

本示例是一个简单的外卖查看店铺点菜的外卖微信小程序,小程序后端服务使用了MemFire Cloud,其中使用到的MemFire Cloud功能包括:

其中使用到的MemFire Cloud功能包括:

  • 云数据库:存储外卖微信小程序所有数据表的信息。
  • 即时API:创建数据表时会自动生成 API。
  • 对象存储:存储外卖微信小程序中物料的图片。
    在这里插入图片描述

创建应用

目的:通过创建的一个MemFire Cloud应用来获得数据库、对象存储等一系列资源,并将获得该应用专属的API访问链接和访问密钥,用户可以轻松的调用API接口与以上资源进行交互。

登录MemFire Cloud, 在“我的应用”页面创建一个新应用

在这里插入图片描述

创建数据表

创建shop_banners表

在“表编辑器”页面,点击“新建表”,创建shop_banners表。shop_banners表主要记录外卖小程序banner头图信息,表结构字段如下:

名称类型描述
idbigint主键,自动为列分配一个连续的唯一编号,唯一标识ID
imgtextbanner头图链接
urlrealbanner头图地址
created_attimetamptz创建时间
nametextbanner头图标题

sql建表语句

create table
  public.shop_banners (
    id bigint generated by default as identity,
    created_at timestamp with time zone not null default now(),
    img text null,
    url text null,
    name text null,
    constraint shop_banners_pkey primary key (id)
  ) tablespace pg_default;

数据表创建完后需在表中手动插入一些外卖微信小程序的数据(以csv为例) ,如下图。

url,created_at,name,img,id
,2024-04-08 06:30:14.116968+00,零食专场,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/67bbcdfd-16ad-4783-81ad-e48802544211.png,1
,2024-04-08 06:30:14.116968+00,鲜嫩果蔬,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/1dcdf97a-ca09-48e3-b85f-b5efe73ec21c.png,3
,2024-04-08 06:30:14.116968+00,金牌好店,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/qt_1851074846c5f4d717cef8fbeecbd07f_85495.png,2
创建策略

接下来,需要给shop_banners表创建1条策略,此策略通过 SELECT 操作为所有用户提供对表的读取访问权限。在“SQL执行器”页面,点击“新查询”按钮,新建一个SQL Query,执行以下操作:

CREATE POLICY "Enable read access for all users" ON "public"."shop_banners"
AS PERMISSIVE FOR SELECT
TO public
USING (true)

创建shop_icons表

在“表编辑器”页面,点击“新建表”,创建shop_icons表。shop_icons表主要记录外卖小程序商品类型icon图信息,表结构字段如下:

名称类型描述
idbigint主键,自动为列分配一个连续的唯一编号,唯一标识ID
imgtext商品类型icon图链接
urlreal商品类型icon图地址
created_attimetamptz创建时间
nametext商品类型icon图标题

sql建表语句

create table
  public.shop_icons (
    id bigint generated by default as identity,
    created_at timestamp with time zone not null default now(),
    img text null,
    url text null,
    name text null,
    constraint shop_icons_pkey primary key (id)
  ) tablespace pg_default;

数据表创建完后需在表中手动插入一些外卖微信小程序的数据(以csv为例) ,如下图。

id,created_at,img,url,name
1,2024-04-08 06:30:14.260727+00,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/icon_1.jpg,,美食
2,2024-04-08 06:30:14.260727+00,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/icon_2.jpg,,超市
3,2024-04-08 06:30:14.260727+00,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/icon_3.jpg,,鲜果购
4,2024-04-08 06:30:14.260727+00,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/icon_4.jpg,,下午茶
5,2024-04-08 06:30:14.260727+00,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/icon_5.jpg,,正餐优选
6,2024-04-08 06:30:14.260727+00,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/icon_6.jpg,,外卖专送
7,2024-04-08 06:30:14.260727+00,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/icon_7.jpg,,饮品站
8,2024-04-08 06:30:14.260727+00,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/icon_8.jpg,,小吃馆
创建策略

接下来,需要给shop_icons表创建1条策略,此策略通过 SELECT 操作为所有用户提供对表的读取访问权限。在“SQL执行器”页面,点击“新查询”按钮,新建一个SQL Query,执行以下操作:

CREATE POLICY "Enable read access for all users" ON "public"."shop_icons"
AS PERMISSIVE FOR SELECT
TO public
USING (true)

创建shops_list表

在“表编辑器”页面,点击“新建表”,创建shops_list表。shops_list表主要记录外卖小程序内店铺的信息,表结构字段如下:

名称类型描述
idbigint主键,自动为列分配一个连续的唯一编号,唯一标识ID
imgtext店铺图链接
logoreal店铺图logo
created_attimetamptz创建时间
nametext店铺的名称
desctext排序
distancereal距离

sql建表语句

create table
  public.shops_list (
    id bigint generated by default as identity,
    created_at timestamp with time zone not null default now(),
    img text null,
    distance double precision null,
    sales bigint null,
    logo text null,
    name text null,
    "desc" text null,
    constraint shops_list_pkey primary key (id)
  ) tablespace pg_default;

数据表创建完后需在表中手动插入一些外卖微信小程序的数据(以csv为例) ,如下图。

id,created_at,img,distance,sales,logo,name,desc
1,2024-04-08 08:33:54.959704+00,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/shop_1.jpg,1.8,1475,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/logo_1.jpg,杨国福麻辣烫(东四店),满25减8;满35减10;满60减15(在线支付专享)
2,2024-04-08 08:33:54.959704+00,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/shop_2.jpg,2.4,1284,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/logo_2.jpg,忠友麻辣烫(东四店),满25减8;满35减10;满60减15(在线支付专享)
3,2024-04-08 08:33:54.959704+00,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/shop_3.jpg,2.3,2039,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/logo_3.jpg,粥面故事(东大桥店),满25减8;满35减10;满60减15(在线支付专享)
4,2024-04-08 08:33:54.959704+00,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/shop_4.jpg,3.4,400,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/logo_4.jpg,兄鸡,满25减8;满35减10;满60减15(在线支付专享)
创建策略

接下来,需要给shops_list表创建1条策略,此策略通过 SELECT 操作为所有用户提供对表的读取访问权限。在“SQL执行器”页面,点击“新查询”按钮,新建一个SQL Query,执行以下操作:

CREATE POLICY "Enable read access for all users" ON "public"."shops_list "
AS PERMISSIVE FOR SELECT
TO public
USING (true)

创建goods表

在“表编辑器”页面,点击“新建表”,创建goods表。goods表主要记录外卖小程序店铺的菜品信息,表结构字段如下:

名称类型描述
idbigint主键,自动为列分配一个连续的唯一编号,唯一标识ID
nametext商品名称
soldbigint售出量
created_attimetamptz创建时间
pricebigint价格
pictext图片

sql建表语句

create table
  public.goods (
    id bigint generated by default as identity,
    created_at timestamp with time zone not null default now(),
    name text null,
    pic text null,
    sold bigint null,
    price bigint null,
    constraint goods_pkey primary key (id)
  ) tablespace pg_default;

数据表创建完后需在表中手动插入一些外卖微信小程序的数据(以csv为例) ,如下图。

id,created_at,name,pic,sold,price
1,2024-04-08 09:36:48.522563+00,娃娃菜,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/1.jpg,1014,2
2,2024-04-08 09:36:48.522563+00,金针菇,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/2.jpg,1029,3
3,2024-04-08 09:36:48.522563+00,方便面,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/unnamed.jpg,1030,2
4,2024-04-08 09:36:48.522563+00,粉丝,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/e3ada742beca885a74dcb2b9cdd7f1a9_180x180.jpg,1059,1
5,2024-04-08 09:36:48.522563+00,生菜,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/1.jpg,1029,2
6,2024-04-08 09:36:48.522563+00,白菜,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/1.jpg,1064,2
7,2024-04-08 09:36:48.522563+00,杏鲍菇,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/630261504a9fa788.jpg,814,3
8,2024-04-08 09:36:48.522563+00,香菇,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/19120301.jpg,124,3
9,2024-04-08 09:36:48.522563+00,猴头菇,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/19120301.jpg,102,5
创建策略

接下来,需要给goods表创建1条策略,此策略通过 SELECT 操作为所有用户提供对表的读取访问权限。在“SQL执行器”页面,点击“新查询”按钮,新建一个SQL Query,执行以下操作:

CREATE POLICY "Enable read access for all users" ON "public"."goods"
AS PERMISSIVE FOR SELECT
TO public
USING (true)

创建goodsList表

在“表编辑器”页面,点击“新建表”,创建goodsList表。goodsList表主要记录店铺菜品的类别信息,表结构字段如下:

名称类型描述
idbigint主键,自动为列分配一个连续的唯一编号,唯一标识ID
classifyNametext菜品的类别名称
goodsreal菜品的类别所关联的菜品
created_attimetamptz创建时间
tagtext菜品的类别tag

sql建表语句

create table
  public."goodsList" (
    id bigint generated by default as identity,
    created_at timestamp with time zone not null default now(),
    "classifyName" text null,
    goods text null,
    tag text null,
    constraint goodsList_pkey primary key (id)
  ) tablespace pg_default;

数据表创建完后需在表中手动插入一些外卖微信小程序的数据(以csv为例) ,如下图。

id,created_at,classifyName,goods,tag
1,2024-04-08 09:39:41.790288+00,热销,"[1, 2, 3, 4, 5]",hot
2,2024-04-08 09:39:41.790288+00,新品,"[1, 3]",new
3,2024-04-08 09:39:41.790288+00,蔬菜,"[1, 6, 5]",vegetable
4,2024-04-08 09:39:41.790288+00,蘑菇,"[2, 7, 8, 9]",mushroom
5,2024-04-08 09:39:41.790288+00,主食,"[3, 4]",food
创建策略

接下来,需要给goodsList表创建1条策略,此策略通过 SELECT 操作为所有用户提供对表的读取访问权限。在“SQL执行器”页面,点击“新查询”按钮,新建一个SQL Query,执行以下操作:

CREATE POLICY "Enable read access for all users" ON "public"."goodsList"
AS PERMISSIVE FOR SELECT
TO public
USING (true)

创建order_lists表

在“表编辑器”页面,点击“新建表”,创建order_lists表。order_lists表主要记录用户下单的信息,表结构字段如下:

名称类型描述
idbigint主键,自动为列分配一个连续的唯一编号,唯一标识ID
counttext下单的商品商品总数量
listreal下单的商品id与id对应的数量
user_iduuid下单的用户id
created_attimetamptz创建时间

sql建表语句

create table
  public.order_lists (
    id bigint generated by default as identity,
    created_at timestamp with time zone not null default now(),
    count bigint null,
    list text null,
    user_id uuid null,
    constraint order_lists_pkey primary key (id)
  ) tablespace pg_default;
创建策略

接下来,需要给order_lists表创建1条策略,此策略通过 SELECT 操作为只有通过微信认证的用户才能有对表插入数据权限。在“SQL执行器”页面,点击“新查询”按钮,新建一个SQL Query,执行以下操作:

CREATE POLICY "只有通过微信认证的用户才能有对表插入数据权限" ON "public"."order_lists"
AS PERMISSIVE FOR INSERT
TO authenticated

WITH CHECK (true)

创建bucket

1.新建images存储桶

点击‘存储’图标菜单,点击‘创建新bucket’,创建images存储桶,存储桶是用来上传外卖小程序里面所有需要图片的物料。
在这里插入图片描述

注册小程序

以上是我们在MemFire Cloud上配置的全部步骤,接下来是在微信开发者工具上操作了。

如果您还未注册过小程序,请参考官方步骤注册小程序(只需要通过您的邮箱注册一个小程序获得一个appid,然后下载一个微信开发工具即可)

下载代码

git clone https://github.com/LucaRao/wechat-waimai.git

需要下载小程序sdk依赖的版本已经写在package.json文件里,直接下载即可

Node.js (>=14.x <=18.x) 。

用微信开发者工具点击导入项目

选择目录是下载好的小程序项目的目录,AppID为您在微信公众平台注册小程序获得的专属appid。
在这里插入图片描述

构建npm

在右侧详情里面的本地设置把“使用npm模块”和“不校验合法域名”勾上。

打开终端,在项目根目录下执行如下命令 (小程序需要的MemFire Cloud的微信小程序SDK已经存在package.json里,可以直接安装全局依赖)。

npm install

点击开发者工具中的菜单栏:工具 /构建 npm
在这里插入图片描述

这一步npm就构建完成了,我们需要的依赖也已经下载好了,根目录下会多出两个文件,如下图。

在这里插入图片描述

获取 API密钥

接下来需要创建一个可以访问应用程序数据的客户端,小程序使用了MemFire Cloud 微信小程序SDK包,使用他生态里提供的功能(登录、注册、增删改查等)去进行交互。创建一个可以访问微信小程序数据的客户端需要接口的地址(URL)和一个数据权限的令牌(ANON_KEY),我们需要去应用的首页去获取这两个参数然后配置到lib/supabase.js里面去。

lib/supabase.js

import { createClient } from 'supabase-wechat-stable-v2'
const url = ""
const key = ""

export const supabase = createClient(url, key)

回到MemFire Cloud首页,在应用/首页页面,获取服务地址以及token信息,只需要从首页中获取URL接口地址和anon的密钥。

在这里插入图片描述

Anon(公开)密钥是客户端API密钥。它允许“匿名访问”您的数据库,直到用户登录。登录后,密钥将切换到用户自己的登录令牌。这将为数据启用行级安全性。

编译小程序

点击“编译”即可展示小程序完成后的效果。

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

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

相关文章

OpenHarmony语言基础类库【@ohos.xml (xml解析与生成)】

将XML文本转换为JavaScript对象、以及XML文件生成和解析的一系列接口。 说明&#xff1a; 本模块首批接口从API version 8开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。 导入模块 import xml from ohos.xml; XmlSerializer XmlSerializer接口…

可审批可审计追溯的单网络导出文件方案,了解一下

在物理隔离状态下&#xff0c;单网络导出文件是一个重要的安全需求&#xff0c;特别是在处理敏感数据时。在这种环境下&#xff0c;数据导出需要采取特殊的安全措施&#xff0c;以确保数据传输的安全性和合规性。需要考虑以下因素&#xff1a; 安全性&#xff1a;确保传输过程加…

代码随想录算法训练营第12天:滑动窗口和前缀和

代码随想录算法训练营第12天&#xff1a;滑动窗口和前缀和 这里我参考了西法的博客&#xff0c; 467. 环绕字符串中唯一的子字符串(中等)795. 区间子数组个数(中等)904. 水果成篮(中等)992. K 个不同整数的子数组&#xff08;困难&#xff09;1109. 航班预订统计(中等) 前四…

netsh int ipv4 show dynamicport tcp动态端口port设置

netsh int ipv4 show dynamicport tcp netsh int ipv4 set dynamicport tcp start4000 num10000

测试下目录显示否

目录 1、安装docker 2、搜索镜像 3、拉取镜像 4、查看镜像列表 5、运行镜像 6、查看运行容器列表 8、命令行连接数据库 1、安装docker 2、搜索镜像 docker search mysql 3、拉取镜像 docker pull mysql 4、查看镜像列表 docker images 5、运行镜像 docker run -p …

#ESP32S3R8N8建立工程(VSCODE)点亮LED

1.参考文档 【立创ESP32S3R8N8】IDF入门手册 - 飞书云文档 (feishu.cn)https://lceda001.feishu.cn/wiki/GOIlwwfbIi1SC3k8594cDeFVn8g 2.建立工程 3.运行效果 4.更改配置 5.插播 之前配置的环境是有问题的&#xff0c;就算有自动检测也要仔细检查&#xff0c;必须严格按照以…

【推荐】程序员的免费羊毛!!!

还剩下最后两天了&#xff0c;最后这两天抽奖命中率特别高&#xff0c;基本中奖99.99% 有大量日历、数码电子产品。 点击链接参与「通义灵码 体验 AI 编码&#xff0c;开 AI 盲盒」 https://developer.aliyun.com/topic/lingma/activities/202403?taskCode14508&recor…

Windows系统中下Oracle 19C数据库超级详细安装、设置教程(自己电脑上安装Oracle学习,保姆级教学,亲测有效)

Oracle 官方提供了一个基于 Java 技术的图形界面安装工具&#xff1a;Oracle Universal Installer&#xff08;Oracle 通用安装器&#xff09;简称 OUI&#xff0c;利用它可以完成在不同操作系统平台上&#xff08;Windows、Linux、UNIX&#xff09;的、不同类型的、不同版本的…

vb.net编写简易计算器(DataTable )

如下图所示界面&#xff1a; 部分代码&#xff1a; Private Sub Button14_Click(sender As Object, e As EventArgs) Handles Button14.Click TextBox1.Text "" End Sub Private Sub Button19_Click(sender As Object, e As EventArgs) Handles Button19.Cli…

手机空号过滤,提高工作效率

手机空号过滤在多个方面都具有重要的作用。 首先&#xff0c;它对于短信群发商和电话营销商来说至关重要。通过空号过滤&#xff0c;他们可以确保手机号码数据库的准确性和有效性。由于每天都有大量人群因各种原因更换手机号码&#xff0c;导致每个号段中的空号率和手机状态都…

AI图书推荐:《企业AI转型:如何在企业中部署ChatGPT?》

Jay R. Enterprise AI in the Cloud. A Practical Guide...ChatGPT Solutions &#xff08;《企业AI转型&#xff1a;如何在企业中部署ChatGPT&#xff1f;》&#xff09;是一本由Rabi Jay撰写、于2024年由John Wiley & Sons出版的书籍&#xff0c;主要为企业提供实施AI转型…

就业班 第三阶段(tomcat) 2401--4.28 day1 tomcat1安装配置及单机多实例

企业 Tomcat 运维 文章目录 企业 Tomcat 运维一、Tomcat 简介1、Tomcat好帮手---JDK2、安装Tomcat & JDK1、系统环境说明2 、安装JDK3、安装Tomcat 二、Tomcat目录介绍1、tomcat主目录介绍2、webapps目录介绍3、Tomcat配置介绍&#xff08;conf&#xff09;4、Tomcat的管理…

C# Onnx yolov8 pig detection

C# Onnx yolov8 pig detection 目录 效果 项目 模型 代码 数据集 下载 效果 项目 模型 Model Properties ------------------------- date&#xff1a;2024-04-28T15:13:10.750689 description&#xff1a;Ultralytics YOLOv8n model trained on C:\Work\yolov8\datas…

手撕红黑树(kv模型模拟)

目录 前言 一、相关概念 二、性质介绍 红黑树平衡说明 三、红黑树模拟&#xff08;kv结构&#xff09; 1、红黑树节点 2、红黑树插入 2、特殊处理情况 声明&#xff1a; 情况一&#xff1a;cur为红&#xff0c;p为红&#xff0c;g为黑&#xff0c;u存在&#xff0c;且…

高频面试题:解决Spring框架中的循环依赖问题

引言&#xff1a;什么是Spring框架与循环依赖&#xff1f; 在Spring框架中&#xff0c;循环依赖是指两个或多个bean相互依赖对方以完成自己的初始化。这种依赖关系形成了一个闭环&#xff0c;导致无法顺利完成依赖注入。比如&#xff0c;如果Bean A在其构造函数中需要Bean B&a…

【python笔记】datafram的时间动态可视化 pyecharts地图

import pandas as pd# 假设DataFrame是这样的&#xff1a; df pd.DataFrame({ year: [2014, 2015, 2016, 2014, 2015, 2016, 2014, 2015, 2016], province: [广东省, 广东省, 河南省, 湖南省, 北京市, 北京市, 上海市, 新疆维吾尔自治区, 上海市], values: [100, 150, 75…

添加阿里云yum源

添加阿里云yum源 要添加阿里云的 yum 源&#xff0c;可以执行以下步骤&#xff1a; 首先&#xff0c;备份你的现有 yum 源配置文件&#xff0c;以防止意外更改&#xff1a; sudo cp /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup然后&#xf…

基于OpenMV 双轴机械臂 机器学习

文章目录 一、项目简要二、目标追踪1. 色块识别与最大色块筛选2. PID位置闭环 三、机器学习1. Device12. Device2 四、效果演示 一、项目简要 两套二维云台设备&#xff0c;Device1通过摄像头捕捉目标物块点位进行实时追踪&#xff0c;再将自身点位传到Device2&#xff0c;Dev…

嵌入式学习64-C++(labmda和动态内存分配)

知识回顾&#xff1a; Volatile关键字的作用 C vector容器详解 浅谈堆、栈、堆区、栈区的概念和区别 知识零碎&#xff1a; …

Git for Windows 下载与安装

当前环境&#xff1a;Windows 8.1 x64 1 打开网站 https://git-scm.com/ &#xff0c;点击 Downloads 。 2 点击 Windows 。 3 选择合适的版本&#xff0c;这里选择了 32-bit Git for Windows Portable。 4 解压下载后的 PortableGit-2.44.0-32-bit.7z.exe &#xff0c;并将 P…