六、数据可视化—首页、列表页制作（爬虫及数据可视化）

六、数据可视化—首页、列表页制作（爬虫及数据可视化）

  • 1，首页制作
    • （1）创建新项目选择flask框架
    • （2）下载模板
    • （3）导入flask框架中进行改写
    • （4）访问服务器
    • （5）修改图片路径
    • （6）修改html
  • 2，列表页制作
    • （1）更改标题
    • （2）下载图标
    • （3）更改跳转链接
    • （4）更改app.py
    • （5）Movie.html展示表格
    • （6）Movie.html

1，首页制作

使用前面爬取的movie.db数据库，完成豆瓣的可视化表现

（1）创建新项目选择flask框架

在这里插入图片描述

新建完成后
在这里插入图片描述

数据库可以放在指定的位置，也可以放在flask框架下面
理论上数据库需要单独放置，不会和项目放在一起

此处直接放在根路径下了

（2）下载模板

此处找到现有的模板，在其基础上进行修改
http://www.cssmoban.com/cssthemes/
使用模板之家的模板，可以根据自己需要选择

因为豆瓣数据比较小就选择比较简单的
在这里插入图片描述

http://www.cssmoban.com/cssthemes/9296.shtml

此网站风格像是企业站的风格

对于我们来讲，需要上面是一个标题栏，能够点一下，下面就显示一些具体的数据，图标等信息，此处基本满足要求，就选择了

此素材在云盘中已经存在了，

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

想很多自适应的，都是使用jQuery进行实现的

（3）导入flask框架中进行改写

如何将其导入flask框架中进行改写，首先将index.html复制到flask中的templates

未来所有的网页要想静态的显示，都要放到templates中

将assets放到static中，一些静态文件，主要是考虑到未来CDN的分发，把静态文件分发到很多服务器上去，降低服务器的访问压力，一般静态文件放到static中，网页渲染的文件会单独拿出来。

在这里插入图片描述
在这里插入图片描述

（4）访问服务器

在这里插入图片描述

（5）修改图片路径

但只有文字，说明图片路径不对，之前复制到static的时候，相对路径变了，现在需要将index.html页面中的assets前加入static

如下

在这里插入图片描述
在这里插入图片描述

路径替换好后，再次访问就显示成功了，如下

在这里插入图片描述

通过此种方式，即可将外部下载的网页模板实现了本地化的一个配置

（6）修改html

要对别人的HTML改成自己想要的一些效果
初步想法如下

在这里插入图片描述

为了更直观的修改我们想要修改的地方，可以进入检查，用鼠标找到我们想要更改的位置，再进入html的源代码页面进行删除更改

在这里插入图片描述

也可以在pycharm中找到搜索

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

将drop down和contact us删除（不需要了）

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

第一频想显示的是我们的信息不是团队，只要
在这里插入图片描述

将下方的替换掉上方的位置

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

结果如下

在这里插入图片描述

此时首页就制作完成了

2，列表页制作

（1）更改标题

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

（2）下载图标

可以在下方连接中下载图标

是阿里开源出来的，大部分免费
https://www.iconfont.cn/

在这里插入图片描述

（3）更改跳转链接

在这里插入图片描述

在这里插入图片描述

点击超链接是可能报错，是因为没有进行响应
在这里插入图片描述
在这里插入图片描述

下面对后面的进行一下清除

将首页index中的从main开始到end main删除
在这里插入图片描述

在这里插入图片描述

（4）更改app.py

from flask import Flask,render_templateapp = Flask(__name__)@app.route('/')                             #访问根路径
def index():return render_template("index.html")    #在templates下的路径@app.route('/index')                             #访问根路径/index时和访问根路径时返回的网页是一样的，即首页
def home():#return render_template("index.html")    #在templates下的路径return index()                          #不返回模板渲染的页面，而是返回一个函数是一样的@app.route('/movie')                             #访问根路径
def movie():return render_template("movie.html")@app.route('/score')                             #访问根路径
def score():return render_template("score.html")@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()

现在连接基本搞定了，需要改的，路由解析，模板渲染

（5）Movie.html展示表格

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

@app.route('/movie')                             #访问根路径
def movie():datalist=[]con = sqlite3.connect("movie.db")           #连接数据库，路径当前路径cur = con.cursor()                          #游标定义sql = "select * from movie250"              #从数据库中的表movie250查询所有数据data = cur.execute(sql)for item in data:datalist.append(item)                   #得到的数据要保存到列表中，否则后面关闭时会丢失信息cur.close()con.close()return render_template("movie.html",movies=datalist)    #将datalist数据放到movies变量中，在渲染网页时将movies传到网页中

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

到此为止所有数据显示结果就告此一段落了，一方面是没有分页，250条数据太多，用户查找麻烦，有兴趣可以进行分页

也可以显示图片海报等

数据可视化最基本的是列表的方式，图片其实直接加上<img>标签并设置宽高就能了

