用 Inferno.js 构建 CRUD 应用：全面指南

概述 本指南将向您展示如何使用 inferno js 构建一个功能齐全的 crud（创建、读取、更新、删除）应用程序。 您将通过开发一个有效操作和更新信息的 crud 系统来学习如何处理基本数据操作。 我们的后端基础由 back4app 提供支持，您将在此建立一个名为 basic crud app infernojs 的项目，以无缝管理您的数据。 您将首先设置您的 back4app 项目，并通过定义类和字段（手动或使用 back4app ai 助手）设计一个可扩展的数据库架构。这个过程确保您的数据结构足够强大，以支持所有 crud 任务。 接下来，您将利用 back4app 管理界面，这是一个无代码的拖放工具，使数据管理变得简单。 最后，您将使用 sdk（如果适合您的设置）或通过 api 调用将您的 inferno js 前端与 back4app 连接，同时采用严格的访问控制以确保安全。 在本教程结束时，您将拥有一个具有用户身份验证、动态数据处理和响应式界面的生产级 web 应用程序。 核心见解 掌握在 back4app 上使用强大后端的 crud 功能。 了解如何构建可扩展的数据库架构，并将其与您的 inferno js 前端集成。 探索一个可视化管理工具，以轻松执行创建、读取、更新和删除操作。 学习部署策略，包括使用 docker 进行容器化。 要求 一个 back4app 账户和一个新创建的项目。 如果您需要指导，请查看 back4app 入门指南 https //www back4app com/docs/get started/new parse app 一个 inferno js 开发环境。 使用您最喜欢的 inferno 启动器或模板。确认已安装 node js（版本 14 或更高）。 对 javascript、inferno js 和 rest api 原则有基本了解。 有关更多详细信息，请查阅 inferno 文档 https //infernojs org/docs/introduction 在开始之前，请确保您拥有： 步骤 1 – 初始化您的项目 启动一个新的 back4app 项目 登录您的 back4app 账户。 从您的仪表板中选择 “新应用” 选项 。 命名您的项目： basic crud app infernojs 并按照屏幕上的步骤完成创建。 创建新项目 创建后，您的项目会出现在仪表板中，为您的应用提供一个坚实的后端平台。 步骤 2 – 制作数据库架构 定义您的数据模型 对于这个crud应用程序，您将建立几个类。以下是两个基本类的示例及其字段，设置以支持crud操作。 1\ 项目类别 字段 类型 细节 id 对象id 自动生成的主键。 标题 字符串 该项目的标题。 描述 字符串 对该项目的简短说明。 创建于 日期 标记项目创建时间的时间戳。 更新于 日期 最近更新的时间戳。 2\ 用户类 字段 类型 细节 id 对象id 自动生成的主键。 用户名 字符串 用户的唯一标识符。 电子邮件 字符串 用户的唯一电子邮件地址。 密码哈希 字符串 用于安全身份验证的加密密码。 创建于 日期 账户创建的时间戳。 更新于 日期 上次账户更新的时间戳。 在 back4app 仪表板上手动创建这些类，选择“新建类”并添加必要的列。 创建新类 您可以通过选择数据类型、提供名称以及设置默认值或要求来定义每个字段。 创建列 利用 back4app ai 助手进行模式设置 back4app ai 助手通过根据您的描述自动生成类来简化模式创建。 如何使用 ai 助手： 访问 ai 助手： 登录到您的 back4app 仪表板，并在设置中找到 ai 助手。 详细描述您的数据模型： 输入您所需的类和字段的全面描述。 审查并实施： 助手将提出类定义。确认并应用这些设置。 示例提示 create the following classes in my back4app app 1\) class items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto set) \ updated at date (auto update) 2\) class users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto set) \ updated at date (auto update) 使用 ai 助手简化了您的设置，确保一致性和效率。 步骤 3 – 激活管理界面和 crud 功能 介绍管理界面 back4app 管理界面是一个强大的无代码工具，提供拖放体验来管理您的后端。它允许您轻松执行 crud 操作。 激活管理员界面 前往“更多”部分 在你的back4app仪表板中。 点击“管理员应用” 然后点击 “启用管理员应用。” 通过创建初始管理员用户来设置你的管理员账户 。此过程会自动配置角色和基本系统类。 启用管理员应用 启用后，登录管理员界面以管理你的数据。 管理员应用仪表板 通过管理员界面执行crud操作 在管理员界面中，你可以： 创建条目： 在一个类（如项目）中使用“添加记录”选项插入新数据。 读取/修改条目： 点击任何记录以查看或更新其详细信息。 删除条目： 利用删除功能清除不需要的记录。 此界面通过简化所有crud任务大大增强了可用性。 步骤 4 – 将 inferno js 连接到 back4app 在通过管理界面配置好后端后，是时候集成你的 inferno js 前端了。 选项 a：使用 parse sdk 安装 parse sdk： npm install parse 在你的 inferno 应用中初始化 parse： 创建一个配置文件（例如， src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // 在这里插入你的 back4app 凭据 parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 在 inferno 组件中实现 parse： 例如，构建一个组件来检索和列出项目： // src/components/itemslist js import { component } from 'inferno'; import parse from ' /parseconfig'; class itemslist extends component { constructor(props) { super(props); this state = { items \[] }; } componentdidmount() { this loaditems(); } async loaditems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this setstate({ items results }); } catch (err) { console error("加载项目时出错：", err); } } render() { return ( \<div> \<h2>项目\</h2> \<ul> {this state items map(item => ( \<li key={item id}> {item get("title")} — {item get("description")} \</li> ))} \</ul> \</div> ); } } export default itemslist; 选项 b：使用 rest 或 graphql api 如果 parse sdk 不适合您的场景，您可以通过 rest 或 graphql 执行 crud 操作。例如，要使用 rest 检索项目： // rest api call to retrieve items const fetchitems = async () => { 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('items retrieved ', data results); } catch (err) { console error('error fetching items ', err); } }; fetchitems(); 根据需要将这些 api 调用嵌入到您的 inferno 组件中。 步骤 5 – 加强您的后端 实施访问控制列表 (acls) 通过分配 acl 确保数据安全。例如，要生成一个私有项目： async function createprivateitem(itemdata, owner) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // set acl so only the owner has access const acl = new parse acl(owner); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (err) { console error('error creating item ', err); } } 配置类级别权限 (clps) 在您的 back4app 控制面板中，调整每个类的 clp 以强制执行默认访问策略，确保只有授权用户可以与敏感数据交互。 步骤 6 – 管理用户身份验证 建立用户账户 back4app 利用用户类（通过 parse）处理身份验证。在您的 inferno js 应用中，实施注册和登录功能，如下所示： // src/components/auth js import { component } from 'inferno'; import parse from ' /parseconfig'; export class signup extends component { constructor(props) { super(props); this state = { username '', password '', email '' }; } handlesignup = async (e) => { e preventdefault(); const user = new parse user(); user set('username', this state username); user set('password', this state password); user set('email', this state email); try { await user signup(); alert('registration successful!'); } catch (err) { alert('sign up error ' + err message); } }; render() { return ( \<form onsubmit={this handlesignup}> \<input type="text" placeholder="username" value={this state username} oninput={e => this setstate({ username e target value })} /> \<input type="password" placeholder="password" value={this state password} oninput={e => this setstate({ password e target value })} /> \<input type="email" placeholder="email" value={this state email} oninput={e => this setstate({ email e target value })} /> \<button type="submit">sign up\</button> \</form> ); } } 类似的策略适用于登录和会话管理。可以在 back4app 仪表板中设置社交认证、电子邮件验证和密码恢复等附加功能。 步骤 7 – 部署您的 inferno js 前端 back4app 的 web 部署选项让您通过链接 github 存储库轻松托管您的 inferno js 前端。 7 1 为生产构建 在终端中打开您的项目目录。 运行生产构建命令： npm run build 此命令将您的应用程序编译到一个 build 文件夹中，包含优化的静态资产。 确认构建： 验证 build 文件夹是否包含 index html 文件和其他资产文件夹。 7 2 组织和上传您的代码 您的代码库应包括您 inferno js 前端的完整源代码。一个示例目录结构： basic crud app infernojs frontend/ \| node modules/ \| public/ \| ` index html \| src/ \| | app js \| | parseconfig js \| ` components/ \| | itemslist js \| ` auth js \| package json ` readme md 示例文件 src/parseconfig js // src/parseconfig js import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; src/app js // src/app js import { component } from 'inferno'; import parse from ' /parseconfig'; class app extends component { constructor(props) { super(props); this state = { items \[], newtitle "", newdescription "", editid null, edittitle "", editdescription "" }; } componentdidmount() { this loaditems(); } async loaditems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this setstate({ items results }); } catch (err) { console error("error loading items ", err); } } handleadd = async () => { const items = parse object extend("items"); const item = new items(); item set("title", this state newtitle); item set("description", this state newdescription); try { await item save(); this setstate({ newtitle "", newdescription "" }); this loaditems(); } catch (err) { console error("error adding item ", err); } } handledelete = async (id) => { try { const item = await parse object createwithoutdata("items", id); await item destroy(); this loaditems(); } catch (err) { console error("error deleting item ", err); } } startedit = (item) => { this setstate({ editid item id, edittitle item get("title"), editdescription item get("description") }); } handleupdate = async () => { try { const items = parse object extend("items"); const item = new items(); item id = this state editid; item set("title", this state edittitle); item set("description", this state editdescription); await item save(); this setstate({ editid null, edittitle "", editdescription "" }); this loaditems(); } catch (err) { console error("error updating item ", err); } } render() { return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div style={{ marginbottom '1rem' }}> \<h2>add new item\</h2> \<input type="text" placeholder="title" value={this state newtitle} oninput={e => this setstate({ newtitle e target value })} style={{ marginright '0 5rem' }} /> \<input type="text" placeholder="description" value={this state newdescription} oninput={e => this setstate({ newdescription e target value })} style={{ marginright '0 5rem' }} /> \<button onclick={this handleadd}>add item\</button> \</div> \<h2>items list\</h2> \<ul> {this state items map(item => ( \<li key={item id} style={{ marginbottom '1rem' }}> {this state editid === item id ? ( \<div> \<input type="text" value={this state edittitle} oninput={e => this setstate({ edittitle e target value })} style={{ marginright '0 5rem' }} /> \<input type="text" value={this state editdescription} oninput={e => this setstate({ editdescription e target value })} style={{ marginright '0 5rem' }} /> \<button onclick={this handleupdate}>save\</button> \<button onclick={() => this setstate({ editid null })} style={{ marginleft '0 5rem' }}> cancel \</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => this startedit(item)} style={{ marginleft '1rem' }}> edit \</button> \<button onclick={() => this handledelete(item id)} style={{ marginleft '0 5rem' }}> delete \</button> \</div> )} \</li> ))} \</ul> \</div> ); } } export default app; 将您的代码推送到 github 在您的项目文件夹中初始化 git： git init 暂存您的文件： git add 提交您的更改： git commit m "inferno js 前端的初始提交" 创建一个 github 仓库： 命名为 basic crud app infernojs frontend 推送您的项目： git remote add origin https //github com/your username/basic crud app infernojs frontend git git push u origin main 7 3 将 github 与 back4app web 部署连接 前往 web 部署： 登录 back4app，选择您的项目 ( basic crud app infernojs ），然后点击 web 部署 功能。 与 github 集成： 按照提示链接您的 github 账户，使 back4app 能够访问您的代码库。 选择您的代码库和分支： 选择代码库（例如， basic crud app infernojs frontend ）和包含您代码的分支（通常是 main ）。 7 4 部署设置 输入额外配置： 构建命令： 如果您的仓库缺少预构建的 构建 文件夹，请指定类似 npm run build 的命令。back4app将在部署期间执行此命令。 输出文件夹： 将输出设置为 构建 以便back4app知道您的静态文件所在的位置。 环境变量： 在配置设置中添加任何必要的变量（例如api密钥）。 7 5 将您的应用程序容器化 如果您选择容器化，请在您的仓库中包含一个 dockerfile ，类似于： \# use an official node image for the build stage from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy remaining files and build the app 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;"] 如果选择此方法，请在 back4app 中选择 docker 部署。 7 6 启动您的应用程序 点击部署： 一旦所有设置配置完成，点击 部署 按钮。 观看构建： back4app 将获取您的代码，构建您的项目，并在容器中部署它。 访问您的应用： 部署后，back4app 提供一个 url，您的 inferno js 应用在此处上线。 7 7 确认部署 访问提供的 url： 在您的浏览器中打开该 url。 测试功能： 确保应用加载，所有路由正常工作，资产（css、js、图像）按预期显示。 故障排除： 使用开发者工具检查错误。如果出现问题，请检查 back4app 日志并验证 github 设置。 第8步 – 总结与未来方向 恭喜你！你已经使用inferno js和back4app创建了一个完整的crud应用程序。 你设置了项目 basic crud app infernojs , 设计了数据类，并使用直观的管理界面进行数据管理。你的前端现在已连接并通过强大的访问控制进行了安全保护。 下一步： 增强用户界面： 扩展你的inferno js应用程序，增加详细视图、搜索功能和实时通知。 添加更多功能： 考虑实现额外的后端功能（例如云代码），集成第三方api，或引入基于角色的访问控制。 进一步探索： 深入了解 back4app文档 https //www back4app com/docs 和其他教程，以进行性能调优和自定义集成。 祝你编码愉快，未来的项目顺利！