如何使用 Solid 创建 CRUD 应用？

概述 在本教程中，您将学习如何使用 solidjs 开发一个完整的 crud（创建、读取、更新、删除）应用程序。 我们将使用 back4app 作为我们的后端服务，使您能够轻松管理数据。本指南将引导您建立一个 back4app 项目，设计一个灵活的数据架构，并在 solidjs 应用程序中编写 crud 操作。 首先，您将设置一个名为 basic crud app solidjs 的 back4app 项目。该项目提供了一个强大且无模式的数据存储环境。您可以通过手动创建集合和字段或借助 back4app 的 ai agent 来定义数据模型。 接下来，您将使用用户友好的 back4app 管理应用程序来处理后端数据。最后，您将通过 parse javascript sdk（或根据需要通过 rest/graphql api）将 solidjs 应用程序与 back4app 集成，同时实施安全访问控制。 在本教程结束时，您将拥有一个生产就绪的 solidjs 应用程序，能够执行基本的 crud 功能，并具备安全的用户身份验证和数据管理。 您将学习的内容 如何创建一个基于solidjs的crud应用程序，配备现代无代码后端。 设计可扩展后端并将其与您的solidjs应用程序连接的最佳实践。 如何导航back4app管理应用程序以简化数据操作。 部署策略，包括docker容器化，以无缝启动您的solidjs应用程序。 先决条件 在开始之前，请确保您拥有： 一个具有活跃项目的back4app账户。 需要帮助？访问 开始使用back4app https //www back4app com/docs/get started/new parse app 。 为solidjs设置的开发环境。 我们建议使用visual studio code或任何首选编辑器，以及node js（v14或更高版本）。 solidjs、现代javascript和restful api的基本知识。 如有需要，请参考 solidjs文档 https //www solidjs com/docs 。 步骤1 – 项目初始化 设置您的 back4app 项目 登录您的 back4app 账户。 点击您的仪表板上的“新应用”按钮 。 命名您的项目： basic crud app solidjs 并按照提示完成设置。 创建新项目 创建项目后，它将出现在您的仪表板上，为您的后端奠定基础。 步骤 2 – 制作您的数据架构 设计数据结构 对于这个crud应用程序，您将在back4app项目中设置几个集合。以下是所需的主要集合和字段的示例。 1\ 集合：项目 此集合存储有关每个项目的信息。 字段 类型 目的 id 对象id 自动生成的唯一标识符。 标题 字符串 物品名称。 描述 字符串 项目的简要描述。 创建于 日期 添加项目的时间戳。 更新时间 日期 最后更新的时间戳。 2\ 收集：用户 此集合管理用户凭据和身份验证数据。 字段 类型 目的 id 对象id 自动生成的唯一标识符。 用户名 字符串 唯一用户标识符。 电子邮件 字符串 独特的电子邮件地址。 密码哈希 字符串 用于安全访问的加密密码。 创建于 日期 账户创建时间戳。 更新时间 日期 上次账户更新的时间戳。 您可以通过 back4app 仪表板创建这些集合并添加字段。 创建新类 要添加新字段，请选择适当的数据类型，设置字段名称，必要时分配默认值，并在必要时将其标记为必填。 创建列 使用 back4app ai 助手进行模式创建 集成的 back4app ai 助手可以根据您的指示自动创建数据模式，节省您的时间并确保一致性。 如何使用 ai 助手： 打开 ai 助手： 通过 back4app 仪表板中的项目设置访问它。 详细描述您的数据模型： 输入所需集合和字段的详细描述。 确认设置： 查看建议的模式并批准以完成配置。 示例提示 create two collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) 这种基于人工智能的方法简化了您的架构创建过程，确保优化的数据模型。 步骤 3 – 激活管理仪表板和管理数据操作 管理仪表板简介 back4app 管理仪表板提供了一个无代码界面，用于高效的后端管理。其拖放功能使得执行 crud 任务（如添加、查看、更新和删除记录）变得简单。 启用管理仪表板 前往“更多”菜单 在您的 back4app 仪表板中。 选择“管理员应用” 并点击 “启用管理员应用。” 设置您的管理员凭据 通过创建初始管理员帐户。这也将建立必要的角色（如 b4aadminuser ) 和系统集合。 启用管理员应用 激活后，登录管理仪表板以管理您应用的数据。 管理员应用仪表板 在管理仪表板中处理 crud 操作 在仪表板中，您可以： 添加记录： 在任何集合（例如，项目）中使用“添加记录”功能输入新数据。 查看/编辑记录： 点击条目以检查或修改其详细信息。 删除记录： 删除过时或不需要的条目。 此界面简化了数据管理，提供高效且直观的体验。 步骤 4 – 将您的 solidjs 应用程序与 back4app 连接 在后端就位后，下一步是将您的 solidjs 应用程序链接到 back4app。 选项 a：使用 parse javascript sdk 安装 parse javascript sdk 在您的项目目录中运行以下命令 npm install parse 在您的应用程序中配置 parse 创建一个配置文件（例如， parseconfig js ) // parseconfig js import parse from 'parse'; parse initialize("your application id", "your javascript key"); parse serverurl = 'https //parseapi back4app com'; export default parse; 3\ implement crud operations in solidjs here’s an example solidjs service for managing items ```javascript // itemsservice js import parse from ' /parseconfig'; export const fetchitems = async () => { try { const items = parse object extend("items"); const query = new parse query(items); const results = await query find(); return results; } catch (error) { console error("error retrieving items ", error); } }; export const additem = async (title, description) => { const items = parse object extend("items"); const item = new items(); item set("title", title); item set("description", description); try { await item save(); console log("item added successfully "); } catch (error) { console error("error adding item ", error); } }; export const updateitem = async (objectid, newtitle, newdescription) => { const items = parse object extend("items"); const query = new parse query(items); try { const item = await query get(objectid); item set("title", newtitle); item set("description", newdescription); await item save(); console log("item updated successfully "); } catch (error) { console error("error updating item ", error); } }; export const deleteitem = async (objectid) => { const items = parse object extend("items"); const query = new parse query(items); try { const item = await query get(objectid); await item destroy(); console log("item deleted successfully "); } catch (error) { console error("error deleting item ", error); } }; 选项 b：利用 rest 或 graphql api 如果您不想使用 parse sdk，您可以通过 rest 执行 crud 操作。例如，以下是如何使用 rest api 获取项目的示例： export const fetchitemsrest = async () => { try { const response = await fetch("https //parseapi back4app com/classes/items", { method "get", headers { "x parse application id" "your application id", "x parse rest api key" "your rest api key", }, }); const data = await response json(); return data results; } catch (error) { console error("error fetching items via rest ", error); } }; 根据需要将这些 api 调用集成到您的 solidjs 组件中。 步骤 5 – 增强后端安全性 配置访问控制列表 (acls) 通过为每个对象设置 acl 来保护您的数据。例如，要限制某个项目，使其仅由所有者访问： import parse from ' /parseconfig'; export const addprivateitem = async (title, description, owner) => { const items = parse object extend("items"); const item = new items(); item set("title", title); item set("description", description); const acl = new parse acl(); acl setreadaccess(owner, true); acl setwriteaccess(owner, true); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { await item save(); console log("private item added "); } catch (error) { console error("error saving private item ", error); } }; 设置类级权限 (clps) 在您的 back4app 仪表板中配置 clp，以强制执行默认访问限制，确保只有授权用户可以与某些集合进行交互。 步骤 6 – 实现用户身份验证 管理用户帐户 back4app 使用内置的 parse 用户集合进行身份验证。在您的 solidjs 应用中，处理用户注册和登录如下： import parse from ' /parseconfig'; export const registeruser = async (username, password, email) => { const user = new parse user(); user set("username", username); user set("password", password); user set("email", email); try { await user signup(); console log("user registered successfully!"); } catch (error) { console error("registration error ", error); } }; export const loginuser = async (username, password) => { try { const user = await parse user login(username, password); console log("logged in as ", user get("username")); } catch (error) { console error("login error ", error); } }; 可以采用类似的策略进行会话管理、密码重置和其他身份验证功能。 步骤 7 – 部署您的 solidjs 应用程序 back4app 简化了部署过程。您可以通过多种方法部署您的 solidjs 应用程序，包括 docker。 7 1 准备您的应用程序 构建您的应用程序： 使用您的包管理器编译您的 solidjs 应用程序。例如： npm run build 检查构建输出： 确保构建文件夹包含所有必要的文件。 7 2 组织您的项目结构 一个典型的项目结构可能如下所示： basic crud app solidjs/ \| public/ \| | index html \| src/ \| | components/ \| | | app jsx \| | services/ \| | | parseconfig js \| | | itemsservice js \| | | authservice js \| | index jsx \| package json \| readme md 7 3 将您的应用程序 docker 化 如果您希望将应用程序容器化，请在项目根目录中创建一个 dockerfile ： \# use a lightweight node image from node 16 alpine \# set the working directory workdir /app \# copy package files and install dependencies copy package json package lock json / run npm install \# copy the rest of the application code copy \# build the application run npm run build \# expose the port (adjust if needed) expose 3000 \# serve the built application cmd \["npx", "serve", "build"] 7 4 使用 back4app web 部署 连接您的 git 仓库： 确保您的 solidjs 项目托管在 github 上。 配置部署： 在您的 back4app 仪表板中，选择 web deployment ，链接您的仓库（例如， basic crud app solidjs ），并选择适当的分支。 设置构建命令： 定义构建命令（例如， npm run build ）并指定输出目录。 部署您的应用程序： 点击 deploy 并监控日志，直到您的应用程序上线。 第 8 步 – 最后的想法和未来的增强 干得好！您成功创建了一个与 back4app 集成的 solidjs crud 应用程序。 您设置了一个名为 basic crud app solidjs 的项目，定义了您的 items 和 users 集合，并通过 back4app 管理仪表板管理数据。 此外，您使用 parse javascript sdk（或 rest/graphql）连接了您的 solidjs 应用程序，并采取了严格的安全措施。 下一步： 扩展应用程序： 添加高级功能，如搜索过滤器、详细项目视图或实时数据更新。 增强后端： 尝试云函数、第三方 api 集成或基于角色的访问管理。 了解更多： 深入了解 back4app 文档 https //www back4app com/docs 和其他 solidjs 教程，以进一步完善您的应用程序。 祝您编码愉快，祝您的 solidjs crud 项目好运！