数据可视化 - Flask构建Web界面（一）_在flask基础上设计一个交互界面

作者：繁依Fanyi0 | 2024-02-07 17:06:48

踩

在flask基础上设计一个交互界面

数据可视化 - Flask构建Web界面（一）

1. 库的准备

from flask import Flask, render_template  # flask网页需要的库
import sqlite3  # 下面其中一个网页实例要用到的Sqlite数据库函数，与构建Flask网页没有太大关系
1
2

2. 代码实现

1. 主函数

app = Flask(__name__)


# 这一步即可完成基本网页的框架
@app.route('/')  # 定义路由
def index():
    return render_template("index.html")  # 引入模板，index.html文件放入网页的框架代码


# 下面是完善网页的内容
# 引入数据库制作的表格
@app.route('/movie')
def movie():
	# SQLite数据库的引用
    movies = []
    con = sqlite3.connect("movie.db")
    cur = con.cursor()
    sql = '''select * from movie250'''
    data = cur.execute(sql)
    for item in data:
        movies.append(item)
    cur.close()
    con.close()
	# render_template函数同时导入网页模板和参数（等号前后名字可以不一致，不过最好一致）
    return render_template("movie.html", movies=movies)


# 引入EChart图表
@app.route('/score')
def score():
    score = []   # 评分种类
    number = []   # 每个评分的统计数量
    con = sqlite3.connect("movie.db")
    cur = con.cursor()
    sql = '''select score,count(score) from movie250 group by score'''
    data = cur.execute(sql)
    for item in data:
        score.append(str(item[0]))
        number.append(item[1])
    cur.close()
    con.close()
    return render_template("score.html", score=score, number=number)


# 以下两个具体内容略
@app.route('/word')
def word():
    return render_template("word.html")


@app.route('/team')
def team():
    return render_template("team.html")


# 网页的运行
if __name__ == '__main__':
    app.run()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

2. index.html

这个总的代码不需要自己打，可以去 https://sc.chinaz.com/ 网站上下载想要的模板，再对其中的HTML5代码进行需要的改动，一般下载的代码格式都是很不错的，分块都很明显，该自己需要的部分即可。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>豆瓣电影TOP250数据可视化</title>
  <meta content="" name="descriptison">
  <meta content="" name="keywords">

  <!-- Favicons -->
  <link href="../static/assets/img/favicon.png" rel="icon">
  <link href="../static/assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,600,600i,700,700i,900" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="../static/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="../static/assets/vendor/icofont/icofont.min.css" rel="stylesheet">
  <link href="../static/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="../static/assets/vendor/animate.css/animate.min.css" rel="stylesheet">
  <link href="../static/assets/vendor/venobox/venobox.css" rel="stylesheet">
  <link href="../static/assets/vendor/aos/aos.css" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link href="../static/assets/css/style.css" rel="stylesheet">

  <!-- =======================================================
  * Template Name: Mamba - v2.0.1
  * Template URL: https://bootstrapmade.com/mamba-one-page-bootstrap-template-free/
  * Author: BootstrapMade.com
  * License: https://bootstrapmade.com/license/
  ======================================================== -->
</head>

