【Dash搭建可视化网站】项目2：使用列表解析式动态生成页面

手动反爬虫，禁止转载：原博地址 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，使用列表解析式动态生成页面就介绍完毕。最核心的内容就是如何使用列表解析式来简化数据的输入，为后续的项目做铺垫。