Super课表小程序

此示例提供了使用 MemFire Cloud 构建一个课表的小程序的步骤。小程序用到的MemFire Cloud的功能包括:

  • 云数据库:存储小程序数据表的信息。

  • 用户验证:小程序使用MemFire Cloud提供的用户认证的API接口,快速完成用户注册登录操作。

  • 对象存储:存储小程序的注册用户上传的头像。

  • 行级安全策略:采用RLS策略来限制用户访问行为,用户可以修改个人信息,上传个人头像。

  • 即时API:创建数据表时会自动生成 API。

img

创建应用

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

登录https://cloud.MemFiredb.com/auth/login, 在“我的应用”页面创建一个新应用

img

创建数据表

点击进入应用详情页面,在“数据表”页面可视化建表。

1.创建school表#

在数据表页面,点击“新建数据表”,创建school表。school表主要记录学校信息,表结构字段如下:

名称类型描述
idint8主键,自增,唯一标识ID
schoolNametext学校名称(唯一)
updated_attimeatamptz修改时间

建表页面配置:

img

数据表创建完后可在school表中手动插入几条学校信息数据 ,如下图。

img

sql操作如下:

1CREATE TABLE "public"."school" ( 
2  "id" BIGINT NOT NULL,
3  "updated_at" TIMESTAMP WITH TIME ZONE NOT NULL,
4  "schoolName" TEXT NOT NULL,
5  CONSTRAINT "school_pkey" PRIMARY KEY ("id"),
6  CONSTRAINT "school_schoolName_key" UNIQUE ("schoolName")
7);
8INSERT INTO "public"."school" ("id", "updated_at", "schoolName") VALUES ('1', '2022-08-12 18:43:53.166+08', '武汉大学');
9INSERT INTO "public"."school" ("id", "updated_at", "schoolName") VALUES ('2', '2022-08-22 11:01:19.088+08', '武汉科技大学');
10INSERT INTO "public"."school" ("id", "updated_at", "schoolName") VALUES ('3', '2022-08-22 11:01:36.909+08', '华中师范大学');
11INSERT INTO "public"."school" ("id", "updated_at", "schoolName") VALUES ('4', '2022-08-22 11:01:56.022+08', '武汉理工大学');

2.创建department表#

在数据表页面,点击“新建数据表”,创建department表。department表主要记录学院信息,表结构字段如下:

名称类型描述
idint8主键,自增,唯一标识ID
departmentNametext学院名称,唯一
updated_attimeatamptz修改时间

建表页面配置:

img

数据表创建完后可在department表中手动插入几条学院信息数据,如下图。

img

sql操作如下

1CREATE TABLE "public"."department" ( 
2  "id" BIGINT NOT NULL,
3  "updated_at" TIMESTAMP WITH TIME ZONE NOT NULL,
4  "departmentName" TEXT NOT NULL,
5  CONSTRAINT "department_pkey" PRIMARY KEY ("id"),
6  CONSTRAINT "department_departmentName_key" UNIQUE ("departmentName")
7);
8
9INSERT INTO "public"."department" ("id", "updated_at", "departmentName") VALUES ('1', '2022-08-12 18:44:14.7+08', '计算机学院');
10INSERT INTO "public"."department" ("id", "updated_at", "departmentName") VALUES ('2', '2022-08-18 10:09:02.871+08', '体育学院');
11INSERT INTO "public"."department" ("id", "updated_at", "departmentName") VALUES ('3', '2022-08-18 10:09:28.667+08', '商贸学院');
12INSERT INTO "public"."department" ("id", "updated_at", "departmentName") VALUES ('4', '2022-08-18 10:09:47.602+08', '土木工程学院');

3.创建subject表#

在数据表页面,点击“新建数据表”,创建subject表。subject表主要记录课程信息,表结构字段如下:

名称类型描述
idint8主键,自增,唯一标识ID
teacherNametext老师
adresstext上课地点
subjectNametext科目
updated_attimeatamptz修改时间

建表页面配置:

img

数据表创建完后可在subject表中手动插入几条课程信息数据,如下图。 img

sql操作如下

1CREATE TABLE "public"."subject" ( 
2  "id" BIGINT NOT NULL,
3  "teacherName" TEXT NOT NULL,
4  "updated_at" TIMESTAMP WITH TIME ZONE NOT NULL,
5  "adress" TEXT NOT NULL,
6  "subjectName" TEXT NOT NULL,
7  CONSTRAINT "subject_pkey" PRIMARY KEY ("id")
8);
9INSERT INTO "public"."subject" ("id", "teacherName", "updated_at", "adress", "subjectName") VALUES ('1', '张珊', '2022-08-12 18:28:30.725+08', '计科楼2-1003', '数据库原理');
10INSERT INTO "public"."subject" ("id", "teacherName", "updated_at", "adress", "subjectName") VALUES ('2', '李四', '2022-08-17 16:13:54.527+08', '重楼2-3112', '计算机基础');
11INSERT INTO "public"."subject" ("id", "teacherName", "updated_at", "adress", "subjectName") VALUES ('3', '王五', '2022-08-17 17:28:49.603+08', '4教-101', '分布式数据库');
12INSERT INTO "public"."subject" ("id", "teacherName", "updated_at", "adress", "subjectName") VALUES ('4', '王博', '2022-08-18 17:28:59.265+08', '综合楼4-401', '高等数学');
13INSERT INTO "public"."subject" ("id", "teacherName", "updated_at", "adress", "subjectName") VALUES ('5', '肖战', '2022-08-18 17:29:41.462+08', '教4-401', '线性代数');

