如何使用 Riot.js 构建基本的 CRUD 应用程序：逐步指南

概述 在本指南中，您将学习如何使用 riot js 创建一个 crud（创建、读取、更新和删除）应用程序。 我们将逐步设置一个名为 basic crud app riotjs 的 back4app 项目，作为您的后端，然后将其与 riot js 前端集成。 本教程涵盖了从设计数据库架构和使用 back4app 管理数据到使用 sdk（如果适用）或 rest/graphql api 调用集成前端的所有内容。 到最后，您将拥有一个完全可操作、准备投入生产的 web 应用程序，具有用户身份验证和安全数据处理功能。 主要好处 掌握使用可扩展后端系统的 crud 操作。 获取有关将 riot js 前端与 back4app 集成的见解。 利用直观的 back4app 管理应用程序轻松管理数据。 学习部署策略，包括 docker 容器化。 前提条件 在开始之前，请确保您拥有： 一个带有新项目的 back4app 账户。 请参考 开始使用 back4app https //www back4app com/docs/get started/new parse app 以获取指导。 riot js 的开发环境。 您可以使用 riot cli 或通过脚本标签包含 riot。确保安装了 node js（v14 或更高版本）。 javascript、riot js 和 rest api 的基本知识。 如有需要，请查阅 riot js 文档 https //riot js org/ 以获取更多见解。 步骤 1 – 项目初始化 创建 back4app 项目 登录到您的 back4app 账户。 在您的仪表板上点击 “新应用” 。 为您的项目命名： basic crud app riotjs 并按照设置说明进行操作。 创建新项目 您的项目现在将在您的 back4app 仪表板上显示，作为您应用程序数据的支柱。 步骤 2 – 设计您的数据库架构 构建您的数据模型 对于我们的 crud 应用程序，您将定义多个集合。以下是示例集合和字段，以帮助您为高效的 crud 操作构建数据库。 1\ 项目集合 此集合包含有关每个项目的详细信息。 字段 类型 描述 id 对象id 自动生成的唯一标识符。 标题 字符串 项目标题。 描述 字符串 简要项目描述。 创建于 日期 添加该项目的时间戳。 更新于 日期 项目修改的时间戳。 2\ 用户收集 此集合包含用户详细信息和认证信息。 字段 类型 描述 id 对象id 自动生成的唯一标识符。 用户名 字符串 独特的用户名。 电子邮件 字符串 独特的电子邮件地址。 密码哈希 字符串 加密密码。 创建于 日期 账户创建时间戳。 更新于 日期 最后账户更新时间戳。 您可以通过在 back4app 仪表板上创建新类并定义列来手动配置这些集合。 创建新类 您可以通过选择数据类型、分配名称、设置默认值以及标记字段是否为必填项来添加字段。 创建列 利用 back4app ai 代理进行模式创建 back4app ai 代理可以从您的仪表板访问，通过处理详细的提示自动生成您的模式，描述您所需的集合和字段。 使用 ai 代理 打开 ai 代理 在您的项目设置或菜单中找到它。 输入您的数据模型 粘贴一个概述您的集合及其字段的提示。 审核并确认 验证生成的模式并将其应用于您的项目。 示例提示 create these 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) 此工具加快了过程并确保一致的模式设置。 步骤 3 – 激活管理员应用程序和 crud 操作 管理员应用程序概述 back4app 管理员应用程序提供无代码、拖放界面，便于后台管理，让您快速执行 crud 操作。 激活管理员应用程序 打开您的 back4app 仪表板中的 “更多” 菜单 。 选择 “管理员应用程序” 并点击 “启用管理员应用程序。” 通过创建初始管理员用户来设置您的管理员帐户 ，这也会建立默认角色。 启用管理员应用程序 启用后，登录管理应用程序以管理您的后端数据。 管理应用程序仪表板 通过管理应用程序执行crud操作 在此界面中，您可以： 添加记录： 在集合中使用“添加记录”按钮（例如，项目）以创建新条目。 编辑记录： 点击任何记录以查看和修改其详细信息。 删除记录： 删除任何不再必要的记录。 此工具通过提供一个简单的界面来管理数据，从而简化您的工作流程。 步骤 4 – 将 riot js 连接到 back4app 现在您的后端已设置好，是时候将您的 riot js 前端连接到 back4app。 选项 a：使用 parse sdk 安装 parse sdk： npm install parse 在您的 riot js 项目中初始化 parse： 创建一个文件（例如， src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // insert your actual back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 在 riot 标签中使用 parse： 创建一个 riot 标签（例如， items riot ) 来获取和显示项目： items { item get("title") } — { item get("description") } 选项 b：使用 rest 或 graphql api 如果 parse sdk 不适用，通过 api 调用执行 crud 操作。例如，使用 rest 检索项目： // rest api example to get items async function fetchitems() { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('fetched items ', data results); } catch (error) { console error('error fetching items ', error); } } fetchitems(); 根据需要将这些 api 调用集成到您的 riot js 标签中。 步骤 5 – 保护您的后端 配置访问控制列表 (acls) 通过在对象上设置 acl 来保护您的数据。例如，创建一个私有项目： async function createprivateitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // define acl only the owner has read/write access const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (error) { console error('error saving item ', error); } } 调整类级别权限 (clps) 在您的 back4app 仪表板中，为每个集合配置 clp，以确保只有经过身份验证或授权的用户可以访问敏感数据。 步骤 6 – 用户身份验证 配置用户帐户 riot js 应用程序可以使用 back4app 内置的 parse 用户类处理用户注册和登录。以下是用户注册的示例 riot 标签： sign up 类似的策略可以应用于登录和会话管理。可以在您的 back4app 控制面板中设置社交登录、电子邮件验证或密码恢复等附加功能。 第 7 步 – 部署您的 riot js 前端 back4app 的 web 部署功能允许您通过链接您的 github 存储库来托管您的 riot js 应用程序。按照以下步骤部署您的生产构建： 7 1 构建您的生产文件 在终端中打开您的项目目录。 运行您的构建命令： npm run build 这会创建一个 build 文件夹，包含优化的静态文件（html、js、css、图像）。 确认构建： 验证 build 文件夹是否包含 index html 和所需的资产目录。 7 2 组织并推送您的代码到 github 您的代码库应包含完整的 riot js 前端源代码。一个典型的结构可能是 basic crud app riotjs frontend/ \| node modules/ \| public/ \| └── index html \| src/ \| ├── app riot \| ├── parseconfig js \| └── tags/ \| ├── items riot \| └── auth riot \| package json \| readme md 示例 src/parseconfig js // src/parseconfig js import parse from 'parse'; // insert your actual back4app keys here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 示例 src/app riot riot js crud app 提交并推送你的代码 初始化一个 git 仓库（如果尚未完成）： git init 添加你的文件： git add 提交你的更改： git commit m "riot js 前端的初始提交" 创建一个 github 仓库（例如， basic crud app riotjs frontend ) 并推送你的代码： git remote add origin https //github com/your username/basic crud app riotjs frontend git git push u origin main 7 3 将您的 github 仓库与 back4app 网络部署集成 打开网络部署： 登录到您的 back4app 控制面板，选择您的项目 ( basic crud app riotjs ），然后点击 网络部署 连接到 github： 按照提示链接您的 github 账户和仓库。 选择您的仓库和分支： 选择您的仓库（例如， basic crud app riotjs frontend ) 和适当的分支（如 main )。 7 4 部署配置 构建命令： 如果您的代码库缺少预构建的 build 文件，请指定构建命令（例如， npm run build )。back4app 将执行它。 输出目录： 将其设置为 build 以指示您的静态文件所在的位置。 环境变量： 在您的配置中包含任何必要的变量（例如 api 密钥）。 7 5 docker化您的 riot js 应用（可选） 如果您更喜欢容器化部署，请在您的项目中添加一个 dockerfile ： \# use an official node image to build the app from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the entire app and build it copy run npm run build \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 如果您选择此路线，请在您的 web 部署设置中选择 docker 选项。 7 6 启动您的应用程序 部署： 在配置您的设置后，点击 部署 按钮 监控过程： back4app 将获取您的代码，执行构建命令，并在容器中部署您的应用程序 获取您的 url： 一旦部署，back4app 提供一个 url，您的 riot js 应用程序在此托管 7 7 验证您的部署 访问 url： 在您的浏览器中打开提供的 url 测试应用： 确认所有路由和资源（css、javascript、图像）正常工作 故障排除： 如果出现任何问题，请使用浏览器开发工具和 back4app 日志 第8步 – 总结与未来方向 恭喜你！你已经使用riot js和back4app构建了一个功能齐全的crud应用程序。 你设置了一个名为 basic crud app riotjs 的项目，为items和users设计了一个强大的数据库架构，并通过admin app管理你的数据。 你集成了riot js前端，并实施了acl等安全措施。 下一步： 增强前端： 添加详细视图、搜索功能和实时更新等功能。 扩展功能： 探索高级后端操作，如云函数或集成第三方api。 深化学习： 访问 back4app文档 https //www back4app com/docs 和其他资源，以优化和扩展你的应用程序。 通过这些步骤，你现在具备了使用riot js和back4app构建可扩展crud应用程序的专业知识。祝你编码愉快！