<body>
  <!-- ======= Header ======= -->
  <header id="header">
    <div class="container">

      <div class="logo float-left">
        <h1 class="text-light"><a href="temp.html"><span>豆瓣电影Top250</span></a></h1>
        <!-- Uncomment below if you prefer to use an image logo -->
        <!-- <a href="temp.html"><img src="../static/assets/img/logo.png" alt="" class="img-fluid"></a>-->
      </div>

      <nav class="nav-menu float-right d-none d-lg-block">
        <ul>
          <li class="active"><a href="/">首页</a></li>
          <li><a href="/movie">电影</a></li>
          <li><a href="/score">评分</a></li>
          <li><a href="/word">词云</a></li>
          <li><a href="/team">团队</a></li>
        </ul>
      </nav><!-- .nav-menu -->

    </div>
  </header><!-- End Header -->

  <!-- ======= Hero Section ======= -->
  <section id="team" class="team">
      <div class="container">
        <div class="section-title">
          <h2>豆瓣电影TOP250-数据分析</h2>
          <p>应用python爬虫，flask框架，ECharts，WordCloud技术应用实现</p>
        </div>
              <!-- ======= Counts Section ======= -->
          <section class="counts section-bg">
      <div class="container">

        <div class="row">

          <div class="col-lg-3 col-md-6 text-center" data-aos="fade-up">
              <a href="/movie">
            <div class="count-box">
              <i class="icofont-movie" style="color: #20b38e;"></i>
              <span data-toggle="counter-up">250</span>
              <p>经典电影</p>
            </div>
              </a>
          </div>

          <div class="col-lg-3 col-md-6 text-center" data-aos="fade-up" data-aos-delay="200">
             <a href="/score">
            <div class="count-box">
              <i class="icofont-document-folder" style="color: #c042ff;"></i>
              <span data-toggle="counter-up">1</span>
              <p>评分报告</p>
            </div>
             </a>
          </div>

          <div class="col-lg-3 col-md-6 text-center" data-aos="fade-up" data-aos-delay="400">
              <a href="/word">
            <div class="count-box">
              <i class="icofont-brand-wordpress" style="color: #46d1ff;"></i>
              <span data-toggle="counter-up">5693</span>
              <p>词汇统计</p>
            </div>
              </a>
          </div>

          <div class="col-lg-3 col-md-6 text-center" data-aos="fade-up" data-aos-delay="600">
              <a href="/team">
            <div class="count-box">
              <i class="icofont-users-alt-5" style="color: #ffb459;"></i>
              <span data-toggle="counter-up">5</span>
              <p>团队成员</p>
            </div>
              </a>
          </div>

        </div>

      </div>
    </section><!-- End Counts Section -->

      </div>
    </section><!-- End Hero -->

    <!-- ======= Footer ======= -->
    <footer id="footer">
    <div class="container">
      <div class="copyright">
        &copy; The first program <strong><span>Douban Movie</span></strong>. All Rights Reserved
      </div>
      <div class="credits">
        <!-- All the links in the footer should remain intact. -->
        <!-- You can delete the links only if you purchased the pro version. -->
        <!-- Licensing information: https://bootstrapmade.com/license/ -->
        <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/mamba-one-page-bootstrap-template-free/ -->
        Designed by <a href="https://bootstrapmade.com/">Leric</a>
      </div>
    </div>
  </footer><!-- End Footer -->

  <!-- Vendor JS Files -->
  <script src="../static/assets/vendor/jquery/jquery.min.js"></script>
  <script src="../static/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="../static/assets/vendor/jquery.easing/jquery.easing.min.js"></script>
  <script src="../static/assets/vendor/php-email-form/validate.js"></script>
  <script src="../static/assets/vendor/jquery-sticky/jquery.sticky.js"></script>
  <script src="../static/assets/vendor/venobox/venobox.min.js"></script>
  <script src="../static/assets/vendor/waypoints/jquery.waypoints.min.js"></script>
  <script src="../static/assets/vendor/counterup/counterup.min.js"></script>
  <script src="../static/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  <script src="../static/assets/vendor/aos/aos.js"></script>

  <!-- Template Main JS File -->
  <script src="../static/assets/js/main.js"></script>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156

3. movie.html（数据库的引用）

总的框架和上面一样，复制粘贴即可，为了和上面做一个比较，我将所有代码放到这里。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>豆瓣电影TOP250数据可视化-电影</title>
  <meta content="" name="descriptison">
  <meta content="" name="keywords">

  <!-- Favicons -->
  <link href="../static/assets/img/favicon.png" rel="icon">
  <link href="../static/assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,600,600i,700,700i,900" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="../static/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="../static/assets/vendor/icofont/icofont.min.css" rel="stylesheet">
  <link href="../static/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="../static/assets/vendor/animate.css/animate.min.css" rel="stylesheet">
  <link href="../static/assets/vendor/venobox/venobox.css" rel="stylesheet">
  <link href="../static/assets/vendor/aos/aos.css" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link href="../static/assets/css/style.css" rel="stylesheet">

  <!-- =======================================================
  * Template Name: Mamba - v2.0.1
  * Template URL: https://bootstrapmade.com/mamba-one-page-bootstrap-template-free/
  * Author: BootstrapMade.com
  * License: https://bootstrapmade.com/license/
  ======================================================== -->
</head>