4.创建student表#

在数据表页面,点击“新建数据表”,创建student表,student表主要记录学生信息,表结构字段如下:

名称类型描述
iduuid主键,自增,唯一标识ID,与auth.users表中的uuid外键关联
update_attimestampt创建时间
studentIdint8学号,唯一

建表页面配置:

img

说明:其中student表字段id和auth.users表中的uuid外键关联。

5.创建subject_student表#

在数据表页面,点击“新建数据表”,创建subject_student表。subject_student表主要记录学生的课表信息,表结构字段如下:

名称类型描述
idint8主键,自增,唯一标识ID
studentIdint8学号
subjectIdint8与课程表的id关联
schoolIdint8与学校表的id关联
departmentIdint8与学院表的id关联
updated_attimestampt修改时间

建表页面配置:

img

说明:其中subjectId与subject表中的id外键关联,schoolId与school表中的id外键关联,departmentId与**department**表中的id外键关联。

数据表创建后可在subject_student表中手动插入几条信息数据,如下图。

其中subjectId、schoolId、departmentId需要对应数据表里的id。

img sql操作

1CREATE TABLE "public"."subject_student" ( 
2  "id" BIGINT NOT NULL,
3  "updated_at" TIMESTAMP WITH TIME ZONE NOT NULL,
4  "studentId" BIGINT NOT NULL,
5  "subjectId" BIGINT NOT NULL,
6  "schoolId" BIGINT NULL,
7  "departmentId" BIGINT NULL,
8  CONSTRAINT "subject_student_pkey" PRIMARY KEY ("id")
9);
10ALTER TABLE "public"."subject_student" ADD CONSTRAINT "subject_student_departmentId_fkey" FOREIGN KEY ("departmentId") REFERENCES "public"."department" ("id") ON DELETE NO ACTION ON UPDATE NO ACTION;
11ALTER TABLE "public"."subject_student" ADD CONSTRAINT "subject_student_schoolId_fkey" FOREIGN KEY ("schoolId") REFERENCES "public"."school" ("id") ON DELETE NO ACTION ON UPDATE NO ACTION;
12ALTER TABLE "public"."subject_student" ADD CONSTRAINT "subject_student_subjectId_fkey" FOREIGN KEY ("subjectId") REFERENCES "public"."subject" ("id") ON DELETE NO ACTION ON UPDATE NO ACTION;
13
14
15INSERT INTO "public"."subject_student" ("id", "updated_at", "studentId", "subjectId", "schoolId", "departmentId") VALUES ('1', '2022-08-17 09:51:14.733+08', '20222202', '1', '1', '1');
16INSERT INTO "public"."subject_student" ("id", "updated_at", "studentId", "subjectId", "schoolId", "departmentId") VALUES ('2', '2022-08-17 16:14:51.236+08', '20222202', '2', '1', '1');
17INSERT INTO "public"."subject_student" ("id", "updated_at", "studentId", "subjectId", "schoolId", "departmentId") VALUES ('3', '2022-08-17 17:29:33.938+08', '20222202', '3', '1', '1');
18INSERT INTO "public"."subject_student" ("id", "updated_at", "studentId", "subjectId", "schoolId", "departmentId") VALUES ('4', '2022-08-18 17:30:09.934+08', '20222202', '4', '1', '1');
19INSERT INTO "public"."subject_student" ("id", "updated_at", "studentId", "subjectId", "schoolId", "departmentId") VALUES ('5', '2022-08-18 17:31:45.261+08', '20222202', '5', '1', '1');

6.创建subject_time表#

在数据表页面,点击“新建数据表”,创建subject_time表。subject_time表主要记录学生的排课信息,表结构字段如下:

描述:通过关联的课程id去查询课程并合并数据

名称类型描述
idint8主键,自增,唯一标识ID
subjectIdint8与课程表的id关联
weekNumtext周数(例如:"[25,26,27,28]")
timetext第几节课(例如:1到6中的任意一个数字)
weekDaytext周几上课(例如:"[1,2]"或"[1,3,5]")
updated_attimestampt修改时间

建表页面配置:

img

数据表创建完成后可在subject_time表中手动插入几条信息数据,如下图。

img

说明:其中subjectId与subject表中的id外键关联。

sql语法操作

