如何为Blazor构建后端？

介绍 在本教程中，您将学习如何使用 back4app 为 blazor 应用程序构建完整的后端。 我们将逐步整合 back4app 的基本功能 如数据库管理、云代码函数、rest 和 graphql api、用户身份验证以及实时查询（实时查询） 以创建一个安全、可扩展且强大的后端，与您的 blazor 前端无缝通信。 利用 back4app 强大的后端服务与 blazor（一个用于使用 c# 构建交互式 web 用户界面的 asp net core 框架）结合，开发人员可以加速后端开发。 无论您是在构建 blazor server 应用程序还是 blazor webassembly 应用程序，与 back4app 的无缝集成都可以大幅减少开发时间，同时确保高质量的服务器端业务逻辑。 在本教程结束时，您将构建一个为全栈 web 应用程序量身定制的安全后端结构，使用 blazor。 您将获得有关如何处理数据操作、应用安全控制和实现云函数的见解，使您的 blazor web 应用程序强大且可扩展。 先决条件 要完成本教程，您需要： 一个 back4app 账户和一个新的 back4app 项目 开始使用 back4app。 https //www back4app com/docs/get started/new parse app 如果您没有账户，可以免费创建一个。请按照上面的指南准备好您的项目。 基本的 blazor 开发环境 您可以通过从 microsoft https //dotnet microsoft com/download 安装最新的 net sdk 来设置此环境，并使用 dotnet new blazorserver 或 dotnet new blazorwasm 等模板创建一个新的 blazor 项目。 net sdk（版本 6 或更高）已安装 确保您已安装 net sdk，以便构建和运行 blazor 应用程序。 熟悉 c# 和 blazor 概念 blazor 官方文档。 https //docs microsoft com/en us/aspnet/core/blazor/?view=aspnetcore 6 0 如果您是 blazor 新手，请在开始之前查看官方文档或初学者教程。 在开始之前，请确保您具备这些先决条件，以确保顺利的教程体验。 步骤 1 – 设置 back4app 项目 创建新项目 在 back4app 上构建 blazor 后端的第一步是创建一个新项目。如果您还没有创建，请按照以下步骤操作： 登录到您的 back4app 账户 。 点击您的 back4app 控制面板中的 “新应用” 按钮 。 给您的应用命名 （例如，“blazor backend tutorial”）。 一旦项目创建完成，您将在您的 back4app 仪表板中看到它列出。这个项目将是本教程中讨论的所有后端配置的基础。 连接 parse sdk back4app 依赖 parse 平台来管理您的数据，提供实时功能，处理用户身份验证等。将您的 blazor 应用程序连接到 back4app 涉及安装 net 的 parse sdk 并使用您 back4app 仪表板中的凭据进行初始化。 检索您的 parse 密钥 在您的 back4app 仪表板中，导航到您应用程序的“应用设置”或“安全性与密钥”部分以找到您的 应用程序 id 和 net 密钥 您还会找到 parse 服务器 url （通常格式为 https //parseapi back4app com )。 在您的 blazor 项目中安装 parse sdk ： dotnet add package parse 在您的 blazor 应用程序中初始化 parse： 通常，您会在 program cs 或专用服务类中设置初始化： using parse; var builder = webapplication createbuilder(args); // 初始化 parse parseclient initialize(new parseclient configuration { applicationid = "your application id", windowskey = "your dotnet key", server = "https //parseapi back4app com" }); var app = builder build(); // 其余配置 此配置确保每当您在 blazor 应用程序中使用 parse 时，它已预先配置为连接到您的特定 back4app 实例。 通过完成此步骤，您已在 blazor 前端和 back4app 后端之间建立了安全连接，为执行数据库操作、用户管理等铺平了道路。 步骤 2 – 设置数据库 保存和查询数据 在您的 back4app 项目设置完成并将 parse sdk 集成到您的 blazor 应用程序后，您现在可以开始保存和检索数据。创建记录的最简单方法是使用 parseobject 类： somedataservice cs using parse; using system threading tasks; public class somedataservice { public async task\<parseobject> createtodoitemasync(string title, bool iscompleted) { var todo = new parseobject("todo"); todo\["title"] = title; todo\["iscompleted"] = iscompleted; try { await todo saveasync(); console writeline("todo saved successfully " + todo objectid); return todo; } catch (exception ex) { console writeline("error saving todo " + ex message); return null; } } public async task\<ilist\<parseobject>> fetchtodosasync() { var query = new parsequery\<parseobject>("todo"); try { var results = await query findasync(); console writeline("fetched todo items " + results count); return results; } catch (exception ex) { console writeline("error fetching todos " + ex message); return null; } } } 或者，您可以使用 back4app 的 rest api 端点进行操作。 架构设计和数据类型 默认情况下，parse 允许 动态创建模式 , 但您也可以在 back4app 仪表板中定义您的类和数据类型，以获得更多控制。 导航到您的 back4app 仪表板中的 “数据库” 部分 创建一个新类 （例如，“待办事项”）并添加相关列，例如标题（字符串）和 iscompleted（布尔值）。 back4app 还支持多种数据类型： 字符串 , 数字 , 布尔值 , 对象 , 日期 , 文件 , 指针、数组、关系 , 地理点 , 和 多边形 您可以为每个字段选择合适的类型。如果您愿意，您也可以让 parse 在您第一次从 blazor 应用程序保存对象时自动创建这些列。 back4app 提供一个 ai 代理，可以帮助您设计数据模型： 从您的应用仪表板或菜单中打开 ai 代理 用简单的语言描述您的数据模型 （例如，“请在 back4app 上创建一个新的待办事项应用，带有完整的类模式。”）。 让 ai 代理为您创建模式 。 使用 ai 代理可以在设置数据架构时节省时间，并确保应用程序的一致性。 关系数据 如果您有关系数据 例如，一个 类别 对象指向多个 待办事项 项目 您可以在 parse 中使用 指针 或 关系 。这个过程与 reactjs 类似，但使用 net 对象： somedataservice cs（续） public async task\<parseobject> createtaskforcategoryasync(string categoryobjectid, string title) { var todo = new parseobject("todo"); // 创建指向类别的指针 var categorypointer = parseobject createwithoutdata("category", categoryobjectid); todo\["title"] = title; todo\["category"] = categorypointer; try { await todo saveasync(); return todo; } catch (exception ex) { console writeline("创建带有类别关系的任务时出错：" + ex message); return null; } } 查询时，请包含指针数据： somedataservice cs (continuation) public async task\<ilist\<parseobject>> fetchtodoswithcategoryasync() { var query = new parsequery\<parseobject>("todo") include("category"); try { var todoswithcategory = await query findasync(); return todoswithcategory; } catch (exception ex) { console writeline("error fetching todos with category " + ex message); return null; } } 实时查询 在 blazor server 应用中获取实时更新时，请考虑使用 signalr 连接 进行实时查询。尽管 parse net sdk 支持实时查询，但在 blazor 应用中直接集成它们可能需要与 signalr 进行额外的设置以实现实时通信。 在您的 back4app 控制面板中启用实时查询 ，在您应用的 服务器设置 下。确保“实时查询”已开启。 如有需要，在 net 中配置实时查询客户端 。然而，对于 blazor 应用，利用 signalr 可能更符合服务器端连接的习惯。 由于在 blazor 中设置实时查询的复杂性以及 parse net sdk 在 blazor webassembly 中的潜在限制，您可能需要实现一个服务器端服务，将 parse 实时查询与 signalr 客户端连接起来。 步骤 3 – 使用 acl 和 clp 应用安全性 back4app 安全机制 back4app 非常重视安全性，提供了 访问控制列表 (acls) 和 类级权限 (clps) 。这些功能允许您限制谁可以按对象或按类读取或写入数据，确保只有授权用户可以修改您的数据。 访问控制列表 (acls) 一个 acl 应用于单个对象，以确定哪些用户、角色或公众可以执行读/写操作。例如： somedataservice cs (acl example) public async task\<parseobject> createprivatetodoasync(string title, parseuser owneruser) { var todo = new parseobject("todo"); todo\["title"] = title; // create an acl granting read/write access only to the owner var acl = new parseacl(owneruser); acl publicreadaccess = false; acl publicwriteaccess = false; todo acl = acl; try { await todo saveasync(); return todo; } catch (exception ex) { console writeline("error saving private todo " + ex message); return null; } } 当您保存对象时，它具有一个 acl，防止除了指定用户之外的任何人读取或修改它。 类级权限 (clps) clps 管理整个类的默认权限，例如类是否可以公开读取或写入，或者是否只有某些角色可以访问它。 转到您的 back4app 控制面板 , 选择您的应用程序，然后打开 数据库 部分。 选择一个类 (例如，“todo”)。 打开类级权限 标签。 配置您的默认设置，例如“需要身份验证”以进行读取或写入，或“无访问”以供公众使用。 这些权限设置了基线，而 acl 则微调单个对象的权限。一个强大的安全模型通常结合了 clps（广泛限制）和 acls（细粒度的每对象限制）。有关更多信息，请访问 应用安全指南。 https //www back4app com/docs/security/parse security 步骤 4 – 编写和部署云函数 云代码是 parse server 环境的一个特性，允许您在服务器端运行自定义 javascript 代码 无需管理您的服务器或基础设施。 通过编写云代码，您可以通过额外的业务逻辑、验证、触发器和集成来扩展您的 back4app 后端，这些都可以在 parse server 上安全高效地运行。 工作原理 当您编写云代码时，通常会将您的 javascript 函数、触发器和任何所需的 npm 模块放在一个 main js （或 app js ) 文件中。 然后将此文件部署到您的 back4app 项目中，该项目在 parse server 环境中执行。 由于这些函数和触发器在服务器上运行，您可以信任它们处理机密逻辑、处理敏感数据或进行仅限后端的 api 调用 这些过程您可能不想直接暴露给客户端。 您为 back4app 应用编写的所有云代码都在由 back4app 管理的 parse server 内部运行，因此您无需担心服务器维护、扩展或配置。 每当您更新并部署您的 main js 文件时，正在运行的 parse 服务器将更新为您最新的代码。 main js 文件结构 一个典型的 main js 可能包含： 所需模块的 语句（npm 包、内置 node 模块或其他云代码文件）。 云函数定义 使用 parse cloud define() 触发器 如 parse cloud beforesave() , parse cloud aftersave() , 等等。 您安装的 npm 模块 （如果需要）。 main js // main js // 1 import necessary modules and other cloud code files const axios = require('axios'); const report = require(' /reports'); // 2 define a custom cloud function parse cloud define('fetchexternaldata', async (request) => { const url = request params url; if (!url) { throw new error('url parameter is required'); } const response = await axios get(url); return response data; }); // 3 example of a beforesave trigger parse cloud beforesave('todo', (request) => { const todo = request object; if (!todo get('title')) { throw new error('todo must have a title'); } }); 通过安装和使用 npm 模块的能力，云代码变得极其灵活，允许您与外部 api 集成、执行数据转换或执行复杂的服务器端逻辑。 典型用例 业务逻辑 例如，聚合数据以进行分析或在保存到数据库之前进行计算。 数据验证 确保某些字段存在或用户在保存或删除记录之前具有正确的权限。 触发器 当数据更改时执行操作（例如，当用户更新其个人资料时发送通知）。 集成 连接第三方api或服务。 安全执行 验证和清理输入以在执行敏感操作之前强制执行安全性。 部署您的函数 以下是一个简单的云代码函数，用于计算从客户端发送的文本字符串的长度： main js // main js parse cloud define('calculatetextlength', async (request) => { const { text } = request params; if (!text) { throw new error('no text provided'); } return { length text length }; }); 通过 back4app cli https //www back4app com/docs/local development/parse cli 进行部署 1 安装cli 对于linux/macos curl https //raw\ githubusercontent com/back4app/parse cli/back4app/installer sh | sudo /bin/bash 对于windows 从发布页面下载 b4a exe https //github com/back4app/parse cli/releases/download/release 3 3 1/b4a exe 文件。 2 配置您的账户密钥 https //www back4app com/docs/local development/parse cli#f cxi b4a configure accountkey 3 部署您的云代码： b4a deploy 通过仪表板部署 在您的应用仪表板中，转到 云代码 > 函数 将函数复制/粘贴到 main js 编辑器中。 点击 部署 调用您的函数 通过 blazor 使用 parse net sdk somedataservice cs (calling function) public async task\<int?> gettextlengthasync(string text) { try { var result = await parsecloud callfunctionasync\<dictionary\<string, object>>("calculatetextlength", new dictionary\<string, object> { { "text", text } }); if(result != null && result containskey("length")) return convert toint32(result\["length"]); return null; } catch(exception ex) { console writeline("error calling cloud function " + ex message); return null; } } 您也可以通过 rest 或 graphql 调用它，如 reactjs 教程中所示。 步骤 5 – 配置用户身份验证 back4app中的用户认证 back4app利用 parse user 类作为认证的基础。默认情况下，parse处理密码哈希、会话令牌和安全存储。这意味着您不必手动设置复杂的安全流程。 设置用户认证 在blazor应用程序中，您可以创建一个新用户，使用 authservice cs using parse; using system threading tasks; public class authservice { public async task signupuserasync(string username, string password, string email) { var user = new parseuser() { username = username, password = password, email = email }; try { await user signupasync(); console writeline("user signed up successfully!"); } catch (exception ex) { console writeline("error signing up user " + ex message); } } public async task loginuserasync(string username, string password) { try { var user = await parseuser loginasync(username, password); console writeline("user logged in " + user username); } catch (exception ex) { console writeline("error logging in user " + ex message); } } } 会话管理 成功登录后，parse会创建一个 会话令牌 ，该令牌存储在用户对象中。在您的blazor应用中，您可以访问当前登录的用户 somecomponent razor cs var currentuser = parseuser currentuser; if (currentuser != null) { console writeline("currently logged in user " + currentuser username); } else { console writeline("no user is logged in"); } parse自动在后台处理基于令牌的会话，但您也可以手动管理或撤销它们。要注销 authservice cs (logout) public async task logoutasync() { await parseuser logoutasync(); console writeline("user logged out"); } 社交登录集成 back4app 和 parse 可以与流行的 oauth 提供商集成，例如 google 或 facebook。 配置可能会有所不同，通常涉及服务器端设置或额外的包。请参考 社交登录文档 https //www back4app com/docs/platform/sign in with apple 以获取详细说明。 由于 blazor server 应用程序在 asp net core 上运行，您可以使用 asp net core 身份提供程序与 parse 集成社交登录，以实现无缝身份验证。 电子邮件验证和密码重置 要启用电子邮件验证和密码重置： 在您的 back4app 控制面板中导航到 电子邮件设置 。 启用电子邮件验证 以确保新用户验证其电子邮件地址的所有权。 配置发件人地址 , 电子邮件模板，以及如果需要的话，您的自定义域名。 这些功能通过验证用户对电子邮件的所有权和提供安全的密码恢复方法来提高账户安全性和用户体验。 步骤 6 – 处理文件存储 上传和检索文件 parse 包含用于处理文件上传的 parsefile 类，back4app 安全地存储这些文件 fileservice cs using parse; using system; using system threading tasks; public class fileservice { public async task\<string> uploadimageasync(byte\[] filedata, string filename) { var parsefile = new parsefile(filename, filedata); try { await parsefile saveasync(); console writeline("file saved " + parsefile url); return parsefile url; } catch (exception ex) { console writeline("error uploading file " + ex message); return null; } } } 将文件附加到对象 fileservice cs (continued) public async task\<parseobject> createphotoobjectasync(byte\[] filedata, string filename) { var photo = new parseobject("photo"); var parsefile = new parsefile(filename, filedata); photo\["imagefile"] = parsefile; try { await photo saveasync(); return photo; } catch (exception ex) { console writeline("error creating photo object " + ex message); return null; } } 检索文件 url somecomponent razor cs var imagefile = photo get\<parsefile>("imagefile"); var imageurl = imagefile url; 您可以通过将此 imageurl 设置为 \<img> 标签的源来在 blazor 组件中显示此图像。 文件安全 parse server 提供灵活的配置来管理文件上传安全性。根据需要在 parsefiles 上使用 acl 或设置服务器级配置。 步骤 7 – 使用云作业调度任务 云作业 云作业 在 back4app 中让您调度和运行后台的例行任务 比如清理旧数据或发送每日摘要电子邮件。一个典型的云作业可能看起来像这样： main js parse cloud job('cleanupoldtodos', async (request) => { const todo = parse object extend('todo'); const query = new parse query(todo); const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); try { const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; } catch (err) { throw new error('error during cleanup ' + err message); } }); 使用新作业部署您的云代码 （通过 cli 或仪表板）。 转到 back4app 仪表板 > 应用设置 > 服务器设置 > 后台作业 调度 该作业每天运行或按您需要的任何间隔运行。 云作业使您能够自动化后台维护或其他定期过程，而无需手动干预。 步骤 8 – 集成 webhooks webhooks 允许您的 back4app 应用在某些事件发生时向外部服务发送 http 请求。 这对于与第三方系统集成非常强大，例如支付网关、电子邮件营销工具或分析平台。 导航到 webhooks 配置 在您的 back4app 仪表板 > 更多 > webhooks，然后点击添加 webhook。 设置端点 (例如， https //your external service com/webhook endpoint https //your external service com/webhook endpoint )。 配置触发器 以指定您的 back4app 类或 cloud code 函数中的哪些事件将触发 webhook。 例如，如果您希望在创建新 todo 时通知 slack 频道： 创建一个接受传入 webhook 的 slack 应用。 复制 slack webhook url。 在您的 back4app 仪表板中，将端点设置为该 slack url，用于事件“todo 类中的新记录。” 如果需要，您还可以添加自定义 http 头或有效负载。 您还可以通过在触发器中进行自定义 http 请求（如 beforesave、aftersave）在 cloud code 中定义 webhooks。 第9步 – 探索 back4app 管理面板 “ back4app 管理应用 ”是一个基于网络的管理界面，旨在为非技术用户执行 crud 操作和处理常规数据任务，无需编写任何代码。 它提供了一个 以模型为中心 的， 用户友好的 界面，简化了数据库管理、自定义数据管理和企业级操作。 启用管理应用 通过访问 应用仪表板 > 更多 > 管理应用 并点击“启用管理应用”按钮来启用它。 创建第一个管理员用户 （用户名/密码），这会自动在您应用的架构中生成一个新角色（b4aadminuser）和类（b4asetting、b4amenuitem 和 b4acustomfield）。 选择一个子域名 以访问管理界面并完成设置。 使用您创建的管理员凭据 登录 以访问您的新管理应用仪表板。 一旦启用，back4app 管理应用使您能够轻松查看、编辑或删除数据库中的记录，而无需直接使用 parse 仪表板或后端代码。 结论 通过遵循这个全面的教程，您已经： 创建了一个安全的后端 用于在 back4app 上的 blazor 应用程序。 配置了一个数据库 具有类模式、数据类型和关系。 集成了实时查询 在适用的情况下进行即时数据更新。 应用了安全措施 使用 acl 和 clp 来保护和管理数据访问。 实现了云代码 函数以在服务器端运行自定义业务逻辑。 设置了用户身份验证 支持电子邮件验证和密码重置。 管理文件上传 和检索，具有可选的文件安全控制。 调度云作业 以进行自动化后台任务。 使用 webhooks 与外部服务集成。 探索了 back4app 管理面板 进行数据管理。 凭借坚实的 blazor 前端和强大的 back4app 后端，您现在已具备开发功能丰富、可扩展和安全的 web 应用程序的良好条件。 继续探索更高级的功能，整合您的业务逻辑，并利用 back4app 的强大功能为您节省无数小时的服务器和数据库管理时间。祝您编码愉快！ 下一步 构建一个生产就绪的 blazor 应用 通过扩展这个后端来处理更复杂的数据模型、缓存策略和性能优化。 集成高级功能 如专业的身份验证流程、基于角色的访问控制或外部 api。 查看 back4app 的官方文档 以深入了解高级安全性、性能调优和日志分析。 探索其他教程 关于实时聊天应用、物联网仪表板或基于位置的服务。将这里学到的技术与第三方 api 结合起来，创建复杂的现实世界应用。