<body>
  <!-- ======= Header ======= -->
  <header id="header">
    <div class="container">

      <div class="logo float-left">
        <h1 class="text-light"><a href="temp.html"><span>豆瓣电影Top250-电影</span></a></h1>
        <!-- Uncomment below if you prefer to use an image logo -->
        <!-- <a href="temp.html"><img src="../static/assets/img/logo.png" alt="" class="img-fluid"></a>-->
      </div>

      <nav class="nav-menu float-right d-none d-lg-block">
        <ul>
          <li class="active"><a href="/">首页</a></li>
          <li><a href="/movie">电影</a></li>
          <li><a href="/score">评分</a></li>
          <li><a href="/word">词云</a></li>
          <li><a href="/team">团队</a></li>
        </ul>
      </nav><!-- .nav-menu -->

    </div>
  </header><!-- End Header -->

  <!-- ======= Hero Section ======= -->
  <section id="team" class="team">
      <div class="container">
        <div class="section-title">
          <h2>豆瓣电影TOP250电影</h2>
        </div>
              <!-- ======= Counts Section ======= -->
          <section class="counts section-bg">
      <div class="container">
          <table class="table table-striped">
              <tr>
                  <td>排名</td>
                  <td>电影中文名称</td>
                  <td>电影外国名称</td>
                  <td>评分</td>
                  <td>评价人数</td>
                  <td>概述</td>
                  <td>其他信息</td>
              </tr>
              {% for movie in movies %}<!--jinja-->
                 <tr>
                    <td>{{ movie[0] }}</td>
                    <td>
                        <a href="{{ movie[1] }}">
                        {{ movie[3] }}
                        </a>
                    </td>
                    <td>{{ movie[4] }}</td>
                    <td>{{ movie[5] }}</td>
                    <td>{{ movie[6] }}</td>
                    <td>{{ movie[7] }}</td>
                    <td>{{ movie[8] }}</td>
                 </tr>
              {% endfor %}
          </table>

      </div>
    </section><!-- End Counts Section -->

      </div>
    </section><!-- End Hero -->

    <!-- ======= Footer ======= -->
    <footer id="footer">
    <div class="container">
      <div class="copyright">
        &copy; The first program <strong><span>Douban Movie</span></strong>. All Rights Reserved
      </div>
      <div class="credits">
        <!-- All the links in the footer should remain intact. -->
        <!-- You can delete the links only if you purchased the pro version. -->
        <!-- Licensing information: https://bootstrapmade.com/license/ -->
        <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/mamba-one-page-bootstrap-template-free/ -->
        Designed by <a href="https://bootstrapmade.com/">Leric</a>
      </div>
    </div>
  </footer><!-- End Footer -->

  <!-- Vendor JS Files -->
  <script src="../static/assets/vendor/jquery/jquery.min.js"></script>
  <script src="../static/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="../static/assets/vendor/jquery.easing/jquery.easing.min.js"></script>
  <script src="../static/assets/vendor/php-email-form/validate.js"></script>
  <script src="../static/assets/vendor/jquery-sticky/jquery.sticky.js"></script>
  <script src="../static/assets/vendor/venobox/venobox.min.js"></script>
  <script src="../static/assets/vendor/waypoints/jquery.waypoints.min.js"></script>
  <script src="../static/assets/vendor/counterup/counterup.min.js"></script>
  <script src="../static/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  <script src="../static/assets/vendor/aos/aos.js"></script>

  <!-- Template Main JS File -->
  <script src="../static/assets/js/main.js"></script>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

4. score.html (EChart图表）

这里只显示部分代码，位置是 Hero Section，直接替换即可。

  <!-- ======= Hero Section ======= -->
  <section id="team" class="team">
      <div class="container">
        <div class="section-title">
          <h2>豆瓣电影TOP250-评分分布</h2>
        </div>
              <!-- ======= 图标 ======= -->
          <section class="counts section-bg">
      <div class="container">
          <div id="main" style="width: 100%;height:300px;"></div>
          <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            color:['#3398DB'],
            tooltip:{
                trigger:'axis',
                axisPointer:{
                    type:'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: {{ score|tojson }}
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: {{ number }},
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                },
                barWidth:45
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
      </div>
    </section><!-- End Counts Section -->

      </div>
    </section><!-- End Hero -->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

3. 注意事项

1、在一开始运行flask框架的时候，他的debug model是关闭的，也就是说代码改变后，刷新网页不能随之改变，这种情况的处理如下。

点击右上角图中所示的倒三角，点击编辑配置。
在这里插入图片描述
在图中FLASK_DEBUG处打钩即可。

2、在更改模板代码的时候，可以在模板呈现的网页上，通过开发者工具查看不同位置的代码，在通过 Ctrl + F 在代码中查询修改相关代码，开发者工具参考 Python爬虫入门记（2）- 网络代理（伪装） 中的使用。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/66514