如何使用 Deno 构建 CRUD 应用？

概述 本指南演示如何使用 deno 创建一个简单的 crud（创建、读取、更新、删除）应用程序。 我们将利用 back4app 作为我们的后端管理平台，配置它以作为可靠的数据库解决方案，并将采用 api 方法与我们的后端服务进行交互。 在本教程中，您将： 设置一个名为 basic crud app deno 的 back4app 项目。 设计和配置您的数据库架构，创建适合 crud 操作的集合和字段。 利用 back4app 管理应用程序通过直观的拖放界面管理您的集合。 使用 rest/graphql 调用将您的 deno 前端与 back4app 连接。 通过强大的访问控制措施保护您的后端。 在本指南结束时，您将构建一个支持基本数据操作和用户身份验证的生产就绪的 web 应用程序。 基本见解 掌握 crud 功能以高效处理数据。 学习如何设计一个与基于 deno 的前端集成的可扩展后端。 使用 back4app 管理应用程序进行无缝数据管理。 发现部署策略，包括使用 docker 进行容器化。 前提条件 在开始之前，请确保您拥有： 一个 back4app 账户和一个初始化的项目。 如有需要，请参考 开始使用 back4app https //www back4app com/docs/get started/new parse app 。 一个 deno 开发环境。 确保已安装并更新 deno（推荐版本 1 10 及以上）。 熟悉 javascript/typescript、deno 和 rest api 概念。 请查阅 deno 手册 https //deno land/manual 以获取更多信息。 步骤 1 – 初始化您的项目 启动一个新的 back4app 项目 登录到您的 back4app 账户。 点击您的仪表板上的 “新应用” 按钮 。 为您的项目命名： basic crud app deno 并按照屏幕上的说明进行操作。 创建新项目 项目创建后，它将在您的仪表板上可见，为您的后端配置奠定基础。 步骤 2 – 制作数据库架构 构建您的数据模型 对于这个 crud 应用程序，您将定义多个集合。以下是示例集合及建议字段，以便于基本操作。 1\ 集合：项目 此集合包含每个项目的详细信息。 字段 类型 目的 id 对象id 自动生成的主键。 标题 字符串 物品名称。 描述 字符串 项目的简要总结。 创建于 日期 添加项目的时间戳。 更新于 日期 最新更新的时间戳。 2\ 收集：用户 此集合存储用户档案和身份验证数据。 字段 类型 目的 id 对象id 自动生成的主键。 用户名 字符串 用户的唯一标识符。 电子邮件 字符串 用户的唯一电子邮件地址。 密码哈希 字符串 安全哈希密码。 创建于 日期 账户创建时间戳。 更新于 日期 最后更新时间戳。 您可以通过在 back4app 控制面板中手动创建这些集合，为每个集合建立一个新类并添加列以定义每个字段。 创建新班级 您还可以通过选择字段类型、命名、设置默认值并将其标记为必填来添加字段。 创建列 使用 back4app ai 代理进行模式创建 back4app ai 代理通过允许您输入描述性提示来简化模式生成，然后自动创建所需的集合和字段。 使用 ai 代理的步骤： 访问 ai 代理： 打开您的 back4app 仪表板并找到 ai 代理选项。 输入您的数据模型描述： 提供详细的提示，列出您的集合和字段。 审查并应用： 检查生成的模式建议并在您的项目中实施它们。 示例提示： create the following collections in my back4app application 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) 这种方法确保了设置后端模式的一致性和效率。 步骤 3 – 激活管理界面和 crud 功能 管理界面概述 back4app 管理应用程序提供了一个无代码界面来处理您的后端数据。其直观的拖放设计便于管理 crud 操作。 激活管理应用程序 前往“更多”菜单 在您的 back4app 控制面板上。 选择“管理员应用” 并点击 “启用管理员应用。” 设置您的管理员凭据 通过创建初始管理员用户，这也配置了角色（例如， b4aadminuser ) 和系统集合。 启用管理员应用 一旦激活，登录管理员应用以轻松管理您的集合。 管理员应用仪表板 通过管理员应用管理 crud 操作 在管理员应用中，您可以： 添加记录： 在任何集合中点击“添加记录”（例如，项目）以创建新条目。 查看/编辑记录： 选择记录以检查或修改详细信息。 删除记录： 删除不再需要的条目。 这个简单的工具简化了执行基本数据操作的过程。 步骤 4 – 将 deno 连接到 back4app 在您的后端配置完成后，是时候使用 rest 或 graphql api 连接您的 deno 前端。 选项：使用 rest/graphql api 调用 我们将依赖 api 调用与 back4app 进行交互。 示例：通过 rest 在 deno 中获取数据 创建一个模块（例如， fetchitems ts ）并使用以下代码： const application id = "your application id"; const rest api key = "your rest api key"; const server url = "https //parseapi back4app com/classes/items"; export async function fetchitems() { try { const response = await fetch(server url, { headers { "x parse application id" application id, "x parse rest api key" rest api key, }, }); const data = await response json(); console log("retrieved items ", data results); } catch (error) { console error("error retrieving items ", error); } } fetchitems(); 根据需要将此类 api 调用集成到您的 deno 应用程序中。 步骤 5 – 加强您的后端安全性 实施访问控制列表（acls） 通过为每个对象分配 acl 来保护您的数据。例如，为确保某个项目是私有的： async function createprivateitem(itemdata { title string; description string }, ownertoken string) { const server url = "https //parseapi back4app com/classes/items"; const response = await fetch(server url, { method "post", headers { "content type" "application/json", "x parse application id" "your application id", "x parse rest api key" "your rest api key", "x parse session token" ownertoken, }, body json stringify({ title itemdata title, description itemdata description, acl { " " { read false, write false }, \[ownertoken] { read true, write true } } }), }); const result = await response json(); console log("private item created ", result); } 配置类级权限（clps） 在 back4app 仪表板中，调整每个集合的 clp 以定义默认访问策略，确保只有经过身份验证或授权的用户可以访问或修改敏感数据。 步骤 6 – 管理用户身份验证 创建用户帐户 back4app 使用 parse 用户类进行身份验证。在您的 deno 应用程序中，通过 rest api 调用管理用户注册和登录。 示例：在 deno 中注册用户 async function registeruser(username string, password string, email string) { const server url = "https //parseapi back4app com/users"; try { const response = await fetch(server url, { method "post", headers { "content type" "application/json", "x parse application id" "your application id", "x parse rest api key" "your rest api key" }, body json stringify({ username, password, email }) }); const data = await response json(); console log("user registered ", data); } catch (error) { console error("registration error ", error); } } registeruser("newuser", "securepassword", "user\@example com"); 这种方法同样可以应用于登录和会话管理。 第7步 – 使用web部署部署您的deno前端 back4app的web部署功能允许您通过直接从github存储库部署代码来托管基于deno的前端。 7 1 – 构建您的生产版本 在终端中打开您的项目目录。 运行构建命令： 例如，如果使用像esbuild这样的打包工具： deno run allow read allow write build script ts 确认构建输出： 确保输出目录（例如， dist ) 包含必要的静态文件，如 index html , 打包的javascript、css和图像。 7 2 – 组织和提交你的代码 你的代码库应该包含你 deno 前端的所有源文件。一个示例结构可能是 basic crud app deno/ ├── deps ts ├── controllers/ ├── public/ │ └── index html ├── routes/ ├── src/ │ ├── app ts │ └── fetchitems ts ├── dockerfile ├── build script ts └── readme md 示例文件 deps ts export { serve } from "https //deno land/std\@0 140 0/http/server ts"; 示例文件 src/app ts import { serve } from " /deps ts"; import { fetchitems } from " /fetchitems ts"; serve(async (req) => { const { pathname } = new url(req url); if (pathname === "/api/items") { const items = await fetchitems(); return new response(json stringify(items), { headers { "content type" "application/json" }, }); } return new response(await deno readtextfile(" /public/index html"), { headers { "content type" "text/html" }, }); }); 将您的代码提交到 github 初始化 git git init 暂存所有文件 git add 提交您的更改 git commit m "initial commit for deno crud frontend" 推送到 github 创建一个仓库 (例如， basic crud app deno ) 并推送 git remote add origin https //github com/your username/basic crud app deno git git push u origin main 7 3 – 将 github 与 back4app 网络部署链接 登录 back4app 并导航到您的项目。 点击网络部署功能。 连接您的 github 账户 ，按照提示进行操作。 选择您的代码库和分支 （例如， main ）其中包含您的 deno 代码。 7 4 – 配置部署设置 指定 构建命令 如果没有预构建的 dist 文件夹，请设置命令（例如， deno run allow read allow write build script ts )。 输出目录 定义输出文件夹，例如 dist 环境变量 添加任何必要的环境变量（例如，api 密钥）。 7 5 – 将您的 deno 应用程序容器化 要使用 docker 部署，请在您的项目中包含一个 dockerfile ： 7 6 – 启动您的应用程序 启动部署： 点击您的 back4app 控制面板中的 部署 按钮。 监控过程： back4app 将获取您的代码，执行构建步骤，并部署您的应用程序。 访问您的网站： 部署后，将提供一个 url，您的 deno 应用程序将在该 url 上运行。 7 7 – 确认部署成功 访问提供的 url： 在您的浏览器中打开该 url。 测试您的应用程序： 确保所有路由、静态资源和 api 端点正常工作。 故障排除： 如果出现问题，请查看部署日志并验证您的配置。 第8步 – 总结与未来方向 恭喜你！你已经成功使用deno和back4app作为后端构建了一个基本的crud应用程序。 你设置了项目 basic crud app deno , 结构化了你的数据库，通过管理应用程序管理数据，通过api调用连接了你的deno前端，并通过acl和clp保护了你的数据。 未来增强： 扩展前端： 添加详细视图、搜索过滤器或实时更新等功能。 高级后端逻辑： 集成云函数或其他api集成。 深化安全性： 探索基于角色的访问和进一步的身份验证措施。 有关更多详细信息，请查看 back4app文档 https //www back4app com/docs 并探索其他资源。 祝你编码愉快，享受构建可扩展的deno crud应用程序的过程！