Vue.js实现全局公共方法 / 网络研习社#51
steemjiang
3 minutes read (About 392 words)

Vue.js实现全局公共方法 / 网络研习社#51

vue.jpg

对于常用的重复使用的代码，可以把它写成公共方法，然后在全局使用。当然这是一个最用的技巧，也是一种标准的编程方法。

Vue.js中要实现全局方法，可以使用插件的写法。比如npm, 这些包都是些代码高手整理出来通用的方法，你一安装挂载上就可以全局使用！这可以大大加快你的开发进程。

这里不介绍插件的写法，用的是另一个简洁便利的写法，可以制作出全局公共方法。其实在Vue.js中过滤器也可以使用这种方法来写的。

主要有两步:
1.utitls -> 定义方法或变量，export出来
2.main.js中导入并挂载到全局使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//utitls-getstr.js
const getstr = function(){
  function randomString(length, chars) {
    let result = ''
    for (let i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)]
    return result
  }
  return randomString(5, '0123456789abcdefghijklmnopqrstuvwxyz')
}
export {getstr}

//main.js
import {getstr} from "./utils/getstr"
Vue.prototype.getstr = getstr
全局即可使用：this.getstr()

在上面的案例中，假如我们要得到一个生成字符串的方法（这是用于生成网址的），就可以按照如上的方法来实现，在全局即可使用：this.getstr()来得到所想要的字符串的。是不是感觉很实用！

This page is synchronized from the post: ‘Vue.js实现全局公共方法 / 网络研习社#51’

Merkle Tree与父子评论 / 网络研习社#50
steemjiang
2 minutes read (About 335 words)

Merkle Tree与父子评论 / 网络研习社#50

merkle2.jpg

这几天在做SteemJiang评论这块，因为评论和文章的数据结构几乎一致，所以也想着把它存在本地的数据库中。做起来才发现自己还是太天真了！

文章倒还好，就是一篇，和别人也不搭界的，但评论就不同，它有父评论，有子评论，还有孙评论…….子子孙孙无穷尽也！要把这种结构完全显示出来，着实要费一番功夫。因为做评论时，与它相连的上下级的评论都会相连着变化，这倒是怎么破呢？！

上次提到用递归的方法去查询和展示是正解，思路倒是不错，要用代码来实现却有些困难。这几天调试这部分，脑细胞着实是死了不少！

做来做去，突然发现Merkle Tree与父子评论是何其地相似！如上图所示，都是些分叉形的结构，都符合递归的特点，都要有完全的形态。再深层一点的规律要慢慢去挖掘啰！

This page is synchronized from the post: ‘Merkle Tree与父子评论 / 网络研习社#50’

Steem Dapp开发(区块链应用)所需技能清单
steemjiang
a minute read (About 121 words)

Steem Dapp开发(区块链应用)所需技能清单

steemdapp.jpg

  1. 前端样式：HTML5, CSS3, BootstrapVue, Vue.js
  2. 业务逻辑：JavaScript
  3. 数据调用：SteemJS, axios
  4. 前端存储：IndexedDB, LocalStorage
  5. 内容存储：IPFS
  6. 前端路由：Vue-router
  7. 状态存储：Vuex, Vue-Cookie
  8. 前端编辑器：mavonEditor, WebStorm
  9. 运行环境：Nodejs, Webpack
  10. web服务器：Nginx, 或caddy, 或Apache
  11. 后台服务器：Linux(Ubuntu)

This page is synchronized from the post: ‘Steem Dapp开发(区块链应用)所需技能清单’

周末影院：《伦敦战场》，一部性感却烧脑的电影
steemjiang
2 minutes read (About 269 words)

周末影院：《伦敦战场》，一部性感却烧脑的电影

London.jpg

是部美女的片子，到处充斥着一种神秘的气息，以至于看完了，也只记得美女很不错，故事完全不知在讲啥子！

london3.jpg

女主的各种花式炫啊，以至于故事根本不重要！这种完全可以不看故事的电影确实具有超高的颜值，而且充满了一种颓废的文艺范，不是哪个导演都能拍出来的。

london4.jpg

这口烟吸得，是相当得销魂啊！

london5.jpg

故事相当混杂且凌乱，不是插叙，就是倒叙，还有各种想像，好像是故意不让你看懂似的。嗯，全程看美女的各式花式撩法，也是不错了。

This page is synchronized from the post: ‘周末影院：《伦敦战场》，一部性感却烧脑的电影 ‘

递归获取评论并递归展示（SteemJS） / 网络研习社#49
steemjiang
3 minutes read (About 500 words)

递归获取评论并递归展示（SteemJS） / 网络研习社#49

reply.jpg

