前言

JWT(JSON Web Token)，是为了在网络环境间传递声明而执行的一种基于JSON的开放标准（RFC 7519）。

更多的介绍和说明，以及各种原理，我在此就不多赘诉了。JWT不是一个新鲜的东西，网上相关的介绍已经非常多了。不是很了解的可以在网上搜索一下相关信息。

源码

Talk is cheap. Show me the code.

工作流程

前言

目前在开发个人博客项目中，一开始就没准备使用一些现在比较流行的UI库（毕竟是个人项目，多练练手还是好的），所以需要自己开发几个全局组件，这里以MessageBox为例记录下vue.js如何开发全局组件。

源码

Talk is cheap. Show me the code.

前言

在开发有登录功能的项目时，不可避免的需要在路由（页面）跳转时对当前用户的权限进行一定的校验。目前我使用的比较多的vue.js提供了比较好的解决方案。在开发微信小程序时，发现官方目前并未提供相应的解决方案，根据以往的经验自己实现了路由（页面）跳转拦截。在此对两者做一个简单的对比。

vue.js的路由拦截

vue.js官方称之为导航守卫。官方文档很详细，使用起来也比较简单，此处就不多说了，简单的示例代码如下：

前言

帮别人做的一个展示用的demo，最开始只需要一些假数据展示看看效果。不过到最后也没用上，所以就拿出来分享一下吧。我自己把后台接口部分给简单补齐了，做了一些假数据，样式也做了一些调整。因为接口需要https以及上线需要微信审核之类的，所以目前此demo只能在本地查看。同时功能也不是很完善，很多功能做的也比较简陋。如果是初学微信小程序的话，可以参考着看看。

源码

Talk is cheap. Show me the code.

前言

这段时间又开发了一个vue.js+node.js爬虫开发一个Github排行榜的项目，加上之前的基于Vue2开发的读书WebAPP就有两个vue.js的项目需要部署了。虽然我有两个域名，但是我还是只想在一个域名下配置多个项目。对nginx不是很熟，花费了很长的时间才最终配置出想达到的效果。这里就记录一下如何配置。

实现效果

http://www.qdnote.com/: 基于Vue2开发的读书WebAPP

http://www.qdnote.com/vue-github-rank/: vue.js+node.js爬虫开发一个Github排行榜

前言

之前使用node.js开发一个小爬虫，算是初步对爬虫有了一定的了解，但爬取的数据没什么意义。最近使用Github的频率比较高，所以准备爬取一些Github的数据玩下。目前爬取了中国区followers排名前100的大神，以及各个编程语言stars大于1000的开源项目。

源码

Talk is cheap. Show me the code.

访问地址

• 访问地址：http://www.qdnote.com/vue-github-rank/（pc端开启手机模式浏览效果更佳）

前言

很多程序猿在最开始学习开发的时候应该都有一个想要自己开发一个爬虫的想法（至少我是有的）。所以国内网络上也是爬虫盛行！学了node.js之后发现比较适合写爬虫，不过一直没有动手去写，正好这段时间比较闲，就写个爬虫玩下。

想着爬个什么东西呢？正好都比较喜欢看电影，那就从时光网爬下国内的票房排行榜吧。

Talk is cheap. Show me the code

不bb，代码在此

前言

公司开发微信小程序的项目中需要用的socket.io，所以自己先写个简单的项目来练练手，熟悉下socket.io。socket.io主要用于浏览器和服务器之间的实时通信。对HTML5中websocket进行了封装。具体的就不多说，有兴趣的话可以去官网看下。

技术栈

node.js + socket.io + js + canvas

前言

在开发项目的过程中，经常会需要开发一些弹出框效果，但原生的alert和confirm往往都无法满足项目的要求。这次在开发基于Vue2开发的读书WebAPP的时候总共有两处需要进行提示的地方，因为一开始就没有引入其他的组件库，现在只好自己写一个模态框组件了。目前只是一个仅满足当前项目需求的初始版本，因为这个项目比较简单，也就没有保留很多的扩展功能。这个组件还是有很多扩展空间的，可以增加更多的自定义内容和样式。这里只介绍如何去开发一个模态框组件，有需要进行更多扩展的，可以根据自己的需求自行开发。

组件模板

前言

初学vue.js，官网的文档写的很清楚，看着不难。俗话说：光说不练假把式。程序猿学个新东西还是要敲出来看看效果比较好。最开始是想搞个音乐类的，毕竟天天都会听歌，但发现搞音乐类的太多了，我再搞个多没意思。考虑了一下，还是搞个看书的吧，这个还是很少有人搞的。找了找发现只有追书神器的api暴露出来了，起点之类的api找不到。最终效果因为api数据的限制，参考了起点中文网app、起点中文网web端，以及追书神器web端，再加上自己的一些想法搞出来的。项目中的小图标使用的是阿里巴巴的矢量图标库Iconfont。

技术栈

vue2 + vuex + vue-router + webpack + ES6 + axios + sass

源码地址

https://github.com/XNAL/ReadMore