好了，文章已经隐藏了起来，并且渐变效果也有了，是时候提醒读者关注公众号了。在 <div></div> 元素的下方加入以下代码。
<div> <div>扫码或搜索：<span>沉默王二</span></div> <div> <span>发送 </span><span>290992</span> </div> <div> 即可<span>立即永久</span>解锁本站全部文章 </div> <div> <img src="http://www.itmind.net/wp-content/uploads/2019/09/cmower.jpg"> </div> </div>再来两行 CSS 代码，设置扫码区域的高度和背景。
.asb-post-01 .info { background: white; height: 370px; }呈现出来的页面效果图如下所示，是不是感觉很完美了？简直天衣无缝好不好，忍不住给自己点个赞。
6）生成口令
页面效果已经搞定了。接下来就很关键了，怎么确定读者的身份标识呢？
当然是 Cookies，Cookies 里面保存了浏览网页时自动生成的 Session ID，而且每一个用户都是不一样的，这样不就可以来唯一标识一台浏览设备了吗？
这是崔庆才大佬给出的解决方案，我举双手赞同。怎么获取呢？代码如下所示。
function getCookie(name) { var value = "; " + document.cookie; var parts = value.split("; " + name + "="); if (parts.length == 2) return parts.pop().split(";").shift(); } function getToken() { let value = getCookie('UM_distinctid'); if (!value) { return defaultToken; } return value.substring(value.length - 6).toUpperCase(); }7）轮循监听解锁或者隐藏文章
前端还有最后一个工作要做，就是轮循监听，每隔一段时间向后端发送一个查询，查询读者的口令是否已经保存到数据库，如果保存过了，隐藏的文章就要重现江湖了；如果没有保存，文章当然要继续隐藏着。
具体的代码如下所示。
var _lock = function() { $article.css('height', halfHeight + 'px'); $article.addClass('lock'); $('.asb-post-01').css('display', 'block'); } var _unlock = function() { $article.css('height', 'initial'); $article.removeClass('lock'); $('.asb-post-01').css('display', 'none'); } // 查询后端的结果 var _detect = function() { console.log('Detecting Token', token); $.ajax({ url : 'http://qingmiaokeji.cn/jfinal/wx/', method : 'GET', data : { token : token }, success : function(data) { console.log('locked', data.locked); if (data.locked === true) { _lock(); } else { _unlock(); } }, error : function(data) { _unlock(); } }) } _detect(); setInterval(function() { _detect(); }, 5000);①、_lock 方法的作用是隐藏文章。
②、_unlock 方法的作用是显示文章。
③、_detect 方法的作用是查询口令有没有保存，如果保存就解锁文章，如果没有就隐藏文章。
④、setInterval 是一个定时器，每隔 5 秒执行一次 _detect 方法。
03、后端前端的工作已经完成了。那后端的工作都包括哪一些呢？
1）将读者发送的口令保存到数据库。
2）响应前端的定时查询，把要解锁还是继续锁定的结果返回。
这两个工作看起来平淡无奇，但如果从零开发的话，还是非常耗时耗力的。我们应该珍惜站在巨人肩膀上的机会，不是吗？
这次我采用的后端框架是 JFinal，配合其微信开发 SDK，省时省力省心。简单介绍一下 JFinal，它是基于 Java 语言的极速 WEB + ORM 框架，其核心设计目标是开发迅速、代码量少、学习简单、功能强大、轻量级、易扩展、Restful——非常适合我们这次的开发任务。
为了减轻大家的开发成本，我已经将项目开源到了 GitHub 上，地址如下所示：
https://github.com/qinggee/jfinal_weixin_demo_for_maven
大家可以直接将项目导出到 IDE 中，只需要把数据库链接地址、用户名和密码，以及微信订阅号相关配置修改一下就行了。截个图大家参照一下。
为了方便大家的实操，我把关键的内容详细地说明一下。
1）创建数据库和表
创建数据库就不再赘述了，就说创建表吧，SQL 如下所示。
DROP TABLE IF EXISTS `weixin`; CREATE TABLE `weixin` ( `id` int(11) NOT NULL AUTO_INCREMENT, `openid` varchar(255) NOT NULL, `token` varchar(255) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;weixin 表有三个字段：
①、id 为主键；
②、openid 为微信用户的关键标识。当用户取消关注订阅后，可根据该字段删除记录。
③、token 为博客读者的唯一标识。当用户关注订阅号后，可根据该字段判定博客是否需要解锁。
2）读者关注订阅号后，保存口令