手动反爬虫,禁止转载:原博地址 https://blog.csdn.net/lys_828/article/details/122064701(CSDN博主:Be_melting)
知识梳理不易,请尊重劳动成果,文章仅发布在CSDN网站上,在其他网站看到该博文均属于未经作者授权的恶意爬取信息
项目2: 使用列表解析式动态生成页面
[1] 新建一个py文件,然后搭建框架
import dash
from dash import html
app = dash.Dash() #括号中也可以什么都不填
app.run_server(debug=True)
[2] 添加网页html中的信息,其中Ul就是列表的组合(这里的列表是html中的概念,不是python中的列表),添加四个列表用来存放数据。
app.layout = html.Ul(
[
html.Li('Apple'),
html.Li('Banana'),
html.Li('Grapes'),
html.Li('Pear')
]
)
添加完毕后,运行程序。刷新网址:http://127.0.0.1:8050/ ,输出结果如下。打开后一片黑色,用光标选中左上方才显示出添加的信息。原因在于做梗图的时候背景设置了黑色,为了显示出字体,后续会对背景颜色进行修改。
[3] 在进行网页中列表数据的创建时,需要一直输入html.Li()进行单个的数据元素的录入,如果数据量较多时或者是接口动态更新的数据,此时手动输入就不现实。因此可以使用列表解析式的方式来操作,具体的代码如下。
fruit_list = ['Apple','Banana','Grapes','Pear']
app.layout = html.Ul(
children=[html.Li(fruit) for fruit in fruit_list]
)
children对应的列表就变成了一个解析式的形式,批量向html中加入数据,只要是fruit_list这个变量的信息发生改变,那么对应网页的信息就自动跟着变化,从而完成动态更新。
[4] 可以对水果添加一些emoji表情,在网站上找到对应的表情进行复制粘贴,网址:https://emojipedia.org/。
比如搜索apple后回车,就会跳转到搜索结果界面,点击Red Apple,如下。
点击Copy按钮后,在编辑器中就可以直接进行粘贴,依次进行对应表情的添加,如下。
[5] 修改后进行保存,运行py文件后,刷新网址:http://127.0.0.1:8050/ ,输出结果如下。(此时背景颜色修改为pink粉红色,多用在卡通网页中)
[6] 添加动态样式。在assets文件夹下创建一个style.css文件,或者直接修改原来的样式文件,输入代码如下。
body,ul {
background-color: pink;
}
li {
color:white;
font-size: 8rem;
font-weight: bold;
transition: all 0.2s ease-in-out;
}
li:hover{
transform: scale(1.1);
}
这里的css语法可以留意一下,不需要刻意学习,后面再进行网站搭建时候都是使用的框架,别人都已经给写好了,不用自己在一点点写。修改完毕后进行保存,重新运行py文件后,刷新网址:http://127.0.0.1:8050/ ,输出结果如下。
至此整个项目2,使用列表解析式动态生成页面就介绍完毕。最核心的内容就是如何使用列表解析式来简化数据的输入,为后续的项目做铺垫。