Building a Basic CRUD Application with Cycle.js: A Comprehensive Guide

概述 本指南将引导您构建一个功能齐全的 crud（创建、读取、更新和删除）应用程序，使用 cycle js。 在本教程中，您将配置一个名为 basic crud app cyclejs 的 back4app 项目，它将作为您应用程序的强大后端。 您将学习设计可扩展的数据模型，通过直观的 back4app 管理应用程序管理数据，并使用 rest/graphql 调用将您的 cycle js 前端与 back4app 集成。 到最后，您将拥有一个生产就绪的 web 应用程序，能够执行 crud 操作，并具备用户身份验证和安全数据处理功能。 关键见解 构建一个功能齐全的 crud 系统，配备可靠的后端。 获得架构可扩展数据模型的实践经验。 利用拖放管理工具实现无缝数据管理。 通过 rest/graphql 将 cycle js 前端与 back4app 集成。 学习包括 docker 容器化在内的部署策略。 前提条件 在开始之前，请确保您拥有 一个具有活动项目的 back4app 账户。 如果您需要帮助，请查看 使用 back4app 入门 https //www back4app com/docs/get started/new parse app 一个 cycle js 开发环境。 使用像 create cycle app https //github com/cyclejs community/create cycle app 的工具，并确保安装 node js（版本 14 或更高）。 熟悉 javascript、cycle js 和 rest api。 如需复习，请查阅 cycle js 文档 https //cycle js org/ 步骤 1 – 项目初始化 创建一个新的 back4app 项目 登录到您的 back4app 账户。 按下仪表板上的“新应用”按钮 。 分配项目名称 basic crud app cyclejs 并按照设置提示进行操作。 创建新项目 创建后，您的项目将在仪表板上可见，准备进行后端配置和管理。 步骤 2 – 定义您的数据库架构 构建您的数据模型 对于这个 crud 应用程序，您将创建几个集合来管理您的数据。以下是包含基本字段和数据类型的示例集合。 1\ 项目集合 此集合将存储每个项目的详细信息。 字段 数据类型 描述 id 对象id 自动生成的唯一标识符。 标题 字符串 该项目的标题。 描述 字符串 该项目的简要总结。 创建于 日期 添加该项目的时间戳。 更新于 日期 最新更新的时间戳。 2\ 用户收集 此集合处理用户详细信息和身份验证。 字段 数据类型 描述 id 对象id 自动生成的唯一标识符。 用户名 字符串 用户的唯一标识符。 电子邮件 字符串 用户的电子邮件地址。 密码哈希 字符串 用于安全身份验证的加密密码。 创建于 日期 账户创建时间戳。 更新于 日期 最近更新的时间戳。 您可以通过 back4app 控制面板手动定义这些集合，方法是创建新类并配置相应的字段。 创建新班级 要添加字段，请选择数据类型，提供字段名称，选择性地设置默认值，并在需要时将字段标记为必填。 创建列 使用 back4app ai 代理自动化架构创建 back4app ai 代理通过根据提供的提示自动生成数据模型来简化架构创建。这确保了数据库设计的一致性和高效性。 利用 ai 代理的步骤： 访问 ai 代理： 登录到您的 back4app 仪表板，从菜单或项目设置中选择 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 控制面板中的 “更多” 菜单 选择 “管理员应用” 然后点击 “启用管理员应用。” 通过创建您的第一个管理员用户来设置您的管理员凭据 。此操作还将初始化系统角色（例如， b4aadminuser )。 启用管理员应用程序 激活后，登录管理员应用程序以开始管理您的集合。 管理员应用仪表板 通过管理员应用程序执行 crud 操作 在管理员应用程序中，您可以： 添加记录： 在任何集合（例如，项目）中点击 “添加记录” 按钮以插入新条目。 查看/修改记录： 选择现有记录以检查详细信息或修改字段。 删除记录： 使用删除选项丢弃不需要的条目。 这个用户友好的界面大大增强了您数据的管理和管理。 第 4 步 – 将 cycle js 与 back4app 集成 现在您的后端通过 back4app 正在运行，是时候将您的 cycle js 前端集成了。 选项：使用 rest/graphql api 我们将重点关注 rest api 调用以与您的后端进行交互。 以下是一个示例 cycle js 组件，它使用 cycle 的 http 驱动程序从您的 back4app 数据库中检索和显示项目。 示例：使用 cycle js 获取和显示项目 import xs from 'xstream'; import {run} from '@cycle/run'; import {div, h1, ul, li, input, button, makedomdriver} from '@cycle/dom'; import {makehttpdriver} from '@cycle/http'; function main(sources) { // intent capture add item interactions const addclick$ = sources dom select(' add') events('click'); // model make an http request to fetch items const request$ = xs of({ url 'https //parseapi back4app com/classes/items', category 'items', method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); // intent handle http responses const items$ = sources http select('items') flatten() map(res => res body results); // view render the items list const vdom$ = items$ startwith(\[]) map(items => div(\[ h1('items'), button(' add', 'add item'), ul( items map(item => li(`${item title} — ${item description}`) ) ) ]) ); return { dom vdom$, http request$ }; } const drivers = { dom makedomdriver('#app'), http makehttpdriver() }; run(main, drivers); 这段示例代码演示了如何使用 cycle js 执行 http get 请求以获取项目并动态渲染它们。 步骤 5 – 保护您的后端 应用访问控制列表 (acls) 通过定义 acl 来保护您的对象。例如，在创建私有项目时： async function createprivateitem(data, owneruser) { const newitem = { title data title, description data description }; // define acl restrict access to the owner only newitem acl = { \[owneruser id] { read true, write true }, ' ' { read false, write false } }; try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify(newitem) }); const result = await response json(); console log('created item ', result); } catch (error) { console error('error creating item ', error); } } 配置类级权限 (clps) 在 back4app 仪表板中，调整每个集合的 clp，以确保只有经过身份验证的用户可以访问敏感信息。 步骤 6 – 实施用户身份验证 设置帐户注册和登录 back4app利用用户类进行身份验证。使用rest api调用来管理您在cycle js应用程序中的用户注册和登录。 以下是处理用户注册的示例： async function signupuser(userdata) { try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ username userdata username, password userdata password, email userdata email }) }); const result = await response json(); alert('registration successful!'); return result; } catch (error) { alert('registration error ' + error message); } } 您可以复制类似的模式进行用户登录和会话管理。 第7步 – 使用web部署部署您的cycle js前端 back4app的web部署功能使您可以通过与github存储库的集成轻松托管您的cycle js应用程序。 7 1 准备您的生产构建 在终端中打开您的项目目录。 运行构建命令： npm run build 这将创建一个 build 目录，包含优化的静态文件。 确认构建： 确保 build 文件夹包含一个 index html 和相关的资产目录。 7 2 组织和上传您的源代码 您的 git 仓库应包含整个 cycle js 应用程序源代码。示例文件结构： basic crud app cyclejs frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── main js │ ├── httpdrivers js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md 示例文件： src/main js import xs from 'xstream'; import {run} from '@cycle/run'; import {div, h1, makedomdriver} from '@cycle/dom'; import {makehttpdriver} from '@cycle/http'; import itemslist from ' /components/itemslist'; function main(sources) { const itemsvtree$ = itemslist(sources); const vdom$ = itemsvtree$ map(tree => div(\[ h1('cycle js crud application'), tree ]) ); return { dom vdom$ }; } const drivers = { dom makedomdriver('#app'), http makehttpdriver() }; run(main, drivers); 提交到 github 初始化一个 git 仓库 （如果尚未完成）： git init 暂存你的文件： git add 提交你的工作： git commit m "cycle js 前端的初始提交" 创建一个 github 仓库 （例如， basic crud app cyclejs frontend ）。 推送你的仓库： git remote add origin https //github com/your username/basic crud app cyclejs frontend git git push u origin main 7 3 将您的代码库与网络部署链接 访问网络部署： 登录 back4app，导航到您的项目 ( basic crud app cyclejs ），并选择 网络部署 功能。 连接到 github： 按照提示链接您的 github 账户，以便 back4app 可以访问您的代码库。 选择代码库和分支： 选择您的代码库（例如， basic crud app cyclejs frontend ）和分支（通常是 main ）。 7 4 部署设置 构建命令： 如果您的代码库缺少预构建的 build 文件，请指定构建命令（例如， npm run build )。 输出目录： 将其设置为 build 以便 back4app 知道在哪里找到静态文件。 环境变量： 包括任何必要的 api 密钥或配置细节。 7 5 docker化您的 cycle js 应用程序 如果您选择 docker 部署，请将 dockerfile 添加到您的代码库中： \# use an official node image for building the app from node 16 alpine as build \# set working directory workdir /app \# copy dependency definitions copy package json / \# install dependencies run npm install \# copy the remaining files copy \# build the cycle js application run npm run build \# use nginx to serve the built files 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 将从 github 拉取您的代码，构建应用程序（如果已配置），并进行部署 访问您的应用程序： 一旦部署完成，back4app 将提供您实时 cycle js 应用程序的 url 7 7 测试您的部署 访问部署的 url： 在您的浏览器中打开提供的 url 确认功能： 确保所有路由和资源正确加载 必要时调试： 使用浏览器开发者工具并查看 back4app 部署日志以排查任何问题 第8步 – 总结与未来增强 恭喜你！你已经成功使用 cycle js 和 back4app 构建了一个 crud 应用程序。 你已经设置了一个名为 basic crud app cyclejs , 定义了 items 和 users 的数据库架构，并通过直观的管理应用程序管理你的数据。 此外，你还使用 rest/graphql 将 cycle js 前端与后端集成，并通过适当的访问控制保护了你的数据。 下一步： 扩展你的前端： 添加更高级的视图、过滤或实时更新。 集成额外的后端功能： 考虑添加云函数、第三方 api 或基于角色的访问控制。 进一步学习： 探索 back4app 文档 https //www back4app com/docs ，以获取有关性能调优和自定义集成的更多见解。 通过本指南，你现在具备了使用 back4app 为你的 cycle js 应用程序构建可扩展 crud 后端的技能。祝你编码愉快！