用户登录

在 Notes 这个组件里面, 我们可以先去得到存储在数据库里的笔记内容 .. 得到以后把它们放在组件的 State,也就是组件的数据里面 ..

在 Notes 组件的一开始,导入刚才我们创建的 database .. 把里面的 loadCollection 还有 db 拿出来用一下 .. 位置是上一级目录的 databse

在组件里添加一个 state ... entities 可以表示笔记的列表 .. 先让它等于一个空白的数组 ..

初始化

在组件里再添加一个 constructor 方法 .. 组件创建以后会执行这个方法 .. 里面有个 props 属性,方法里先用一下 super(props) ..

在这个构造函数里,可以去获取一些数据,获取数据的功能可以单独放在一个方法里,执行一下 this.getInitialData ...

getInitialData

下面,再去再去定义这个获取数据的方法 .. 名字可以是 getInitialData .. 里面用一下 loadCollection .. 这是我们在 database 里定义的一个方法 .. 得到 notes 这个数据集合 ..

这个方法支持 Promise,所以可以接着用一个 then .. 得到的是 collection ... 在里面可以用一下得到的这个 collection 里的方法 .. 先用一个 chain() ... 再用一个 find ,得到集合里面的全部的文档 .. 接着用一个 simplesort 排下顺序 .. '$loki', 'isdesc'

集合里的每个文档都有个 $loki 属性,它就是文档的 id 号 .. isdesc 表示降序排列 .. 这样得到的结果就是最后添加的文档会排在最前面 ..

最后用一下 data 方法得到这些数据 .. 再把得到的集合里的数据交给 entities ...

从数据库里得到了需要的数据以后,可以再用一下组件的 setState 这个方法,去把得到的这些数据交给 state 里的 entities ..

最后再把查询出来的数据输出到控制台上检查一下 ...

现在,输出的是一个空白的数组,因为数据库里的 notes 集合里面还没有东西 ..

这里我们可以先插入两个文档到这个集合里 .. 用一下 collection 的 insert 方法 .. 一个数组 .. 里面放两个文档 .. 每个文档都是一个对象 .. 添加一个 body 属性 .. 对应的值是 hello ~

再添加一个文档 .. 修改一下 body 属性的值 ..

然后用一下 db 的 saveDatabase 保存一下数据库 ...

保存一下文件 ... 再注释掉这几行代码 .. 不然每次保存文件都会往 notes 集合里插入两个文档 ..

现在控制台上会输出的东西就是在数据库里的 notes 这个集合里面的两个文档 ...

打开其中的一个看一下 .. $loki 是文档的 id 号 .. body 是我们在文档里添加的一个属性 .. 另外数据库还会在文档里添加一些其它的 meta 信息 .. created 就是创建这个文档的时间 ..

修改了文档里的内容,这个 meta 里面还会出现 updated ,表示修改文档的时间 ..

数据数据的地方是浏览器的 LocalStorage ,打开 Application 选项卡 .. 在 Storage,LocalStorage 下面,打开 localhost ... 这里有一条数据 .. key 是 notes,这个就是我们创建的数据库的名字 .. value 的值就是对应的数据库里的具体的数据 ...

初始数据《 React:应用案例 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点