前言
这个章节我们要先把数据库的环境配置好,古人云:工欲善其事,必先利其器。
这两天我一直在网上寻找最适合 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 数据库
- 打开 Supabase Dashboard,选择登录方式,这里我直接选择 Github 登录
- 进入控制台,点击 New project 创建项目
- 进入项目管理界面,点击左侧菜单的 Database,再点击右侧的 New table 创建一张表
- 点击右侧菜单的 Table Editor,打开新建的表,先插入两条测试数据
- 点击右侧菜单的 Project Settings - API,在右侧可以看到项目连接所需要的密钥
到这里,我们就创建好数据库了,接下来我们在 Nuxt 上测试一下是否能成功连接。
Nuxt 安装 Supabase
根目录下执行命令
powershell 代码:pnpm add @nuxtjs/supabase -D pnpm add @supabase/supabase-js
在 .env 文件中添加 SUPABASE_URL 和 SUPABASE_KEY
env 代码:SUPABASE_URL="https://example.supabase.co" SUPABASE_KEY="<your_key>"
打开 nuxt.config.ts 文件,添加配置:
ts 代码:export default defineNuxtConfig({ modules: ['@nuxtjs/supabase'], // 自定义配置 supabase: { redirect: false // https://supabase.nuxtjs.org/get-started#redirect }, })
这里我们先将配置 redirect 设置为 false,因为 Supabase 默认如果未经身份验证的用户试图访问受保护的登录页面,则自动重定向到配置的登录页面。打开 pages/index.vue 文件,尝试访问数据库
html 代码:<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>
在浏览器打开,如果不出意外的话,你能连接到数据库,但是你会得到一个空数组。重点来了,这是为什么呢?
配置 RLS 安全策略
之所以会得到空数组,是因为 Supabase 为每张表启动 Row Level Security 策略,我们回到 Supabase Dashboard,打开右侧菜单 Authentication - Policies,可以看到在表的安全策略中有个提示:
翻译就是:已为此表启用行级别安全性,但未设置任何策略,选择查询将返回一个空的结果数组。
知道原因后,我们需要配置一个安全策略,点击右侧的 Create policy,这里我们只需要放开 Select 查询的权限就行,它会绕过 Row Level Security 策略:
刷新浏览器,我们就能看到数据正常访问了:
总结
通过本文,你可以成功使用 Nuxt 连接 Supabase 数据库,但其中也有几个点需要注意:
- Supabase 为每张表启动 Row Level Security 策略,如果你想在不经过身份认证的情况下执行数据库操作,需要配置 Policies 策略
Project Settings - API 有两个 Project API keys:
- anon key:如果为表和已配置的策略启用了行级安全性,则可以在浏览器中安全使用此键
- service_role:此密钥具有绕过行级安全性的能力,永远不要公开分享
- 在开发环境中,我们往往需要不用完成身份认证就能执行数据库操作,这时候你就可以把 SUPABASE_KEY 设置成 service_role。
Github 仓库:dream-site
线上预览:dream-site.cn
你现在是老师嘛教这么多东西
哈哈,因为一些东西工作中接触不到,只能空闲时间捣鼓,正好把捣鼓过程记录一下
暂无点赞
暂无点赞
认真看完这篇技术性的博客,get到了新知识
暂无点赞