使用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并写入数据库，如果采集频率比较高的话可以使用代理IPwww.xhuosoft.cn，requests.get添加一个proxies就可以。

kxd_api = 'https://www.kxdao.net/forum-42-1.html'
wgzj_api = 'http://www.wgzj.cn/bbs/forum-2-1.html'
xb0818_api = 'http://www.0818tuan.com/list-1-0.html'
leyu_api = 'https://bbs.leyuz.net/f/xianbao'

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 = url
            self.res = requests.get(url,headers=headers)
            #self.res.encoding = "utf-8"
            self.soup = etree.HTML(self.res.text)
                
    #科学刀最新线报
    def spider_kxd(self):
        site = '科学刀'
        soup = Spider(kxd_api).soup
        for soup_a in soup.xpath('//a[@class="s xst"]'):
            title = soup_a.text
            link = soup_a.get('href')
            if Message.get_or_none(Message.link==link):
                pass
            else:
                Message.create(title=title,link=link,site=site)

如果需要采集之后推送到微信群使用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的版本即可。

具体最终效果看这里