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

本示例是一个简单的外卖查看店铺点菜的外卖微信小程序,小程序后端服务使用了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密钥。它允许“匿名访问”您的数据库,直到用户登录。登录后,密钥将切换到用户自己的登录令牌。这将为数据启用行级安全性。

编译小程序

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

服务端不 listen 可以创建 tcp 连接吗

这个问题有三类答案。 上来就撸 linux kernel 源码&#xff0c;折腾半天&#xff0c;哦&#xff0c;终于在 tcp_rcv_state_process 里找到了 tcp_rcv_synsent_state_process 调用&#xff0c;后者包含&#xff1a; if (th->syn) {/* We see SYN without ACK. It is attemp…

前端JS必用工具【js-tool-big-box】,Number数值转换的方法调用学习

这一小节&#xff0c;我们针对前端工具包&#xff08;npm&#xff09;js-tool-big-box的使用做一些讲解&#xff0c;主要是针对Number数值型转换的一些方法使用。 目录 前言 1 安装和引入 2 千位逗号分割 3 判断是否大于0 4 判断是否大于0的整数 5 生成指定范围内的随机数…

leetcode 循环列表的插入(Python)

题目如果不进行思考&#xff0c;巨多坑。 首先我们需要找到列表中的最小值&#xff0c;最大值这个节点&#xff0c;因为找到后可以与我们的新元素进行比较厚插入。 找到最小值&#xff0c;最大值需要循环一遍列表&#xff0c;如果当前cur元素的值<nex元素的值&#xff0c;…

堆的应用——堆排序

堆排序 堆排序是一种基于比较的排序算法&#xff0c;它利用堆这种数据结构所设计。堆是一个近似完全二叉树的结构&#xff0c;并同时满足堆积的性质&#xff1a;即子结点的键值或索引总是小于&#xff08;或者大于&#xff09;它的父结点。 堆排序可以分为两个主要步骤&#…

smart200 做client,modbus_tcp读取modbus_slave

这里还隐藏一个重要的设置&#xff0c;就是站地址。这个在库函数里。不同plc位置会不一样&#xff0c;我这里是vb1651对应modbus的地址为255&#xff0c;这个值我们可以自己更改&#xff0c;范围为1-247. 打开modbus_slave 软件&#xff0c;

【C#】rdlc报表答应报错:未能加载文件或程序集“Microsoft.SqlServer.Types

文章目录 一、报错信息二、解决方式 一、报错信息 Microsoft.Reporting.WinForms.LocalProcessingException: An error occurred during local report processing. —> Microsoft.Reporting.DefinitionInvalidException: The definition of the report ‘’ is invalid. —&…

sql注入漏洞及其sqlmap工具的使用

一、sql注入的原理 sql注入概念&#xff1a; sql注入主要是将sql语句&#xff0c;插入到web表单提交或者输入域名或者页面请求的查询字符串&#xff0c;最 终 达到一个欺骗服务器执行sql语句的效果。 sql注入的原理&#xff1a;主要分为平台层注入和代码层注入两种原因 …

stm32的GPIO基本结构

1.带FT标号的引脚能容忍5V 2.GPIO系统架构 stm32的所有GPIO都是挂载在APB2总线上的 3.GPIO的基本结构 在上图中&#xff0c;左边就是寄存器&#xff0c;右边就是驱动器了 保护二极管的作用&#xff1a;VDD表示3.3V&#xff0c;如果输入的电压的值大于3.3V&#xff0c;那么这个…

百度网盘某个文件对外开放怎么弄通过密码下载文件对外开放某个文件

百度网盘某个文件对外开放怎么弄通过密码下载文件对外开放某个文件 百度云盘分享文件(创建公开连接)的方法&#xff1a; 1、登录网页&#xff0c;打开百度云盘&#xff0c;并登陆自己的帐号。 2、上传后选择自己需要分享的文件。 选择分享的文件 3、将鼠标放在需要分享的文…

上市企业数字赋能指数数据集-2001到2022年(TF-IDF)

01、数据简介 上市公司数字赋能指数是一个用来衡量上市公司利用数字技术提高业务能力和效率的指标。这个指数反映了上市公司利用大数据、云计算和人工智能等数字技术&#xff0c;高效地利用商业资源和信息&#xff0c;并扩展供应关系的能力。市公司数字赋能指数是一种综合性的…

