比特币突然猛涨，来了一波大浪潮！其实我是迷惑的，当然也没有去深究。毕竟比特币也就这尿性，大涨大跌惯了。

不过晚上时有网民开始扒出证据来，如上图所示，原来是习大大号召大家来学区块链呢！

新华社北京10月25日电 中共中央政治局10月24日下午就区块链技术发展现状和趋势进行第十八次集体学习。中共中央总书记习近平在主持学习时强调，区块链技术的集成应用在新的技术革新和产业变革中起着重要作用。我们要把区块链作为核心技术自主创新的重要突破口，明确主攻方向，加大投入力度，着力攻克一批关键核心技术，加快推动区块链技术和产业创新发展。

This page is synchronized from the post: ‘习大大的讲话威力就是大！’

https://bootstrap-vue.js.org/

Bootstrap这个框架着实不错，可以大大加快你写前端的时间和精力。以前做的一些网页，都是用的Bootstrap来弄页面的。现在用Vue.js来设计前端，页面之类的也要有合适的框架。本来我是想导入Bootstrap的一些文件，然后慢慢组件之类的，没想到Bootstrap已经想到了和Vue.js的结合，直接就嵌入了！

安装和导入

1
2
3
4
5
6
7
8

cnpm install bootstrap-vue bootstrap --save

//src/main.js
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

就这么几步，就可以直接使用了，简直不要太简单！

还有一个很强大的功能：那就是支持在线动态修改。你可以直接使用它的在线工具修改想到的参数和颜色，修改好后再直接拷入自己的组件中使用。这就是所谓的所见即所得吧。

This page is synchronized from the post: ‘BootstrapVue来设计你的页面 / 网络研习社#45’

以这段时间不停地深入学习，如何使用SteemJS来开发应用，现在也是颇有点体会。学完了这些前端的调用，感觉就和一般的数据库地调用是差不多的。

以我们最熟悉的发贴来看看：

1
2
3
4
5
6
7
8
9
10
11
12
13

{ "active_votes": [ { "percent": "5000", "reputation": "69.77", "rshares": "14709848370190", "voter": "abit" }, { "percent": "10000", "reputation": "71.83", "rshares": "35343653392", "voter": "lemooljiang" },... } ], 
"author": "liu", 
"author_reputation": 1833721315508, 
"beneficiaries": [], 
"body": "外国有普遍的雅思托福的英语考试，......", 
"last_payout": "2017-01-20T01:17:30", 
"last_update": "2016-12-19T12:45:33", 
"max_accepted_payout": "1000000.000 SBD",
 "net_rshares": 14752610207047, 
"parent_author": "", 
"parent_permlink": "cn", 
..... 
}

看到这样的数据是不是很熟悉，这就是一个文章对象嘛，直接遍历调用就可以啰。做过博客的人肯定不会陌生，这和博客的数据结构是一模一样的。这种结构和MySQL是很像的，几乎一致。可惜愿做这样解析的人太少了，导致大家都认为区块链是个很牛的技术，完全漂在空中。其实Steem的本质是公共数据库，你可以很轻松地往它上面写入数据，而且是完全免费。你想调用它也很简单，SteemJS设计了各种接口，和前后端分离的设计是一致的。

这种文章的结构是设计死的，和MySQL的表设计是一样的，一旦设计好，就只能这样用，拓展性不好。如果Steem仅只于此，那也就没什么好说的，它撑死也就是一博客。但是，你所想要的拓展结构Steem也已经设计好了，那就是customJson。它是一种对象的结构，和mongoDb, 和我前段时间学习的indexedDB一样，是一种对象结构，理论上是可以存储任何的数据！也就是说，理论上你是可以设计出任何的应用，都可以用上Steem！

这种领悟晚吗？ 倒也算不上吧。只是因为Steem的中文开发几乎为零，没有相关的技术文档，我等小白怎么去学习呢？！好在自己慢慢积累，也到了看英文就懂的程度，慢慢地参考和摸索，倒也是有些开发经验了。

