ca7dh

上一篇：Vue 2.0 起步(6) 后台管理Flask-Admin - 微信公众号RSS
总算赶在2017年春节前把这个项目完结了！
第7篇新知识点不多，主要是综合应用Flask、Vue

本篇关键字：

本篇完成功能：

1. 上传订阅列表时，Python抓取公众号主页上的文章列表
2. 点击右侧导航栏某一公众号，左侧显示它所包含的文章列表
3. 点击顶部菜单（订阅文章），左侧显示所有公众号的文章列表，按更新时间排列
4. 左侧显示某一公众号文章列表时，点击更新，可以检查是否有最新发表的公众号文章

演示网站：
DEMO: http://vue2.heroku.com

注：bootstrap v4 alpha6更新了，界面还没来及重新匹配，见谅！

在此之前，先依照最新的models，更新数据库结构。Article模型有更新

/app/models.py

我们在 Vue 2.0 起步(5) 订阅列表上传和下载 - 微信公众号RSS 中，上传订阅列表时，服务器端是在里处理。我们添加：Flask异步调用函数，来爬虫抓取公众号主页上的文章

/app/api_1_0/mps.py

这个爬虫函数使用来异步抓取：

/app/api_1_0/fetchArticles.py

注意：sogou.com搜索不能太频繁，不然会要求输入验证码。
看到服务器上有这个提示，要么等会再来，要么手动输入验证码来立即解除限制

这里需要在vue-router里，添加新的路由，以显示公众号文章列表。
注意：新的路由是动态的，可以匹配任意公众号文章的视图，比如, ...
另外，取了个别名：，在编程式路由跳转时会用到

/src/main.js

我们在导航栏的每个公众号上，添加，来触发获取文章的ajax请求。传给服务器的参数是：weixinhao、headers:token。获取到的数据，存入LocalStorage中。
注意：，这是编程式路由跳转，观察浏览器的地址栏是不是变化了？而且带入了我们想要的参数，供使用

/src/components/Sidebar.vue

当然，服务器端需要对这个Ajax请求作出响应。检查这个公众号，如果不存在，则需要重新上传订阅列表。如果存在，则查询服务器端对应的文章集合，和上次同步文章列表的时间。这个动作，不会重新去sogou.com抓取新的文章

/app/api_1_0/mps.py

好了，数据取回来了，路由也跳转了，显示公众号文章吧。
articleList用计算属性，读取LocalStorage中的值。
TODO: use vuex, 从store中取出数据

/src/components/Article.vue

如果想查看所有的公众号的文章列表，则先在顶部菜单条上添加路由

/src/App.vue

这个是总体显示，逻辑比较简单，也是用计算属性读取所有文章，再按发表时间，排一下序就行

/src/components/Articles.vue

大家注意到，我们的公众号文章，第一次是在上传订阅列表时更新的。后续再次更新的话，可以由用户来触发。
我们带入参数，通知服务器，同步更新就行，不需要异步，本地LocalStorage里，已经有历史数据。

/src/components/Articles.vue

服务器端，检查上次这个公众号更新时间，少于5分钟，则不更新，以免太频繁，给sogou.com封掉

/app/api_1_0/mps.py

爬虫函数，看到参数是的话，就不再使用异步抓取了，而是同步等待爬虫结果。客户会看到动态的同步图标，直到更新完毕。

/app/api_1_0/fetchArticles.py

好了，总算从头到尾，完整地做完一个项目了！
其实，这只是一个框架，把前端、后端、数据爬取等等，都跑通了一遍而已！如果是真正的项目，需要完善的东东很多！

大家踊跃评论哦！评论满100上源码 ;-)
（笑话而已，已经上传了，自己找找哦）

DEMO: http://vue2.heroku.com

部署时要注意：

1. 数据库更新了，heroku run bash -> python manage.py clear_A -> python manage.py deploy
2. heroku.com dashboard里，加上一个系统变量 WXUIN，转成文章永久链接用。如何计算，谷歌之
3. requirement.txt里，加上lxml==3.6.4，给BeatuifulSoup用

---

TODO:

• 用移动端UI来改写UI，适应手机访问
• 同级组件的数据共享，比如articleList，最好统统用vuex来访问，LocalStorage有时会有不同步刷新的小bug
• 添加功能：删除已订阅的公众号
• 后台管理Flask-Admin，普通用户也可以查看部分内容（现在只有admin有权限）
• Bootstrap v4 alpha6发布了，UI有些改变，需要更新 main.js，重新
• Articles页面，数据多了要分页
• Copyright div，build之后不显示？需要手动放在 </body>之前？

---

http://www.jianshu.com/p/ab778fde3b99

https://github.com/kevinqqnj/vue-tutorial
请使用新的template: https://github.com/kevinqqnj/flask-template-advanced