今天查了下社区的文章，倒也是把递归获取评论的事给解决了，社会的技术分享还是挺不错的！这是地址，有兴趣的小伙伴也可以去看看：
参考1 参考2

经过一番改进，递归函数挺完美了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//递归获取某篇文章的所有评论
async function getReplies(author, permlink, res=[]) {
  let replies = await _this.steem.api.getContentRepliesAsync(author, permlink)
  let children = []
  replies.forEach(item => {
    res.push(item)
    if(item.children > 0){
      //把得到的子数据塞进 .child 中
      children.push(getReplies(item.author, item.permlink, item.child=[]))
    }
  })
  await Promise.all(children)
  return res
}
getReplies(author, permlink)
  .then(res => {
    // console.log(777, res)
    _this.replies = res
  })

查询并组织的数据结构如下：

1
2
3
4
5
6
child: Array(1)
   0: {…}
   length: 1
   __ob__: Observer {value: Array(1), dep: Dep, vmCount: 0}
   __proto__: Array 
children: 4

所有的子节点的数据都被塞进 .child 中，一层层嵌套。

利用递归组件显示

既然数据结构是递归的，那么就可以利用数据的特点直接递归显示。查了下Vue的一些用法，也是顺利搞定了。

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
//需要主组件和递归组件两个组件来完成
//主组件 Reply.vue
<template>
  <div class="reply">
    <div v-for="item in replies">
        <Replylist :parentmsg="item"></Replylist>
    </div>
  </div>
</template>

<script>
import Replylist from './Replylist'
export default {
  name: "Reply",
  data(){
    return {
      replies:[],
    }
  },
  components: {
    Replylist
  }
}
</script>

//递归组件 Replylist.vue
<template>
  <div class="item">
    @{{ parentmsg.author}}　{{ parentmsg.body}}
    <ul v-if="parentmsg.child" class="child">
      <Replylist v-for="(item,index) in parentmsg.child" :parentmsg="item" :key="index"></Replylist>
    </ul>
  </div>
</template>
<script>
  export default {
    name: "Replylist",
    props: ['parentmsg']
  }
</script>

基本上就这么多了，就是递归的思想不好弄明白，这个过程不太直观。另外，查询评论挺花时间的，估计得要个1~3秒左右。而且它和文章不太相同，文章基本不会变化，没有太多实时的数据。评论是动态的，没办法用本地数据来处理。我在想，有没有更好的办法来实现。

This page is synchronized from the post: ‘递归获取评论并递归展示（SteemJS） / 网络研习社#49’

递归获取所有评论(SteemJS) / 网络研习社#48
steemjiang
3 minutes read (About 443 words)

递归获取所有评论(SteemJS) / 网络研习社#48

node.jpg

如上图所示，文章的评论和以上的节点非常类似，也是由一个节点分支出去的多分支结构。以前看评论还挺简单，轮到自己来做，才发现到处都是事！

查询函数

1
2
3
steem.api.getContentReplies(author, permlink, function(err, result) {
    console.log(err, result)
})

查询函数倒是简单，但是又是只能查询到第一层，也就是只有对文章的评论可以查到，对评论的评论就没招了。只能想办法解决了。

评论的这种分叉形的结构只能由递归来处理，唉，提到递归又是一阵蒙圈！实在没怎么用过，硬着头皮也要用起来啊。

递归查询评论

1
2
3
4
5
6
7
8
9
10
11
12
13
function getReplies(author, permlink){
  _this.steem.api.getContentReplies(author, permlink, function(err, result) {
    _this.replies = _this.replies.concat(result)
    result.forEach(item=> {
      if(item.children > 0){
        let author = item.author
        let permlink = item.permlink
        getReplies(author, permlink)
      }
    })
  })

}

折腾半天，也有点效果，不过只能递归出所有评论填进一个数组内，原有的结构没有了！那怎么显示呢？

显示也是个事！ 所有评论在一个数组内，这咋整呢，要对所有的数据遍历查询？！先用苯办法试下。

1
2
3
4
5
6
7
8
9
<div v-for="item in firstReply()">
  {{item.author}}--{{ item.body}}<br>
  <div v-for="sec in secondReply(item.permlink)" class="second">
    {{ sec.author }}--{{ sec.body }}<br>
      <div v-for="third in thirdReply(sec.permlink)" class="third">
        {{ third.author }}--{{ third.body }}<br>
      </div>
  </div>
</div>

唉，我真的有点头晕啊，这要做多少层的循环啊？！勉强做个三层就快到头了，估计还是得换方法。

等伙再到网上查查资料。嗯，等村长过来指导工作也不错！

This page is synchronized from the post: ‘递归获取所有评论(SteemJS) / 网络研习社#48’

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×