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

news2025/3/16 10:03:26

前言

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

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

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

话不多说,直接整活。

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
  1. .env 文件中添加 SUPABASE_URLSUPABASE_KEY
SUPABASE_URL="https://example.supabase.co"
SUPABASE_KEY="<your_key>"
  1. 打开 nuxt.config.ts 文件,添加配置:
export default defineNuxtConfig({
 modules: ['@nuxtjs/supabase'],
 // 自定义配置
 supabase: {
   redirect: false // https://supabase.nuxtjs.org/get-started#redirect
 },
})

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

  1. 打开 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>

在浏览器打开,如果不出意外的话,你能连接到数据库,但是你会得到一个空数组。重点来了,这是为什么呢?
在这里插入图片描述

配置 RLS 安全策略

之所以会得到空数组,是因为 Supabase 为每张表启动 Row Level Security 策略,我们回到 Supabase Dashboard,打开右侧菜单 Authentication - Policies,可以看到在表的安全策略中有个提示:
在这里插入图片描述

翻译就是:已为此表启用行级别安全性,但未设置任何策略,选择查询将返回一个空的结果数组。

知道原因后,我们需要配置一个安全策略,点击右侧的 Create policy,这里我们只需要放开 Select 查询的权限就行,它会绕过 Row Level Security 策略:
在这里插入图片描述

刷新浏览器,我们就能看到数据正常访问了:
在这里插入图片描述

这里我们只是放开了 Select 查询的权限,后续的 INSERTUPDATE 等操作权限会在身份认证后才可以执行。

总结

通过本文,你可以成功使用 Nuxt 连接 Supabase 数据库,但其中也有几个点需要注意:

  1. Supabase 为每张表启动 Row Level Security 策略,如果你想在不经过身份认证的情况下执行数据库操作,需要配置 Policies 策略
  2. Project Settings - API 有两个 Project API keys
    • anon key:如果为表和已配置的策略启用了行级安全性,则可以在浏览器中安全使用此键
    • service_role:此密钥具有绕过行级安全性的能力,永远不要公开分享
  3. 在开发环境中,我们往往需要不用完成身份认证就能执行数据库操作,这时候你就可以把 SUPABASE_KEY 设置成 service_role

但是生产环境中一定要切换成 anon key,因为 SUPABASE_KEY 会暴露在浏览器的请求头中

Github 仓库:dream-site

线上预览:dream-site.cn

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1694978.html

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

相关文章

深入理解循环控制语句 - for

循环就是重复的意思&#xff0c;它是编程中的基石&#xff0c;它使程序能够重复执行某段代码&#xff0c;直至满足特定条件为止。 在Java中&#xff0c;for循环是一种常用的循环结构&#xff0c;它以紧凑的形式实现了迭代过程。 一、for循环基础 1.1 for循环简介 for循环在…

C++容器之无序多集(std::unordered_multiset)

目录 1 概述2 使用实例3 接口使用3.1 construct3.2 assigns3.3 iterators3.4 capacity3.5 find3.6 count3.7 equal_range3.8 emplace3.9 emplace_hint3.10 insert3.11 erase3.12 clear3.13 swap3.14 bucket_count3.15 max_bucket_count3.16 bucket_size3.17 bucket3.18 load_fa…

00.OpenLayers快速开始

00OpenLayers快速开始 官方文档&#xff1a; 快速开始&#xff1a;https://openlayers.org/doc/quickstart.html 需要node环境 一、设置新项目 npm create ol-app my-app cd my-app npm start第一个命令将创建一个名为 my-app​ 的目录&#xff08;如果您愿意&#xff0c;…

【话题】我眼神的IT行业现状与未来趋势

目录 一、挑战 教学资源的重新分配 教师角色的转变 学生学习方式的改变 教育评价体系的挑战 二、机遇 个性化学习 跨学科学习 国际合作与交流 创新教育模式 三、如何培养下一代IT专业人才 更新教育理念 加强基础设施建设 整合课程资源 加强实践教学 培养跨学科…

Golang并发编程-协程goroutine任务取消(Context)

文章目录 前言一、单个任务的取消二、 所有任务取消三、Context的出现Context的定义Context使用 总结 前言 在实际的业务种&#xff0c;我们可能会有这么一种场景&#xff1a;需要我们主动的通知某一个goroutine结束。比如我们开启一个后台goroutine一直做事情&#xff0c;比如…

浅谈C++函数

目录 一、函数的概念二、调用函数的两个前提三、函数传参的三种形式四、函数返回类型 一、函数的概念 函数是C程序的基本模块&#xff0c;通常一个C程序由一个或多个函数组成。函数可以完成用户指定的任务&#xff0c;一般分为库函数和用户自定义的函数。函数由函数头和函数体…

AIGC-常见图像质量评估MSE、PSNR、SSIM、LPIPS、FID、CSFD,余弦相似度----理论+代码

持续更新和补充中…多多交流&#xff01; 参考: 图像评价指标PNSR和SSIM 函数 structural_similarity 图片相似度计算方法总结 MSE和PSNR MSE: M S E 1 m n ∑ i 0 m − 1 ∑ j 0 n − 1 [ I ( i , j ) − K ( i , j ) ] 2 MSE\frac{1}{mn}\sum_{i0}^{m-1}\sum_{j0}^{n-1}[…

