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

本示例是一个简单的外卖查看店铺点菜的外卖微信小程序,小程序后端服务使用了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://www.mzph.cn/web/4515.shtml

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

相关文章

实时采集麦克风并播放(springboot+webscoekt+webrtc)

项目技术 springbootwebscoektwebrtc 项目介绍 项目通过前端webrtc采集麦克风声音&#xff0c;通过websocket发送后台&#xff0c;然后处理成g711-alaw字节数据发生给广播UDP并播放。 后台处理项目使用线程池(5个线程)接受webrtc数据并处理g711-alaw字节数组放到Map容器中&…

PotatoPie 4.0 实验教程(26) —— FPGA实现摄像头图像拉普拉斯锐化

为什么要对图像进行拉普拉斯锐化 对图像进行拉普拉斯锐化的目的是增强图像的边缘和细节&#xff0c;使图像看起来更加清晰和锐利。这种技术常用于图像处理中&#xff0c;具体原因如下&#xff1a; 增强图像的边缘信息&#xff1a;拉普拉斯锐化可以突出图像中的边缘特征&#x…

程序不包含适用于入口点的静态Main方法

&#x1f3c6;本文收录于「Bug调优」专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&&…

西湖大学赵世钰老师【强化学习的数学原理】学习笔记1节

强化学习的数学原理是由西湖大学赵世钰老师带来的关于RL理论方面的详细课程&#xff0c;本课程深入浅出地介绍了RL的基础原理&#xff0c;前置技能只需要基础的编程能力、概率论以及一部分的高等数学&#xff0c;你听完之后会在大脑里面清晰的勾勒出RL公式推导链条中的每一个部…

数据结构_时间复杂度

✨✨所属专栏&#xff1a;数据结构✨✨ ✨✨作者主页&#xff1a;嶔某✨✨ 什么是时间复杂度&#xff1f; 时间复杂度的定义&#xff1a;在计算机科学中&#xff0c;算法的时间复杂度是一个函数&#xff0c;它定量描述了该算法的运行时间。一个算法执行所耗费的时间&#xff0…

【go零基础】go-zero从零基础学习到实战教程 - 0环境配置

是个前端&#xff0c;最近开始学习go&#xff0c;后端除node外基本0基础&#xff0c;所以学习曲线有点绕&#xff0c;目标是个基础的服务端demo&#xff0c;搞个api服务后台&#xff0c;包含基础的用户登录、文章发布和写文章、权限控制&#xff0c;差不多就是个完整博客系统。…

发现肺结节怎么办?5个肺结节诊疗病例分享

近期“肺结节离癌症有多远”上了热搜&#xff0c;当体检报告上出现“肺结节”&#xff0c;不少朋友都万分焦虑。其实&#xff0c;直径小于8mm的实性肺结节不需要做手术&#xff0c;但要记得定期复诊看肺结节是往良性还是往恶性发展&#xff1b;如果是直径大于8mm的实性肺结节就…

Git 使用 下载分支 提交新项目到当前分支 三(公司快速上手版)

文章背景 git已经装好了&#xff0c;公司的也给创建好账户了&#xff0c;仓库地址也有了。 领导已经给你说了是哪个分支了。 如何下载远程仓库中的一个项目分支&#xff0c;到本地电脑上。 并且如何将新建的项目上传到当前分支的远程仓库 下载 步骤 创建文件夹。 右键 Op…

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

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

Win32 API 光标隐藏定位和键盘读取等常用函数

Win32 API 光标隐藏定位和键盘读取等常用函数 一、Win32 API二、控制台程序指令modetitlepausecls 三、控制台屏幕上坐标的结构体COORD四、句柄获取函数GetStdHandle五、控制台光标操作1.控制台光标信息结构体CONSOLE_CURSOR_INFO2.得到光标信息函数GetConsoleCursorInfo3. 设置…

【Java数据结构】深入解析ArrayList与顺序表

【Java数据结构】深入解析ArrayList与顺序表 1.前言~&#x1f973;&#x1f389;&#x1f389;&#x1f389; 2.ArrayList的介绍 3.使用ArrayList 3.1 ArrayList的构造方法 3.11 第一个构造方法 3.12第二个构造方法 3.13第三个构造方法 3.2ArrayList中的tostring方…

Spring IOC(一)

1. Spring IOC入门 1.1 什么是Spring IoC IoC&#xff08;Inversion of Control&#xff09;&#xff0c;即控制反转&#xff0c;是一种设计原则。简单来说&#xff0c;IoC就是将程序的某种传统控制流程反转了。 在Spring框架中&#xff0c;控制反转体现在对象的创建和管理上。…

jsp servlet 学生信息管理系统

一、角色划分 1、超级管理员 2、学生 二、模块展示 1、登录 2、列表页面【超级管理员展示所有用户信息、学生只展示当前登录用户信息】 3、新增 4、编辑 三、数据库【mysql】 四、运行演示 jsp servlet 学生信息管理系统

rust疑难杂症解决

rust疑难杂症解决 边碰到边记录&#xff0c;后续可能会逐步增加&#xff0c;备查 cargo build时碰到 Blocking waiting for file lock on package cache 原因是Cargo 无法获取对包缓存的文件锁&#xff0c; 有时vscode中项目比较多&#xff0c;如果其中某些库应用有问题&…

CSS 之 transition过渡动画

一、简介 ​ CSS 制作 Web 动画有两种方式&#xff1a; 帧动画&#xff08;Keyframe Animation&#xff09;和过渡动画&#xff08;Transition Animation&#xff09;。针对不同的业务场景中&#xff0c;我们应该选择不同的动画方式&#xff0c;通常来说&#xff1a;对于交互元…

vue3插槽的name和v-slot的研究

slot可以分为具名插槽和默认,默认插槽name是default 在父组件的template需要些v-slot/#,没写不生效,而在父组件下,而没被template包含的默认放在template且含有#default. 1)没写slot,可以不写template,也可写default的template2)写了name的slot,即使是default也必须些template…

STM32G431RBT6之LCD与LED配置

首先,配置时钟树,时钟树的配置在我的另外一篇博客里,这里不再赘述. LCD与LED具有共同的IO口,同时创建工程较好. 打开原理图,发现LED的IO口是PC8~PC15,还有一个容易看漏的PD2.LCD的IO口是PC0到PC15. 当然,看产品手册也可以知道,但是还是推荐大家看原理图. 打开cubumx,给PC0~PC…

Java设计模式 _结构型模式_过滤器模式

一、过滤器模式 1、过滤器模式 过滤器模式&#xff08;Filter Pattern&#xff09;是这一种结构型设计模式。过滤器&#xff0c;顾名思义&#xff0c;就是对一组数据进行过滤&#xff0c;从而最终获取到我们预期的数据。 2、实现思路 &#xff08;1&#xff09;、定义过滤器的…

想要应聘前端工程师——学习路线指南

前端工程师学习路线 按照前端岗位需求,以优先学习工作更需要,面试更常考的内容为原则,由浅入深,层层铺垫,与时俱进,可以较容易地总结出前端学习路线图: HTML / CSS / JavaScript 基础学习 《Web 入门》 MDN 权威入门指南,HTML / CSS / JavaScript 快速上手 《CSS 世界…

华为OD机试 - 密码解密(Java 2024 C卷 100分)

华为OD机试 2024C卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷C卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;每一题都有详细的答题思路、详细的代码注释、样例测试…