如何在windows安装php redis扩展 如果自己的自己是windows系统，想联调php与redis，今天找了半天的程序与redis扩展，怕自己忘了，同时给大家做个记录和参考。我自己本机上装的wampserver，如果想要完整地在php程序中使用redis，那么是需要安装rdis程序和php的redis扩展的。 1. 下载redis程序 # 很多地方都能下载到redis程序，官方的地址是 https://redis.io/download ，根据自己windows版本，下载合适自己系统的程序。同时github上也提供了windows的版本可供下载： https://github.com/MicrosoftArchive/redis/releases 。 2. redis扩展 # 在wampserver中，默认是没有提供redis扩展的，需要自己下载。首先在php中运行phpinfo()，查看自己的版本，然后下载合适的版本，最主要的是下面的这三条数据： php version : 5.5.12 Architecture : x64 PHP Extension Build : API20121212,TS,VC11 redis扩展是有两个文件的: php_igbinary.dll和php_redis.dll。我们先来看下php_igbinary.dll. 2.1 选择igbinary # 在链接 http://windows.php.net/downloads/pecl/releases/igbinary/2.0.1 中，我们可以看到这么多压缩包可以下载：|date|time|size| name | |---|---|---| |1/2/2017 | 5:07 AM | 122553 | php_igbinary-2.0.1-5.5-nts-vc11-x64.zip| |1/2/2017 | 5:20 AM | 121895 | pphp_igbinary-2.0.1-5.5-nts-vc11-x86.zip| |1/2/2017 | 5:14 AM | 123777 | php_igbinary-2.0.1-5.5-ts-vc11-x64.zip| |1/2/2017 | 5:27 AM | 122280 | php_igbinary-2.0.1-5.5-ts-vc11-x86.zip| |1/2/2017 | 4:43 AM | 123090 | php_igbinary-2.0.1-5.6-nts-vc11-x64.zip| |1/2/2017 | 4:55 AM | 122594 | php_igbinary-2.0.1-5.6-nts-vc11-x86.zip| |1/2/2017 | 4:49 AM | 124163 | php_igbinary-2.0.1-5.6-ts-vc11-x64.zip| |1/2/2017 | 5:01 AM | 123644 | php_igbinary-2.0.1-5.6-ts-vc11-x86.zip| |1/2/2017 | 4:23 AM | 187480 | php_igbinary-2.0.1-7.0-nts-vc14-x64.zip| |1/2/2017 | 4:33 AM | 177353 | php_igbinary-2.0.1-7.0-nts-vc14-x86.zip| |1/2/2017 | 4:28 AM | 188297 | php_igbinary-2.0.1-7.0-ts-vc14-x64.zip| |1/2/2017 | 4:37 AM | 178254 | php_igbinary-2.0.1-7.0-ts-vc14-x86.zip| |1/2/2017 | 4:05 AM | 139448 | php_igbinary-2.0.1-7.1-nts-vc14-x64.zip| |1/2/2017 | 4:15 AM | 132123 | php_igbinary-2.0.1-7.1-nts-vc14-x86.zip| |1/2/2017 | 4:10 AM | 140167 | php_igbinary-2.0.1-7.1-ts-vc14-x64.zip| |1/2/2017 | 4:19 AM | 132797 | php_igbinary-2.0.1-7.1-ts-vc14-x86.zip|这里，我们就要根据自己上面的参数来选择了，php的版本为5.5，php版本为TS,vc11，CPU为x64。那么我们最终选的php_igbinary为： php_igbinary-2.0.1-5.5-ts-vc11-x64.zip 。 2.2 选择redis # 同理，在链接 http://windows.php.net/downloads/pecl/releases/redis/2.2.7中，我们也能够看到很多的压缩包，这里我们选择php_redis-2.2.7-5.5-ts-vc11-x64.zip进行下载。 2.3 安装扩展 # 在下载php_igbinary和php_redis压缩包后，将里面的php_igbinary.dll和php_redis.dll放置到wampserver\wamp\bin\php\php5.5.12\ext中。同时，在文件wampserver\wamp\bin\php\php5.5.12\php.ini中，添加上：;redis extension=php_igbinary.dll extension=php_redis.dll 3. 测试 # 重启wampserver，如果在phpinfo()中能看到redis，则说明redis扩展已安装成功。这时我们启动下本地的redis。使用bash命令行窗口，进入到在第1步中下载的redis目录中，启动服务：redis-server.exe redis.windows.conf 如果展示如下信息，则说明已启动成功 _._ _.-``__ ''-._ _.-`` `. `_. ''-._ Redis 3.0.503 (00000000/0) 64 bit .-`` .-```. ```\/ _.,_ ''-._ ( ' , .-` | `, ) Running in standalone mode |`-._`-...-` __...-.``-._|'` _.-'| Port: 6379 | `-._ `._ / _.-' | PID: 4080 `-._ `-._ `-./ _.-' _.-' |`-._`-._ `-.__.-' _.-'_.-'| | `-._`-._ _.-'_.-' | http://redis.io `-._ `-._`-.__.-'_.-' _.-' |`-._`-._ `-.__.-' _.-'_.-'| | `-._`-._ _.-'_.-' | `-._ `-._`-.__.-'_.-' _.-' `-._ `-.__.-' _.-' `-._ _.-' `-.__.-' [4080] 27 Aug 21:45:53.723 # Server started, Redis version 3.0.503 [4080] 27 Aug 21:45:53.724 * DB loaded from disk: 0.000 seconds [4080] 27 Aug 21:45:53.724 * The server is now ready to accept connections on port 6379 在php程序中，我们测试下：$redis = new Redis(); //redis对象 $redis->connect("127.0.0.1","6379"); //连接redis服务器 $redis->set("test","Hello World"); //set字符串值 echo $redis->get("test"); //获取值 若页面中，能正常输出Hello World，则redis链接成功并正常存取数据。同时，在命令行中使用redis-cli.exe也可以进行操作。再另起一个窗口，重新进入到redis目录中，然后执行如果命令，在不输入参数时，默认连接的是127.0.0.1:6379：redis-cli.exe 启动后，就可以使用redis命令操作了。就比如我们刚才在php中存储的test变量，这里也是可以获取到的：get test 那么输出的也是Hello World这里可以查看redis中的一些命令 http://www.redis.cn/commands.html 。 4. 总结 # 刚开始学习redis，依然还有很多的不足，欢迎批评指正。

