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

本示例是一个简单的外卖查看店铺点菜的外卖微信小程序,小程序后端服务使用了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 tablepublic.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 tablepublic.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 tablepublic.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 tablepublic.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 tablepublic."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 tablepublic.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 authenticatedWITH 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://xiahunao.cn/news/2981200.html

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

相关文章

解决Linux CentOS 7安装了vim编辑器却vim编辑器不起作用、无任何反应

文章目录 前言一、解决vim不起作用&#xff08;卸载重新安装&#xff09;1.重新安装vim2.测试vim是否能正常使用 二、解决vim: error while loading shared libraries: /lib64/libgpm.so.2: file too short报错三、解决vim编辑器不能使用方向键和退格键问题 remove vim-common …

【S32DS RTD实战】-1.5-S32DS使用Post-Build调用第三方插件-自动对生成的s19,Hex,Bin文件二次编辑

<--返回「Autosar_MCAL高阶配置」专栏主页--> 案例背景&#xff1a; 在《【S32DS RTD实战】-1.3-S32K3工程生成S19&#xff0c;BIN&#xff0c;Hex文件&#xff0c;以及Post-build steps的妙用_s32ds如何生成s19或hex文件-CSDN博客https://blog.csdn.net/qfmzhu/articl…

C++“流”风格日志系统实战-课程简介

一个能快速提升C复杂代码设计的学习项目&#xff0c;一个能迅速让C面试官会心一笑的简历项目&#xff0c;一个能在实际项目中使用的项目……学习什么是流&#xff1f;如何利用抽象层面的流编写适用面更广的代码&#xff1f; 每天在用的cout和cin 它们是什么类型&#xff1f;最后…

HDMI的识别过程

HDMI可分为发送设备和接收设备&#xff0c;具体的识别过程见下&#xff1a; (1).HDMI发送设备给HDMI接收设备提供5V的电源&#xff0c;其电流应小于50mA; (2).HDMI检测到5V电源后&#xff0c;HDMI接收设备给HDMI发送设备提供HPD信号&#xff0c;其电压为5V&#xff1b; (3).HDM…

Java | Leetcode Java题解之第45题跳跃游戏II

题目&#xff1a; 题解&#xff1a; class Solution {public int jump(int[] nums) {int length nums.length;int end 0;int maxPosition 0; int steps 0;for (int i 0; i < length - 1; i) {maxPosition Math.max(maxPosition, i nums[i]); if (i end) {end maxP…

将本地项目推送至gitlab仓库

1. gitlab上新建一个空白项目 gitlab上点击new project按钮&#xff0c;新建一个项目 新建空白项目 项目名称与本地新建项目名称相同&#xff0c;其余根据具体需要选择 2. 初始化本地仓库并commit项目 进入本地项目根目录下&#xff0c;右击 git bash here打开命令窗口 初始化…

场景 - 分库分表

分什么 数据量大分表&#xff0c;并发大分库 分表字段如何选择 如果对交易订单进行分表&#xff0c;可以选择的东西很多&#xff0c;比如说商户id&#xff0c;用户id&#xff0c;地区等等 分表的时候要考虑到数据倾斜问题 数据倾斜 比如说按商户号进行分表&#xff0c;一共…

Java基础入门1-2

跟着韩顺平老师的30天入门java课程学习&#xff0c;整理一下自己的笔记&#xff0c;方便回顾知识点和复习。 另附上视频链接&#xff1a;0034_韩顺平Java_变量原理_哔哩哔哩_bilibili 第一章&#xff1a;学习前的了解 第二章&#xff1a;Java概述 2.1什么是程序&#xff1f…

KPI与OKR的区别:深入解析与案例应用

一、KPI&#xff1a;量化与结果的导向 KPI是一种基于量化指标的绩效管理方法&#xff0c;强调对关键业务成果的衡量和评估。它通常关注那些可以直接影响企业战略目标达成的具体指标&#xff0c;如销售额、客户满意度等。KPI的优点在于其明确性和可衡量性&#xff0c;有助于企业…

简化图卷积 笔记

1 Title Simplifying Graph Convolutional Networks&#xff08;Felix Wu、Tianyi Zhang、Amauri Holanda de、 Souza Jr、Christopher Fifty、Tao Yu、Kilian Q. Weinberger&#xff09;【ICML 2019】 2 Conclusion This paper proposes a simplified graph convolutional m…

