如何使用 Meteor 构建 CRUD 应用？

概述 在本指南中，您将学习如何使用 meteor 开发 crud（创建、读取、更新和删除）应用程序。 我们将把您的 meteor 应用与 back4app 集成作为后端服务，确保您的数据管理稳健且可扩展。 在整个教程中，您将设置一个名为 basic crud app meteor 的项目，定义您的数据库架构，并配置您的集合——同时利用 back4app 强大的功能。 您还将看到如何使用 back4app 的管理应用程序进行高效的数据管理，以及如何通过高级访问控制措施来保护您的后端。 到最后，您将拥有一个支持 crud 操作和用户身份验证的生产就绪 meteor 应用程序。 主要收获 开发 crud 功能，有效处理使用 back4app 的数据操作。 设计并实现一个可扩展的后端，与 meteor 前端配对。 利用 back4app 的拖放管理应用程序简化数据操作。 学习部署策略，包括 docker 容器化，以便为您的 meteor 应用程序服务。 前提条件 在开始之前，请确保您拥有 一个带有新项目的 back4app 账户。 有关设置说明，请查看 使用 back4app 入门 https //www back4app com/docs/get started/new parse app 一个 meteor 开发环境。 从 meteor 官方网站 https //www meteor com/install 安装 meteor，并确保 node js（v14 或更高版本）可用。 基本的 javascript、meteor 和 rest api 知识。 如有需要，请查阅 meteor 文档 https //docs meteor com/ 以获取更多见解。 步骤 1 – 项目初始化 设置您的 back4app 项目 登录到您的 back4app 账户。 点击仪表板上的“新应用”选项 。 输入项目名称： basic crud app meteor 并按照提示创建您的项目。 创建新项目 创建后，您的项目将在您的 back4app 仪表板上列出，为您的后端设置奠定坚实的基础。 步骤 2 – 设计数据库架构 构建您的数据模型 对于一个基本的 crud 应用程序，您需要多个集合。以下是详细说明管理数据操作所需的集合和字段的示例。 1\ 集合：项目 此集合包含每个项目的详细信息。 字段 类型 细节 id 对象id 自动生成的唯一标识符。 标题 字符串 项目的名称或标题。 描述 字符串 项目的简要总结。 创建于 日期 标记项目创建的时间戳。 更新于 日期 最近更新的时间戳。 2\ 收集：用户 此集合管理用户信息和身份验证详细信息。 字段 类型 细节 id 对象id 自动生成的唯一标识符。 用户名 字符串 用户的唯一标识符。 电子邮件 字符串 独特的电子邮件地址。 密码哈希 字符串 安全哈希密码。 创建于 日期 账户创建的时间戳。 更新于 日期 最新账户更新的时间戳。 在 back4app 仪表板中手动添加这些集合，通过为每个集合创建一个新类并定义相应的字段。 创建新班级 通过选择字段类型、指定名称、添加默认值（如有必要）并指明是否为必填项来创建每个字段。 创建列 利用 back4app ai 代理进行模式创建 back4app ai 代理直接从您的仪表板简化模式生成。通过提供描述性提示，概述您所需的集合和字段，ai 代理可以自动创建您的数据库模式。 如何使用 ai 代理： 访问 ai 代理： 导航到您 back4app 仪表板中的 ai 代理部分。 描述您的模式： 输入详细提示，指定您所需的集合和字段。 审核并应用： 评估建议的模式并将更改应用到您的项目中。 示例提示 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 的管理员应用程序是一个直观的无代码工具，使您能够通过拖放操作轻松管理后端数据。它简化了创建、读取、更新和删除记录的过程。 启用管理员应用 前往“更多”菜单 在您的 back4app 控制面板上。 选择“管理员应用” 并点击 “启用管理员应用。” 设置管理员凭据： 创建一个初始管理员用户，同时配置默认角色，如 b4aadminuser 以及系统集合。 启用管理员应用 激活后，登录管理员应用以开始管理您的数据。 管理员应用仪表板 利用管理员应用进行 crud 任务 在管理员应用中，您可以： 添加记录： 在任何集合（如项目）中点击“添加记录”以创建新条目。 查看/修改记录： 选择一条记录以检查或更改其详细信息。 删除记录： 删除不再需要的记录。 此界面极大地提升了用户体验，使数据操作变得简单明了。 步骤 4 – 将 meteor 与 back4app 集成 现在您的后端已通过管理员应用配置和管理，是时候将您的 meteor 应用连接到 back4app。 在 meteor 中使用 rest api 您可以通过发出 rest api 调用来与 back4app 集成。 示例：通过rest获取数据 以下是一个示例代码片段，用于在meteor方法中从back4app获取项目： // /imports/api/items js import { meteor } from 'meteor/meteor'; import { http } from 'meteor/http'; meteor methods({ 'items fetch'() { try { const response = http get('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); return response data results; } catch (error) { throw new meteor error('fetch failed', 'unable to fetch items '); } } }); 在您的meteor组件或方法中集成类似的rest调用，以创建、更新和删除记录。 步骤5 – 保护您的后端 实施访问控制列表（acls） 通过将acl分配给您的对象来保护您的数据。例如，要创建一个仅对其所有者可见的项目： async function createsecureitem(itemdata, owneruser) { const itempayload = { title itemdata title, description itemdata description, 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(itempayload) }); const data = await response json(); return data; } catch (error) { console error('error creating secure item ', error); } } 配置类级权限（clps） 在您的back4app仪表板中，为每个集合设置clp，以控制默认访问规则。此步骤确保只有授权用户可以访问敏感数据。 步骤6 – 管理用户身份验证 设置meteor用户账户 back4app利用parse的用户类进行身份验证，但在meteor中，您可以使用标准的rest调用处理用户注册和登录。 示例：通过rest进行用户注册 // /imports/api/auth js import { http } from 'meteor/http'; export const signupuser = async (username, password, email) => { try { const response = await http post('https //parseapi back4app com/users', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, data { username, password, email } }); return response data; } catch (error) { throw new meteor error('signup failed', error message); } }; 为用户登录和会话管理实现类似的方法。可以通过back4app仪表板管理电子邮件验证和密码重置等附加功能。 第7步 – 部署您的meteor前端 back4app的web部署功能通过链接到github存储库来促进托管您的meteor应用程序。按照以下步骤部署您的meteor应用。 7 1 生成您的生产构建 在您的项目目录中打开终端。 构建您的 meteor 应用： meteor build /output directory 此命令创建一个构建目录，其中包含优化的静态资产。 确认构建： 确保构建输出包含一个 index html 和所需的资产目录。 7 2 组织和上传您的代码 您的 github 仓库应包含您 meteor 应用的完整源代码。典型结构可能是： basic crud app meteor/ ├── meteor/ ├── client/ │ └── main html ├── server/ │ └── main js ├── imports/ │ ├── api/ │ │ ├── items js │ │ └── auth js │ └── startup/ │ └── index js ├── package json └── readme md 示例文件： /imports/api/items js // /imports/api/items js import { meteor } from 'meteor/meteor'; import { http } from 'meteor/http'; meteor methods({ 'items fetch'() { try { const response = http get('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); return response data results; } catch (error) { throw new meteor error('fetch failed', 'unable to retrieve items '); } } }); 将您的代码提交到 github 在您的项目文件夹中初始化 git（如果尚未完成）： git init 添加所有源文件： git add 提交您的更改： git commit m "初始 meteor crud 应用提交" 创建一个 github 仓库 （例如， basic crud app meteor ）。 推送您的代码： git remote add origin https //github com/your username/basic crud app meteor git git push u origin main 7 3 将 github 与 back4app web 部署连接 访问 web 部署： 登录 back4app，导航到您的 basic crud app meteor 项目，然后点击 web deployment 选项。 链接您的 github 账户： 按照屏幕上的说明集成您的 github 账户。 选择仓库和分支： 选择您的仓库（例如， basic crud app meteor ）和包含您代码的分支（例如， main ）。 7 4 部署配置 配置以下设置 构建命令 如果您的代码库缺少预构建文件夹，请指定构建命令（例如， meteor build /output directory )。 输出目录 指明存放静态资产的目录（例如输出文件夹）。 环境变量 添加任何所需的api密钥或配置。 7 5 将您的meteor应用程序docker化（可选） 如果docker是您的部署首选，请包含一个 dockerfile ，如下所示 \# use the official node image as a base 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 the app source code copy \# build the meteor app run meteor build /output directory \# serve with nginx from nginx\ stable alpine copy from=build /app/output/bundle/programs/web browser /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 如果您选择容器化，请在back4app中选择docker部署选项。 7 6 完成您的部署 部署应用程序： 在所有配置完成后，点击 部署 按钮 监控构建： back4app 将获取您的代码，运行构建命令，并部署您的应用程序 访问您的 url： 一旦部署，back4app 将提供一个 url，您的 meteor 应用程序将在该 url 上运行 7 7 验证部署 访问 url： 在您的浏览器中打开提供的 url 测试功能： 检查所有路由、样式和脚本是否正常工作 根据需要调试： 使用浏览器开发工具和 back4app 日志来解决任何问题 第8步 – 最后的想法和未来的增强 恭喜！您已经成功构建了一个完整的crud应用程序，并将其与back4app集成。 您设置了一个名为 basic crud app meteor 的项目，为项目中的items和users设计了一个强大的数据库架构，并通过管理应用程序管理数据。 此外，您还使用rest api将meteor前端与back4app集成，并采取了安全措施以保护数据。 下一步： 扩展您的前端： 添加详细视图、搜索功能和实时更新等功能。 实现高级后端逻辑： 考虑使用meteor方法进行更复杂的操作或集成其他第三方api。 咨询更多资源： 探索 back4app文档 https //www back4app com/docs 和 meteor指南 https //docs meteor com/ 以获取有关性能和自定义的更深入见解。 祝您编码愉快，享受使用meteor和back4app构建的乐趣！