只看不赞，或者只收藏不赞的都是耍流氓，放学别走，我找我哥收拾你们。
下载&运行
|
1 2 3 4 5 6 7 |
git clone git@github.com:jrainlau/wechat-subscriptor.git cd wechat-subscriptor && npm install npm run dev // run in dev mode cd backend-server && node crawler.js // turn on the crawler server open `localhost:8080` in your broswer and enjoy it. |
项目介绍
我在微信上关注了不少的公众号，经常浏览里面的内容。但是往往在我阅读文章的时候，总是被各种微信消息打断，不得不切出去，回复消息，然后一路点回公众号，重新打开文章，周而复始，不胜其烦。后来想起，微信跟搜狗有合作，可以通过搜狗直接搜索公众号，那么为什么不利用这个资源做一个专门收藏公众号的应用呢？这个应用可以方便地搜索公众号，然后把它收藏起来，想看的时候直接打开就能看。好吧，其实也不难，那就开始从架构开始构思。
整体架构
国际惯例，先看架构图：
然后是技术选型：
- 利用搜狗的API作为查询公众号的接口
- 由于存在跨域问题，遂通过
node爬虫使用接口 - 使用
vue进行开发，vuex作状态管理 - 使用
mui作为UI框架，方便日后打包成手机app - 使用
vue-cli初始化项目并通过webpack进行构建
首先分析红圈中的vuex部分。它是整个APP的核心，也是所有数据的处理中心。
客户端所有组件都是在action中完成对流入数据的处理（如异步请求等），然后通过action触发mutation修改state，后由state经过getter分发给各组件，满足“单项数据流”的特点，同时也符合官方推荐的做法：
理解完最重要的vuex以后，其他部分也就顺利成章了。箭头表示数据的流动，LocalStorage负责储存收藏夹的内容，方便下一次打开应用的时候内容不会丢失，node服务器负责根据关键字爬取搜狗API提供的数据。
是不是很简单？下面让我们一起来开始coding吧！
初始化项目
npm install vue-cli -g安装最新版的vue-cli，然后vue init webpack wechat-subscriptor，按提示经过一步步设置并安装完依赖包以后，进入项目的目录并稍作改动，最终目录结构如下：
具体的内容请直接浏览项目
服务器&爬虫
进入/backend-server文件夹并新建名为crawler-server.js的文件，代码如下：
|
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 41 42 43 44 45 |
/*** crawler-server.js ***/ 'use strict' const http = require('http') const url = require('url') const util = require('util') const superagent = require('superagent') const cheerio = require('cheerio') const onRequest = (req, res) => { // CORS options res.writeHead(200, {'Content-Type': 'text/plain', 'Access-Control-Allow-Origin': '*'}) let keyWord = encodeURI(url.parse(req.url, true).query.query) // recieve keyword from the client side and use it to make requests if (keyWord) { let resultArr = [] superagent.get('http://weixin.sogou.com/weixin?type=1&query=' + keyWord + '&ie=utf8&_sug_=n&_sug_type_=').end((err, response) => { if (err) console.log(err) let $ = cheerio.load(response.text) $('.mt7 .wx-rb').each((index, item) => { // define an object and update it // then push to the result array let resultObj = { title: '', wxNum: '', link: '', pic: '', } resultObj.title = $(item).find('h3').text() resultObj.wxNum = $(item).find('label').text() resultObj.link = $(item).attr('href') resultObj.pic = $(item).find('img').attr('src') resultArr.push(resultObj) }) res.write(JSON.stringify(resultArr)) res.end() }) } } http.createServer(onRequest).listen(process.env.PORT || 8090) 1">
下载&运行
项目介绍我在微信上关注了不少的公众号，经常浏览里面的内容。但是往往在我阅读文章的时候，总是被各种微信消息打断，不得不切出去，回复消息，然后一路点回公众号，重新打开文章，周而复始，不胜其烦。后来想起，微信跟搜狗有合作，可以通过搜狗直接搜索公众号，那么为什么不利用这个资源做一个专门收藏公众号的应用呢？这个应用可以方便地搜索公众号，然后把它收藏起来，想看的时候直接打开就能看。好吧，其实也不难，那就开始从架构开始构思。 整体架构国际惯例，先看架构图：
然后是技术选型：
首先分析红圈中的 客户端所有组件都是在
理解完最重要的 是不是很简单？下面让我们一起来开始coding吧！ 初始化项目
具体的内容请直接浏览项目 服务器&爬虫进入
|