Oracle 第二章

1- 排序查询 select * from 表名 order by 字段; desc &#xff1a;从大到小排序 默认是从小到大排序 2- 基于伪列的查询 ROWID 和 ROWNUM rowid &#xff1a; 唯一的编号 select rowid,表名.* from 表名 where ROWID AAAStKAANAAAAC/AAC; &#xff08;rowid号&#…

ROS 话题订阅模型之自定义消息类型 C++实现

ROS 话题订阅模型之自定义消息类型 1.自定义消息类型好处 ROS提供了许多标准的消息类型&#xff0c;如 std_msgs/String、sensor_msgs/Image 等&#xff0c;涵盖了很多常见的数据类型和传感器数据。但是&#xff0c;在实际的开发中&#xff0c;我们经常会遇到需要传输的数据类…

SD-WAN多分支组网案例分享

随着企业规模持续扩大&#xff0c;业务版图日益多元&#xff0c;多分支组网已成为企业网络建设的核心议题。如何构建高效、安全且灵活的网络连接&#xff0c;成为企业急需解决的关键问题。近些年&#xff0c;SD-WAN技术的崭露头角&#xff0c;为企业带来了前所未有的解决方案。…

在浏览器输入网址,Enter之后发生了什么?

在浏览器输入网址&#xff0c;Enter之后发生了什么&#xff1f; 很多八股文会给出&#xff1a; 1. DNS Resolution2. Establishing a Connection3. Sending an Http Request4. Receiving the HTTP Response5. Rendering the Web Page 但今天我斗胆插入第0.9步URL Parsing&#…

为什么堆排序的时间复杂度是O(N*logN)?

目录 前言&#xff1a; 堆排序&#xff08;以排升序为例&#xff09; 步骤&#xff08;用大根堆&#xff0c;倒这排&#xff0c;排升序&#xff09;&#xff1a; 1.先把要排列的数组建立成大根堆 2.堆顶元素&#xff08;82&#xff09;和最后一个元素交换&#xff08;2&…

【随想录】Day30—第七章 回溯算法part06

目录 题目1: 重新安排行程1- 思路2- 题解⭐重新安排行程 ——题解思路 题目2: N皇后1- 思路2- 题解⭐N皇后 ——题解思路 题目3: 解数独&#xff08;跳过&#xff09; 题目1: 重新安排行程 题目链接&#xff1a;332. 重新安排行程 1- 思路 思路&#xff1a; 本题实际上是一个…

2024第24届营养健康展/北京健康展/健康食品展

第24届中国国际营养健康产业博览会 2024HEC营养健康展/北京健康展/大健康展 2024北京大健康展/营养健康展/北京健康展 2024第24届营养健康展/北京健康展/健康食品展 2024北京健康展/营养品展/HEC营养健康展 HEC2024与您共同打造健康梦&#xff0d;做中国最具权威性的大健康…

H264 编码标准常见术语解释

H264 编码标准 H.264编码标准&#xff0c;也被称作MPEG-4 AVC&#xff08;Advanced Video Coding&#xff09;&#xff0c;是一种被广泛使用的数字视频压缩标准&#xff0c;由国际电信联盟&#xff08;ITU-T&#xff09;和国际标准化组织&#xff08;ISO&#xff09;共同开发。…

ArcGIS教程:降雨量插值

一、目标 制作一副年平均降雨量的地图。 二、数据 某地的175个气象站数据的shp文件station.shp&#xff0c;以及这个地方轮廓的栅格数据idoutlgd。 数据下载链接&#xff1a;数据下载链接 三、制作方法 1.首先加载数据。 2.在菜单栏/customize/toolbars/中找到geostatisti…

AI图书推荐:如何用ChatGPT和Python进行数据可视化

《如何用ChatGPT和Python进行数据可视化》的原版英文图书标题&#xff1a;Python 3 Data Visualization Using ChatGPT - GPT-4 &#xff0c;作者是 Oswald Campesato &#xff0c;2023年出版 本书旨在向读者展示Python 3编程的概念和数据可视化的艺术。它还探讨了使用ChatGPT/…