如何创建一个基本的 CRUD 应用程序与 Blazor？

概述 本指南将引导您构建一个完整的 crud（创建、读取、更新、删除）应用程序，使用 blazor。 在本教程中，您将配置一个 back4app 项目，设计您的数据库架构，并通过 rest api 将 blazor 前端与 back4app 集成。 这个过程将帮助您建立一个强大的后端，同时确保您的 web 应用程序能够高效地管理数据。 最初，您将设置一个名为 basic crud app blazor 的 back4app 项目，这将作为您数据管理系统的支柱。 接下来，您将通过建立详细的集合和字段，手动或借助 back4app ai agent，来设计一个可扩展的数据库。 之后，您将利用 back4app 管理应用程序的强大功能——一个用户友好的拖放界面——轻松管理您的集合。 最后，您将使用 rest api 将 blazor 前端连接到 back4app，并通过适当的访问控制来保护您的后端。 在本教程结束时，您将拥有一个支持基本 crud 操作的生产就绪的 web 应用程序，并具备用户身份验证和安全数据更新功能。 关键学习点 构建能够无缝处理数据操作的 crud 应用程序，使用可靠的后端。 获取有关创建可扩展后端并将其与 blazor 前端集成的见解。 利用 back4app 管理应用程序的拖放功能来简化数据管理。 学习部署技术，包括 docker 容器化，以快速启动您的应用程序。 先决条件 在开始之前，请确保您拥有： 一个 back4app 账户和一个新项目。 访问 开始使用 back4app https //www back4app com/docs/get started/new parse app 如果您需要帮助。 一个 blazor 开发环境。 使用 visual studio 或 visual studio code，配备最新的 net sdk（版本 6 或更高）。 c#、blazor 和 restful api 的基本知识。 如有需要，请查看 blazor 文档 https //docs microsoft com/en us/aspnet/core/blazor 。 步骤 1 – 初始项目设置 建立一个新的 back4app 项目 登录到您的 back4app 账户。 从您的仪表板中选择 “新应用” 按钮 。 输入项目标题： basic crud app blazor 并按照屏幕上的说明完成创建过程。 创建新项目 设置完成后，您的新项目将在仪表板上显示，为配置您的后端提供坚实的基础。 步骤 2 – 设计您的数据库架构 构建您的数据模型 对于这个基本的crud应用程序，您需要创建几个集合。以下是集合的示例，以及设置数据库所需的字段和数据类型，以便高效地进行配置。 1\ 项目收集 字段 数据类型 目的 id 对象id 自动生成的唯一标识符。 标题 字符串 项目的名称或标题。 描述 字符串 该项目的简短摘要。 创建于 日期 项目创建时的时间戳。 更新于 日期 该项目最后修改的时间戳。 2\ 用户集合 字段 数据类型 目的 id 对象id 自动生成的唯一标识符。 用户名 字符串 用户的唯一标识符。 电子邮件 字符串 用户的电子邮件地址。 密码哈希 字符串 用于安全登录的加密密码。 创建于 日期 账户创建的时间戳。 更新于 日期 上次账户更新的时间戳。 您可以通过在 back4app 控制面板中为每个集合建立一个新类并添加必要的列来手动创建这些集合。 创建新类 您可以通过选择数据类型、命名字段、设置默认值以及确定字段是否为必填项来定义列。 创建列 使用 back4app ai 代理进行模式创建 back4app ai 代理直接从您的仪表板简化模式创建。通过输入详细描述您的集合和字段的提示，ai 代理会自动生成所需的数据库模式。 如何使用 ai 代理： 访问 ai 代理： 登录到您的 back4app 仪表板，并在设置或主菜单中找到 ai 代理。 定义您的数据模型： 粘贴一个描述性提示，列出集合及其字段。 审核并确认： 检查建议的模式并将其应用于您的项目。 示例提示 create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) 使用此 ai 代理不仅节省时间，还确保了一致和高效的模式设置。 第 3 步 – 激活管理员应用程序并管理 crud 操作 管理员应用程序简介 back4app 管理员应用程序提供无代码、拖放界面来管理您的后端数据。这个直观的工具使您能够轻松执行 crud 操作。 激活管理员应用程序 导航到您的 back4app 控制面板上的 “更多” 菜单。 点击 “管理员应用” 然后选择 “启用管理员应用。” 通过创建初始管理员用户来设置您的管理员凭据，这也将建立默认角色和系统集合。 启用管理员应用 启用后，登录管理员应用程序以管理您的集合和数据。 管理员应用仪表板 使用管理员应用执行 crud 操作 在管理员应用中，您可以： 创建记录： 在集合中点击 “添加记录” 按钮（例如，项目）以添加新条目。 读取/更新记录： 点击记录以检查其详细信息或修改其字段。 删除记录： 删除不再需要的条目。 这个简单的拖放界面显著增强了数据管理体验。 步骤 4 – 将 blazor 连接到 back4app 现在您的后端已配置，是时候将您的 blazor 前端与 back4app 集成了。 在 blazor 中使用 rest api 由于 parse sdk 不适用于 blazor，您将利用 rest api 执行 crud 操作。在您的 blazor 应用程序中，使用 httpclient 与 back4app 的 rest 端点进行交互。 示例：通过rest获取项目 在您的blazor项目中创建一个服务以获取项目。例如： // services/itemservice cs using system net http; using system net http headers; using system text json; using system threading tasks; using system collections generic; public class item { public string id { get; set; } public string title { get; set; } public string description { get; set; } } public class itemservice { private readonly httpclient httpclient; private const string baseurl = "https //parseapi back4app com/classes/items"; public itemservice(httpclient httpclient) { httpclient = httpclient; httpclient defaultrequestheaders add("x parse application id", "your application id"); httpclient defaultrequestheaders add("x parse rest api key", "your rest api key"); } public async task\<list\<item>> getitemsasync() { var response = await httpclient getasync(baseurl); response ensuresuccessstatuscode(); var json = await response content readasstringasync(); var itemsdata = jsonserializer deserialize\<itemsresponse>(json); return itemsdata results; } } public class itemsresponse { public list\<item> results { get; set; } } 在您的blazor组件中集成这样的api调用以管理crud操作。 步骤5 – 保护您的后端 实施访问控制列表（acls） 通过在您的对象上设置acl来保护您的数据。例如，创建一个私有项目： public async task createprivateitemasync(item newitem, string ownerid) { // prepare your item data with proper access controls // in your rest call, include acl information as required by your backend // this is a conceptual example; refer to back4app documentation for acl details } 配置类级别权限（clps） 在back4app仪表板中，调整每个集合的clp，以确保只有授权用户可以访问或修改敏感数据。 步骤6 – 管理用户身份验证 在blazor中设置用户帐户 back4app利用parse的用户类来处理身份验证。在您的blazor应用程序中，通过rest调用管理用户注册和登录。例如： // services/authservice cs using system net http; using system net http json; using system threading tasks; public class authservice { private readonly httpclient httpclient; private const string signupurl = "https //parseapi back4app com/users"; public authservice(httpclient httpclient) { httpclient = httpclient; httpclient defaultrequestheaders add("x parse application id", "your application id"); httpclient defaultrequestheaders add("x parse rest api key", "your rest api key"); } public async task signupasync(string username, string password, string email) { var user = new { username, password, email }; var response = await httpclient postasjsonasync(signupurl, user); response ensuresuccessstatuscode(); // handle success, such as storing tokens or redirecting the user } } 可以为登录和会话管理实现类似的方法。可以通过back4app仪表板设置社交登录、电子邮件验证和密码恢复等附加功能。 第7步 – 部署您的blazor前端 back4app的web部署功能允许您通过从github存储库部署代码来无缝托管您的blazor应用程序。 7 1 创建您的生产构建 在终端中打开您的项目目录。 运行发布命令： dotnet publish c release 此命令生成一个发布文件夹，其中包含针对您的 blazor 应用程序优化的静态文件。 验证构建： 确认输出文件夹包含必要的文件（例如， index html , javascript, css 等）。 7 2 组织和上传您的代码 您的 git 仓库应封装 blazor 应用程序的完整源代码。一个示例文件夹结构可能是： basic crud app blazor frontend/ \| wwwroot/ \| | index html \| pages/ \| | index razor \| | items razor \| | login razor \| services/ \| | itemservice cs \| | authservice cs \| program cs \| basic crud app blazor csproj \| readme md 示例文件：program cs using microsoft aspnetcore components web; using microsoft aspnetcore components webassembly hosting; using basic crud app blazor; using basic crud app blazor services; var builder = webassemblyhostbuilder createdefault(args); builder rootcomponents add\<app>("#app"); builder rootcomponents add\<headoutlet>("head after"); builder services addscoped(sp => new httpclient { baseaddress = new uri(builder hostenvironment baseaddress) }); builder services addscoped\<itemservice>(); builder services addscoped\<authservice>(); await builder build() runasync(); 提交并推送到 github 在你的项目文件夹中初始化 git（如果尚未完成）： git init 添加你的文件： git add 提交你的更改： git commit m "初始提交 blazor 前端源代码" 创建一个 github 仓库： 命名为 basic crud app blazor frontend 推送你的仓库： git remote add origin https //github com/your username/basic crud app blazor frontend git git push u origin main 7 3 将你的仓库与 web 部署集成 访问web部署选项： 在您的back4app仪表板中，打开您的项目 ( basic crud app blazor ) 并导航到 web部署 部分。 连接您的github账户： 按照提示链接您的github账户，允许back4app访问您的代码库。 选择代码库和分支： 选择代码库（例如， basic crud app blazor frontend ) 和分支（例如， main )，该分支包含您的blazor代码。 7 4 部署配置 提供更多细节，例如： 构建命令： 如果发布的文件夹没有预先生成，请指定一个命令，例如 dotnet publish c release 输出目录： 设置输出路径（例如， bin/release/net6 0/wwwroot )。 环境变量： 在配置中添加任何所需的环境设置（例如 api 密钥）。 7 5 使用 docker 对您的 blazor 应用进行容器化 如果您更喜欢使用 docker 进行部署，请在您的代码库中包含一个 dockerfile 。以下是一个示例： \# use the official net sdk image for building the app from mcr microsoft com/dotnet/sdk 6 0 as build workdir /src copy \["basic crud app blazor csproj", " /"] run dotnet restore "basic crud app blazor csproj" copy run dotnet publish "basic crud app blazor csproj" c release o /app/publish \# use the official asp net core runtime image to run the app from mcr microsoft com/dotnet/aspnet 6 0 as runtime workdir /app copy from=build /app/publish expose 80 entrypoint \["dotnet", "basic crud app blazor dll"] 然后，在您的 web 部署设置中，选择 docker 选项以部署您的容器化应用。 7 6 启动您的应用程序 启动部署： 点击 back4app 控制面板中的 部署 按钮。 监控构建： back4app 将从 github 获取您的代码，必要时运行构建命令，并在容器中部署您的应用。 获取您的 url： 一旦部署过程完成，back4app 将提供一个您托管的 blazor 应用程序的 url。 7 7 确认部署 打开提供的 url： 在浏览器中访问该 url 以查看您的已部署应用。 测试应用程序： 验证所有页面是否正确加载，并且 crud 操作是否按预期工作。 必要时进行故障排除： 使用浏览器开发者工具并查看 back4app 上的部署日志以诊断任何问题。 第8步 – 总结与进一步探索 恭喜你！你已经成功构建了一个使用 blazor 和 back4app 的基本 crud 应用程序。 你设置了一个名为 basic crud app blazor 的项目，设计了 items 和 users 的集合，并利用 back4app 管理应用程序实现无缝的数据管理。 此外，你还通过 rest api 将 blazor 前端与 back4app 集成，并应用了强大的安全措施。 未来步骤： 扩展你的前端： 增强你的 blazor 应用程序，增加更详细的视图、搜索功能或实时通知。 添加高级功能： 考虑加入云函数、第三方集成或基于角色的权限。 咨询额外资源： 查看 back4app 文档 https //www back4app com/docs 和其他高级教程，以进一步优化和扩展你的应用程序。 通过遵循本指南，你现在拥有了构建可扩展和安全的 crud 后端的基础，适用于你的 blazor 应用程序，使用 back4app。祝你编码愉快！