重学java 43.多线程 多等待多唤醒案例

Fear never builds the future,but hope does. —— 24.5.25 多等待多唤醒问题 在多条线程同时消费同时等待时&#xff0c;会出现问题 BaoZiPu package S77ThreadMoreWait;/*count和flag可以定义成包装类&#xff0c;但要记得给count和flag手动赋值不然对于本案例来说&#xff…

C# MemoryStream流的详解与示例

文章目录 1. MemoryStream的基本介绍2. 创建MemoryStream对象无参构造函数带参构造函数 3. 向MemoryStream中写入数据写入字节数组写入字符串 4. 从MemoryStream中读取数据读取字节数组读取字符串 5. MemoryStream的实用辅助方法获取长度设置长度定位 6. 示例代码 在C#中&#…

JWT使用方法

目录 基础概念 依赖 生成令牌 工具类 控制层 解析令牌 工具类 网关过滤器 效果 基础概念 Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准&#xff08;(RFC 7519).该token被设计为紧凑且安全的&#xff0c;特别适用于分布式站点…

局域网桌面监控软件哪个好用?良心推荐

如何有效地监控和管理内部员工的计算机使用行为&#xff0c;防范潜在的安全风险&#xff0c;提高工作效率&#xff0c;是众多企业管理者关注的焦点。 而一款优秀的局域网桌面监控软件无疑能为企业的IT治理提供有力支撑。 小编在此给大家推荐一款好用的局域网桌面监控软件——域…

stm32H743不要将主频设置到480MHz

0 问题描述 本文使用的stm32H743是V版本&#xff0c;支持最高480MHz的主频。但在将主频设置为480MHz之后&#xff0c;使用FDCAN的回环模式出现了各种接收不到的异常问题。经过一番排查&#xff0c;将主频修改到400MHz&#xff0c;同时降低芯片内部LDO输出电压后恢复了正常。 …

深入理解NumPy与Pandas【numpy模块及Pandas模型使用】

二、numpy模块及Pandas模型使用 numpy模块 1.ndarray的创建 import numpy as np anp.array([1,2,3,4]) bnp.array([[1,2,3,4],[5,6,7,8]]) print(a) #[1 2 3 4] print(b) #[[1 2 3 4][5 6 7 8]] 1.1使用array()函数创建 numpy.array(object, dtype None, copy True, ord…

域内攻击 ----->约束非约束委派攻击

在域中&#xff0c;除了我们常见的横向移动以外&#xff0c;还有很多攻击&#xff0c;像什么kerberoasting&#xff0c;委派攻击&#xff0c;NTLMrelay啊...... 还有很多&#xff08;暂时只知道这些&#xff09; 以前在一篇公众号看到的一个笑话也荟萃了网安的一些攻击手法&am…

设计模式在芯片验证中的应用——单例

一、单例模式 单例模式(Singleton)是一种创建型设计模式&#xff0c;能够保证一个类只有一个实例&#xff0c; 并提供一个访问该实例的全局节点。验证环境配置(configuration)类、超时(timeout)处理类等可以使用单例实现。比如说验证环境需要在特定场景中监测特定接口上的超时事…

【机器学习300问】97、机器学习中哪些是凸优化问题,哪些是非凸优化问题?

在机器学习的领域中&#xff0c;多数模型的参数估计问题实质上可以转化为优化问题。鉴于机器学习模型的多样性&#xff0c;不同的模型会对应着不同的损失函数&#xff0c;进而形成各具特色的优化问题。了解优化问题的形式和特点&#xff0c;对于提升我们求解模型参数的效率和准…

在 Visual Studio 2022 (VS2022) 中删除 Git 分支的步骤如下

git branch -r PS \MauiApp1> git push origin --delete “20240523备份” git push origin --delete “20240523备份”

推荐五个线上兼职,在家也能轻松日入百元,适合上班族和全职宝妈

在这个瞬息万变的时代&#xff0c;你是否也曾考虑过在繁忙的工作之外&#xff0c;寻找一份兼职副业来补贴家用&#xff0c;同时保持生活的多样性&#xff1f;别急&#xff0c;现在就让我为你揭秘五个可靠的日结线上兼职岗位&#xff0c;助你轻松迈向财务自由之路&#xff01; 一…

地质考察AR远程交互展示系统辅助老师日常授课

广东这片充满活力的土地&#xff0c;孕育了一家引领ARVR科技潮流的杰出企业——深圳华锐视点&#xff0c;作为一家专注于VR/AR技术研究与业务开发的先锋公司。多年来&#xff0c;我们不断突破技术壁垒&#xff0c;将AR增强现实技术与各行各业的实际需求完美结合&#xff0c;助力…

基于分块贝叶斯非局部均值优化(OBNLM)的图像去噪算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 4.1 块定义与相似度计算 ​4.2 贝叶斯框架下的加权融合 4.3 加权最小均方误差估计 5.完整程序 1.程序功能描述 基于分块贝叶斯非局部均值优化(OBNLM)的图像去噪算法matlab仿真&#xff0c…