如何实现一个楼中楼的评论系统 1. 实现前的思考 # 在经历过多说和网易云跟帖后，总算是下定决心自己要写一个评论系统了。我们在使用的很多评论系统中，目前比较流行的就是楼中楼的方式了，比如百度贴吧，wordpress 等等。在这以前，一般都是按照时间顺序进行 1 楼、2 楼、3 楼的展示，如果要回复某个人，使用@符号标识出这个用户的名字，然后回复内容。可是这样存在一个很大的问题，讨论问题没有集中在一起，其他用户根本不知道你们在讨论什么，原作者在 1 楼发表评论，你进来回复这个用户的评论时，已经到 10 楼了，原作者再回复你又到 20 楼了。其他用户看到 10 楼时，早已经忘记原作者说了什么了。百度贴吧在改版之前就是这种方式，后来在新版中启用了楼中楼的方式，这种方式，关于某个话题的讨论就能集中在一块了。同时，知乎也对他的评论系统进行了一次改版，不过不是改版成楼中楼，而是在每个有对话评论的后面加上一个弹窗链接查看对话，点击链接后弹窗能看到这两个人之间互动的所有评论。采用时间顺序倒序或者正序平铺的方式展示评论，这种方式实现起来简单，但是阅读困难；采用楼中楼的方式展示评论，对用户的阅读习惯比较友好，但是实现起来可能比较困难。不过，最后仍然决定采用楼中楼的方式来，虽然本人博客的评论量也少的可怜，不过还是决定要实现一下。 2. 数据表的设计 # 先说下前后端使用的语言和框架，前端考虑到页面渲染和比较多的事件调用，使用了 vue 框架，vue 应该说不是最好的选择，毕竟对一个评论的前端部门来说，可能有点大材小用，不过为了快速开发，也就选择了 vue。后端使用的是 php 语言，数据库使用的是 mysql。数据库表的设计，既要考虑到可以导入以前的数据，又能方便以后添加新的评论。这里我创建了 3 个表： 文章表，用户表，评论表。在网易云跟帖关闭之前，我把自己的数据导出来了（多说的数据已经丢失，不知道导出的格式是什么了），我们来看下网易云跟帖里导出数据的格式：{ "title": "从0到1学习node(七)之express搭建简易论坛", "url": "www.xiabingbao.com/node/2017/02/20/node-express-forum.html", "sourceId": "", "ctime": 1487581007000, "comments": [ { "cid": "72813956", "ctime": 1493107384000, "content": "这个论坛对node 的版本有要求吗 我的node比较老 下载你的源码 访问出错", "pid": "0", "ip": "xxx", "port": 0, "sc": "web", "vote": 0, "against": 0, "anonymous": false, "user": { "userId": "1074123", "nickname": "有态度网友06q23q", "avatar": "", "anonymous": false } }, { "cid": "77196403", "ctime": 1493714822000, "content": "不太清楚，我这里node版本是6.9.4，npm版本是3.10.10，你试一下升级node版本", "pid": "72813956", "ip": "xxx", "port": 0, "sc": "web", "vote": 0, "against": 0, "anonymous": false, "user": { "userId": "2414123", "nickname": "小小dd蚊子", "avatar": "http://cms-bucket.nosdn.127.net/1d6faddedb544cee93ff426a4aa2fe7620170322162349.jpg", "anonymous": false } } ] } 从上面的数据里，可以看到，每个文章都有标题，url 和评论，评论的每一项都有自己对应的 id，其回复的评论 pid，内容 content，该评论的用户 userid, nickname 和 avatar。我这里也就只摘取主要的信息录入到数据库中。 2.1 用户表 # 用户表相对来说比较简单，要考虑的就是原有的 userid 也要作为字段进行保存，方便在导入评论数据时能找到对应的用户，在评论数据也导入完成后即可将该字段删除，以后新添加的注册用户用不到这个字段了。用户表的设计： 字段 类型 说明 id int 自增，主键 wid int 用户原有的 userid nickname varchar(50) 昵称 avatar varchar(100) 头像 status int 状态 设计好用户表后，将原数据中所有的用户都单独拿出来，然后使用 userid 作为 key 存储到一个数组中，这样也能起到一个去重的效果。把拿到的所有的用户数据存储到用户表 2.2 评论表 # 在设计评论表，主要考虑如下的因素： 评论必须依托于文章和用户才能存在，因此评论的外键是文章标识和 userid，留言板是一个文章内容为空的评论形式; 我想以后新的评论能使用自增 id，而不是跟随原有评论的 cid 来产生新的评论 id，因此这次评论表的主键是 id，原有的评论 id 只作为其中的一个字段 wid 来构造楼中楼的关系，这些旧评论插入到数据表时都会有新的评论 id； 楼中楼的评论是处在某个评论下的，同时，楼中楼里还有相互之前的互动回复。因此这个评论的 pid(parentid)表示当前评论处于哪个评论之下，同时 replyid 表示是回复的哪个评论；若直接回复的父级评论，则 pid 与 replyid 相同，都是父级评论的 id，若回复的不是父级评论，则 pid 为父级评论的 id，replyid 为回复评论的 id；pid 或 replyid 为 0 时，则表示直接对文章发表评论。 因此我们的评论表是这样设计的： 字段 类型 说明 id int 自增，主键 wid int 评论原有的主键 cid uid int 用户 id replyid int 该评论回复的评论 id，没有则为 0 pid int 该评论所在的父级 id，没有则为 0 aid varchar(100) 文章的标识 content varchar(300) 评论内容 createtime int 评论时间的时间戳 表中的 aid(文章的标识)可以是文章的 url，文章的 id 或者其他任何能够唯一识别该文章的东东都可以。这里我们使用的是文章的 uri 来作为唯一标识，比如上面数据中的文章，我们使用/node/2017/02/20/node-express-forum.html来标识文章。其他文章同理。将这些评论写入表时，我们还要注意的是，原数据中，每个评论都对应着一个用户，在我设计的系统里，用户与评论分来了，只使用 uid 来进行关联。新的用户与新的评论都是使用自有的自增主键，因此在原有评论进行入库时，需要将原来的 userid 转换为新用户表中的主键 id，新旧数据进行统一。文章表不做解释。 3. 具体实现 # 前端部分主要是负责展示每个文章的评论，同时让登录用户可以添加评论。 3.1 展示评论 # 我们已经对每个评论都添加了文章标识，前端只要根据 aid 就能拿到当前文章所有的评论。不过我们的评论是要楼中楼的方式展示的，不能一股脑的把数据平铺到页面中。我们在 2.2 中也说了，pid 为 0 的评论都是直接对文章进行评论的，这些评论应该是作为一级评论展示的；pid 为其他数据的，必然是属于某个评论之下，应当作为楼中楼展示。同时，无论一级评论，还是楼中楼的评论，都有可能产生分页的情况，因此这里也要做好分页处理。那么最终，我们前端拿到的结构应该大致是这样的：{ "code": 0, "data": [ { // 一级评论 "id": 1, "content": "蚊子的博客棒棒的", "createtime": "2017年08月08日00:26", "nickname": "匿名者", "reply": { // 楼中楼 "data": [ { "id": 1, "content": "谢谢，一起学习", "createtime": "2017年08月08日00:36", "nickname": "蚊子" } ], "page": { "cur_page": 1, "all_page": 1 } } } ], "page": { "cur_page": 1, "all_page": 1 } } 前端拿到接口返回的数据后，就可以渲染页面了。在头像的处理上，也考虑到了 https 的环境，因此返回的头像链接都是//开头的形式。 3.2 参与评论 # 用户对文章或者某个评论产生了共鸣，需要留言讨论一番，我们就需要用户能够把自己的评论也添加进去。评论的类型，细分的话，可以分为 3 类： 直接对文章发表评论，pid 与 replyid 为空； 对一级评论进行回复，pid 与 replyid 均为一级评论的 id; 对楼中楼进行回复，pid 为一级评论的 id，replyid 为你回复的评论的 id 我这里前端的实现参考了 oschina(开源中国)的评论方式。直接对文章评论，是直接在顶部的评论窗口进行输入；对其他评论进行回复时，采用弹窗的方式来进行回复。弹窗回复的好处就是，页面不用滚动，用户对某个评论的感知也能停留在这个位置；同时也不用增加各种不必要的小输入框来让用户输入评论。 3.3 登录 # 在登录问题上，我也是纠结了不少的时间，究竟是使用自己的登录系统呢，还是使用第三方登录呢，或者是用户不用注册登录，只要输入邮箱和昵称就能进行评论呢？使用自己的评论系统，那么就需要开发一套注册和登录流程，开发麻烦，而且对于想要回复一句话的用户来说，可能就直接放弃注册了；若只要输入邮箱和昵称就能评论，我考虑到可能会引起用户的无限评论，无法控制。因此，最后还是考虑接入第三方的登录，这里选择了使用微博作为第三方登录的入口，后续会考虑加入 github 的帐号登录。关于如何接入微博的第三方登录，我们下篇文章再讲，文档齐全，对不熟悉的开发者来说，刚开始可能有点懵逼，不过应该问题不大。 3.4 添加邮箱功能 # 用户在第三方登录成功后，在名字旁边有个小的 input 输入框，可以让用户输入邮箱来接收回复提醒，这个输入完全是自愿的，不输入邮箱也依然可以评论。也是考虑到本站是个小站，访问量极低，用户可能一时兴起评论了两句，事后又想起这个网站来，又不知道怎么找了。因此就想着添加一个邮件提醒功能，不让大神的评论石沉大海。 3.5 特别注意 # 在刚开始实现完成评论功能的时候，用户只要进到这个页面，评论就会加载。但是有个问题就是，用户不一定会把你的文章看到底部，不一定就看你的评论。因此后来文章就改成了按需加载，只有用户滚动到底部，有想要看评论的意向时采取加载评论。最终展示的效果就是这样： 4. 总结 # 作为一名前端开发，用仅有的后端知识开发一套博客的评论系统，显得是非常的简陋，整个框架的设计感觉也是很糙。同时缓存系统用的不熟练，不能做到评论信息的立即更新。这个系统依然还有很多改进的地方。欢迎大家对蚊子多多提意见和建议。在写这篇文章的时候，想着是以后要改版的时候，可以做成评论同步加载的方式进行。生成后的文章，更新频率极低，甚至不太变动，那么缓存的就是评论的内容，每当有新的评论时，就删除当前文章的缓存，重新加载新的数据，然后再缓存上新的数据，这样在评论数据更新比较低的时候，可以缓存的时间更长，同时也有利于搜索引起对评论内容的抓取。