（6）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"></head><body><!-- ======= top 被删 ======= --><!-- ======= Header ======= --><header id="header"><div class="container"><div class="logo float-left"><h1 class="text-light"><a href="index.html"><span>Mamba</span></a></h1><!-- Uncomment below if you prefer to use an image logo --><!-- <a href="index.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="/index">首页 <i class="la la-angle-down"></i></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><!-- ======= drop down和contact us被删 ======= --></ul></nav><!-- .nav-menu --></div></header><!-- End Header --><!-- ======= Our Team 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">       <!-- 如果使用border=“1”太难看，使用table-striped斑马线格式就好看一些了 --><tr><td>排名</td><td>电影中文名称</td><td>电影外国名称</td><td>评分</td><td>评价人数</td><td>一句话概述</td><td>其他信息</td></tr>{% for movie in movies %}         <!-- 在上下括号中间的进行循环 --><tr><td>{{ movie[0] }}</td><td><a href="{{ movie[1] }}" target="_blank">         <!-- 加入名称超链接,target是新建标签页打开链接 -->{{ 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 Our Team Section --><!-- ======= Footer ======= --><footer id="footer"><div class="container"><div class="copyright">&copy; Copyright <strong><span>Mamba</span></strong>. All Rights Reserved</div></div></footer><!-- End Footer --><a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a><!-- 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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/42524.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

回溯算法-以景点门票销售管理系统为例

回溯算法-以景点门票销售管理系统为例

1.回溯算法介绍 1.来源 回溯算法也叫试探法&#xff0c;它是一种系统地搜索问题的解的方法。 用回溯算法解决问题的一般步骤&#xff1a; 1、 针对所给问题&#xff0c;定义问题的解空间&#xff0c;它至少包含问题的一个&#xff08;最优&#xff09;解。 2 、确定易于搜…
阅读更多...
【论文阅读】-- Visual Analytics for Model Selection in Time Series Analysis

【论文阅读】-- Visual Analytics for Model Selection in Time Series Analysis

时间序列分析中模型选择的可视化分析 摘要1 引言2 相关工作3 问题表征3.1 Box-Jenkins 方法论3.2 ARIMA 和季节性 ARIMA 模型3.3 模型规范3.4 模型拟合3.5 模型诊断 4 需求分析5 VA 用于时间序列分析中的模型选择5.1 VA选型流程说明5.2 TiMoVA 原型5.2.1 实施选择5.2.2 图形用户…
阅读更多...
java map对象格式化为json对象

java map对象格式化为json对象

在Java中&#xff0c;将Map对象转换为JSON对象通常是通过使用诸如Jackson、Gson这样的库来完成的。 下面是使用这两个库进行转换的示例&#xff1a; 一、使用Jackson库 首先&#xff0c;确保项目中已经添加了Jackson的依赖。 Maven示例依赖如下&#xff1a; <dependency&…
阅读更多...
【在Linux世界中追寻伟大的One Piece】HTTPS协议原理

【在Linux世界中追寻伟大的One Piece】HTTPS协议原理

目录 1 -> HTTPS是什么&#xff1f; 2 -> 相关概念 2.1 -> 什么是"加密" 2.2 -> 为什么要加密 2.3 -> 常见的加密方式 2.4 -> 数据摘要 && 数据指纹 2.5 -> 数字签名 3 -> HTTPS的工作过程 3.1 -> 只使用对称加密 3.2 …
阅读更多...
C语言2 常量

C语言2 常量

整型常量 常量是指在程序运行期间其数值不发生变化的数据。整型常量通常简称为整数。 整数可以是十进制数、八进制数和十六进制数。 int a 0x12345678 浮点常量 浮点常量又称实数&#xff0c;一般含有小数部分。 在C语言中&#xff0c;实数只有十进制的实数&#xff0c;…
阅读更多...
《linux系统内核设计与实现》-实现最简单的字符设备驱动

《linux系统内核设计与实现》-实现最简单的字符设备驱动

开发linux内核驱动需要以下4个步骤&#xff1a; 1 编写hello驱动代码 驱动代码如下 helloDev.c&#xff0c;这是一个最小、最简单的驱动&#xff0c;去掉了其他的不相干代码&#xff0c;尽量让大家能了解驱动本身。 #include <linux/module.h> #include <linux/mod…
阅读更多...
导航栏样式，盒子模型

导航栏样式，盒子模型