1CREATE TABLE "public"."subject_time" ( 
2  "id" BIGINT NOT NULL,
3  "updated_at" TIMESTAMP WITH TIME ZONE NOT NULL,
4  "subjectId" BIGINT NOT NULL,
5  "weekNum" TEXT NOT NULL,
6  "time" TEXT NOT NULL,
7  "weekDay" TEXT NOT NULL,
8  CONSTRAINT "subject_time_pkey" PRIMARY KEY ("id"),
9  CONSTRAINT "subject_time_subjectId_fkey" FOREIGN KEY ("subjectId") REFERENCES "public"."subject" ("id") ON DELETE NO ACTION ON UPDATE NO ACTION
10);
11
12INSERT INTO "public"."subject_time" ("id", "updated_at", "subjectId", "weekNum", "time", "weekDay") VALUES ('1', '2022-08-12 18:29:01.828+08', '1', '[34,35,36,37,38]', '1', '[1,4,6]');
13INSERT INTO "public"."subject_time" ("id", "updated_at", "subjectId", "weekNum", "time", "weekDay") VALUES ('2', '2022-08-17 16:25:48.757+08', '2', '[34,35,36,37,38]', '2', '[2,3,5]');
14INSERT INTO "public"."subject_time" ("id", "updated_at", "subjectId", "weekNum", "time", "weekDay") VALUES ('3', '2022-08-17 17:29:54.301+08', '3', '[34,35,36,37,38]', '3', '[3,4,5,6,7]');
15INSERT INTO "public"."subject_time" ("id", "updated_at", "subjectId", "weekNum", "time", "weekDay") VALUES ('4', '2022-08-18 17:30:59.789+08', '4', '[34,35,36,37,38,39,40]', '4', '[1,3,4,5]');
16INSERT INTO "public"."subject_time" ("id", "updated_at", "subjectId", "weekNum", "time", "weekDay") VALUES ('5', '2022-08-18 17:32:20.801+08', '5', '[34,35,36,37,38,39,40]', '5', '[2,4,5]');

创建avatars存储桶#

创建对象存储的存储桶,用来存储用户的头像图片,涉及操作包括:

1.创建一个存储桶avatars

在该应用的对象存储导航栏,点击“新建Bucket”按钮,创建存储桶avatars。

img

2.允许每个用户可以查看存储桶avatars

选中存储桶avatars,切换到权限设置栏,点击“新规则”按钮,弹出策略编辑弹框,选择“自定义”,如下图所示:

img

选择SELECT操作,输入策略名称,点击“生成策略”按钮,如下图所示。

img

3.允许用户上传存储桶avatars;

选中存储桶avatars,切换到权限设置栏,点击“新规则”按钮,弹出策略编辑弹框,选择“自定义”,如下图所示:

img

选择INSERT操作,输入策略名称,点击“生成策略”按钮,如下图所示。

img

查看结果:

img

注册小程序

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

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

下载代码

https://github.com/LucaRao/subjectWechat.git

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

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

选择目录是下载好的小程序项目的目录,AppID为您在微信公众平台注册小程序获得的专属appid

img

构建npm#

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

img

打开终端,在项目目录miniprogram下执行如下命令 。

1npm init
2npm install

img

接下来,下载小程序需要的Supabase 小程序客户端和ui组件包。

1npm install supabase-wechat-stable
2npm install @vant/weapp

点击开发者工具中的菜单栏:工具 /构建 npm

img

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

img

获取 API密钥#

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

lib/supabase.ts

1import { createClient } from 'supabase-wechat-stable'
2const url = ""
3const key = ""
4
5export const supabase = createClient(url, key)

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

img

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

注意:service_role密钥可以绕过任何安全策略完全访问您的数据。这些密钥必须保密,并且要在服务器环境中使用,绝不能在客户端或浏览器上使用。 在后续示例代码中,需要提供supabaseUrl和supabaseKey。

编译小程序

img

功能1:在没有登录绑定学号时,主页不会出现当日的课程情况,请先点击“绑定学号”去注册登录后才会有该学生今日的课表情况。

img

功能2:点击班级课表,输入学校、学院及学号可以查看该学生本周的课程情况

img

功能3:更换头像

img

上传头像需要注意: 使用wx.chooseMedia来上传文件

推荐使用方法:

1    wx.chooseMedia({
2      count: 1,
3      sizeType: ["original", "compressed"],
4      sourceType: ["album", "camera"],
5      async success(res) {
6        const file = res.tempFiles[0]
7        const fileExt = res.tempFiles[0].tempFilePath.split('.').pop()
8        const fileName = `${Math.random()}.${fileExt}`
9        const filePath = `${fileName}`
10        let { error: uploadError } = await supabase.storage
11          .from('avatars')
12          .upload(filePath, file)
13        if (uploadError) {
14          throw uploadError
15        }
16      },
17    });

功能4:清除缓存(会清除当前学生的所有账号及课表信息)

img