devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【Python应用】爬虫教程：利用python-Flask框架搭建本地数据可视化网站_基于flask的数据可视化网站

作者：AllinToyou | 2024-02-25 23:08:35

赞

踩

基于flask的数据可视化网站

目录

成果展示：

（1）网站首页：

（2）电影表单页

（3） 电影评分页

（4） 词频统计页

（5）团队页面

接下来让我们看看上述网站是如何完成的：首先简单介绍一下Flask框架：

Flask主要功能有两个：

1、环境搭建：

2、用Flask搭建第一个网络服务器程序——输出Hello，World！

3、开启Debug模式

 4、向网页中传递参数：

（1）string型

（2）int型

（3）float型

5、访问一个.HTML文件

（1）导入模块：

（2）创建文件夹：

（3）编写程序

6、向HTML网页中传递参数

（1）传入普通变量

        主程序（.py）

        HTML文件(.html)

（2）传入列表变量

（3）输出表格

（4）传入字典变量

 7、网页请求与响应

8、制作网站

（1）准备模板

（2）制作首页

（3）制作电影表单

（4）制作评分页面

（5）制作词频页面

（6）制作团队页面

 

成果展示：

（1）网站首页：

（2）电影表单页

（3） 电影评分页

（4） 词频统计页

（5）团队页面

接下来让我们看看上述网站是如何完成的：
首先简单介绍一下Flask框架：

Flask主要功能有两个：

（1）Werkzeug——路由转换

（2）jinja2——框架渲染 

1、环境搭建：

下载python-Flask扩展包

pip install flask

将Flask模块导入程序中：

from flask import Flask

2、用Flask搭建第一个网络服务器程序——输出Hello，World！

代码：

  1. from flask import Flask
  2. app = Flask(__name__)
  3.  
  4. #路由解析：通过用户访问的路径，匹配相应函数
  5. @app.route('/')
  6. def h():
  7.     return 'hello world'
  8.  
  9. if __name__ == '__main__':
  10.     app.run()

输出：

 

复制输出结果中的网址，然后在浏览器中打开，页面显示如下：

 

 成功输出“Hello World”

3、开启Debug模式

因为在制作网页中，我们要一边观察网页情况一边调试程序，所以每次都去点击打开和关闭程序按钮非常麻烦，所以为了方便debug，我们在程序中更改以下代码。

 app.run(debug=True)

完整：

  1. from flask import Flask
  2. app = Flask(__name__)
  3.  
  4. @app.route('/')
  5. def h():
  6.     return 'hello 1'
  7.  
  8. if __name__ == '__main__':
  9.     app.run(debug=True)

这样就能实时修改代码和网页了。

 4、向网页中传递参数：

（1）string型

路由传参，在网址路径中用<>将参数括起来，然后在访问函数中存入参数，并用占位符的方式显示参数。

  1. from flask import Flask
  2. app = Flask(__name__)
  3.  
  4. #通过访问路径获取字符串参数
  5. @app.route("/test/<name>")
  6. def welcom(name):
  7.     return "hello,%s"%name
  8.  
  9. if __name__ == '__main__':
  10.     app.run(debug=True)

输出： （*注意网址路径）

 

（2）int型

  1. from flask import Flask
  2. app = Flask(__name__)
  3.  
  4. @app.route("/test/<int:id>")
  5. def welcom2(id):
  6.     return "hello,%d的会员"%id
  7.  
  8.  
  9. if __name__ == '__main__':
  10.     app.run(debug=True)

输出：

（3）float型

  1. from flask import Flask
  2. app = Flask(__name__)
  3.  
  4. @app.route("/test/<float:v>")
  5. def welcom3(v):
  6.     return "一共找您%.2f元钱"%v
  7.  
  8. if __name__ == '__main__':
  9.     app.run(debug=True)

输出：

也可以将以上例子中的函数放在一起，路由解析会自动判别你在网址传入的参数类型，并自动跳转到相应参数类型所在的函数网页。

5、访问一个.HTML文件

（1）导入模块：

        render_template