【Linux】组管理命令

在Linux系统中&#xff0c;组管理是一种重要的权限管理机制&#xff1a; 权限分配的灵活性&#xff1a;通过将用户组织成不同的组&#xff0c;管理员可以更轻松地管理用户的权限。这样&#xff0c;管理员可以根据组的角色或特定任务来分配权限&#xff0c;而不必逐个用户进行设…

大数据时代的引擎:大数据架构随记

大数据架构通常可以分为以下几层&#xff1a; 一、数据采集层 负责从各种数据源采集、清洗、转换、丰富以及格式化数据&#xff0c;可能包括结构化、半结构化和非结构化的数据。 1.1、常用的技术 在大数据领域&#xff0c;数据采集是一个关键的环节&#xff0c;常用的数据采集…

Spring框架宝典:彻底理解三级缓存策略

一、循环依赖概念 在Spring应用中&#xff0c;循环依赖指的是两个或多个Bean之间相互引用&#xff0c;造成了一个环状的依赖关系。举例来说&#xff0c;如果Bean A依赖于Bean B&#xff0c;同时Bean B也依赖于Bean A&#xff0c;就形成了循环依赖。这种情况下&#xff0c;Sprin…

数据库介绍(Mysql安装)

前言 工程师再在存储数据用文件就可以了&#xff0c;为什么还要弄个数据库? 一、什么是数据库&#xff1f; 文件保存数据有以下几个缺点&#xff1a; 文件的安全性问题文件不利于数据查询和管理文件不利于存储海量数据文件在程序中控制不方便 数据库存储介质&#xff1a; 磁…

【Canvas与艺术】绘制朝鲜国旗

【声明】 该国旗的定位和大小是本人与网上照片比对后估算的&#xff0c;不是精确值。 【成图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <hea…

四信智能化感知与控制方案,助推灌区续建配套与现代化改造建设

“十四五”明确提到推进大中型灌区节水改造和精细化管理&#xff0c;建设节水灌溉骨干工程&#xff0c;同步推进水价综合改革。 灌区是保障国家粮食安全的重要基础性设施&#xff0c;是实施乡村振兴战略的水利支撑。灌区续建配套与现代化改造是实施乡村振兴战略一项重要任务。为…

一套JAVA语言开发的:危大工程智慧一体化工地系统源码,(后台管理端+APP+可视化大屏端)

智慧工地是指利用移动互联、物联网、智能算法、地理信息系统、大数据挖掘分析等信息技术&#xff0c;提高项目现场的“人•机•料•法•环•安”等施工要素信息化管理水平&#xff0c;实现工程施工可视化智能管理&#xff0c;并逐步实现绿色生态建造。 相关技术&#xff1a;微…

“百团大战”下,20年代的国产数据库如何乘风破浪?

引言 在数字化浪潮的推动下&#xff0c;数据库技术已成为支撑数字经济的坚实基石。腾讯云 TVP《技术指针》联合《明说三人行》特别策划的直播系列——【中国数据库前世今生】&#xff0c;我们将通过五期直播&#xff0c;带您穿越五个十年&#xff0c;深入探讨每个时代的数据库演…

vue3.0(四) ref全家桶以及响应的 源码分析

文章目录 1 ref1.1 ref() 是什么1.2 ref() 特点1.3 创建响应式数据1.4 引用DOM元素1.5 深层响应性1.6 DOM 更新时机1.7 ref源码 2 isRef2.1 isRef运用2.2 isRef源码 3 unref3.1 unref运用3.2 unref源码 4 shallowRef4.1 shallowRef运用4.2 shallowRef源码 5 triggerRef5.1 trig…

SpringCloud系列(10)--Eureka集群原理及搭建

前言&#xff1a;当注册中心只有一个&#xff0c;而且当这个注册中心宕机了&#xff0c;就会导致整个服务环境不可用&#xff0c;所以我们需要搭建Eureka注册中心集群来实现负载均衡故障容错 Eureka架构原理图 1、Eureka集群原理 2、创建Eureka Server端服务注册中心模块 (1)在…