最近在做以前一直想要做的文章分档的功能，这个提法被人提过无数次，可惜一直没人改进。还有文章的查询功能，以前大鹏做过一个好工具，可惜也早早地关站了。到最后，其实只能靠自己啰。不多说了，搞设计去！

This page is synchronized from the post: ‘Steem的本质是公共数据库’

Promise ,和日常生活中的常识一样，都是承诺在未来做某件事！在生活中我们一天要安排做很多事，会排一个计划表，哪些事做完了再去做另一件事，但是所有的事情我都做好了安排，一定会在某个时间去做，这就是Promise！

和我们生活中类似的，程度要有计划地连续完成很多事，这种做事的方法在程序中称为异步。与之相对的同步，就是一件件做事情，没有计划。比如快递员派发快递，他在发完一个人后再发另一个人！这种方法肯定很糟糕，现实中没人会这么干。有经验的快递员肯定有更好的办法，比如他会同时通知所有人来取快递，谁先来谁就先取，快递很快就会发完，这种做事的方法就是异步。计算机程序也是采用类似异步的方法来执行事务。

在JavaScript中Promise 就是一个好的异步的方法。它会做好一个时间表，先把事情安排好，一件事做完了再做另一件事，这样的办事效率很高。所以，JavaScript可以看到大量的Promise 方法。在SteemJs中几乎都是Promise ，比如获取热门文章的方法：

1
2
3

steem.api.getDiscussionsByHot(query, function(err, result) {
  console.log(err, result);
});

方法成功了会得到结果，失败了会得到错误。不过，它做了封装，不大能看得到过程。

来学习一个简单的Promise ，入个门，自己也能写写。

1
2
3
4
5
6
7
8
9
10

let p = new Promise((resolve, reject) => {
  resolve()   //成功的调用
  //reject(err)  失败的调用
})
p.then(res => {
  alert("2019,hello world!")
})
p.catch(err => {
  alert("big error!")
})

Promise一创建就会立即执行，读入resolve, reject这两个函数。当函数成功，则执行.then内的方法，否则catch到错误 ！上面是一个简单的表述，比较容易理解。如果不够具体，可以看下廖雪峰的博客，里面蛮多教程的。

This page is synchronized from the post: ‘一个简单的Promise / 网络研习社#44’

一入前端深似海，从此阿花是路人！

几天整下来，才发现前端现在是深似海啊，以前用html + css就可以玩个页面什么的，现在根本就不好使了！前端需要的技能已经大大地加深了，单JavaScript这项就够让人喝一壶的。

以前用js都是用的现成的库，自己根本没写过。现在有很多逻辑都要用js来写，才发现js是不亚于python的一门语言。越往后面走，其实越难的。

前两天好不容易搞定了IndexedDB, 现在又要用到Promise来整理逻辑，比如如何让两个函数按顺序执行。整了半天，学了一知半解的，最后试了下定时器搞定的，虽然看起来low，但是发现好简洁啊。
比如这样，

1
2
3

this.initDatabase();
var f = this.showData;
setTimeout(f, 100);

本来的逻辑是这样的：要先打开数据库，初始化成功，再把数据库中的数据读取出来展示在页面上。用了半天Promise也没有搞定，看了下异步队列，不知其意，还是定时器先用着吧。

要从根本上解决，还是要多学习啊，Promise还是要进阶到更高的水平才行呢。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

1、构造函数，new Promise()得到一个实例。
2、有两个回调函数，resolve(成功回调)，reject(失败回调)
3、prototype上有一个 .then 方法 
4、Promise是异步操作。
5、一创建就会立即执行。可以包装在一个函数内，调用时执行。

const fs = require('fs')

function getFileByPath(fpath) {
  return new Promise(function (resolve, reject) {
    fs.readFile(fpath, 'utf-8', (err, dataStr) => {
      if (err) return reject(err)
      resolve(dataStr)
    })
  })
}


getFileByPath('./files/1.txt')
  .then(function (data) {
    console.log(data)
    return getFileByPath('./files/22.txt')
  })
  .then(function (data) {
    console.log(data)
    return getFileByPath('./files/3.txt')
  })
  .then(function (data) {
    console.log(data)
  })
  .catch(function (err) {     
    console.log('这是自己的处理方式：' + err.message)
  })

