爬虫--可视化项目（二）

 上次步骤请看， 爬虫--可视化项目（一）_北希738的博客-CSDN博客

一，创建flask项目，导入模板，创建路由。

二，添加可视化页面，构造可视化网页，利用css 样式，并引入数据可视化的相关js包。

三，创建一个py文件，调用数据库数据。

四，路由引用数据，并返回给页面。

五，利用ajax获取后台数据，让页面呈现。

一、创建路由

        

from flask import Flask
from flask import request
from flask import render_template
from flask import jsonify
# from jieba.analyse import extract_tags
import string
import utils

app = Flask(__name__)


@app.route('/')  # 访问目标路由
def hello_world():  # put application's code here
    return render_template("mian.html")


@app.route("/c1")
def get_cl_data():
    data = utils.get_cl_data()
    return jsonify({"sum_confirmed": data[0], "sum_cured": data[1], "sum_died": data[2]})


@app.route("/c2")
def get_c2_data():
    res = []
    for tup in utils.get_c2_data():
        res.append({"name": tup[0], "value": int(tup[1])})
    return jsonify({"data": res})




@app.route('/ajax', methods=["get", "post"])  # 访问目标路由
def hello_world4():  # put application's code here
    name = request.values.get("name")
    pwd = request.values.get("pwd")
    print(f'name={name},pwd={pwd}')
    return '1000'


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

二、调用数据库。

        

import time
import pymysql


def get_time():
    time_str = time.strftime("%Y{}%m{}%d %X")
    return time_str.format("年", "月", "日")


def get_conn():
    # return 链接，游标

    # 创建链接
    conn = pymysql.connect(host="",
                           user="",
                           password="",
                           db="",
                           charset="")
    # 创建游标,默认是元组型
    cursor = conn.cursor()
    return conn, cursor


def close_conn(conn, cursor):
    if cursor:
        cursor.close()
    if conn:
        conn.close()


def query(sql, *args):
    """
    封装通用查询
    :param sql:
    :param args:
    :return :返回查询到的结果,((),(),)的形式
    """
    conn, cursor = get_conn()
    cursor.execute(sql, args)
    res = cursor.fetchall()
    close_conn(conn, cursor)
    return res


def get_cl_data():
    """
    :return: 返回大屏div id=c1的数据
    """
    # 因为会更新多次数据，取时间戳最新的数据
    sql = "select sum_confirmed," \
          "sum_cured," \
          "sum_died " \
          "from total " \
          "where updataTime = (select updataTime from total order by updataTime desc limit 1)"
    res = query(sql)
    return res[0]




if __name__ == "__main__":
    # print(get_time())
    # print(get_cl_data())
    print(get_r2_data())

三、利用ajax获取后端数据

        

function gettime() {
    $.ajax({
        url: "/time",
        timeout: 10000,//超时时间设置10秒
        success: function (data) {
            $("#time").html(data)
        },
        error: function (xhr, type, errorThrown) {

        }
    });
}

function get_cl_data() {
    $.ajax({
        url: "/c1",
        success: function (data) {
            $(".num h1").eq(0).text(data.sum_confirmed);
            $(".num h1").eq(1).text(data.sum_cured);
            $(".num h1").eq(2).text(data.sum_died);
        },
        error: function (xhr, type, errorThrown) {

        }
    })
}

gettime()
get_cl_data()

四，以及简单的前端页面制作，和echarts代码导入。

提供一些简单的代码文件。

echarts.min.js

china.js

jquery-3.4.1.min.js

推荐大家到官网上下载。