金秋9月的思考 今天是 2017 年 9 月 1 号，夏天就这么过去了，晚上睡觉的时候也凉了很多，不用再开空调了。每次写点东西时，都是感慨时间过的太快，2017 年已经过去 2/3 了，你到现在做了什么吗，有什么收获吗？看看自己之前写的文章其实也能看到自己的状态，在 3，4，5，6 这四个月里，一共才发了 7 篇文章，而且整个 5 月里一篇文章也没有。要说工作忙也是一方面原因，没有空出时间来总结和学习；再一个就是自己确实变懒了，晚上回家想着能多休息会儿，多玩会儿。总说现在的年轻人焦虑，毕竟生活、工作、居住这么艰难，怎么能不焦虑呢？多学习学习，多赚点钱，让媳妇和孩子能有个自己的房子，让父母亲人在还能行动之前带他们出去走走，让他们享享晚年的幸福。前几天，爷爷突然就去世了，真是那句话：“明天和意外，你永远不知道哪个先来”，辛苦了一辈子，就这么走了。只希望自己能成长的快一些，让家人老的慢一些！这篇文章的格调好像有点沉重，不过前途依然是光明的。很多人觉得上帝没有眷顾到我们，其实上帝已经替我们挡了无数的伤害。“哪有什么岁月静好，不过是有人替你负重前行”！加油！

