使用vue + fastapi在heroku上搭建线报网站

爬取即时线报，通过vue.js和axios.js调用fastapi相关数据到html页面进行展示。

效果展示：最新线报

Heroku

• 注册heroku
• 安装heroku cli

mkdir haoyangmao && cd haoyangmao git init heroku git:remote -a haoyangmao

线报采集

用python写一个简单的爬虫，大致代码如下，四个目标网站，利用requests+lxml库获取目标网站线报的url和title并写入数据库，如果采集频率比较高的话可以使用代理IP www.xhuosoft.cn，requests.get添加一个proxies就可以。

headers = {"User-Agent":"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36"}class Spider(object):def __init__(self,url=None):if url!=None:self.url = urlself.res = requests.get(url,headers=headers)#self.res.encoding = "utf-8"self.soup = etree.HTML(self.res.text)def spider_kxd(self):soup = Spider(kxd_api).soupfor soup_a in soup.xpath('//a[@class="s xst"]'):title = soup_a.textlink = soup_a.get('href')if Message.get_or_none(Message.link==link):passelse:Message.create(title=title,link=link)

如果需要采集之后推送到微信群使用wxpy库即可。

fastapi

fastapi字面意思是一个快的api库，通过fastapi将线报信息转换为api接口，通过网页进行调用。
大致代码如下：

@app.get("/xb/") def xb(request: Request):p = Message.select(Message.title,Message.link).order_by(Message.pubtime.desc()).limit(10)data = []for q in p:msg = {'title':q.title,'link':q.link}data.append(msg)return data

Vue.js

前端使用vue.js和axios.js与fastapi进行数据交互。

部署

创建一个Procfile，内容如下：

web: gunicorn -w 3 -k uvicorn.workers.UvicornWorker main:app

创建一个requirements.txt，内容为你所项目所使用的各类依赖库。
创建一个runtime.txt，内容写python的版本即可。

具体最终效果看这里

总结

以上是生活随笔为你收集整理的使用vue + fastapi在heroku上搭建线报网站的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。