flask

最新推荐文章于 2024-11-11 21:38:43 发布

北希738

最新推荐文章于 2024-11-11 21:38:43 发布

阅读量141

点赞数 1

文章标签： flask python 后端

本文链接：https://blog.csdn.net/qq_65676857/article/details/141610392

版权

一、创建app.py文件

from flask import Flask
from flask import jsonify
from flask import render_template
from flask import request
from flask import  redirect,url_for,flash
from jieba.analyse import extract_tags


@app.route('/')
def hello_world():  # put application's code here
    return render_template("gaokao/login.html")#返回模板。


@app.route("/index")
def table_data():
    tup = utils.get_l2_data()
    return render_template("gaokao/index.html",tup=tup)

@app.route("/c2")
def get_c2_data():
    data = utils.get_c2_data()
    d = []
    for k, v in data:
        d.append({"name": k,"value": int(v)})
    return jsonify({"data": d})#返回json格式

@app.route("/s",methods=['GET'])
def search():
    #获取页面提交的内容
    name = request.args.get('wd')
    data = utils.get_vr_data(name)

    return render_template("gaokao/view.html",vrlist=data)

@app.route("/ch",methods=['GET','POST'])
def ch():
    res=[]
    outy=[]
    if request.method == 'POST':
        # 获取信息
        major = request.form["major"]
        score = request.form["score"]
        (a,b,c)=spider.get(score,major)#获取数组
        a.sort(key=lambda a: a[1], reverse=True)#排序
        b.sort(key=lambda b: b[1], reverse=True)
        c.sort(key=lambda c: c[1], reverse=True)
        res.extend([(a[0:3], b[0:3], c[0:3])])#权重排名
        out=res[0]#元组
        for i in out:
            for j in i:
                outy.append(j)#二维数组
        return  render_template("gaokao/score.html",Scorelist=outy,major=major,score=score)
if __name__ == '__main__':
    #调试
    #app.run(debug=True)
    app.run()

二、创建utils.py文件

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="localhost",
                           user="root",
                           password="ren",
                           db="gaokao_db",
                           charset="utf8")
    # 创建游标,默认是元组型
    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_c2_data():
    """
    :return: 返回各省数据
    """
    # 因为会多次更新数据，取时间戳最新的那组数据
    sql = "select province," \
          "count " \
          "from province_db "
    #count 后加空格
    res = query(sql)
    return res

三、前端页面

1.html

<!DOCTYPE html>
<html lang="en">
<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.min.js"></script>
    <script src="../../static/js/首页/echarts.min.js"></script>
    <script src="../../static/js/首页/china.js"></script>
    <script src="../../static/js/首页/echarts-wordcloud.min.js"></script>
    <link href="../../static/css/mian.css" rel="stylesheet">
    <link href="../../static/css/table.css" rel="stylesheet">
    <link href="../../static/css/tab.css" rel="stylesheet">
</head>
<body>
<header class="nav">
    <!--放入列表-->
    <ul class="navlist">
        <!--链接服务器-->
        <li><a href="/index">首页</a></li>
        <li><a href="/policy">政策</a></li>
        <li><a href="/answer">热答</a></li>
        <li><a href="/view">VR校园</a></li>
        <li><a href="/score">分询</a></li>
        <li><a href="/pred">预测</a></li>
    </ul>
</header>
<div>
    <div id="title">高考数据可视化</div>
    <div id="time"></div>
<div class="panel l1">

2.js-----利用ajax

function gettime() {
    $.ajax({
        url: "/time",//与ajax路由路径相同
        timeout: 10000,//超时时间设置10秒
        success: function (data) {
            $("#time").html(data)//定位标签符号
        },
        error: function (xhr, type, errorThrown) {

        }
    });
}

function get_c2_data(){
    $.ajax({
        url:"/c2",
        success: function (data) {
            ec_center_option.series[0].data=data.data
            ec_center.setOption(ec_center_option)
        },
        error: function (xhr, type, errorThrown) {

        }
    })
}

gettime()

get_c2_data()
get_c21_data()
get_l1_data()
get_l12_data()
get_r1_data()
get_r2_data()

setInterval(gettime,1000)

setInterval(get_c2_data,1000*1000)

html.2

<ul>
        {% for po in policy %}
        <li><a href="{{ po[1] }}">{{ po[0] }}</a></li>
        {% endfor %}
</ul>

basehtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet"                     href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/base.css') }}">
    {% block head %}{% endblock %}
    <title>{% block title %}{% endblock %}-知了课堂问答平台</title>
</head>

<body>

<div>
<ul>
<li>你好<li>
</ul>
</div>


<div>
 {% block main %}{% endblock %}
</div>

</body>

引用html

{% extends 'base.html' %}

{% block head %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/detail.css') }}">
{% endblock %}

{% block title %}详情{% endblock %}

{% block main %} 


{% endblock %}

js-----调用echart

//创建一个对象，getElementById调用id#标签,querySelector调用class .标签,walden为主题可以从echarts上下载
var  ec_center= echarts.init(document.querySelector('.c22'),"walden")

var  mydata = [{'name':'上海','value':318}]

//运行对象
var ec_center_option = {
    title: {
        text: '2022年各省报名人数',
        textStyle:{
            color:'white',
        },
        subtext: '',
        x: 'left'
    },
    tooltip: {
        trigger: 'item'
    },
    //左侧小导航图标
    visualMap: {
        show: true,
        x: 'left',
        y: 'bottom',
        textStyle: {
            fontSize: 8,
            color: "#4c9bfd"
        },
        splitList: [{start: 1, end: 9},
            {start: 10, end: 20},
            {start: 20, end: 50},
            {start: 50, end: 100},
            {start: 100}],
        color: ['#10288a', '#185ec6', '#25abe5', '#92e0f2', '#92e0f2']
    },
    //配置属性,数组
    series: [{
        name: '22年报名人数(万)',
        type: 'map',
        mapType: 'china',
        roam: true,//拖动和缩放
        itemStyle: {
            normal: {
                borderWidth: .5,//区域边框宽度
                borderColor: '#009fe8',//区域边框颜色
                areaColor: "#d5fcff",//区域颜色
            },
            emphasis: {//鼠标滑过地图高亮的相关设置
                borderWidth: .5,
                borderColor: '#4b0082',
                areaColor: "#fff",
            }
        },
        label: {
            normal: {
                show: true,//省份名
                fontSize: 8,
            },
            emphasis: {
                show: true,
                fontSize: 8,
            }
        },

        data: mydata //数据
    }]
};
//运行
ec_center.setOption(ec_center_option)