Vue组件实现tips的总结 官网上已经有的内容，我就不再赘述了，直接在官网上查看即可，这里蚊子想换个角度来讲解下vue的组件。组件，顾名思义，就是把一个相对独立，而且会多次使用的功能抽象出来，成为一个组件！如果我们要把某个功能抽象为一个组件时，要做到这个组件对其他人来说是个黑盒子，他们不用关心里面是怎么实现的，只需要根据约定的接口调用即可！我用一张图稍微总结了下Vue中组件的构成：可以看到组件中包含的东西还是蛮多的，而且，还有很多的点没有列出来，这里面的每一个知识点能都展开讲很多。不过我们这里不讲原理，只讲使用。我们以一个tips弹窗为例，来综合运用下组件的知识点。tips弹窗，几乎所有的框架或者类库，都会有弹窗这个组件，因为弹窗这个功能平时非常普遍，而且模块解耦度高！我们先来看下demo： 【 demo 】。 1. 接口约定 # 我们这里实现的弹窗，能用到的知识点有：props, event, slot, ref等。这里我们也能看到各个知识点是怎么运用的。/** * modal 模态接口参数 * @param {string} modal.title 模态框标题 * @param {string} modal.text 模态框内容 * @param {boolean} modal.showbtn 是否显示按钮 * @param {string} modal.btnText 按钮文字 */ Vue.component('tips', { props : ['tipsOptions'], template : '#tips', data(){ return{ show : false } }, computed:{ tips : { get() { let tips = this.tipsOptions || {}; tips = { title: tips.title || '提示', text: tips.text || '', showbtn : tips.showbtn || true, btnText : tips.btnText || '确定' }; // console.log(tips); return tips; } } } }) 2. modal组件的实现 # tips组件相对来说实现的比较简单，仅用作提示用户的简单弹层。模板： x {{tips.title}} {{tips.text}} {{tips.btnText}} 模板中将结构分成了三部分，标题、内容和操作区域。这里既可以使用props传递字符串，也可以使用slot进行定制。tips样式：.tips { position: fixed; left: 10px; bottom: 10px; z-index: 1001; -webkit-overflow-scrolling: touch; max-width: 690px; width: 260px; padding: 10px; background: #fff; box-shadow: 0 0 10px #888; border-radius: 4px; } .tips-close{ position: absolute; top: 0; right: 0; width: 20px; height: 20px; line-height: 20px; text-align: center; } .tips-header{ text-align: center; font-size: 25px; } 组件内的方法：methods:{ closeTips(){ this.show = false; }, yes : function(){ this.show = false; this.$emit('yes', {name:'wenzi', age:36}); // 触发yes事件 }, showTips(){ var self = this; self.show = true; setTimeout(function(){ // self.show = false; }, 2000) } } 3. 调用tips组件 # 首先我们开始渲染组件： 显示 提示标题 hello world wenzi 点击显示按钮后展示tips：var app = new Vue({ el : '.app', data : { tipsOptions : { title : 'tip' } } methods:{ // 监听从组件内传递出来的事件 yes(args){ // console.log( args ); alert( JSON.stringify(args) ); }, // 显示tips showtips(){ // console.log( this.$refs ); this.$refs.dialog.showTips(); } } }) 4. 总结 # 在这个简单的tips组件里，我们实现了用props传递参数，用$emit向外传递参数，用slot插槽来定制内容。需要注意的是：组件props是单向绑定，即父组件的属性发生变化时，子组件能接收到相应的数据变化，但是反过来就会出错。即不能在子组件中修改props传过来的数据，来达到修改父组件属性的目的。这是为了防止子组件无意修改了父组件的状态。另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。如果真的需要在子组件里进行修改，可以用这两种方法应对：定义一个局部变量，并用 prop 的值初始化它：props: ['initialCounter'], data: function () { return { counter: this.initialCounter } } 定义一个计算属性，处理 prop 的值并返回。props: ['size'], computed: { normalizedSize: function () { return this.size.trim().toLowerCase() } } 当然，这只是单页面中组件的实现，更复杂的组件后续我们也会实现。

