构建一个使用 Qwik 的 CRUD 应用程序：全面教程

概述 在本指南中，您将学习如何使用 qwik 构建一个完全功能的 crud（创建、读取、更新、删除）应用程序。 我们将演示管理数据的基本操作，同时将您的应用程序连接到 back4app。最初，您将设置一个名为 basic crud app qwik 的 back4app 项目，以作为数据管理的后端。 接下来，您将通过定义集合和字段来配置一个可扩展的数据库——可以手动进行，也可以借助 back4app ai agent。这确保了您的数据模型能够高效地处理 crud 任务。 然后，您将利用 back4app 管理应用程序，这是一个用户友好的拖放界面，轻松管理您的集合。该工具通过提供直观的方式来创建、更新和删除记录，从而简化数据操作。 最后，您将使用 rest 或 graphql api 将您的 qwik 前端与 back4app 集成，并实施强大的安全控制。 在本教程结束时，您的生产就绪应用程序不仅能够处理 crud 操作，还将支持用户身份验证和安全数据访问。 基本见解 掌握开发crud应用程序的艺术，能够有效地使用可靠的后端处理数据。 发现设计可适应后端的方法，并将其与qwik前端结合，以增强用户交互性。 探索拖放式管理界面（back4app管理应用）的优势，以简化crud功能。 了解部署策略，包括docker容器化，以快速启动您的web应用程序。 先决条件 在开始之前，请确保您拥有： 一个具有新项目设置的back4app账户。 访问 back4app入门指南 https //www back4app com/docs/get started/new parse app 以获取帮助。 一个qwik开发环境。 使用 qwik文档 https //qwik builder io/docs/getting started/ 设置您的项目。确保您已安装node js（版本14或更高）。 对javascript、qwik和rest api有基本了解。 如果您需要复习，请查阅 qwik文档 https //qwik builder io/docs/ 。 步骤1 – 项目初始化 建立一个新的back4app项目 登录到您的 back4app 账户。 点击“新应用” 在您的仪表板中。 输入项目名称： basic crud app qwik 并按照说明创建您的项目。 创建新项目 您的新项目将出现在您的仪表板上，形成您应用程序的后端基础。 步骤 2 – 设计您的数据库架构 构建您的数据模型 对于这个 crud 应用，您将定义几个集合。以下是 outlining 处理 crud 操作所需字段和类型的示例，以帮助您创建有效的数据库架构。 1\ 项目集合 此集合包含每个项目的详细信息。 字段 数据类型 描述 id 对象id 自动生成的主键。 标题 字符串 物品名称。 描述 字符串 关于该项目的简要细节。 创建于 日期 项目创建的时间戳。 更新于 日期 最后更新的时间戳。 2\ 用户收集 此集合存储用户详细信息和认证信息。 字段 数据类型 描述 id 对象id 自动生成的主键。 用户名 字符串 用户的唯一标识符。 电子邮件 字符串 用户的唯一电子邮件地址。 密码哈希 字符串 登录的加密密码。 创建于 日期 账户创建时间戳。 更新于 日期 用户账户的最后更新时间戳。 您可以通过 back4app 控制面板手动添加这些集合，方法是创建新类并根据需要配置每一列。 创建新类 通过选择类型、提供名称以及配置默认值和约束，轻松添加字段。 创建列 利用 back4app ai 代理进行模式创建 back4app ai 代理可以根据描述性提示自动生成您的模式。此功能加速项目设置并确保一致性。 如何操作 ai 代理： 访问 ai 代理： 在您的 back4app 仪表板或项目设置中找到它。 详细描述您的数据模型： 提供一个描述您所需集合和字段的提示。 审查并实施： 评估生成的模式建议并将其应用于您的项目。 示例提示 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) 这种方法节省时间，并确保为您的应用程序量身定制的良好结构模式。 步骤 3 – 激活管理应用程序并管理 crud 操作 管理应用程序简介 back4app 管理应用程序提供了一个无代码界面来管理后端数据。其直观的拖放功能使您能够轻松执行 crud 操作。 如何启用管理员应用 访问“更多”菜单 从您的 back4app 控制面板 选择“管理员应用” 然后点击 “启用管理员应用。” 设置您的管理员凭据 通过创建一个管理员用户，这将自动建立角色和系统集合 启用管理员应用 激活后，登录管理员应用以轻松管理您的数据 管理员应用仪表板 通过管理员应用执行 crud 操作 添加记录： 在任何集合（例如，项目）中使用“添加记录”按钮以创建新条目 查看/编辑记录： 点击任何记录以检查其详细信息或进行更新 删除记录： 利用删除功能消除过时的条目 此工具简化了数据操作，确保顺畅的用户体验 步骤 4 – 将 qwik 连接到 back4app 现在您的后端已配置，是时候将您的 qwik 前端与 back4app 集成 选项：使用 rest 或 graphql api 我们将使用 rest api 调用与 back4app 进行交互 示例：通过 rest 在 qwik 中获取项目 创建一个 qwik 组件（例如， src/components/itemslist tsx ）来检索和显示项目： // src/components/itemslist tsx import { component$, usetask$ } from '@builder io/qwik'; export const itemslist = component$(() => { const items = \[]; usetask$(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(); items push( data results); } catch (error) { console error('error retrieving items ', error); } }); return ( \<div> \<h2>items\</h2> \<ul> {items map((item any) => ( \<li key={item objectid}> {item title} — {item description} \</li> ))} \</ul> \</div> ); }); export default itemslist; 该组件使用 fetch api 调用 back4app 的 rest 端点，检索项目列表。 对于其他 crud 操作（创建、更新、删除），将类似的 rest 调用集成到您的 qwik 组件中。 步骤 5 – 保护您的后端 实施访问控制列表（acls） 通过在对象上设置 acl 来增强数据安全性。例如，限制对特定项目的访问： async function createprivateitem(itemdata { title string; description string }, ownerid string) { try { const response = await fetch('https //parseapi back4app com/classes/items', { 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({ title itemdata title, description itemdata description, acl { \[ownerid] { read true, write true }, ' ' { read false, write false } } }) }); const result = await response json(); console log('created private item ', result); } catch (error) { console error('error creating private item ', error); } } 配置类级权限（clps） 在 back4app 仪表板中，调整每个集合的 clp，以强制执行默认访问策略，确保只有授权用户可以与敏感数据交互。 步骤 6 – 用户认证 建立用户账户 back4app 利用 parse 的用户类来管理认证。在您的 qwik 应用中，实施用户注册和登录，如下所示。 示例：qwik中的注册组件 // src/components/auth tsx import { component$, usestore } from '@builder io/qwik'; export const signup = component$(() => { const store = usestore({ username '', password '', email '' }); const handlesignup = async (e event) => { e preventdefault(); try { const response = await fetch('https //parseapi back4app com/users', { 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 store username, password store password, email store email }) }); const data = await response json(); alert('user successfully registered!'); } catch (error any) { alert('registration error ' + error message); } }; return ( \<form onsubmit$={handlesignup}> \<input type="text" placeholder="username" value={store username} oninput$={(e) => (store username = (e target as htmlinputelement) value)} /> \<input type="password" placeholder="password" value={store password} oninput$={(e) => (store password = (e target as htmlinputelement) value)} /> \<input type="email" placeholder="email" value={store email} oninput$={(e) => (store email = (e target as htmlinputelement) value)} /> \<button type="submit">register\</button> \</form> ); }); 类似的方法可以应用于登录和会话管理。可以通过back4app配置社交认证、电子邮件验证和密码恢复等附加选项。 步骤7 – 通过web部署部署您的qwik前端 back4app的web部署服务通过链接您的github存储库，实现了qwik前端的无缝托管。按照以下步骤部署您的网站： 7 1 创建您的生产构建 在终端中打开您的项目文件夹。 运行构建命令： npm run build 这将生成一个 build 文件夹，其中包含优化的静态资源。 确认构建： 确保 build 文件夹中有一个 index html 文件以及相关的资产目录。 7 2 组织并提交您的代码到 github 您的代码库应包括 qwik 前端的完整源代码。一个典型的结构可能是： basic crud app qwik frontend/ \| node modules/ \| public/ \| └── index html \| src/ \| ├── root tsx \| ├── entry tsx \| └── components/ \| ├── itemslist tsx \| └── auth tsx \| package json \| readme md 示例： src/root tsx // src/root tsx import { component$ } from '@builder io/qwik'; import itemslist from ' /components/itemslist'; export default component$(() => { return ( \<div style={{ padding '2rem' }}> \<h1>crud application\</h1> \<itemslist /> \</div> ); }); 提交您的代码 初始化 git（如果尚未完成）： git init 暂存您的文件： git add 提交您的更改： git commit m "初始提交 qwik 前端代码" 创建一个 github 仓库： 例如，命名为 basic crud app qwik frontend 将您的代码推送到 github： git remote add origin https //github com/your username/basic crud app qwik frontend git git push u origin main 7 3 将您的仓库连接到 web 部署 访问 web 部署： 登录到您的 back4app 控制面板，选择您的项目（basic crud app qwik），并导航到 web 部署 部分。 链接到 github： 按照屏幕上的提示连接您的 github 账户。 选择仓库和分支： 选择您的仓库（例如， basic crud app qwik frontend ）和相关分支（例如， main ）。 7 4 部署配置 指定附加设置： 构建命令： 如果没有包含预构建的 构建 文件，请设置命令（例如， npm run build )。 输出目录： 将输出目录定义为 build 。 环境变量： 插入任何必要的变量，如 api 密钥。 7 5 使用 docker 对您的 qwik 应用进行容器化（可选） 如果您选择 docker，请包含一个类似于的 dockerfile ： \# use node for building the app from node 16 alpine as build workdir /app copy package json / run npm install copy run npm run build \# serve the built app with nginx 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： 部署后，将提供一个 url，您的应用程序将在该 url 上托管。 7 7 验证您的部署 访问 url： 在您的浏览器中打开提供的链接。 测试功能： 检查所有路由和资源是否正确加载。 必要时调试： 使用浏览器开发工具和 back4app 日志来排除问题。 第8步 – 总结与未来增强 做得好！您已经成功构建了一个完整的crud应用程序，使用了qwik和back4app。 您建立了项目 basic crud app qwik , 为项目中的项目和用户设计了详细的数据库架构，并通过管理应用程序管理数据。 此外，您将qwik前端连接到后端，并应用了强大的安全措施。 下一步： 扩展您的前端： 通过详细的项目视图、搜索功能或实时更新等功能增强您的qwik应用程序。 增加更多功能： 考虑集成高级后端逻辑、第三方api或基于角色的访问控制。 探索更多资源： 参考 back4app文档 https //www back4app com/docs 和更多的qwik教程，以深入了解性能改进和自定义集成。 通过遵循本教程，您现在掌握了创建