Meteor 3 + Solid 实战：创建与渲染 MongoDB Collections 完整指南

后端前端开发工具移动开发【免费下载链接】meteorMeteor, the JavaScript App Platform项目地址https://gitcode.com/gh_mirrors/me/meteor点击查看免费下载本篇是 Meteor 3 Solid 教程系列的第二篇承接创建应用之后手把手讲解如何在 Meteor 中创建 MongoDB 集合Collection、在服务端初始化种子数据、通过发布/订阅Publish/Subscribe把数据同步到客户端并用 Solid 的响应式原语渲染任务列表。读完本文你将掌握 Meteor 的Mongo.Collection、异步 APIinsertAsync/fetchAsync/countAsync、Tracker.autorun与 Solid Signals 的整合以及如何用meteor mongo或 GUI 客户端连接数据库查看文档。前置准备Solid 项目与目录约定本文基于上一篇教程创建的项目继续开发。如果你还没有项目先执行meteor create --solid simple-todos-solid--solid选项会生成一个使用 Solid 作为 UI 框架、Rspack 作为打包器Meteor 3.4 的默认构建栈的项目详见 Rspack 打包器集成。运行meteor即可启动应用。Meteor 已经为你内置了 MongoDB无需单独安装但我们还需要在代码中创建自己的集合collection——它是我们存储文档documents的地方在本教程中用来存放tasks。在动手前先明确一个目录约定本文所有 API 相关代码集合、发布、方法都放在imports/api目录下。这只是一个约定而非强制你可以随意命名。Meteor 应用的结构规范和 ES2015import/export模块机制可以参考应用结构教程。如果起始项目里存在imports/api/links.js文件现在可以删除我们不再需要它。创建 Tasks 集合在imports/api下新建TasksCollection.js实例化一个 Mongo 集合并导出import { Mongo } from meteor/mongo; export const TasksCollection new Mongo.Collection(tasks);这里有两件关键的事从meteor/mongo导入Mongo这是 Atmosphere 包Meteor 生态的包格式的标准导入方式路径必须以meteor/前缀开头以与 npm 包命名空间区分。new Mongo.Collection(tasks)tasks是集合名称也是 MongoDB 中实际的集合名。这个实例同时存在于客户端与服务端在服务端它直接驱动 MongoDB在客户端它驱动内存中的 Minimongo详见后文数据同步机制一节。集合的完整 API 可以参考 Collections API 文档。初始化集合与种子数据集合定义好之后还需要在服务端导入它Meteor 才会完成相应的底层管道plumbing设置。你有两种导入方式import /imports/api/TasksCollection; // 仅导入副作用 import { TasksCollection } from /imports/api/TasksCollection; // 导入并在本文件使用注意这里使用了以/开头的绝对导入路径指向项目根目录这是 Meteor 推荐的写法。第一种适合只需确保集合被加载的场景如果要在同一文件里使用集合就用第二种。现在我们可以很方便地检查集合里是否有数据没有的话就插入一些示例数据。用下面的内容替换server/main.js不需要保留原内容import { Meteor } from meteor/meteor; import { TasksCollection } from /imports/api/TasksCollection; const insertTask async (taskText) await TasksCollection.insertAsync({ text: taskText }); Meteor.startup(async () { if (await TasksCollection.find().countAsync() 0) { [ First Task, Second Task, Third Task, Fourth Task, Fifth Task, Sixth Task, Seventh Task, ].forEach(insertTask); } });这段代码做了什么Meteor.startup(async () {...})应用服务端启动时执行的回调即 Node.js 进程启动阶段。TasksCollection.find().countAsync()统计集合中所有文档的数量。注意这里用的是Async 后缀版本——这是 Meteor 3基于 async/await 的现代架构的核心变化之一。TasksCollection.insertAsync({ text: taskText })异步插入一条文档text字段保存任务文本。幂等初始化只有当集合为空countAsync() 0时才插入七条示例任务避免每次重启服务端都重复灌数据。从源码看insertAsync由 methods_async.js 中的_insertAsync实现它会先校验参数为文档生成_id字符串或Mongo.ObjectID然后通过this._collection.insertAsync(doc)真正写入数据库并返回新文档的_id。所以上述代码等价于向tasks集合写入了七条形如{ _id: ..., text: First Task }的文档。而countAsync/fetchAsync等游标方法定义在 cursor.tscountAsync会调用 MongoDB 驱动层的countDocuments更值得注意的是服务端游标上的同步方法count()会直接抛错提示请改用countAsync()——这也是 Meteor 3 全面转向异步 API 的强制约束。用 Solid 渲染集合数据接下来是有趣的部分用 Solid 渲染任务列表。修改imports/ui/App.jsximport { createSignal, For, Show } from solid-js; import { Meteor } from meteor/meteor; import { Tracker } from meteor/tracker; import { TasksCollection } from ../api/TasksCollection; export const App () { const subscription Meteor.subscribe(tasks); const [isReady, setIsReady] createSignal(subscription.ready()); const [tasks, setTasks] createSignal([]); Tracker.autorun(async () { setIsReady(subscription.ready()); setTasks(await TasksCollection.find().fetchAsync()); }); return ( div classcontainer header h1Todo List/h1 /header Show when{isReady()} fallback{divLoading .../div} ul For each{tasks()} {(task) ( li{task.text}/li )} /For /ul /Show /div ); };这个组件把 Meteor 的响应式数据源与 Solid 的细粒度响应式原语结合了起来createSignalSolid 的状态原语。isReady保存订阅就绪状态tasks保存任务数组。Meteor.subscribe(tasks)订阅服务端的tasks发布返回一个订阅句柄subscription handle其ready()方法表示订阅是否就绪。Tracker.autorunMeteor 的响应式追踪器。任何在函数体内被读取的响应式数据源订阅状态、集合游标发生变化时这个函数都会自动重跑。从 tracker.js 的实现看autorun会创建一个Tracker.Computation收集被访问的Tracker.Dependency数据变化时使计算失效并重跑。TasksCollection.find().fetchAsync()客户端从 Minimongo 中异步取回全部文档。Show/ForSolid 的控制流组件——Show根据isReady()决定显示列表还是Loading ...占位For遍历tasks()渲染每个task.text。关键在于当数据库数据变化时Tracker.autorun会重新执行setTasks更新 SignalSolid 只精准更新受影响的 DOM 节点无需手动刷新页面也无需手动操作 DOM。缺一不可发布Publish数据到客户端如果你现在运行应用会发现列表是空的。原因在于我们还没把数据发布到客户端。这正是 Meteor 与传统 REST 架构的本质区别Meteor 不需要 REST 调用它依靠将服务端的 MongoDB 与客户端的 MiniMongoDB 进行同步来完成数据传输。流程是先在服务端发布集合再在客户端订阅它。首先创建发布import { Meteor } from meteor/meteor; import { TasksCollection } from ./TasksCollection; Meteor.publish(tasks, function () { return TasksCollection.find(); });Meteor.publish接收两个参数发布名称与发布函数。发布函数返回一个Collection.CursorMeteor 会把该游标对应的文档推送给每个订阅它的客户端。按 Meteor API 文档 所述你还可以返回多个游标的数组但数组中的游标必须来自不同的集合。然后在服务端导入这个文件让它真正生效... import { TasksCollection } from /imports/api/TasksCollection; import ../imports/api/TasksPublications; const insertTask taskText TasksCollection.insertAsync({ text: taskText }); ...最后一步客户端订阅这个发布。其实在上一节我们已经在App.jsx里写好了... const subscription Meteor.subscribe(tasks); ...订阅句柄的ready()状态与游标数据都在Tracker.autorun中被读取因此整个数据链路是响应式的服务端 MongoDB 数据一变客户端 Minimongo 同步更新Tracker.autorun重跑Signal 更新Solid 自动重渲染。你可以直接在服务端 MongoDB 里改数据应用会实时响应并重新渲染不需要刷新浏览器。更多关于发布/订阅的细节参见 Meteor API 文档中的 pub/sub 部分。现在你的应用应该能显示七条任务了数据同步机制MongoDB 与 MiniMongo理解上面这套链路关键在于 Meteor 的双数据库模型服务端 MongoDB真正的持久化数据库存放所有数据。客户端 MiniMongo浏览器内存中的精简版 MongoDB缓存客户端订阅到的数据子集。Meteor 通过 DDPDistributed Data Protocol协议在两者之间同步服务端发布游标对应的文档变更插入、更新、删除客户端 Minimongo 维护本地缓存并触发Tracker依赖失效。这带来两个体验上的巨大优势零 REST 样板代码和实时更新——数据变更自动推送到所有订阅的客户端。在实际项目中发布函数通常会按需裁剪数据例如只发布当前用户可见的任务、用projection排除敏感字段、根据this.userId做权限过滤而不是像本例这样无脑find()全量返回。这属于服务端数据安全的核心实践。检查数据库meteor mongo 与 GUI 客户端想要确认数据确实写进了 MongoDB有两种方式方式一命令行。在应用根目录的终端里运行meteor mongo即可连接到 Meteor 为你启动的内嵌 MongoDB。默认情况下内嵌 MongoDB 运行在3001 端口。方式二GUI 客户端。使用 MongoDB 图形化客户端如 NoSQLBooster连接。连接信息如下连接成功后你可以在左侧面板看到数据库列表双击tasks集合就能看到我们插入的七条文档每份文档都包含 Meteor 自动生成的_id字段和我们在insertTask中写入的text字段。直接在这里修改文档内容再切回浏览器你会看到应用实时反映了改动。小结本步完成了 Meteor 集合从创建到渲染的完整闭环创建imports/api/TasksCollection.js中new Mongo.Collection(tasks)初始化server/main.js在启动时用insertAsync写入种子数据渲染App.jsx中用Tracker.autorun SolidcreateSignal/Show/For响应式渲染同步imports/api/TasksPublications.js发布 客户端Meteor.subscribe(tasks)订阅MongoDB 与 MiniMongo 自动同步。在下一步中我们将创建任务表单把用户输入的新任务写入集合让 Todo 应用真正活起来。赞分享后端前端开发工具移动开发【免费下载链接】meteorMeteor, the JavaScript App Platform项目地址https://gitcode.com/gh_mirrors/me/meteor点击查看免费下载相关推荐Meteor 3 React 教程二Collections 集合的创建、初始化、渲染与发布订阅Meteor 3 React 教程二Collections 集合的创建、初始化、渲染与发布订阅 导读 在 Meteor https://link.gi后端前端开发工具移动开发Meteor 3 Solid 实战使用 Meteor Methods 更新与删除 MongoDB 任务数据Meteor 3 Solid 实战使用 Meteor Methods 更新与删除 MongoDB 任务数据 在 Meteor.js 3 结合 Solid后端前端开发工具移动开发Meteor 3 Solid 入门使用 meteor create --solid 创建你的第一个 To-Do 应用Meteor 3 Solid 入门使用 meteor create solid 创建你的第一个 To Do 应用 本教程是 Meteor 官方 Solid后端前端开发工具移动开发上一篇实测Hyperswitch支付吞吐量基准测试全指南从环境搭建到性能调优下一篇PyQt多语言切换终极指南QTranslator完整使用教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考