神器强推！再也不用求后端给接口了...

男娘i 2022-08-28 03:48 188阅读 0赞

“我擦，还可以这样玩！！” 没错，这就是我第一次尝试BaaS的感受。

我拿Todos来体验了一把BaaS，与各种框架的单机版Todos不同的是，我要把Todos做成一个互联网应用。既然是互联网应用，就需要额外做下面这些事：

*  用户注册登录功能
 *  数据存储在云数据库中，在任何地方登陆都能访问自己的Todos
 *  每个登录用户只能看到自己的Todos

以上这些应该就具备了大多数互联网应用的基本特征，当然还可以给Todos加上社交功能，后面再搞。

或许你不信，上面这些功能的后台接口5分钟就搞定了，因为使用BaaS之后：

*  用户注册登录的后台接口！！！**不用开发！！！**
 *  将Todos存入数据库、从数据库中读取返回前端！！！**不用开发！！！**
 *  Todos应用的登录用户的权限管控 ！！！**不用开发！！！**

**下面就是见证奇迹的时刻！！**

#### 第一步：开发后端程序 ####

既然要把数据存到数据库里，我们肯定要设计一下数据库表，下面就是todos表的定义：

create table public.todos (
      id bigint generated by default as identity primary key,
      user_id uuid references auth.users not null,
      task text,
      is_complete boolean default false,
      inserted_at timestamp default now() not null
    );

上面这段建表语句对于不熟悉SQL的同学手写起来或许会有点吃力。**不要紧，文章最后会告诉你简单方法。**

好了，表建好了，**后端接口也好了，神奇吧。**

#### 第二步：开发前端 ####

各种前端框架都有todos示例，我直接找一个Vue的todos改了一下。

前面说建完表之后接口就有了，并且调用这些接口的SDK也是现成的，下面是用JS SDK调用后端接口往todos表中插入一行记录的写法：

const { data, error } = await sdk.from('todos').insert([
        { user_id: 'xxxx-xxxx-xxxx', task: 'test' },
    ])

Vue等前端框架的todos示例，一般都是把数据存储到浏览器的localstorage里面的，我只需要改一下代码，调用上面的接口，数据就存储到了云数据库中了。

读取数据也很简单：

let { data: todos, error } = await sdk.from('todos').select('*')

#### 第三步：增加注册登录功能 ####

前端注册页面和登录页面比较简单，就不多说了。有了页面之后，怎么实现注册功能呢？同样的只需要调用现成的的SDK接口：

const { error } = await sdk.auth.signUp({ email, password })

下面是前端完整的注册功能的实现代码：

async function handleSignup(credentials: Credentials) {
      try {
        const { email, password } = credentials
        // 提示用户输入email和密码
        if (!email || !password) {
          alert('Please provide both your email and password.')
          return
        }
        const { error } = await sdk.auth.signUp({ email, password })
        if (error) {
          alert(error.message)
          console.error(error, error.message)
          return
        }
        alert('注册成功')
      } catch (err) {
        alert('注册失败')
        console.error('注册失败', err)
      }
    }

#### 第四步：权限管控 ####

我们只允许用户看到自己的todos信息，怎么做呢，用SQL的方式实现如下：

create policy "只允许登录用户看到自己的todos" on public.todos for
        select using (auth.uid() = user_id);

没错，只需要上面一行SQL语句，就实现了我们需要的功能。

不懂SQL，不要紧，该操作同样可以通过UI界面点两下鼠标来完成。

![58ec44e8f0f21c48301e065f8f01ef52.png][]

### 操作方法 ###

上面说了一堆，为了不干扰阅读，没有把操作方法放在里面。其实真正操作起来，要简单很多，打开下方**示例链接**可以看一个现成的例子。

示例链接：https://gitee.com/memfiredb/supabase/wikis/example/vue3-ts-todo-list

**免费注册方法**

5GB存储空间+每月100万读额度+每月10万写额度

**注册即享**

扫码回复“**邀请码**”，获取平台入口和专属注册邀请码

![9290396a3b66fcfd59a1ee0ad31519e1.png][]

邀请好友注册还有机会获得

流量大礼包

豪横大礼包

有容乃大包

**PS：活动月底截止，先到先得**

**粉丝福利！！！**  
**粉丝福利！！！****粉丝福利！！！**  
小道消息～～他们平台明天1024要举行送书和抽奖iPhone的活动，先到先得不要错过，小伙伴们还不赶紧去提前抢占注册名额。

[58ec44e8f0f21c48301e065f8f01ef52.png]: /images/20220828/cec6844f18494372af957d9c9e24b3b7.png
[9290396a3b66fcfd59a1ee0ad31519e1.png]: /images/20220828/6566fe8874a440f4a76ca4f080860935.png