Vue.js + Flask全栈开发WebApp
这段时间Vue.js很火，所以我也跟风地学了一阵，但是无奈找不到个好的项目练手。有一天，看到了一个小伙伴的项目，基于React + Flask做的一个新闻聚集网站，解决了每天要逛不同网站去看不同新闻的问题，正好我也有这方面的需求，所以不如自己动手写一个。于是这个项目就开始了。点击访问，查看源码
项目参考了 react-news-board。
采用的技术栈：
- Flask 后台提供api
- Vue + Vuex 前端数据展示
- sqlite 用于储存数据
不同之处
如上面所说，本项目参考自 react-news-board。在此基础上做了一些改动：
- 原项目采用实时爬取新闻放到前端展示，这样的效率不高，而且当用户量达到一定程度时，后端同时发出的请求太多，可能会被新闻源网站封IP。本项目采用定时更新新闻，并保存到数据库中，用户需要阅读新闻时从数据库中取。
- 原项目对移动端页面不太友好，苦于自己也是个前端苦手，所以，也只能力所能及地优化移动端页面。
后端
采用flask-restful提供api接口
目录结构如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
➜ Vue_News_Board git:(master) tree ./server ./server ├── api.py ├── app.py ├── config.py ├── __init__.py ├── spider │ ├── ...... ├── static │ ├── ...... └── templates └── index.html |
爬虫
爬虫代码放在spider目录下，目录结构如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
➜ server git:(master) tree ./spider ./spider ├── base.py ├── bobao_news.py ├── freebuf_news.py ├── hacker_news.py ├── __init__.py ├── jobbole_news.py ├── manage.py ├── models.py └── news.db |
运行python manage.py 即可开始爬取新闻并保存到new.db。
服务器上使用crontab来执行定时任务，每天8:00、12:00、16:00、20:00更新新闻。
前端
使用vue-cli Vue的脚手架编写，主要代码在client/vue_news/src下面。
效果
TODO
- 前端直接点击更新新闻
- 优化页面样式
- 添加更多新闻源
- ……
链接：https://www.ioiogoo.cn/2017/01/09/vue-js-flask全栈开发webapp/
本站所有文章除特殊说明外均为原创，转载请注明出处!