1.代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><style>li{he…
阅读更多...
MySQL5.7下载及安装详细教程

MySQL5.7下载及安装详细教程

我下载的是MySQL 5.7.43 &#xff0c;以下是详细下载安装过程 一、下载过程步骤 1、进入官方网站&#xff1a;https://www.mysql.com/ 2、首页滑到最下面&#xff0c;找到MySQL Community server 3、选择你想要的版本和电脑对应配置进行下载 4、下载完后&#xff0c;保存解…
阅读更多...
Google Earth Engine（GEE）——ui.Panel添加到地图上

Google Earth Engine（GEE）——ui.Panel添加到地图上

结果 函数 ui.root.add(widget) 将一个widget添加到根面板上。 返回根面板。 参数。 widget&#xff08;ui.Widget&#xff09;。 要添加的widget。 返回&#xff1a; ui.Panel 代码 //label var label ui.Label({ value: "text label", style: {fontSi…
阅读更多...
vscode使用Git的常用操作

vscode使用Git的常用操作

主打一个实用 查看此篇之前请先保证电脑安装了Git&#xff0c;安装教程很多&#xff0c;可自行搜索 一.初始化本地仓库&#x1f534; 使用vscode打开项目文件夹如图所使初始化仓库&#xff0c;相当于命令行的git init 二.提交到暂存区&#x1f534; 二.提交到新版本&#x1f…
阅读更多...
代码随想录算法训练营第25天|LeetCode 491.递增子序列、46.全排列、47.全排列 II

代码随想录算法训练营第25天|LeetCode 491.递增子序列、46.全排列、47.全排列 II

1.LeetCode 491.递增子序列 题目链接&#xff1a;https://leetcode.cn/problems/non-decreasing-subsequences/description/ 文章链接&#xff1a;https://programmercarl.com/0491.递增子序列.html 视频链接&#xff1a;https://www.bilibili.com/video/BV1EG4y1h78v/ 思路&am…
阅读更多...
C# 获取屏幕分辨率缩放比例的详细解释与示例

C# 获取屏幕分辨率缩放比例的详细解释与示例

在C#中&#xff0c;获取屏幕分辨率缩放比例通常指的是Dpi缩放比例&#xff0c;它表示显示设备的独立像素与设备无关像素&#xff08;96 DPI&#xff09;的比例。这通常用于确保应用程序在不同分辨率和缩放设置的显示设备上都能正确显示。.NET Framework 提供了一个名为System.W…
阅读更多...
用解释程序交错执行2个线程

用解释程序交错执行2个线程

多线程问题&#xff0c;对初学者来说&#xff0c;会常常感到神秘。特别想知道它里面到底是怎么执行的&#xff1b;遇到问题时&#xff0c;又会觉得十分迷惑。 前面的例子&#xff0c;swap 语句串扰执行问题&#xff0c;实现了一个assign指令的解释器。现在就借用它的代码&…
阅读更多...
Paho Asynchronous MQTT C Client Library--MQTTAsync API

Paho Asynchronous MQTT C Client Library--MQTTAsync API

异步MQTT 客户端库for C 基于C语言编写的MQTTAsync API&#xff0c;版权属于IBM&#xff0c;适用于2009年至2018年。 Paho MQTT C库中的API分为两类&#xff1a; 同步API&#xff08;MQTTClient API&#xff09; 特点&#xff1a;被认为是更易于使用&#xff0c;部分函数调用…
阅读更多...
TypeScript 中的 interface

TypeScript 中的 interface

在 TypeScript 中&#xff0c;interface 是一种定义对象结构或“形状”&#xff08;shape&#xff09;的类型。它可以指定一个对象必须具有的属性、方法以及它们的数据类型。通过使用 interface&#xff0c;你可以确保对象实例遵循特定的模式或契约。 以下是 interface 的一些…
阅读更多...
昇思25天学习打卡营第12天|sea_fish

昇思25天学习打卡营第12天|sea_fish

打开第12天&#xff0c;前几天打卡完成了入门的学习&#xff0c;后续有时间对入门的内容&#xff0c;再次整理一下。本次学习的内容为基于MindSpore的GPT2文本摘要。记录学习的过程。记录实验系统中的步骤&#xff0c;对一些内容进行记录和归纳。 数据集加载与处理 数据集加载…
阅读更多...
归并排序详解（递归与非递归）

归并排序详解（递归与非递归）

归并排序是建立在归并操作上的一种有效算法。该算法是采用分治法的一个非常典型的应用。将已有序的子序列合并&#xff0c;得到完全有序的序列&#xff1b;即先使每个子序列有序&#xff0c;再使子序列间断有序。若将两个有序表合并成一个有序表&#xff0c;成为二路归并。 一…
阅读更多...
【6】图像分类部署

【6】图像分类部署

【6】图像分类部署 文章目录 前言一、将pytorch模型转为ONNX二、本地终端部署2.1. ONNX Runtime部署2.2. pytorch模型部署&#xff08;补充&#xff09; 三、使用flask的web网页部署四、微信小程序部署五、使用pyqt界面化部署总结 前言 包括将训练好的模型部署在本地终端、web…
阅读更多...
【Android】自定义换肤框架01之皮肤包制作

【Android】自定义换肤框架01之皮肤包制作

前言 目前为止&#xff0c;市面上主流的安卓换肤方案&#xff0c;其实原理都是差不多的 虽然大多都号称一行代码集成&#xff0c;但其实想要做到完全适配&#xff0c;并不简单 这个系列&#xff0c;就是让大家从零开始&#xff0c;完全掌握这方面知识&#xff0c;这样才能对…
阅读更多...
关于vue监听数组

关于vue监听数组

Vue.js 监听数组&#xff1a;深入理解与实践 在 Vue.js 开发中&#xff0c;数据的响应式更新是其核心特性之一。当我们处理数组时&#xff0c;如何高效地监听数组的变化&#xff0c;及时更新视图&#xff0c;是每个开发者都需要掌握的技能。本文将深入探讨 Vue.js 监听数组的机…
阅读更多...
最新文章

Copyright @ 2022~2023