如何用JavaScript构建CRUD应用?

概述 在本教程中，您将学习如何使用javascript构建一个完整的crud（创建、读取、更新、删除）应用程序。 我们将利用back4app轻松管理您的后端数据。本指南涵盖了基本的crud操作，从配置back4app项目到将您的javascript应用程序与parse javascript sdk或rest api集成。 首先，您将在back4app上设置一个名为 basic crud app javascript 的项目，它提供了强大的后端解决方案。 然后，您将定义您的数据架构——可以手动定义，也可以借助back4app的ai代理——以满足您应用程序的需求。 接下来，您将通过用户友好的back4app管理应用程序来管理您的后端，使您能够通过简单的拖放界面执行数据操作。 最后，您将把您的javascript应用程序连接到back4app，实现安全的用户身份验证和基本的crud功能。 在本指南结束时，您将构建一个生产就绪的javascript应用程序，能够执行所有基本的crud操作，并具有安全的访问控制。 要记住的关键点 掌握如何开发基于javascript的crud应用程序，并具有可扩展的后端。 了解如何构建您的后端并将其与javascript代码无缝集成。 学习使用back4app的管理应用程序进行简单的数据操作和crud操作。 探索部署选项，包括使用docker进行容器化，以启动您的javascript应用程序。 先决条件 在您开始之前，请确保您拥有： 一个配置好的back4app账户。 需要帮助吗？访问 开始使用back4app https //www back4app com/docs/get started/new parse app 。 一个javascript开发环境。 您可以使用visual studio code或任何其他首选编辑器，以及node js（版本14或更高）。 对javascript、现代框架和rest api的基本知识。 如有需要，请参考 javascript文档 https //developer mozilla org/en us/docs/web/javascript 。 步骤 1 – 初始化您的项目 设置新的 back4app 项目 登录到您的 back4app 账户。 点击“新应用”按钮 在您的仪表板上。 输入项目名称： basic crud app javascript 并完成设置过程。 创建新项目 项目创建后，它会出现在您的仪表板上，为您的后端配置奠定基础。 步骤 2 – 制定您的数据架构 设计数据结构 对于我们的 crud 应用，我们将在 back4app 上建立两个主要类（集合）。这些类及其字段对于处理必要的 crud 操作至关重要。 1\ 项目 集合 此集合存储每个项目的详细信息。 字段 类型 细节 id 对象id 自动生成的唯一标识符。 标题 字符串 项目名称。 描述 字符串 该项目的简要总结。 创建于 日期 项目创建的时间戳。 更新时间 日期 最新更新的时间戳。 2\ 用户 集合 此集合处理用户凭据和身份验证详细信息。 字段 类型 细节 id 对象id 自动生成的唯一id。 用户名 字符串 用户的唯一标识符。 电子邮件 字符串 用户的唯一电子邮件地址。 密码哈希 字符串 用于安全身份验证的哈希密码。 创建于 日期 账户创建时间戳。 更新时间 日期 最后账户更新时间戳。 您可以直接在 back4app 仪表板中创建这些类及其字段。 创建新类 您可以通过选择类型、命名字段、分配默认值和设置必填选项来添加列。 创建列 使用 back4app 的 ai 代理进行模式生成 back4app ai 代理通过根据您的描述自动生成数据模型来简化模式创建。此功能加快了项目设置，并确保您的模式与 crud 要求一致。 如何使用 ai 代理： 打开 ai 代理： 登录到您的 back4app 控制面板，并在项目设置中找到 ai 代理。 描述您的模式： 输入所需集合和字段的详细描述。 审核并确认： 处理后，ai 代理将显示建议的模式。审核并确认以应用它。 示例描述 create the following 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 – 启用管理员应用程序并执行 crud 操作 管理员应用程序概述 back4app 管理员应用程序提供了一个无代码界面，用于高效的后端数据管理。凭借其直观的拖放功能，您可以轻松执行 crud 操作，如添加、查看、修改和删除记录。 激活管理员应用程序 前往您的 back4app 仪表板中的 “更多” 部分 。 选择 “管理员应用程序” 并点击 “启用管理员应用程序。” 通过设置初始管理员帐户来配置您的管理员凭据 。这还建立了角色，如 b4aadminuser 和系统类。 启用管理员应用程序 激活后，登录管理员应用程序以管理您应用程序的数据。 管理员应用程序仪表板 通过管理员应用程序管理 crud 操作 在管理员应用程序中，您可以： 插入记录： 使用“添加记录”选项在像 项目 的集合中创建新条目。 查看和编辑记录： 点击任何记录以查看详细信息或修改字段。 删除记录： 删除任何不再需要的记录。 这个简单的界面简化了数据管理并增强了整体可用性。 步骤 4 – 将您的 javascript 应用程序与 back4app 连接 在后端设置完成后，下一步是将您的 javascript 应用程序与 back4app 集成。 选项 a：使用 parse javascript sdk 包含 parse sdk： 如果您使用 npm，请运行以下命令安装 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'; 3\ implement crud functions for example, create a module to handle item operations ```javascript // itemsservice js import parse from 'parse'; export const getitems = async () => { const query = new parse query("items"); try { const results = await query find(); return results; } catch (error) { console error("error retrieving items ", error); return \[]; } }; export const createitem = async (title, description) => { const item = parse object extend("items"); const item = new item(); item set("title", title); item set("description", description); try { await item save(); console log("item created successfully "); } catch (error) { console error("error creating item ", error); } }; export const updateitem = async (objectid, newtitle, newdescription) => { 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 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 如果您不想使用 parse sdk，可以通过 rest 调用与 back4app 进行交互。例如，使用 rest 检索项目： import fetch from 'node fetch'; 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(); console log("items fetched ", data); } catch (error) { console error("error fetching items via rest ", error); } }; 根据需要将这些 api 调用集成到您的 javascript 模块中。 步骤 5 – 保护您的后端 配置访问控制 通过设置访问控制列表 (acl) 确保您的数据安全。例如，要创建一个仅可由其创建者访问的项目： import parse from 'parse'; export const createprivateitem = async (title, description, user) => { const item = parse object extend("items"); const item = new item(); item set("title", title); item set("description", description); const acl = new parse acl(); acl setreadaccess(user, true); acl setwriteaccess(user, true); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { await item save(); console log("private item created successfully "); } catch (error) { console error("error creating private item ", error); } }; 调整类级权限 (clp) 通过 back4app 仪表板为您的集合设置默认访问规则，确保只有经过身份验证的用户可以访问敏感数据。 步骤 6 – 实施用户身份验证 设置用户帐户 back4app 使用内置的 parse 用户类来处理身份验证。在您的 javascript 应用程序中，按如下方式管理用户注册和登录： import parse from 'parse'; export const signupuser = 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("error during sign up ", 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 failed ", error); } }; 此方法可以扩展用于会话管理、密码恢复等更多功能。 步骤 7 – 部署您的 javascript 应用程序 back4app 简化了部署。您可以使用 docker 容器化等方法部署您的 javascript 应用程序。 7 1 构建您的应用程序 打包您的应用程序： 使用您的构建工具（如 webpack 或类似的打包工具）来编译您的代码。 验证构建： 确保您的打包文件包含所有必要的模块和资源。 7 2 组织您的项目结构 一个典型的 javascript 项目结构可能如下所示： basic crud app javascript/ \| src/ \| | index js \| | parseconfig js \| | services/ \| | itemsservice js \| | authservice js \| public/ \| | index html \| package json \| readme md 示例： parseconfig js // parseconfig js import parse from 'parse'; parse initialize("your application id", "your javascript key"); parse serverurl = 'https //parseapi back4app com'; 7 3 docker 化您的 javascript 应用程序 如果您选择容器化，请在项目根目录中包含一个 dockerfile \# use an official node js runtime as the base image from node 14 alpine \# set the working directory in the container workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the rest of the application code copy \# expose the application port (adjust if necessary) expose 3000 \# define the command to run your application cmd \["npm", "start"] 7 4 通过 back4app web 部署 连接您的 github 仓库： 确保您的 javascript 项目托管在 github 上。 配置部署设置： 在 back4app 仪表板中，使用 web 部署 选项链接您的仓库（例如， basic crud app javascript ) 并选择所需的分支。 设置构建和输出命令： 指定您的构建命令（例如， npm run build ) 和输出目录。 部署： 点击 部署 并查看日志，直到您的应用程序上线。 第 8 步 – 最后的想法和未来的增强 恭喜你！你成功开发了一个基于javascript的crud应用程序，并与back4app集成。 你设置了一个名为 basic crud app javascript 的项目，构建了你的 items 和 users 集合，并使用back4app管理应用程序管理你的后端。 此外，你通过parse sdk（或rest api）连接了你的javascript应用程序，并实施了强大的安全措施。 接下来要探索的内容： 增强功能： 考虑添加搜索过滤器、详细视图或实时数据更新等功能。 扩展后端功能： 研究云函数、集成第三方api或实施高级基于角色的访问控制。 深化你的专业知识： 访问 back4app文档 https //www back4app com/docs ，探索更多教程以进一步优化你的应用程序。 祝你编码愉快，享受构建你的高级javascript crud应用程序的过程！