Flask项目-实现爬虫实时抓取数据并刷新呈现

最新推荐文章于 2024-08-27 20:04:30 发布

Serhroder

最新推荐文章于 2024-08-27 20:04:30 发布

阅读量1.1w

点赞数 4

文章标签： ajax jquery html python flask

本文链接：https://blog.csdn.net/Serhroder/article/details/116277987

版权

Flask项目-实现爬虫实时抓取数据并刷新呈现

本人想要实现一个实时抓取比特币价格（~~矿潮快点结束吧~~ ）并实时刷新呈现在Echarts的网站，因此产生了本篇文章。本文运用了Echarts基础样式。

由于这个网站的虚拟货币价格数据是实时刷新的，因此我们只需要定时抓取就可以实现动态更新数据。

而echarts接受的数据是字典包着列表的JSON数据，因此我们要将抓取数据的’¥’和’,'进行处理再return。

首先是后端Flask+requests的代码:

from flask import Flask,render_template
import requests
from lxml import etree

app = Flask(__name__)

@app.route('/')
def html():
    return render_template('test.html')
    #return html
@app.route('/static/js/getdata',methods=['POST'])
def return_data():
    headers = {"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:88.0) Gecko/20100101 Firefox/88.0"}
    url = "https://coinmarketcap.com/zh/currencies/bitcoin/markets/"
    respon = requests.get(url, headers=headers)
    response = etree.HTML(respon.text)
    respon.encoding = 'utf-8'
    #此处为爬虫发送请求并且用etree.html获取该网页的所有text内容，由于请求url里还有很多html标签，如果不用etree.html会报错

    data = response.xpath('/html/body/div[1]/div/div[1]/div[2]/div/div[1]/div[2]/div[2]/div[1]/div/text()')
    for i in data:
        data = i
    data_str = ''
    shuju = ''
    data_str += str(data)
    #由于我们获取到的shuju这个变量并不是str类型，而是ElementUnicoderesult,因此将此转换为str
    num = data_str.find(',')
    for x in range(1, num):
        shuju += data_str[x]
    for y in range(num+1,10):
        shuju += data_str[y]
    #而这里不知什么原因转换为str以后用.find找不到￥这个符号，但是抓取的数据的第一个位置都为￥，因此直接从1开始处理。而num则是记录,的位置并且从他下一个开始处理。
    data = {"price":[shuju]}
    #将其转换为echarts可以直接赋值的JSON。
    return data

if __name__ == '__main__':
    app.run()

前端代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加密货币涨幅动态刷新</title>
    <script src="../static/js/jquery-3.4.1.js"></script>
    <script src="../static/js/echarmin.js"></script>
    <script src="../static/js/shuaxin.js"></script>
</head>
<body>
    <img src="../static/img/1.gif" alt="">
    <!--上面这一串引用图片的是我自己的私货，自己去掉即可-->
    <div id="main" style="width: 600px;height:400px;"></div>
    <br>
    <script>
    var myChart = echarts.init(document.getElementById('main'));
    var price_data = []

myChart.setOption({
        title: {
            text: '加密货币涨幅动态刷新'
        },
        tooltip: {},
        legend: {
            data:['价格']
        },
        xAxis: {
            name:'币种',
            data: ["BTC"]
        },
        yAxis: {},
        series: [{
            name: '价格',
            type: 'line',
            data: price_data
        }]
    });


</script>
</body>
</html>

由于我这里为了让主HTML看起来简便，我写了一个js并且把ajax和刷新操作的代码都放到了里面。

js代码:

function shuaxin() {
    $.ajax({
        url : "/static/js/getdata",
        type : "POST",
        datatype : "JSON",
            success:function(datas){     
                price_data = datas.price
                console.log(price_data)
                <!--这里是我为了方便看控制台才写的，也可自行去掉-->
                myChart.setOption({
            series: [{
            name: '价格',
            type: 'bar',
            data: price_data
        }]
    });
        },
        error:function(){
            alert("导入失败")
        }
    })
}

    var process1 = window.setInterval("shuaxin()",5000)
    <!--定时器每5秒刷新数据并写入-->