本文一步一步教大家如何利用Vue.js + Vuex制作专门收藏微信公众号的app
项目地址：
下载&运行
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.
项目介绍
我在微信上关注了不少的公众号，经常浏览里面的内容。但是往往在我阅读文章的时候，总是被各种微信消息打断，不得不切出去，回复消息，然后一路点回公众号，重新打开文章，周而复始，不胜其烦。后来想起，微信跟搜狗有合作，可以通过搜狗直接搜索公众号，那么为什么不利用这个资源做一个专门收藏公众号的应用呢？这个应用可以方便地搜索公众号，然后把它收藏起来，想看的时候直接打开就能看。好吧，其实也不难，那就开始从架构开始构思。整体架构
国际惯例，先看架构图：
然后是技术选型：
1.利用搜狗的API作为查询公众号的接口。
2.由于存在跨域问题，遂通过 node 爬虫使用接口。
3.使用 vue 进行开发， vuex 作状态管理。
4.使用 mui 作为UI框架，方便日后打包成手机app。
5.使用 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 的文件，代码如下：
<div class="jb51code">
<pre class="brush:js;">
/ 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&_sugtype=').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)
console.log('Server Start!')