Nuxt3 实战 (七)：配置 Supabase 数据库

原创

白雾茫茫丶

发布于 2024-05-24 16:50:34

4520

前言

这个章节我们要先把数据库的环境配置好，古人云：工欲善其事，必先利其器。

这两天我一直在网上寻找最适合 Nuxt 的数据库，之前在做个人项目时经常用的是 Mysql 和 MongoDB，也用过 ORM 框架比如：Sequelize、TypeORM，本来计划使用 Prisma，后来认真看了 Nuxt 集成的数据库模块后，还是选择了 Supabase，在我看来主要原因有3点：

Supabase 网上风评比较好，而且 Nuxt 集成了 Nuxt Supabase 模块
用户认证和身份鉴权开箱即用，提供了多种认证类型机制
我没用过，在开发上我喜欢用我没用过的技术或工具

话不多说，直接整活。

Supabase 介绍

Supabase 是一个开源的 Firebase 替代品，提供了一系列的后端功能，让你可以更快地构建产品。主要特点有：

数据库：Supabase 使用 PostgreSQL 作为数据库，支持 SQL 和 RESTful API 访问
认证：Supabase 提供了一个完整的认证系统，支持邮箱、手机号、第三方服务等多种登录方式
实时订阅：Supabase 允许你通过 WebSocket 实现实时数据同步，无需编写额外的代码
存储：Supabase 提供了一个对象存储服务，可以方便地上传、下载和管理文件
边缘函数：Supabase 支持在边缘节点上运行 JavaScript 函数，可以用来处理请求或触发事件

Supabase 有一个免费套餐，可以让你创建最多三个项目，并享受一定的资源限额。如果你需要更多的项目或资源，你可以选择按需付费或者预付费的套餐。

创建 Supabase 数据库

1、打开 Supabase Dashboard，选择登录方式，这里我直接选择 Github 登录

2、进入控制台，点击 New project 创建项目

3、进入项目管理界面，点击左侧菜单的 Database，再点击右侧的 New table 创建一张表

4、点击右侧菜单的 Table Editor，打开新建的表，先插入两条测试数据

5、点击右侧菜单的 Project Settings - API，在右侧可以看到项目连接所需要的密钥

到这里，我们就创建好数据库了，接下来我们在 Nuxt 上测试一下是否能成功连接。

Nuxt 安装 Supabase

1、根目录下执行命令

 pnpm add @nuxtjs/supabase -D
 pnpm add @supabase/supabase-js

2、在 .env 文件中添加 SUPABASE\_URL 和 SUPABASE\_KEY

SUPABASE\_URL="https://example.supabase.co"
SUPABASE\_KEY="<your\_key>"

3、打开 nuxt.config.ts 文件，添加配置：

 export default defineNuxtConfig({
   modules: ['@nuxtjs/supabase'],
   // 自定义配置_
   supabase: {
     redirect: false _// https://supabase.nuxtjs.org/get-started#redirect_
   },
 })

这里我们先将配置 redirect 设置为 false，因为 Supabase 默认如果未经身份验证的用户试图访问受保护的登录页面，则自动重定向到配置的登录页面。

4、打开 pages/index.vue 文件，尝试访问数据库

<template>
    <div
      class="flex justify-center items-center font-black text-5xl flex-col"
      style="height: calc(100vh - 8rem)"
    >
      Hello World!
      <div class="flex gap-4 mt-4">
        <UButton
          v-for="item in data"
          :key="item.id"
          :label="item.name"
        />
      </div>
    </div>
  </template>

  <script setup lang="ts">
  import type { CategoryList } from '~/types'
  const supabase = useSupabaseClient<CategoryList>()

  const { data, error } = await supabase.from('site_category').select()

  console.log('data',data)
  console.log('error',error)
  </script>

在浏览器打开，如果不出意外的话，你能连接到数据库，但是你会得到一个空数组。重点来了，这是为什么呢？