边学边做点笔记，期待通畅的那天！

This page is synchronized from the post: ‘I, Promise/ 网络研习社#43’

得益于村长 @ericet 的帮助，用SteemJS可以获取到作者的全部文章了！这些文章我先是存在Vuex中的，但是这样有个坏处，就是它是基于内存的，页面一关就什么也没有，又要重新从节点中获取数据。这个重获的过程耗时耗力，能不能直接存在本地呢，这样我每次要用的话直接读取本地的数据就行啰。

刚开始是用的localStorage来存的，好像不错，测试还蛮好的。不过，用我的帐号时则直接报错了！我大约有近千篇的文章，用localStorage是不够存的。上网查了下，localStorage大约只能存5M。好吧，换别的试试。

有个Web SQL有点印象，是做前端存储的。查了下，据说很多浏览器都不支持，都转向IndexedDB了。IndexedDB是很多浏览器都支持的，与现在的前端发展相连合，非常适用，那就它吧。

好吧，我承认又是挖了一个大坑！看手册也就一个页面，但真学起来折腾得不轻。中文的大部分资料都是相互拷贝的，看起来真让人头疼，因为作者也没有实现过，都是在罗列知识点，跑起来啥情况，不知道？！

又是研究了无数的资料，测试了无数的组合，终于是入了个门，能跑起来，能用了。真心不易啊！

先来个简单的数据库初始化看看：

数据库初始化

第一次打开数据库时，会先触发upgradeneeded事件，然后触发success事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

initDatabase(){
  var that = this;
  var db = null;
  var openRequest;
  var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
  var dbName = 'mysteem';
  var tableName = 'posts';

  if (!indexedDB) {
    alert("你的浏览器不支持IndexedDB");
  };

  openRequest = indexedDB.open(dbName, 1); //创建或打开数据库

  //数据库创建或更新事件  创建或版本号升级时会触发，从而新建表
  openRequest.onupgradeneeded = function(event){
    console.log('数据库创建或更新');
    db = event.target.result;
    console.log(db.version, '数据库版本');
    if( !db.objectStoreNames.contains(tableName) ){ //判断表是否存在
      var objectstore = db.createObjectStore(tableName, {keyPath: 'id', autoIncrement: true}); //指定主键 id, 自增
      //新建表索引，IDBObject.createIndex()的三个参数分别为索引名称、索引所在的属性、配置对象（说明该属性是否包含重复的值）。
      objectstore.createIndex('title', 'title', {unique: false});
    }
  };

  //数据库打开成功(如果数据库已经存在)
  openRequest.onsuccess = function(event) {
    db = event.target.result;
    console.log(666, db, '版本号', db.version);
    db.onerror = function (event) {
      //针对此数据库的所有错误的通用错误处理程序
      alert("Database error:" + event.target.errorCode);
      console.dir(event.target);
    };
    that.db = db;  //挂载到全局中
  };

  //数据库打开错误
  openRequest.onerror = function(event){
    console.log(event, '数据库打开错误')
  };

},

单是这个数据库创建就折腾了快一天了，怎么试都不行，好在最后解决了。IndexedDB是由浏览器打开创建，相当轻量，而且几个浏览器（chrome, firefox, opera）我都试了下，都可以用！IndexedDB是基于事件驱动的，有点类拟小型的MongoDB。它不同于localStorage有容量的限制，理论上是可以存一些大数据的（至少几百M是有的）。在前端应用越加广泛的今天，IndexedDB的应用场景会更多的，比如我现在就特别想把文章都存在本地，不再想看steemit网站动不动就在那里转圈圈啊。

IndexedDB的优点是有无数多的！入门和应用也不难，你会点对象的概念就可以了，因为它是一个个对象存进去的，所以有很多先天的优势。不过，今天在使用查询的时候，用索引的方法好像没办法使用关键字来查询，不知是没有这个方法，还是我没有看到。

用IndexedDB来存数据真会让网站飞起来，尤其是对steemit! 好了，用起来吧。

This page is synchronized from the post: ‘前端数据库IndexedDB / 网络研习社#42’