# itstack-ark-wx
>微信公众号:bugstack虫洞栈
沉淀、分享、成长,专注于原创专题案例,以最易学习编程的方式分享知识,让自己和他人都能有所收获。目前已完成的专题有;Netty4.x实战专题案例、用Java实现JVM、基于JavaAgent的全链路监控、手写RPC框架、架构设计专题案例[Ing]等。
## 1. 前言介绍
这个!截至到19年11月我已经工作6年了,从业Java但也折腾过C#、搞PHP也弄过中继器、IO板卡,似乎我就是一个很喜欢在技术上折腾的人!与此同时,我也搞了6年的个人小网站,它们的呈现形式多种多样;有用PHP自己捣鼓的技术站用于分享资料、书籍、软件等、有用PHPWIND和DISCUZ的搭建的个人论坛、有用emlog和wordpress搭建的个人博客、也有借用于github+hexo/jekyll的能力组装出的技术博客。但无一例外它们都战死于征战的路上了,亡于;org域名不能备案、PHP服务器瘫痪被清空、http连接被注入恶意内容、定位不准确经常换模式、缺少核心优质内容等等。但!老衲的心依然如春(cun),因为喜欢干一件事,往往来自于干一了件喜欢的事!
所以!从19年开始我又继续写博客了,注册了新的域名bugstack.cn,备了案、买了服务器、还喊了新的口号;沉淀、分享、成长,让自己和他人都能有所收获!并且将尘封已久的微信公众号找回;结构上调整、内容上布局、粉丝上求关注。在这期间遇到了更大的牛;小灰、王二哥、纯洁的微笑还有松哥等一群伙伴,从他们那学到很多知识,真的非常感谢!
那么!这次的产品功能总结一句话就是;将基于Github+Jekyll搭建的静态博客与我并未开发过的微信公众号功能打通,通过在文章短口令码加锁引导用户到公众号内回复密码可解锁内容,以此来获得粉丝关注,当然如果取消关注了则文章继续锁定。
在多说一句,我理解的产品;其实是使用研发技术力搭建出可以用于承载接收用户在各种设备上所生产的行为数据的一种产品化服务。所以有些产品在做减法,同时也有为丰富的功能做加法,但究其一点我们其实都是在为接收有价值数据服务的。兴衰存亡,皆在核心数据沉淀与运作上!
## 2. 流程设计
为了使博客粉丝主动关注微信公众号,我们在用户初次浏览文章时增加权限验证,给每一个用户都生成一个唯一码引导用户在公众号内回复解锁文章,以此来与微信openid对应。当用户取消关注时则进行删除openid或标记状态,使得用户无法继续浏览文章。其实为了更好的体验,我参照了大牛的方式内容60%的区域可见,其余内容渐进遮挡,蒙胧胧的感觉还挺美。整体流程图如下;
![微信公众号:bugstack虫洞栈 & 流程图设计](https://raw.githubusercontent.com/fuzhengwei/fuzhengwei.github.io/master/assets/images/pic-content/2019/11/other-112601.png)
## 3. 功能实现
为了实现本产品功能,我准备了;
1. 微信公众号;bugstack虫洞栈
2. 博客;本文使用的是github+jekyll;地址:https://bugstack.cn
3. 域名;域名申请比较简单,但可能针对不同的服务商还必须备案后才可以使用
4. 友盟;主要为了获取全局的唯一id值,也可以使用其他具备此功能的产品或者自己实现
5. 部署环境;Java云服务器、Mysql云数据库、https证书、Jdk1.8、tomcat1.8,云市场比较多按需购买,如果是本地调试可以使用https://natapp.cn,做免费网络穿透映射
### 3.1 前端
前端主要负责针对发布时设置了look: need的文章,在用户浏览文章检查是否有权限查看全部内容,当用户没有权限时隐藏文章60%内容,并通过页面结尾提醒用户在公众号内回复口令解锁文章。
1. 找到加锁文章容器ID,文章容器选择器:article.post.container.need,拿到选择器ID针对这类文章进行缩小隐藏处理。
```html
<article class="post container need lock" itemscope="" itemtype="http://schema.org/BlogPosting" style="height: 4400px;">
<div class="row">
<div class="col-md-9 markdown-body">
<h2 id="前言介绍">前言介绍</h2>
<p>为什么会有路由层?因为在微服务架构设计中,往往并不会直接将服务暴漏给调用端,而是通过调用路由层进行业务隔离,以达到不同的业务调用对应的服务模块。</p>
<p><strong>Spring Cloud Zuul</strong></p>
```
2. 使用Jquery把文章所在容器高度缩小,这样会把内容进行压缩
```js
// 文章所在容器的选择器
var articleSelector = 'article.post.container.need';
// 找到文章所在的容器
var $article = $(articleSelector);
// 文章的实际高度
var article = $article[0], height = article.clientHeight;
// 文章隐藏后的高度
var halfHeight = height * 0.4;
// 隐藏缩小
$article.css('height', halfHeight + 'px');
$article.addClass('lock');
```
3. 给文章加一点朦胧感,渐变隐藏
```css
.asb-post-01 {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
display: none;
z-index: 10000;
margin-bottom: 0;
}
.asb-post-01 .mask {
height: 240px;
width: 100%;
background: -webkit-gradient(linear, 0 top, 0 bottom, from(rgba(255, 255, 255, 0)), to(#fff));
}
```
4. 从UM全局唯一ID中获取token
友盟作为网站数据采集服务,会生成一个针对用户的全局唯一值UM_distinctid,而我们需要就使用这个值部分截取后作为唯一token加锁钥匙
```other
UM_distinctid = 16e9cd64925334-0882eb883c9554-7711b3e-144000-16e9cd6492631c
```
```js
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 getUUID().toUpperCase();
}
return value.substring(value.length - 6).toUpperCase();
}
```
5. 定时轮旋检查是否关注公众号并解锁,可以优化写入全局Jquery值或者记录在cookie,减少轮询检查次数
```js
// 查询后端的结果
var _detect = function() {
console.info(token);
$.ajax({
url : 'https://bugstack.cn/xx/xx/check',
type: "GET",
dataType: "text",
data : {
token : token
},
success : function(data) {
console.log(data);
if (data == 'refuse') {
_lock();
} else {
_unlock();
}
},
error : function(data) {
_unlock();
}
})
}
// 定时任务
_detect();
setInterval(function() {
_detect();
}, 5000);
```
6. 引导用户关注公众号
现在将token值回显到页面,提醒用户关注公众号回复口令解锁全部文章,以此来得到粉丝的关注。效果如下;
![微信公众号:bugstack虫洞栈 & 文章加锁效果](https://raw.githubusercontent.com/fuzhengwei/fuzhengwei.github.io/master/assets/images/pic-content/2019/11/other-112602.png)
### 3.2 后端
1. 本地环境开发需要安装(免费)http://natapp.cn/,做网络穿透便于我们进行测试
2. 服务度三个主要接口;1同名称的get、post请求,分别用于公众号验验、接收用户行为与回复信息。2给博客提供验证是否解锁接口
3. 在微信公众号;开发->基础设置(服务器配置),修改配置内容并开启服务,此时服务端会收到验证请求信息
4. Java服务度采用领域驱动设计微服务方式开发,DDD的开发模式会更加清晰以及易于后续功能的拓展
5. (提醒)个人微信号,部分接口权限是没有的,同时如果开启开发者功能配置后,自定义菜单和自定义回复都会失效。而自定义菜单又不开放给个人微信号,所以需要再次配置开启,但是不能修改
#### 开发环境
1. jdk 1.8、tomcat8、idea2018、Maven3
2. Spring Boot 2.1
没有合适的资源?快使用搜索试试~ 我知道了~
微信公众号:bugstack虫洞栈 沉淀、分享、成长,专注于原创专题案例,以最易学习编程的方式分享知识,让自己和他人.zip
共42个文件
java:35个
xml:5个
yml:1个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 78 浏览量
2024-03-24
11:23:54
上传
评论
收藏 46KB ZIP 举报
温馨提示
微信公众号:bugstack虫洞栈 沉淀、分享、成长,专注于原创专题案例,以最易学习编程的方式分享知识,让自己和他人
资源推荐
资源详情
资源评论
收起资源包目录
微信公众号:bugstack虫洞栈 沉淀、分享、成长,专注于原创专题案例,以最易学习编程的方式分享知识,让自己和他人.zip (42个子文件)
java0323
pom.xml 5KB
src
test
java
org
itstack
ark
wx
test
ApiTest.java 1KB
main
resources
spring
spring-config-answer.xml 8KB
mybatis
mapper
UserAuth_Mapper.xml 792B
config
mybatis-config.xml 311B
application.yml 550B
spring-config.xml 427B
java
org
itstack
ark
wx
application
WxReceiveService.java 405B
UserLockAuthService.java 311B
WxValidateService.java 345B
interfaces
WxPortalController.java 4KB
BlogController.java 2KB
WxApplication.java 1KB
infrastructure
repository
UserAuthPatrolRepository.java 888B
UserAuthGrantRepository.java 1KB
dao
UserAuthDao.java 493B
common
Constants.java 271B
po
UserAuth.java 1KB
util
HttpClient.java 2KB
XmlUtil.java 3KB
sdk
XmlUtil.java 3KB
SendUtil.java 2KB
Article.java 952B
SignatureUtil.java 2KB
WeChatConstant.java 3KB
domain
validate
service
WxValidateServiceImpl.java 945B
receive
repository
IUserAuthGrantRepository.java 419B
service
WxReceiveServiceImpl.java 836B
engine
Engine.java 410B
EngineBase.java 2KB
EngineConfig.java 2KB
impl
MsgEngineHandle.java 2KB
logic
LogicFilter.java 390B
impl
UnlockFilter.java 1KB
AnswerFilter.java 908B
UnsubscribeFilter.java 921B
SubscribeFilter.java 1KB
model
MessageTextEntity.java 2KB
BehaviorMatter.java 1KB
lockauth
repository
IUserAuthPatrolRepository.java 335B
service
UserLockAuthServiceImpl.java 805B
README.md 27KB
共 42 条
- 1
资源评论
Kwan的解忧杂货铺
- 粉丝: 1w+
- 资源: 3625
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功