爬取即時線報，通過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上搭建线报网站的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。