Web3.0验证（13）- 使用Meteor开发TODO管理应用程序（数据保存在MongoDB中）
上一次的Web3.0验证（12）- 使用Meteor开发TODO管理应用（基本功能）
首先
在上一次的验证之后，我们将扩展TODO管理应用，将TODO数据保存到MongoDB数据库中。
MongoDB的基础知识
MongoDBとは
ドキュメント指向のNoSQLデータベース
リレーショナルデータベース(RDB)と異なりトランザクションが無い
大量データを高速処理できるメリット
構成要素の比較
从终端1中执行Meteor应用程序。
$ cd simple-todos-react
$ meteor run
[[[[[ ~/simple-todos-react ]]]]]
=> Started proxy.
=> Started HMR server.
=> Started MongoDB.
=> Started your app.
=> App running at: http://localhost:3000/
你可以从启动消息中确认MongoDB已成功启动。
从终端2创建一个MongoDB集合。
将与API相关的代码（包括方法等）存放在imports/api目录中，添加文件。
$ cd simple-todos-react
$ vi imports/api/TasksCollection.js
import { Mongo } from 'meteor/mongo';
export const TasksCollection = new Mongo.Collection('tasks');
实例化并导出一个新的Mongo集合。
不要删除links.js文件。
$ rm imports/api/links.js
初始化任务集合
为了使收藏品功能生效，将收藏品导入服务器。
覆盖以下文件，并进行收藏品数据的确认/插入。
import { Meteor } from 'meteor/meteor';
import { TasksCollection } from '/imports/api/TasksCollection';
const insertTask = taskText => TasksCollection.insert({ text: taskText });
Meteor.startup(() => {
if (TasksCollection.find().count() === 0) {
[
'First Task',
'Second Task',
'Third Task',
'Fourth Task',
'Fifth Task',
'Sixth Task',
'Seventh Task'
].forEach(insertTask)
}
});
-
- ぶち解説
TasksCollectionをインポート
タスクを追加
文字列配列を反復処理
各文字列に対しinsertTask関数を呼び出し
文字列をタスクドキュメントのテキストフィールドとして挿入
渲染任务集合
Meteorパッケージ的先决知识
-
- Meteorは、通常MeteorパッケージとNPMパッケージにより動作
パッケージは、Meteor内部または外部のものを利用可能
react-meteor-dataパッケージ
react-meteor-dataパッケージはデフォルトで有効
存在しない場合、meteor add react-meteor-dataで追加
Meteorパッケージからコードのインポート
npmモジュールとの唯一の違いは、インポートのfrom部分にmeteor/を追加
使用React Hook之前的基本知识
-
- Reactフックとは
関数コンポーネントにReactの機能(stateやライフサイクル)を接続するための関数
フックはReactをクラスなしに使うための機能で、クラス内では機能しない
ReactフックuseTracker
useTrackerフックは、react-meteor-dataによりエクスポートされる
ReactフックによりReactコンポーネントに反応性(reactivity)を持たせる
反応性によって、データが変化されると、コンポーネントが即再レンダリングされる
需要呈现任务所需的东西
-
- React関数コンポーネント
- Meteorreact-meteor-dataパッケージ
import React from 'react';
import { useTracker } from 'meteor/react-meteor-data';
import { TasksCollection } from '/imports/api/TasksCollection';
import { Task } from './Task';
export const App = () => {
const tasks = useTracker(() => TasksCollection.find({}).fetch());
return (
<div>
<h1>Welcome to Meteor!</h1>
<ul>
{ tasks.map(task => <Task key={ task._id } task={ task }/>) }
</ul>
</div>
);
};
使用浏览器查看应用程序
通过浏览器访问http://localhost:3000/。
在MongoDB中查看/修改数据。
我将在MongoDB中确认数据。
如果数据有更改，应用程序将作出反应并重新渲染。
从终端3连接到MongoDB。
进入项目目录，
使用meteor mongo命令执行客户端操作。
※ 内置的MongoDB将在端口号3001上启动
※ 也可以使用其他Mongo UI客户端工具NoSQLBooster。
$ cd simple-todos-react/
$ meteor mongo
MongoDB shell version v5.0.5
connecting to: mongodb://127.0.0.1:3001/meteor?compressors=disabled&gssapiServiceName=mongodb
Implicit session: session { "id" : UUID("9b432a0c-1289-4841-bae7-b0fa70307d48") }
MongoDB server version: 5.0.5
... ...
Welcome to the MongoDB shell.
For interactive help, type "help".
For more comprehensive documentation, see
https://docs.mongodb.com/
Questions? Try the MongoDB Developer Community Forums
https://community.mongodb.com
---
meteor:PRIMARY>
查看数据库/集合/文件
- データベース一覧
meteor:PRIMARY> show dbs
admin 0.000GB
config 0.000GB
local 0.000GB
meteor 0.000GB
- データベースmeteorを指定
meteor:PRIMARY> use meteor
switched to db meteor
- コレクションを確認
meteor:PRIMARY> show collections
links
tasks
- ドキュメントを確認
meteor:PRIMARY> db.tasks.find()
{ "_id" : "kyMgiSuojrtJN2Ypt", "text" : "First Task" }
{ "_id" : "NzrbdgDkjfopMhvTG", "text" : "Second Task" }
{ "_id" : "bo2Lmn8pYdc7SNnsJ", "text" : "Third Task" }
{ "_id" : "wtzuHKhyxdvkp6PaG", "text" : "Fourth Task" }
{ "_id" : "Eg3nK2PkAfC8p2ckJ", "text" : "Fifth Task" }
{ "_id" : "C5XCHP9QRN8HwopNa", "text" : "Sixth Task" }
{ "_id" : "Lz97hBMpqtTC57xEf", "text" : "Seventh Task" }
我确认TODO管理应用程序的数据已保存在MongoDB中。
然而，存在两个问题。
-
- 課題1: データはどうやってサーバーからクライアント送られたの?
その仕組みは、以下機能2点と関係するようです(詳細は次回)
Publications(パブリケーション)
Subscriptions(サブスクリプション)
課題2: データベースのデータがクライアントに公開され丸見えだが大丈夫?
セキュリティ上よろしくないため、後で削除します
最后
下一次，我将继续改善TODO应用。
请敬请期待。
