怎么使用MemFire Cloud构建Angular应用程序

本篇内容介绍了“怎么使用MemFire Cloud构建Angular应用程序”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！MemFire Cloud是一款提供云数据库，用户可以创建云数据库，并对数据库进行管理，还可以对数据库进行备份操作。它还提供后端即服务，用户可以在1分钟内新建一个应用，使用自动生成的API和SDK，访问云数据库、对象存储、用户认证与授权等功能，可专注于编写前端应用程序代码，加速WEB或APP应用开发。此示例提供了使用 MemFire Cloud 和 angular构建简单用户管理应用程序（从头开始）的步骤。这包括：MemFire Cloud云数据库：用于存储用户数据的 MemFireDB数据库。MemFire Cloud用户验证：用户可以使用魔法链接登录（只需要电子邮件,不需要密码）。MemFire Cloud存储：用户可以上传照片。行级安全策略：数据受到保护，因此个人只能访问自己的数据。即时API：创建数据库表时会自动生成 API。允许用户登录和更新一些基本个人资料详细信息的应用程序：目的：我们的应用就是通过在这里创建的应用来获得数据库、云存储等一系列资源，并获得该应用专属的API访问链接和访问密钥，用户可以轻松的与以上资源进行交互。登录cloud.memfiredb.com/auth/login 创建应用点击应用，视图化创建数据表1、创建profiles表；在数据表页面，点击“新建数据表”，页面配置如下：其中profiles表字段id和auth.users表中的id字段（uuid类型）外键关联。2、开启Profiles的RLS数据安全访问规则；选中创建的Profiles表，点击表权限栏，如下图所示，点击”启用RLS”按钮3、允许每个用户可以查看公共的个人信息资料；点击”新规则”按钮，在弹出弹框中，选择”为所有用户启用访问权限”，输入策略名称，选择”SELECT(查询)”操作，点击“创建策略”按钮，如下图。4、仅允许用户增删改查本人的个人资料信息；点击”新规则”按钮，在弹出弹框中，选择”根据用户ID为用户启用访问权限”，输入策略名称，选择”ALL(所有)”操作，点击“创建策略”按钮，如下图。创建云存储的存储桶，用来存储用户的头像图片，涉及操作包括：1、创建一个存储桶avatars在该应用的云存储导航栏，点击“新建Bucket”按钮，创建存储桶avatars。2、允许每个用户可以查看存储桶avatars选中存储桶avatars，切换到权限设置栏，点击“新规则”按钮，弹出策略编辑弹框，选择“自定义”，如下图所示：选择SELECT操作，输入策略名称，点击“生成策略”按钮，如下图所示。3、允许用户上传存储桶avatars；选中存储桶avatars，切换到权限设置栏，点击“新规则”按钮，弹出策略编辑弹框，选择“自定义”，如下图所示：选择INSERT操作，输入策略名称，点击“生成策略”按钮，如下图所示。查看结果所有数据表及RLS的sql（策略名称用英文代替）现在您已经创建了一些数据库表，您可以使用自动生成的 API 插入数据。我们只需要从API设置中获取URL和anon的密钥。在应用->概括页面，获取服务地址以及token信息。Anon（公开）密钥是客户端API密钥。它允许“匿名访问”您的数据库，直到用户登录。登录后，密钥将切换到用户自己的登录令牌。这将为数据启用行级安全性。注意：service_role（秘密）密钥可以绕过任何安全策略完全访问您的数据。这个密钥必须保密，并且要在服务器环境中使用，绝不能在客户端或浏览器上使用。 在后续示例代码中，需要提供supabaseUrl和supabaseKey。当用户点击邮件内魔法链接进行登录时，是需要跳转到我们应用的登录界面的。这里需要在认证设置中进行相关URL重定向的配置。因为我们最终的应用会在本地的4200端口启动（亦或者其他端口），所以这里我们暂时将url设置为 http://localhost:4200除此之外，在此界面也可以自定义使用我们自己的smtp服务器。让我们从头开始构建 Angular应用程序。我们可以使用Angular CLI来初始化一个名为memfiredb-angular：Angular 需要 Node.js (>=14.15
然后让我们安装唯一的附加依赖项：supabase-js最后，我们要将环境变量保存在environment.ts， 我们需要的是 API URL 和您上面anon复制的密钥。src/environments/environment.ts文件现在我们已经有了 API 凭证，通过ng g s supabase创建一个SupabaseService来初始化 Supabase 客户端并实现与 Supabase API 通信的函数。src/app/supabase.service.ts可以看到界面实在是不怎么优雅，更新下样式，让它好看一些。 修改src/styles.css文件。让我们设置一个 Angular 组件来管理登录和注册。我们将使用 Magic Links，因此用户无需使用密码即可使用电子邮件登录。使用Angular CLI 命令创建一个AuthComponent 。 ng g c authsrc/app/auth/auth.component.ts使用下面的电子邮件通过魔术链接登录用户登录后，我们可以允许他们编辑他们的个人资料详细信息并管理他们的帐户。使用Angular CLI 命令创建一个AccountComponent 。 ng g c accounts免费云主机、域名rc/app/account/account.component.ts现在我们已经准备好了所有组件，让我们更新AppComponent：src/app/app.component.ts完成后，在终端窗口中运行它：然后打开浏览器到 http://localhost:4200，你应该会看到完整的应用程序。每个 MemFire Cloud项目都配置了存储，用于管理照片和视频等大文件。让我们为用户创建一个头像，以便他们可以上传个人资料照片。使用Angular CLI 命令创建AvatarComponent 。 ng g c avatarsrc/app/avatar/avatar.component.ts然后我们可以在AccountComponent html 模板的顶部添加小部件：src/app/account/account.component.ts“怎么使用MemFire Cloud构建Angular应用程序”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注云技术网站，小编将为大家输出更多高质量的实用文章！

相关推荐: jquery怎么改变img的属性值

这篇文章主要介绍“jquery怎么改变img的属性值”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“jquery怎么改变img的属性值”文章能帮助大家解决问题。 两种改变方法：1、用attr()修改属性值，语法“$(“i…