Vue.js + Flask全栈开发WebApp

  • 2017-01-09
  • 2,124
  • 0

这段时间Vue.js很火,所以我也跟风地学了一阵,但是无奈找不到个好的项目练手。有一天,看到了一个小伙伴的项目,基于React + Flask做的一个新闻聚集网站,解决了每天要逛不同网站去看不同新闻的问题,正好我也有这方面的需求,所以不如自己动手写一个。于是这个项目就开始了。点击访问查看源码

项目参考了 react-news-board

采用的技术栈:

  • Flask 后台提供api
  • Vue + Vuex 前端数据展示
  • sqlite 用于储存数据

不同之处

如上面所说,本项目参考自 react-news-board。在此基础上做了一些改动:

  • 原项目采用实时爬取新闻放到前端展示,这样的效率不高,而且当用户量达到一定程度时,后端同时发出的请求太多,可能会被新闻源网站封IP。本项目采用定时更新新闻,并保存到数据库中,用户需要阅读新闻时从数据库中取。
  • 原项目对移动端页面不太友好,苦于自己也是个前端苦手,所以,也只能力所能及地优化移动端页面。

后端

采用flask-restful提供api接口
目录结构如下:

爬虫

爬虫代码放在spider目录下,目录结构如下:

运行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/
本站所有文章除特殊说明外均为原创,转载请注明出处!

评论

还没有任何评论,你来说两句吧