浅谈javascript设计模式之发布订阅者模式 发布订阅者模式又称为观察者模式，有的书本中也对这两个模式进行了更加细致的区分！这里我们只研究发布订阅者模式。 1. 什么是发布订阅者模式 # 发布订阅者模式，我们可以通俗地用微信公众号来比喻： 只有该公众号的订阅者才能收到推送 公众号只负责推送信息，不关心是谁订阅了我，只要有信息推送，那么就推送给所有的订阅者 订阅者无需时不时的查看公众号是否有信息推送，只要公众号推送信息后，该订阅者就会收到通知 订阅者可随时取消对该公众号的订阅 从这个比喻来看，发布订阅者模式是为了发布者和订阅者之间避免产生依赖关系，发布订阅者之间的订阅关系由一个中介列表来维护。发布者只需做好发布功能，至于订阅者是谁，订阅者做了什么事情，发布者是无需关心的。 2. 模式的使用场景 # 发布订阅者模式中的事件驱动和解耦性，让我们非常方便地使用在一些场景中，比如ajax数据返回后的展示，厂家通知所有订阅用户新品已发布，异步登录，等等。发布订阅者模式，可以让我们不再涉及更多的回调处理，而且可以使模块的颗粒度更小。比如有个ajax的数据展示，其中一个订阅者A可以只负责数据的表格展示，另一个订阅者B只负责数据总量的计算。当有需求要把数据总量的计算修改为当前页的数据总量和整体的数据总量计算，那么订阅者A是不用任何变动的！ 2. 如何实现一个发布订阅者模式 # 在发布订阅者模式中，我们需要的功能有： 订阅，发布，取消订阅，还有一个列表来维护它们之间的订阅关系。var pubsub = {}; //订阅关系列表 ;(function(q){ var topics = [], subUid = -1; // 添加订阅者 q.subscribe = function(topic, func){ var token = (++subUid).toString(); if( !topics[topic] ){ topics[topic] = []; } topics[topic].push({ token : token, func : func }); return token; } // 触发 q.publish = function(topic, args){ var ss = topics[topic], len = ss ? ss.length: 0; // 取出订阅该主题所有的订阅者 while(len--){ var func = ss[len].func; func(topic, args); } } // 取消订阅 q.unsubscribe = function(token){ for(var key in topics){ if( topics[key] ){ var item; for(var i=0, len=topics[key].length; i