（2）创建文件夹：

        项目文件夹 ——> templates(新建）——> test.html

（3）编写程序

  1. from flask import Flask,render_template
  2. app = Flask(__name__)
  3.  
  4. @app.route("/")
  5. def index2():
  6.     return render_template("test.html")
  7.  
  8. if __name__ == '__main__':
  9.     app.run(debug=True)

输出：

6、向HTML网页中传递参数

（1）传入普通变量

        主程序（.py）

        在网页中显示日期。

        在html文件中，主程序传入的变量要用{{ xxx }}扣起来才能使用。

        脚本文件也是如此，但可能需要单独定义一个变量去赋值。var name = {{}}

  1. from flask import Flask,render_template
  2. import datetime
  3.  
  4. app = Flask(__name__)
  5.  
  6. @app.route("/time")
  7. def index():
  8.     times = datetime.date.today()#普通变量
  9.     return render_template("test2.html",var = times)
  10.  
  11. if __name__ == '__main__':
  12.     app.run(debug=True)

        HTML文件(.html)

  1. <!DOCTYPE html>
  2.  
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <title></title>
  7. </head>
  8. <body>
  9.     今天的时间是{{var}},Hello，HTML！
  10. </body>
  11. </html>

      输出：

（2）传入列表变量

主程序：

  1. from flask import Flask,render_template
  2. import datetime
  3.  
  4. app=Flask(__name__)
  5.  
  6. @app.route("/time")
  7. def index():
  8.     time = datetime.date.today()#普通变量
  9.     name = ["小王","小刘","小赵"]#列表类型
  10.  
  11.     return render_template("test3.html",var = time,list=name)
  12.  
  13. if __name__ == '__main__':
  14.     app.run(debug=True)

html文件：

  1. <!DOCTYPE html>
  2.  
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <title></title>
  7. </head>
  8. <body>
  9.     今天的时间是{{var}},Hello HTML!<br />
  10.     今天值班的有：<br />
  11.     {% for data in list %}<!--用大括号括起来的是控制结构，还有if-->
  12.     <li> {{data}} </li><!--打印列表-->
  13.     {% endfor %}
  14. </body>
  15. </html>

输出：

（3）输出表格

 html文件

  1. <!DOCTYPE html>
  2.  
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <title></title>
  7. </head>
  8. <body>
  9.     今天的时间是{{var}},Hello HTML!<br />
  10.     今天值班的有：<br />
  11.     {% for data in list %}<!--用大括号括起来的是控制结构，还有if-->
  12.     <li> {{data}} </li><!--打印列表-->
  13.     {% endfor %}
  14.     任务:<br/><!--在页面打印表格与迭代-->
  15.        <table border="1">
  16.            <tr>
  17.                <!--一行-->
  18.                <td>第一列</td><!--一列-->
  19.                <td>第二列</td><!--二列-->
  20.            </tr>
  21.            <tr>
  22.                <!--一行-->
  23.                <td>第一列</td><!--一列-->
  24.                <td>第二列</td><!--二列-->
  25.            </tr>
  26.            <tr>
  27.                <!--一行-->
  28.                <td>第一列</td><!--一列-->
  29.                <td>第二列</td><!--二列-->
  30.            </tr>
  31.        </table>
  32.  
  33. </body>
  34. </html>

输出：

（4）传入字典变量

 主程序：

  1. from flask import Flask,render_template
  2. import datetime
  3.  
  4. app=Flask(__name__)
  5.  
  6. @app.route("/time")
  7. def index():
  8.     time = datetime.date.today()#普通变量
  9.     name = ["小王","小刘","小赵"]#列表类型
  10.     task = {"任务":"打扫卫生","时间":"三个小时"}#字典类型
  11.     return render_template("test3.html",var = time,list=name,task=task)
  12.  
  13. if __name__ == '__main__':
  14.     app.run(debug=True)

html：

  1. <!DOCTYPE html>
  2.  
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <title></title>
  7. </head>
  8. <body>
  9.     今天的时间是{{var}},Hello HTML!<br />
  10.     今天值班的有：<br />
  11.     {% for data in list %}<!--用大括号括起来的是控制结构，还有if-->
  12.     <li> {{data}} </li><!--打印列表-->
  13.     {% endfor %}
  14.     任务:<br/><!--在页面打印表格与迭代-->
  15.          <table border="1">
  16.              {% for key,value in task.items() %}<!--[(key,value),(key,value),(key,value)]-->
  17.                  <tr>
  18.                      <td>{{key}}</td>
  19.                      <td>{{value}}</td>
  20.                  </tr>
  21.              {% endfor %}
  22.          </table>
  23.  
  24. </body>
  25. </html>

输出：

 7、网页请求与响应

在项目文件夹中新建文件夹test，在test中新建register.html和result.html两个HTML文件。

主程序：

  1. from flask import Flask,render_template
  2. import datetime
  3.  
  4. app=Flask(__name__)
  5.  
  6. #表单提交
  7. @app.route('/test/register')#网址
  8. def register():
  9.     return render_template("test/register.html")#文件夹路径
  10.  
  11. #接收到表单提交的路由，需要指定methods为post
  12. @app.route('/result',methods=['POST','GET'])
  13. def result():
  14.     return render_template("test/result.html")
  15.  
  16. if __name__ == '__main__':
  17.     app.run(debug=True)

register.html

  1. <!DOCTYPE html>
  2.  
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <title></title>
  7. </head>
  8. <body>
  9.  
  10.     <form action="http://127.0.0.1:5000/result" method="post">
  11.         <p>姓名:<input type="text" name="姓名"></p><!--{"姓名":"text"}-->
  12.         <p>年龄:<input type="text" name="年龄"></p>
  13.         <p>性别:<input type="text" name="性别"></p>
  14.         <p>住址:<input type="text" name="住址"></p>
  15.         <p><input type="submit" value="提交"></p>
  16.     </form>
  17.  
  18. </body>
  19. </html>

result.html

  1. <!DOCTYPE html>
  2.  
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <title></title>
  7. </head>
  8. <body>
  9.     result
  10. </body>
  11. </html>

输出：

点击提交后：

将result页面改为数据表单：

  1. <!DOCTYPE html>
  2.  
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <title></title>
  7. </head>
  8. <body>
  9.     <table border="1">
  10.         {% for key,value in result.items() %}
  11.             <tr>
  12.                 <th>{{key}}</th>
  13.                 <td>{{value}}</td>
  14.             </tr>
  15.         {% endfor %}
  16.     </table>
  17. </body>
  18. </html>

输出结果：

注意：

  在上面的register.html代码中，网址响应部分是我们固定写好的，如果我们想让他自己去填写路径应该这么做：

动态访问页面：

url_for("访问路由名字")

返回的是'/result'

 <form action="{{url_for('result')}}" method="post">

8、制作网站

（1）准备模板

模板网站：

网页模板,网站模板,DIV+CSS模板,企业网站模板下载-模板之家 (cssmoban.com)icon-default.png?t=N7T8http://www.cssmoban.com/

示例模板：

在线模拟预览-模板之家cssMoban.comicon-default.png?t=N7T8http://www.cssmoban.com/preview/index.html?url=http://demo.mxyhn.xyz:8020/cssthemes6/btmd_12_Mamba/index.html&id=9296&tid=20136294750679

（淘宝1毛钱一个）

下载完的网站文件夹：

 1、把assets和index.html复制到我们的项目文件夹。

2、将html文件放入项目中的templates文件夹。（最好copy一份做备份。）

3、新建一个static文件夹用来存放资源文件。（将asset放入static文件中。）

准备工作做好了，接下来开始制作网页！

提供一个图标网站（以后可能会用到）：

iconfont-阿里巴巴矢量图标库

矢量图的使用方法：

iconfont字体图标的使用方法--超简单! - 全堆栈溢出攻城狮 - 博客园 (cnblogs.com)

（2）制作首页

index.html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="utf-8">
  6.   <meta content="width=device-width, initial-scale=1.0" name="viewport">
  7.  
  8.   <title>豆瓣Top250数据可视化分析</title>
  9.   <meta content="" name="descriptison">
  10.   <meta content="" name="keywords">
  11.  
  12.   <!-- Favicons -->
  13.   <link href="static/assets/img/favicon.png" rel="icon">
  14.   <link href="static/assets/img/apple-touch-icon.png" rel="apple-touch-icon">
  15.  
  16.   <!-- Google Fonts -->
  17.   <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">
  18.  
  19.   <!-- Vendor CSS Files -->
  20.   <link href="static/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  21.   <link href="static/assets/vendor/icofont/icofont.min.css" rel="stylesheet">
  22.   <link href="static/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  23.   <link href="static/assets/vendor/animate.css/animate.min.css" rel="stylesheet">
  24.   <link href="static/assets/vendor/venobox/venobox.css" rel="stylesheet">
  25.   <link href="static/assets/vendor/aos/aos.css" rel="stylesheet">
  26.  
  27.   <!-- Template Main CSS File -->
  28.   <link href="static/assets/css/style.css" rel="stylesheet">
  29.  
  30. </head>
  31.  
  32. <body>
  33.  
  34.     <!-- ======= Header ======= -->
  35.     <header id="header">
  36.         <div class="container">
  37.  
  38.             <div class="logo float-left">
  39.                 <h1 class="text-light"><a href="/index"><span>DouBan</span></a></h1>
  40.                 <!-- Uncomment below if you prefer to use an image logo -->
  41.                 <!-- <a href="index.html"><img src="static/assets/img/logo.png" alt="" class="img-fluid"></a>-->
  42.             </div>
  43.  
  44.             <nav class="nav-menu float-right d-none d-lg-block">
  45.                 <ul>
  46.                     <li class="active"><a href="/index">首页 <i class="la la-angle-down"></i></a></li>
  47.                     <li><a href="/movie">电影</a></li>
  48.                     <li><a href="/score">评分</a></li>
  49.                     <li><a href="/word">词云</a></li>
  50.                     <li><a href="/team">团队</a></li>
  51.                 </ul>
  52.             </nav><!-- .nav-menu -->
  53.  
  54.         </div>
  55.     </header><!-- End Header -->
  56.     <!-- ======= Our Team Section ======= -->
  57.     <section id="team" class="team">
  58.         <div class="container">
  59.  
  60.             <div class="section-title">
  61.                 <h2>豆瓣Top250数据可视化分析</h2>
  62.                 <p>应用python爬虫、Flask框架、Echarts、WordCloud等技术实现</p>
  63.             </div>
  64.  
  65.             <!-- ======= Counts Section ======= -->
  66.             <section class="counts section-bg">
  67.                 <div class="container">
  68.  
  69.                     <div class="row">
  70.  
  71.                         <div class="col-lg-3 col-md-6 text-center" data-aos="fade-up">
  72.                             <a href="/movie">
  73.                                 <div class="count-box">
  74.                                     <i class="icofont-simple-smile" style="color: #20b38e;"></i>
  75.                                     <span data-toggle="counter-up">250</span>
  76.                                     <p>经典电影</p>
  77.                                 </div>
  78.                             </a>
  79.                         </div>
  80.  
  81.                         <div class="col-lg-3 col-md-6 text-center" data-aos="fade-up" data-aos-delay="200">
  82.                             <a href="/score">
  83.                                 <div class="count-box">
  84.                                     <i class="icofont-document-folder" style="color: #c042ff;"></i>
  85.                                     <span data-toggle="counter-up">521</span>
  86.                                     <p>评分报告</p>
  87.                                 </div>
  88.                             </a>
  89.                         </div>
  90.  
  91.                         <div class="col-lg-3 col-md-6 text-center" data-aos="fade-up" data-aos-delay="400">
  92.                             <a href="/word">
  93.                                 <div class="count-box">
  94.                                     <i class="icofont-live-support" style="color: #46d1ff;"></i>
  95.                                     <span data-toggle="counter-up">1,463</span>
  96.                                     <p>词频统计</p>
  97.                                 </div>
  98.                             </a>
  99.                         </div>
  100.  
  101.                         <div class="col-lg-3 col-md-6 text-center" data-aos="fade-up" data-aos-delay="600">
  102.                             <a href="/team">
  103.                                 <div class="count-box">
  104.                                     <i class="icofont-users-alt-5" style="color: #ffb459;"></i>
  105.                                     <span data-toggle="counter-up">15</span>
  106.                                     <p>团队成员</p>
  107.                                 </div>
  108.                             </a>
  109.                         </div>
  110.  
  111.                     </div>
  112.  
  113.                 </div>
  114.             </section><!-- End Counts Section -->
  115.  
  116.         </div>
  117.     </section><!-- End Our Team Section -->
  118.  
  119.     <!-- ======= Footer ======= -->
  120.     <footer id="footer">
  121.  
  122.         <div class="container">
  123.             <div class="copyright">
  124.                 &copy; python爬虫可视化分析实验
  125.             </div>
  126.             <div class="credits">
  127.                 Douban Movie Top <a href="https://movie.douban.com/top250" target="_blank" title="豆瓣Top250">豆瓣Top250</a> - Douban Movie <a href="https://movie.douban.com/" title="豆瓣电影" target="_blank">豆瓣电影</a>
  128.             </div>
  129.         </div>
  130.     </footer><!-- End Footer -->
  131.  
  132.     <a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>
  133.  
  134.     <!-- Vendor JS Files -->
  135.     <script src="static/assets/vendor/jquery/jquery.min.js"></script>
  136.     <script src="static/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  137.     <script src="static/assets/vendor/jquery.easing/jquery.easing.min.js"></script>
  138.     <script src="static/assets/vendor/php-email-form/validate.js"></script>
  139.     <script src="static/assets/vendor/jquery-sticky/jquery.sticky.js"></script>
  140.     <script src="static/assets/vendor/venobox/venobox.min.js"></script>
  141.     <script src="static/assets/vendor/waypoints/jquery.waypoints.min.js"></script>
  142.     <script src="static/assets/vendor/counterup/counterup.min.js"></script>
  143.     <script src="static/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  144.     <script src="static/assets/vendor/aos/aos.js"></script>
  145.  
  146.     <!-- Template Main JS File -->
  147.     <script src="static/assets/js/main.js"></script>
  148.  
  149.     <style>
  150.         .copyrights {
  151.             text-indent: -9999px;
  152.             height: 0;
  153.             line-height: 0;
  154.             font-size: 0;
  155.             overflow: hidden;
  156.         }
  157.     </style>
  158.     <div class="copyrights" id="links20210126">
  159.         Collect from <a href="http://www.cssmoban.com/" title="网站模板">模板之家</a>
  160.         <a href="https://www.chazidian.com/" title="查字典">查字典</a>
  161.     </div>
  162. </body>
  163.  
  164. </html>

主程序：

  1. from flask import Flask,render_template
  2. import sqlite3
  3.  
  4. app = Flask(__name__)
  5.  
  6. #路由解析：通过用户访问的路径，匹配相应函数
  7. @app.route('/')
  8. def index():
  9.     return render_template("index.html")
  10.  
  11. #返回首页
  12. @app.route('/index')
  13. def home():
  14.     return render_template("index.html")
  15.  
  16. #返回电影页面
  17. @app.route('/movie')
  18. def movie():
  19.     datalist = []
  20.     con = sqlite3.connect("moveTop.db")#打开数据库
  21.     cur = con.cursor()#获取游标
  22.     sql = "select * from movieTop250"#sql查询语句
  23.     data = cur.execute(sql)#获取数据
  24.     for item in data:#将数据保存在列表中
  25.         datalist.append(item)
  26.     cur.close()#关闭游标
  27.     con.close()#关闭连接
  28.     return render_template("movie.html",movies = datalist)
  29.  
  30. #返回评分界面
  31. @app.route('/score')
  32. def score():
  33.     return render_template("score.html")
  34.  
  35. #返回词云界面
  36. @app.route('/word')
  37. def word():
  38.     return render_template("word.html")
  39.  
  40. #返回团队界面
  41. @app.route('/team')
  42. def team():
  43.     return render_template("team.html")
  44.  
  45. if __name__ == '__main__':
  46.     app.run(debug=True)

页面展示： 

（3）制作电影表单

        数据库相关操作看上一个教程：爬虫保姆级教程2：在visual studio中使用python项目连接SQLite数据库--爬虫数据保存之数据库_代码骑士的博客-CSDN博客

  1. #引入数据库
  2. import sqlite3

 movie函数：

  1. #返回电影页面
  2. @app.route('/movie')
  3. def movie():
  4.     datalist = []
  5.     con = sqlite3.connect("moveTop.db")#打开数据库
  6.     cur = con.cursor()#获取游标
  7.     sql = "select * from movieTop250"#sql查询语句
  8.     data = cur.execute(sql)#获取数据
  9.     for item in data:#将数据保存在列表中
  10.         datalist.append(item)
  11.     cur.close()#关闭游标
  12.     con.close()#关闭连接
  13.     return render_template("movie.html",movies = datalist)

 movie.html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="utf-8">
  6.   <meta content="width=device-width, initial-scale=1.0" name="viewport">
  7.  
  8.   <title>豆瓣Top250数据可视化分析</title>
  9.   <meta content="" name="descriptison">
  10.   <meta content="" name="keywords">
  11.  
  12.   <!-- Favicons -->
  13.   <link href="static/assets/img/favicon.png" rel="icon">
  14.   <link href="static/assets/img/apple-touch-icon.png" rel="apple-touch-icon">
  15.  
  16.   <!-- Google Fonts -->
  17.   <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">
  18.  
  19.   <!-- Vendor CSS Files -->
  20.   <link href="static/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  21.   <link href="static/assets/vendor/icofont/icofont.min.css" rel="stylesheet">
  22.   <link href="static/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  23.   <link href="static/assets/vendor/animate.css/animate.min.css" rel="stylesheet">
  24.   <link href="static/assets/vendor/venobox/venobox.css" rel="stylesheet">
  25.   <link href="static/assets/vendor/aos/aos.css" rel="stylesheet">
  26.  
  27.   <!-- Template Main CSS File -->
  28.   <link href="static/assets/css/style.css" rel="stylesheet">
  29.  
  30. </head>
  31.  
  32. <body>
  33.  
  34.     <!-- ======= Header ======= -->
  35.     <header id="header">
  36.         <div class="container">
  37.  
  38.             <div class="logo float-left">
  39.                 <h1 class="text-light"><a href="/index"><span>DouBan</span></a></h1>
  40.                 <!-- Uncomment below if you prefer to use an image logo -->
  41.                 <!-- <a href="index.html"><img src="static/assets/img/logo.png" alt="" class="img-fluid"></a>-->
  42.             </div>
  43.  
  44.             <nav class="nav-menu float-right d-none d-lg-block">
  45.                 <ul>
  46.                     <li class="active"><a href="/index">首页 <i class="la la-angle-down"></i></a></li>
  47.                     <li><a href="/movie">电影</a></li>
  48.                     <li><a href="/score">评分</a></li>
  49.                     <li><a href="/word">词云</a></li>
  50.                     <li><a href="/team">团队</a></li>
  51.                 </ul>
  52.             </nav><!-- .nav-menu -->
  53.  
  54.         </div>
  55.     </header><!-- End Header -->
  56.     <!-- ======= Our Team Section ======= -->
  57.     <section id="team" class="team">
  58.         <div class="container">
  59.  
  60.             <div class="section-title">
  61.                 <h2>豆瓣Top250电影</h2>
  62.             </div>
  63.  
  64.             <!-- ======= Counts Section ======= -->
  65.             <section class="counts section-bg">
  66.                 <div class="container">
  67.                     <table class="table table-striped">
  68.                         <tr>
  69.                             <td>电影排名</td>
  70.                             <td>中文名称</td>
  71.                             <td>外国名称</td>
  72.                             <td>电影评分</td>
  73.                             <td>评价人数</td>
  74.                             <td>电影概述</td>
  75.                             <td>其他信息</td>
  76.                         </tr>
  77.  
  78.                         {% for movie in movies %}
  79.  
  80.                         <tr>
  81.                             <td>{{ movie[0] }}</td>
  82.                             <td>
  83.                                 <a href="{{ movie[1] }}">
  84.                                     {{ movie[3] }}
  85.                                 </a>
  86.                             </td>
  87.                             <td>{{ movie[4] }}</td>
  88.                             <td>{{ movie[5] }}</td>
  89.                             <td>{{ movie[6] }}</td>
  90.                             <td>{{ movie[7] }}</td>
  91.                             <td>{{ movie[8] }}</td>
  92.                         </tr>
  93.  
  94.                         {% endfor %}
  95.                     </table>
  96.                     
  97.  
  98.                 </div>
  99.             </section><!-- End Counts Section -->
  100.  
  101.         </div>
  102.     </section><!-- End Our Team Section -->
  103.  
  104.     <!-- ======= Footer ======= -->
  105.     <footer id="footer">
  106.  
  107.         <div class="container">
  108.             <div class="copyright">
  109.                 &copy; python爬虫可视化分析实验
  110.             </div>
  111.             <div class="credits">
  112.                 Douban Movie Top <a href="https://movie.douban.com/top250" target="_blank" title="豆瓣Top250">豆瓣Top250</a> - Douban Movie <a href="https://movie.douban.com/" title="豆瓣电影" target="_blank">豆瓣电影</a>
  113.             </div>
  114.         </div>
  115.     </footer><!-- End Footer -->
  116.  
  117.     <a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>
  118.  
  119.     <!-- Vendor JS Files -->
  120.     <script src="static/assets/vendor/jquery/jquery.min.js"></script>
  121.     <script src="static/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  122.     <script src="static/assets/vendor/jquery.easing/jquery.easing.min.js"></script>
  123.     <script src="static/assets/vendor/php-email-form/validate.js"></script>
  124.     <script src="static/assets/vendor/jquery-sticky/jquery.sticky.js"></script>
  125.     <script src="static/assets/vendor/venobox/venobox.min.js"></script>
  126.     <script src="static/assets/vendor/waypoints/jquery.waypoints.min.js"></script>
  127.     <script src="static/assets/vendor/counterup/counterup.min.js"></script>
  128.     <script src="static/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  129.     <script src="static/assets/vendor/aos/aos.js"></script>
  130.  
  131.     <!-- Template Main JS File -->
  132.     <script src="static/assets/js/main.js"></script>
  133.  
  134.     <style>
  135.         .copyrights {
  136.             text-indent: -9999px;
  137.             height: 0;
  138.             line-height: 0;
  139.             font-size: 0;
  140.             overflow: hidden;
  141.         }
  142.     </style>
  143.     <div class="copyrights" id="links20210126">
  144.         Collect from <a href="http://www.cssmoban.com/" title="网站模板">模板之家</a>
  145.         <a href="https://www.chazidian.com/" title="查字典">查字典</a>
  146.     </div>
  147. </body>
  148.  
  149. </html>

页面展示：

（4）制作评分页面

Echarts官方网站：

（官网很多图表示例，推荐大家去学习。）

Apache ECharts

下载配置echarts

Echarts扩展包：

链接：https://pan.baidu.com/s/1z07VwLkkjJW1ZYdCVOhKNw 
提取码：pc15

网站模板素材：

链接：https://pan.baidu.com/s/1D_PEc5c32qM8O1MEcRVLww 
提取码：gwxs

放入位置：static-->assets-->js 

score.html：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta content="width=device-width, initial-scale=1.0" name="viewport">
  7.  
  8.  
  9.     <title>豆瓣Top250数据可视化分析</title>
  10.     <meta content="" name="descriptison">
  11.     <meta content="" name="keywords">
  12.  
  13.     <!-- Favicons -->
  14.     <link href="static/assets/img/favicon.png" rel="icon">
  15.     <link href="static/assets/img/apple-touch-icon.png" rel="apple-touch-icon">
  16.  
  17.     <!-- Google Fonts -->
  18.     <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">
  19.  
  20.     <!-- Vendor CSS Files -->
  21.     <link href="static/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  22.     <link href="static/assets/vendor/icofont/icofont.min.css" rel="stylesheet">
  23.     <link href="static/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  24.     <link href="static/assets/vendor/animate.css/animate.min.css" rel="stylesheet">
  25.     <link href="static/assets/vendor/venobox/venobox.css" rel="stylesheet">
  26.     <link href="static/assets/vendor/aos/aos.css" rel="stylesheet">
  27.  
  28.     <!-- Template Main CSS File -->
  29.     <link href="static/assets/css/style.css" rel="stylesheet">
  30.  
  31. </head>
  32.  
  33. <body>
  34.  
  35.     <!-- ======= Header ======= -->
  36.     <header id="header">
  37.         <div class="container">
  38.  
  39.             <div class="logo float-left">
  40.                 <h1 class="text-light"><a href="/index"><span>DouBan</span></a></h1>
  41.                 <!-- Uncomment below if you prefer to use an image logo -->
  42.                 <!-- <a href="index.html"><img src="static/assets/img/logo.png" alt="" class="img-fluid"></a>-->
  43.             </div>
  44.  
  45.             <nav class="nav-menu float-right d-none d-lg-block">
  46.                 <ul>
  47.                     <li class="active"><a href="/index">首页 <i class="la la-angle-down"></i></a></li>
  48.                     <li><a href="/movie">电影</a></li>
  49.                     <li><a href="/score">评分</a></li>
  50.                     <li><a href="/word">词云</a></li>
  51.                     <li><a href="/team">团队</a></li>
  52.                 </ul>
  53.             </nav><!-- .nav-menu -->
  54.  
  55.         </div>
  56.     </header><!-- End Header -->
  57.     <!-- ======= Our Team Section ======= -->
  58.     <section id="team" class="team">
  59.         <div class="container">
  60.  
  61.             <div class="section-title">
  62.                 <h2>豆瓣Top250评分分布图</h2>
  63.             </div>
  64.  
  65.             <!-- ======= Counts Section ======= -->
  66.             <section class="counts section-bg">
  67.                 <div class="container">
  68.  
  69.                     <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  70.                     <div id="main" style="width: 100%;height:400px;"></div>
  71.  
  72.                 </div>
  73.             </section><!-- End Counts Section -->
  74.  
  75.         </div>
  76.     </section><!-- End Our Team Section -->
  77.     <!-- ======= Footer ======= -->
  78.     <footer id="footer">
  79.  
  80.         <div class="container">
  81.             <div class="copyright">
  82.                 &copy; python爬虫可视化分析实验
  83.             </div>
  84.             <div class="credits">
  85.                 Douban Movie Top <a href="https://movie.douban.com/top250" target="_blank" title="豆瓣Top250">豆瓣Top250</a> - Douban Movie <a href="https://movie.douban.com/" title="豆瓣电影" target="_blank">豆瓣电影</a>
  86.             </div>
  87.         </div>
  88.     </footer><!-- End Footer -->
  89.  
  90.     <a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>
  91.  
  92.     <!-- Vendor JS Files -->
  93.     <script src="static/assets/vendor/jquery/jquery.min.js"></script>
  94.     <script src="static/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  95.     <script src="static/assets/vendor/jquery.easing/jquery.easing.min.js"></script>
  96.     <script src="static/assets/vendor/jquery-sticky/jquery.sticky.js"></script>
  97.     <script src="static/assets/vendor/venobox/venobox.min.js"></script>
  98.     <script src="static/assets/vendor/waypoints/jquery.waypoints.min.js"></script>
  99.     <script src="static/assets/vendor/counterup/counterup.min.js"></script>
  100.     <script src="static/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  101.     <script src="static/assets/vendor/aos/aos.js"></script>
  102.     <script src="static/assets/js/echarts.min.js"></script>
  103.  
  104.     <!-- 引入刚刚下载的 ECharts 文件 -->
  105.  
  106.  
  107.     <script type="text/javascript">
  108.         var dom = document.getElementById("main");
  109.         var myChart = echarts.init(dom);
  110.         var app = {};
  111.  
  112.         var option;
  113.  
  114.         var datascore = [];
  115.         datascore = {{ score }};
  116.         var datanum = [];
  117.         datanum = {{ num }};
  118.  
  119.         option = {
  120.             title: {
  121.                 text: '电影评分表',
  122.                 subtext: 'Film rating sheet'
  123.             },
  124.             color: ['#3398DB'],
  125.  
  126.             tooltip: {
  127.                 trigger: 'axis',
  128.                 axisPointer: {
  129.                     type: 'shadow'
  130.                 }
  131.             },
  132.  
  133.             xAxis: {
  134.                 type: 'category',
  135.                 data: datascore
  136.             },
  137.             yAxis: {
  138.                 type: 'value'
  139.             },
  140.             series: [
  141.                 {
  142.                     data: datanum,
  143.                     type: 'bar',
  144.                     barWidth: '60%',
  145.                 }
  146.             ]
  147.         };
  148.  
  149.         if (option && typeof option === 'object') {
  150.             myChart.setOption(option);
  151.         }
  152.  
  153.     </script>
  154.  
  155.     <!-- Template Main JS File -->
  156.     <script src="static/assets/js/main.js"></script>
  157.  
  158.     <style>
  159.         .copyrights {
  160.             text-indent: -9999px;
  161.             height: 0;
  162.             line-height: 0;
  163.             font-size: 0;
  164.             overflow: hidden;
  165.         }
  166.     </style>
  167.     <div class="copyrights" id="links20210126">
  168.         Collect from <a href="http://www.cssmoban.com/" title="网站模板">模板之家</a>
  169.         <a href="https://www.chazidian.com/" title="查字典">查字典</a>
  170.     </div>
  171. </body>
  172.  
  173. </html>

主程序：

  1. #返回评分界面
  2. @app.route('/score')
  3. def score():
  4.     score=[]
  5.     num=[]
  6.     con = sqlite3.connect("moveTop.db")#打开数据库
  7.     cur = con.cursor()#获取游标
  8.     sql = "select score,count(score) from movieTop250 group by score"#sql查询语句
  9.     data = cur.execute(sql)#获取数据
  10.     for item in data:#将数据保存在列表中
  11.         score.append(item[0])
  12.         num.append(item[1])
  13.     cur.close()#关闭游标
  14.     con.close()#关闭连接
  15.     return render_template("score.html",score = score,num = num)

 页面展示：

（5）制作词频页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="utf-8">
  6.   <meta content="width=device-width, initial-scale=1.0" name="viewport">
  7.  
  8.   <title>豆瓣Top250数据可视化分析</title>
  9.   <meta content="" name="descriptison">
  10.   <meta content="" name="keywords">
  11.  
  12.   <!-- Favicons -->
  13.   <link href="static/assets/img/favicon.png" rel="icon">
  14.   <link href="static/assets/img/apple-touch-icon.png" rel="apple-touch-icon">
  15.  
  16.   <!-- Google Fonts -->
  17.   <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">
  18.  
  19.   <!-- Vendor CSS Files -->
  20.   <link href="static/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  21.   <link href="static/assets/vendor/icofont/icofont.min.css" rel="stylesheet">
  22.   <link href="static/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  23.   <link href="static/assets/vendor/animate.css/animate.min.css" rel="stylesheet">
  24.   <link href="static/assets/vendor/venobox/venobox.css" rel="stylesheet">
  25.   <link href="static/assets/vendor/aos/aos.css" rel="stylesheet">
  26.  
  27.   <!-- Template Main CSS File -->
  28.   <link href="static/assets/css/style.css" rel="stylesheet">
  29.  
  30. </head>
  31.  
  32. <body>
  33.  
  34.     <!-- ======= Header ======= -->
  35.     <header id="header">
  36.         <div class="container">
  37.  
  38.             <div class="logo float-left">
  39.                 <h1 class="text-light"><a href="/index"><span>DouBan</span></a></h1>
  40.                 <!-- Uncomment below if you prefer to use an image logo -->
  41.                 <!-- <a href="index.html"><img src="static/assets/img/logo.png" alt="" class="img-fluid"></a>-->
  42.             </div>
  43.  
  44.             <nav class="nav-menu float-right d-none d-lg-block">
  45.                 <ul>
  46.                     <li class="active"><a href="/index">首页 <i class="la la-angle-down"></i></a></li>
  47.                     <li><a href="/movie">电影</a></li>
  48.                     <li><a href="/score">评分</a></li>
  49.                     <li><a href="/word">词云</a></li>
  50.                     <li><a href="/team">团队</a></li>
  51.                 </ul>
  52.             </nav><!-- .nav-menu -->
  53.  
  54.         </div>
  55.     </header><!-- End Header -->
  56.     <!-- ======= About Us Section ======= -->
  57.     <section id="about" class="about">
  58.         <div class="container">
  59.  
  60.             <div class="row no-gutters">
  61.                 <div class="col-lg-6 video-box">
  62.                     <img src="static/assets/img/about.jpg" class="img-fluid" alt="">
  63.                 </div>
  64.  
  65.                 <div class="col-lg-6 d-flex flex-column justify-content-center about-content">
  66.  
  67.                     <div class="section-title">
  68.                         <h2>词频统计</h2>
  69.                         <p>根据250部电影的一句话描述，提炼出词云树，可以让我们更加清晰的了解人们对经典电影的理解。</p>
  70.                     </div>
  71.  
  72.                     <div class="icon-box" data-aos="fade-up" data-aos-delay="100">
  73.                         <div class="icon"><i class="bx bx-fingerprint"></i></div>
  74.                         <h4 class="title"><a href="">关于电影</a></h4>
  75.                         <p class="description">你有什么样的感悟？</p>
  76.                     </div>
  77.  
  78.                 </div>
  79.             </div>
  80.  
  81.         </div>
  82.     </section><!-- End About Us Section -->
  83.     <!-- ======= Footer ======= -->
  84.     <footer id="footer">
  85.  
  86.         <div class="container">
  87.             <div class="copyright">
  88.                 &copy; python爬虫可视化分析实验
  89.             </div>
  90.             <div class="credits">
  91.                 Douban Movie Top <a href="https://movie.douban.com/top250" target="_blank" title="豆瓣Top250">豆瓣Top250</a> - Douban Movie <a href="https://movie.douban.com/" title="豆瓣电影" target="_blank">豆瓣电影</a>
  92.             </div>
  93.         </div>
  94.     </footer><!-- End Footer -->
  95.  
  96.     <a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>
  97.  
  98.     <!-- Vendor JS Files -->
  99.     <script src="static/assets/vendor/jquery/jquery.min.js"></script>
  100.     <script src="static/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  101.     <script src="static/assets/vendor/jquery.easing/jquery.easing.min.js"></script>
  102.     <script src="static/assets/vendor/php-email-form/validate.js"></script>
  103.     <script src="static/assets/vendor/jquery-sticky/jquery.sticky.js"></script>
  104.     <script src="static/assets/vendor/venobox/venobox.min.js"></script>
  105.     <script src="static/assets/vendor/waypoints/jquery.waypoints.min.js"></script>
  106.     <script src="static/assets/vendor/counterup/counterup.min.js"></script>
  107.     <script src="static/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  108.     <script src="static/assets/vendor/aos/aos.js"></script>
  109.  
  110.     <!-- Template Main JS File -->
  111.     <script src="static/assets/js/main.js"></script>
  112.  
  113.     <style>
  114.         .copyrights {
  115.             text-indent: -9999px;
  116.             height: 0;
  117.             line-height: 0;
  118.             font-size: 0;
  119.             overflow: hidden;
  120.         }
  121.     </style>
  122.     <div class="copyrights" id="links20210126">
  123.         Collect from <a href="http://www.cssmoban.com/" title="网站模板">模板之家</a>
  124.         <a href="https://www.chazidian.com/" title="查字典">查字典</a>
  125.     </div>
  126. </body>
  127.  
  128. </html>

页面展示：

（6）制作团队页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="utf-8">
  6.   <meta content="width=device-width, initial-scale=1.0" name="viewport">
  7.  
  8.   <title>豆瓣Top250数据可视化分析</title>
  9.   <meta content="" name="descriptison">
  10.   <meta content="" name="keywords">
  11.  
  12.   <!-- Favicons -->
  13.   <link href="static/assets/img/favicon.png" rel="icon">
  14.   <link href="static/assets/img/apple-touch-icon.png" rel="apple-touch-icon">
  15.  
  16.   <!-- Google Fonts -->
  17.   <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">
  18.  
  19.   <!-- Vendor CSS Files -->
  20.   <link href="static/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  21.   <link href="static/assets/vendor/icofont/icofont.min.css" rel="stylesheet">
  22.   <link href="static/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  23.   <link href="static/assets/vendor/animate.css/animate.min.css" rel="stylesheet">
  24.   <link href="static/assets/vendor/venobox/venobox.css" rel="stylesheet">
  25.   <link href="static/assets/vendor/aos/aos.css" rel="stylesheet">
  26.  
  27.   <!-- Template Main CSS File -->
  28.   <link href="static/assets/css/style.css" rel="stylesheet">
  29.  
  30. </head>
  31.  
  32. <body>
  33.  
  34.     <!-- ======= Header ======= -->
  35.     <header id="header">
  36.         <div class="container">
  37.  
  38.             <div class="logo float-left">
  39.                 <h1 class="text-light"><a href="/index"><span>DouBan</span></a></h1>
  40.                 <!-- Uncomment below if you prefer to use an image logo -->
  41.                 <!-- <a href="index.html"><img src="static/assets/img/logo.png" alt="" class="img-fluid"></a>-->
  42.             </div>
  43.  
  44.             <nav class="nav-menu float-right d-none d-lg-block">
  45.                 <ul>
  46.                     <li class="active"><a href="/index">首页 <i class="la la-angle-down"></i></a></li>
  47.                     <li><a href="/movie">电影</a></li>
  48.                     <li><a href="/score">评分</a></li>
  49.                     <li><a href="/word">词云</a></li>
  50.                     <li><a href="/team">团队</a></li>
  51.                 </ul>
  52.             </nav><!-- .nav-menu -->
  53.  
  54.         </div>
  55.     </header><!-- End Header -->
  56.     <!-- ======= Our Team Section ======= -->
  57.     <section id="team" class="team">
  58.         <div class="container">
  59.  
  60.             <div class="section-title">
  61.                 <h2>我们的团队</h2>
  62.             </div>
  63.  
  64.             <div class="row">
  65.  
  66.                 <div class="col-xl-3 col-lg-4 col-md-6" data-aos="fade-up">
  67.                     <div class="member">
  68.                         <div class="pic">
  69.                             <a href="https://blog.csdn.net/qq_51701007?spm=1000.2115.3001.5343">
  70.                                 <img src="static/assets/img/team/team-1.jpg" class="img-fluid" alt="">
  71.                             </a>
  72.                         </div>
  73.                         <div class="member-info">
  74.                             <h4>代码骑士</h4>
  75.                             <span>QQ:1696297834</span>
  76.                         </div>
  77.                     </div>
  78.                 </div>
  79.  
  80.                 <div class="col-xl-3 col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
  81.                     <div class="member">
  82.                         <div class="pic">
  83.                             <a href="https://blog.csdn.net/qq_51701007?spm=1000.2115.3001.5343">
  84.                                 <img src="static/assets/img/team/team-2.jpg" class="img-fluid" alt="">
  85.                             </a>
  86.                         </div>
  87.                         <div class="member-info">
  88.                             <h4>代码骑士</h4>
  89.                             <span>QQ:1696297834</span>
  90.                         </div>
  91.                     </div>
  92.                 </div>
  93.  
  94.                 <div class="col-xl-3 col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
  95.                     <div class="member">
  96.                         <div class="pic">
  97.                             <a href="https://blog.csdn.net/qq_51701007?spm=1000.2115.3001.5343">
  98.                                 <img src="static/assets/img/team/team-3.jpg" class="img-fluid" alt="">
  99.                             </a>
  100.                         </div>
  101.                         <div class="member-info">
  102.                             <h4>代码骑士</h4>
  103.                             <span>QQ:1696297834</span>
  104.                         </div>
  105.                     </div>
  106.                 </div>
  107.  
  108.                 <div class="col-xl-3 col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300">
  109.                     <div class="member">
  110.                         <div class="pic">
  111.                             <a href="https://blog.csdn.net/qq_51701007?spm=1000.2115.3001.5343">
  112.                                 <img src="static/assets/img/team/team-4.jpg" class="img-fluid" alt="">
  113.                             </a>
  114.                         </div>
  115.                         <div class="member-info">
  116.                             <h4>代码骑士</h4>
  117.                             <span>QQ:1696297834</span>
  118.                         </div>
  119.                     </div>
  120.                 </div>
  121.  
  122.             </div>
  123.  
  124.         </div>
  125.     </section><!-- End Our Team Section -->
  126.     <!-- ======= Footer ======= -->
  127.     <footer id="footer">
  128.  
  129.         <div class="container">
  130.             <div class="copyright">
  131.                 &copy; python爬虫可视化分析实验
  132.             </div>
  133.             <div class="credits">
  134.                 Douban Movie Top <a href="https://movie.douban.com/top250" target="_blank" title="豆瓣Top250">豆瓣Top250</a> - Douban Movie <a href="https://movie.douban.com/" title="豆瓣电影" target="_blank">豆瓣电影</a>
  135.             </div>
  136.         </div>
  137.     </footer><!-- End Footer -->
  138.  
  139.     <a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>
  140.  
  141.     <!-- Vendor JS Files -->
  142.     <script src="static/assets/vendor/jquery/jquery.min.js"></script>
  143.     <script src="static/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  144.     <script src="static/assets/vendor/jquery.easing/jquery.easing.min.js"></script>
  145.     <script src="static/assets/vendor/jquery-sticky/jquery.sticky.js"></script>
  146.     <script src="static/assets/vendor/venobox/venobox.min.js"></script>
  147.     <script src="static/assets/vendor/waypoints/jquery.waypoints.min.js"></script>
  148.     <script src="static/assets/vendor/counterup/counterup.min.js"></script>
  149.     <script src="static/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  150.     <script src="static/assets/vendor/aos/aos.js"></script>
  151.  
  152.     <!-- Template Main JS File -->
  153.     <script src="static/assets/js/main.js"></script>
  154.  
  155.     <style>
  156.         .copyrights {
  157.             text-indent: -9999px;
  158.             height: 0;
  159.             line-height: 0;
  160.             font-size: 0;
  161.             overflow: hidden;
  162.         }
  163.     </style>
  164.     <div class="copyrights" id="links20210126">
  165.         Collect from <a href="http://www.cssmoban.com/" title="网站模板">模板之家</a>
  166.         <a href="https://www.chazidian.com/" title="查字典">查字典</a>
  167.     </div>
  168. </body>
  169.  
  170. </html>

 页面展示：

大功告成啦！ 

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号