【Dash搭建可视化网站】项目11：世界自杀率数据看板

news2024/11/30 4:55:14

世界自杀率数据看板

  • 1 项目效果图
  • 2 项目架构
  • 3 文件介绍和功能完善
    • 3.1 assets文件夹介绍
    • 3.2 app.py和index.py文件完善
    • 3.3 header.py文件完善
    • 3.4 api.py/api.ipynb文件完善
      • 3.4.1 获取Dropdown组件中的下拉标签信息
      • 3.4.2 获取Rangeslider组件中的时间区间
      • 3.4.3 获取Checklist组件中的年龄划分
    • 3.5 layoutleft.py文件完善
      • 3.5.1 设置Dropdown组件
      • 3.5.2 设置Rangeslider组件
      • 3.5.3 设置Checklist组件
    • 3.6 layoutright.py文件完善
  • 4 样式修改
    • 4.1 整体样式修改
    • 4.2 header.py文件中样式修改
    • 4.3 layoutleft.py文件中样式修改
    • 4.4 layoutright.py文件中样式修改
  • 5 小bug

手动反爬虫：原博地址 https://blog.csdn.net/lys_828/article/details/128624945

 知识梳理不易，请尊重劳动成果，文章仅发布在CSDN网站上，在其他网站看到该博文均属于未经作者授权的恶意爬取信息

1 项目效果图

整个项目的页面包含三部分，由上左右三栏构成。项目已上传至 个人Github仓库 。 项目头部是整个面板的标题，左侧是筛选条件，右侧是依据筛选条件绘制出的散点图。
在这里插入图片描述

2 项目架构

项目中各文件名称与对应功能见下表
在这里插入图片描述

3 文件介绍和功能完善

3.1 assets文件夹介绍

assets文件夹中就是加载的样式和图片，样式这里可以使用之前已经下载好的bootstrap.min.css样式(也可以按照 项目6.2bootstrap组件 中的介绍下载其它的样式模板)，本次项目中不需要加载本地图片。

3.2 app.py和index.py文件完善

主框架就是app.py项目初始化文件和index.py主程序运行文件，其中app.py文件中的信息较为简单，就是创建一个dash的应用，代码如下
在这里插入图片描述

index.py文件中引入初始化后的应用，然后进行布局及运行初始化设置。布局的主体是上下两个部分，上面是项目的头部信息，下方是分为一行两列。

头部只有一个信息，使用HeaderInfo()填充内容，该函数分配在header.py文件中；而下部中左侧是有三个筛选组件，分别用三个函数填充，此三个函数分配在layoutleft.py文件中；右侧只有一个图形展示，使用Scatterchart()填充内容，该函数分配在layoutright.py文件中，该文件的全部代码如下。

from dash import html
from app import app
import dash_bootstrap_components as dbc

from header import HeaderInfo
from layoutleft import DropdownInfo,RangeSliderInfo,ChecklistInfo
from layoutright import Scatterchart

app.layout = html.Div(
    [
        html.Div([HeaderInfo()]),
        html.Div([
                dbc.Row(
                [
                    dbc.Col([DropdownInfo(),RangeSliderInfo(),ChecklistInfo()],width=4),
                    dbc.Col([Scatterchart()])
                ]
            )
        ])
    ]
)

if __name__ == '__main__':
    app.run_server(debug=True)

对应的剩余文件中的信息如下：（api.py和api.ipynb文件暂时没有内容）
在这里插入图片描述

3.3 header.py文件完善

该文件的功能就是显示项目标题，并居中，设置相对简答，全部代码如下。

from dash import html

def HeaderInfo():
    return html.Div(
        [
            html.H1('World Suicides Data')
        ]
    )

保存文件后，运行index.py，提示点击网址：http://127.0.0.1:8050/，刷线页面后，输出结果如下。
在这里插入图片描述

3.4 api.py/api.ipynb文件完善

其中api.py文件是为提供数据接口，api.iypnb文件方便进行数据处理和调式工作。下方左侧筛选的依据有国家、年份和年龄范围，所以针对此条件先在api.ipynb文件中进行数据处理，数据文件已放置在该项目下的data文件夹中。首先切换程序的执行路径，利用os.chdir()函数，输入当前项目所在的文件路径，然后在读入数据文件，代码及输出结果如下。
在这里插入图片描述

3.4.1 获取Dropdown组件中的下拉标签信息

获取国家/地区的唯一值，并去除缺失值None，代码如下。

#获取国家信息的唯一值
country_ls = df['country'].unique().tolist()

#检验列表中是否存在缺失值None
country_ls.count(None)

输出结果如下。
在这里插入图片描述

3.4.2 获取Rangeslider组件中的时间区间

数据时间跨度的获取，只需要求解出year字段中的最小值和最大值即可
在这里插入图片描述

3.4.3 获取Checklist组件中的年龄划分

年龄分组获取即是对age字段进行唯一值的获取。在输出的结果中如果使用列表的sort()排序功能，发现年龄分组字段是按照字符串的规则进行排序，先比对第一个字符的大小，如果第一个字符相同， 再比较第二个字符，以此类推。但是排序的结果不满足需要，因此可借助python中自带的sorted()函数，自定义排序规则，代码如下。

#获取年龄分组情况
age = df['age'].unique().tolist()

#使用列表的排序功能
age.sort()

#借助sorted()函数进行自定义排序规则设置
age_ordered = sorted(age,key=lambda x: int(x.split('-')[0]) if '-' in x else int(x[:2]))

输出结果如下。
在这里插入图片描述

数据成功获取后，把此部分代码转移到api.py文件中，此时该文件中的全部代码如下。

#切换程序的执行路径
import os
os.chdir('d:/Data Science/plotly学习/个人/【11. World suicide rate】Dropdown-Rangedlider-checklist-scatter')

#将文件数据读入到python中
import pandas as pd
df = pd.read_csv('data/suicide rates.csv')


#获取国家信息的唯一值，需要核实是否存在缺失值None
country_ls = df['country'].unique().tolist()

#获取数据的时间跨度
year_min,year_max = df['year'].min(),df['year'].max()

#获取年龄分组情况
age = df['age'].unique().tolist()

#借助sorted()函数进行自定义排序规则设置
age_ordered = sorted(age,key=lambda x: int(x.split('-')[0]) if '-' in x else int(x[:2]))

3.5 layoutleft.py文件完善

3.5.1 设置Dropdown组件

该文件的功能就是设置三个筛选的组件，首先完善第一个Dropdown组件，导入api.py中的全部数据变量，然后设置文字提醒，组件标签信息和id，代码如下。

from dash import html,dcc
from api import country_ls,year_min,year_max,age_ordered


def DropdownInfo():
    return html.Div(
        [
            html.H3('Select Country:'),
            dcc.Dropdown(
                country_ls,
                'Japan',
                id='dpd'
                )
        ]
    )

保存文件后，刷新页面，输出的内容如下。
在这里插入图片描述

3.5.2 设置Rangeslider组件

可以直接把项目9中的Rangeslider组件设置的代码直接复制粘贴过来，然后修改里面的起始值和id即可，代码如下。

def RangeSliderInfo():
   
    return html.Div(
        [
            html.H3('Select Year:'),
            dcc.RangeSlider(
                year_min,year_max,1,
                marks=None,
                value=[1995,2005],
                tooltip={"placement": "bottom", "always_visible": True},
                id='rangeslider',
            )
        ]
    )

保存文件后，刷新网址，此时页面输出结果如下。
在这里插入图片描述

3.5.3 设置Checklist组件

第一次使用Checklist组件，可以参考官网示例，如下。其中第一个列表里面包含了所有的内容，第二个列表是默认选择的值。
在这里插入图片描述

应用到项目中，丰富代码，如下。

def ChecklistInfo():
    return html.Div(
        [
            html.H3('Select Platform:'),
            dcc.Checklist(
                age_ordered,
                ['35-54 years','55-74 years'],
                id = 'checklist'
            )
        ]
    )

保存文件后，刷新网址，此时页面输出结果如下。
在这里插入图片描述

3.6 layoutright.py文件完善

该文件的功能是根据左侧的筛选条件进行散点图绘制，plotly绘制散点图官网示例，如下。
在这里插入图片描述
首先获取图表展示的数据，即按照国家、时间、年龄分组汇总求和的数据，形成一个新的数据集，方便在绘制图形时直接调用，代码及输出结果如下。
在这里插入图片描述
然后把此部分代码转移到api.py文件中并导入到layoutright.py文件中，再按照官网示例完善scatter图形绘制。

from dash import Input,Output,dcc
from app import app
import plotly.graph_objects as go
from api import suicide_df

def Scatterchart():
    return dcc.Graph(id='scatter',config={'displayModeBar': False})

@app.callback(
    Output('scatter','figure'),
    [Input('dpd','value'),Input('rangeslider','value'),Input('checklist','value')]
)
def update(select_country, slider_year, radio_items):
    #print(select_country, slider_year, radio_items)
    df = suicide_df[(suicide_df['country'] == select_country) & 
                        (suicide_df['year'] >= slider_year[0]) & 
                        (suicide_df['year'] <= slider_year[1]) & 
                        (suicide_df['age'].isin(radio_items))]
    
    fig = go.Figure(
        go.Scatter(
                    x=df['year'],
                    y=df['suicides_no'],
                    text = df['sex'],
                    textposition = 'top center',
                    mode = 'markers + text',
                    marker = dict(
                        size = df['suicides_no'] / 250,
                        color = df['suicides_no'],
                        colorscale = 'HSV',
                        showscale = False,
                        line = dict(
                            color = 'MediumPurple',
                            width = 2
                        )),
                    hoverinfo='text',
                    hovertext=
                    '<b>Country</b>: ' + df['country'].astype(str) + '<br>' +
                    '<b>Age</b>: ' + df['age'].astype(str) + '<br>' +
                    '<b>Sex</b>: ' + df['sex'].astype(str) + '<br>' +
                    '<b>Year</b>: ' + df['year'].astype(str) + '<br>' +
                    '<b>Population</b>: ' + [f'{x:,.0f}' for x in df['population']] + '<br>' +
                    '<b>Suicides/100k pop</b>: ' + [f'{x:,.0f}' for x in df['suicides/100k pop']] + '<br>' +
                    '<b>Suicides</b>: ' + [f'{x:,.0f}' for x in df['suicides_no']] + '<br>'
              )
    )
    fig.update_layout(
        margin=dict(
            l=0,
            r=0,
            t=0,
            b=0
        )
    )
    return fig

保存文件后，刷新网址，此时页面输出结果如下。
在这里插入图片描述

4 样式修改

4.1 整体样式修改

在assets文件夹下新建一个setting.css文件，设置整体风格。主要是背景、边缘和字体颜色的设置。
在这里插入图片描述

此时页面样式输出如下。
在这里插入图片描述

4.2 header.py文件中样式修改

只有一个主题文字，需要做的就是进行居中处理即可。根据实际显示，又调整了一下文字和下方内容的边距。
在这里插入图片描述

4.3 layoutleft.py文件中样式修改

首先把项目10中的卡片容器应用到这里的左右两部分。由于项目的主题背景是偏黑，所以颜色上修改一下，指定为黑色调颜色。
在这里插入图片描述

然后应用到左侧栏中，需要注意该属性添加的位置是在index.py文件中，如下。
在这里插入图片描述
保存文件后，刷新网址，此时页面输出结果如下。
在这里插入图片描述

接着修改组件颜、间距等属性。先调整Dropdown组件的属性，直接把项目10中此属性全部复制过来，然后改一下背景颜色和字体颜色即可，代码如下。

/* width */
::-webkit-scrollbar {
    width: 10px !important;
    display: block !important;
  }


/* Track */
::-webkit-scrollbar-track {
    background: #232c37 !important;
    border-radius: 10px !important;
    display: block !important;
    }
    
/* Handle */
::-webkit-scrollbar-thumb {
background: #363535 !important;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: white !important;
}

#dpd * {
    background-color: #191a1a !important;
    color: #f7f8f9 !important;
    font-size: 10px !important;
}

.Select-control{
    border: 3px solid #323844 !important;
}

.Select-menu-outer{
    overflow: hidden !important;
    border-color: #373838 !important;
}

保存文件后，刷新网址，此时页面输出结果如下。
在这里插入图片描述

然后调整三个组件直接的间距，代码修改如下。
在这里插入图片描述

对于Rangeslider组件中的滑块中间的区域颜色以及按钮的边缘颜色也可以进行设置，这里按照自己的想法进行修改，代码如下。

.rc-slider-track{
    background-color: rgb(234, 13, 112) !important;
}

.rc-slider-handle{
    border-color: rgb(234, 13, 112) !important;
}

最后是关于Checklist组件的设置，当前版本中默认就是横向排布，尝试了很多参数后都没有办法实现垂直排列，如下。
在这里插入图片描述

那就只能自己自定义属性，设置一个columns属性，设置组件的宽度为三分之一，然后左对齐，设置适当的边距，完成目标样式，代码及文件修改内容如下。此处显示为全部添加指定参数时的使用方法，也可以采用最初的简写方式。

在这里插入图片描述

保存文件后，刷新网址，此时页面输出结果如下。
在这里插入图片描述

4.4 layoutright.py文件中样式修改

在项目10中已经处理过plotly绘制图形背景与项目主题背景融合的问题，添加两行代码即可解决，但是要注意设置一下字体颜色，不然文字标注就看不清楚了，全部代码如下。

from dash import Input,Output,dcc,html
from app import app
import plotly.graph_objects as go
from api import suicide_df

def Scatterchart():
    return html.Div(id = 'content')

@app.callback(
    Output('content','children'),
    [Input('dpd','value'),Input('rangeslider','value'),Input('checklist','value')]
)
def update(select_country, slider_year, radio_items):
    print(select_country, slider_year, radio_items)
    df = suicide_df[(suicide_df['country'] == select_country) & 
                        (suicide_df['year'] >= slider_year[0]) & 
                        (suicide_df['year'] <= slider_year[1]) & 
                        (suicide_df['age'].isin(radio_items))]
    
    fig = go.Figure(
        go.Scatter(
                    x=df['year'],
                    y=df['suicides_no'],
                    text = df['sex'],
                    textposition = 'top center',
                    mode = 'markers + text',
                    marker = dict(
                        size = df['suicides_no'] / 250,
                        color = df['suicides_no'],
                        colorscale = 'HSV',
                        showscale = False,
                        line = dict(
                            color = 'MediumPurple',
                            width = 2
                        )),
                    hoverinfo='text',
                    hovertext=
                    '<b>Country</b>: ' + df['country'].astype(str) + '<br>' +
                    '<b>Age</b>: ' + df['age'].astype(str) + '<br>' +
                    '<b>Sex</b>: ' + df['sex'].astype(str) + '<br>' +
                    '<b>Year</b>: ' + df['year'].astype(str) + '<br>' +
                    '<b>Population</b>: ' + [f'{x:,.0f}' for x in df['population']] + '<br>' +
                    '<b>Suicides/100k pop</b>: ' + [f'{x:,.0f}' for x in df['suicides/100k pop']] + '<br>' +
                    '<b>Suicides</b>: ' + [f'{x:,.0f}' for x in df['suicides_no']] + '<br>'
              )
    )
    fig.update_layout(
        paper_bgcolor='#202020',
        plot_bgcolor='#202020',
        font=dict(
        # family="Lato",
        size=14,
        color="white"),
        margin=dict(
            l=0,
            r=0,
            t=0,
            b=0
        ),

        xaxis=dict(title='<b>Year</b>',
                        color='white',
                        showline=True,
                        showgrid=False,
                        linecolor='white',
                        zeroline=False
                        
                ),

        yaxis=dict(
                title= '<b>Suicides</b>',
                color= 'white',
                showline= False,
                showgrid= True,
                gridcolor='#5a5a5a',
                tickfont={
                    'family': 'Aerial',
                    'color': 'white',
                    'size': 12
                },
                zeroline=False
        )
 
    )
    return [
            html.H3(f'Suicide Datas: {select_country}',style={'textAlign':'center'}),
            dcc.Graph(figure=fig,config={'displayModeBar': False})
        ]

保存文件后，刷新网址，此时页面输出结果如下。
在这里插入图片描述

5 小bug

一不小心发现Checklist组件中的标签顺序不对，仔细检查一下发现在指定时又进行了sorted()一下，于是干脆就直接使用最初简单的样式（或者直接删除sorted函数也可），修改及输出对比如下。
在这里插入图片描述

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

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

相关文章

【 Vue3 + Vite + setup语法糖 + Pinia + VueRouter + Element Plus 第五篇】【完结篇附源码】

【 Vue3 + Vite + setup语法糖 + Pinia + VueRouter + Element Plus 第五篇】【完结篇附源码】

在第四篇中我们学习了mixin 公共方法封装&#xff0c; VueRouter 的使用以及配置权限路由&#xff0c;本期我们将讲述 Pinia,并使用 Pinia 和 Axios接口数据完成登录功能以权限路由改造 本期需要掌握的知识如下: Pinia 在项目中的使用及 持久化使用 Pinia 和 Axios 完成 登录 …
阅读更多...
VIMA: General Robot Manipulation with Multimodal Prompts

VIMA: General Robot Manipulation with Multimodal Prompts

Paper name VIMA: General Robot Manipulation with Multimodal Prompts Paper Reading Note URL: https://arxiv.org/pdf/2210.03094.pdf Project URL: https://vimalabs.github.io/ ICLR review URL: https://openreview.net/forum?idhzjQWjPC04A TL;DR ICLR 2023 在投…
阅读更多...
动态 json 转化序表

动态 json 转化序表

【问题】Hi,I have a problem very similar tohttp://community.jaspersoft.com/questions/844023/need-help-looping-throu…,but I can’t just change the json file as done by the person asking that question.Any help would be greatly appreciated.----I am trying to…
阅读更多...
深入学习IO多路复用select/poll/epoll实现原理

深入学习IO多路复用select/poll/epoll实现原理

这里写自定义目录标题参考概述1. Linux 怎样处理网络请求1.1 阻塞 IO1.2 非阻塞 IO1.3 IO 多路复用2. 详解 select、poll、epoll 实现原理2.1 select 实现原理2.2 poll 实现原理3. 总结参考 深入学习IO多路复用select/poll/epoll实现原理 概述 Linux 服务器处理网络请求有三…
阅读更多...
Java基础算法每日5道详解(4)

Java基础算法每日5道详解(4)

101. Symmetric Tree 对称树 Given the root of a binary tree, check whether it is a mirror of itself (i.e., symmetric around its center). Example 1: Input: root [1,2,2,3,4,4,3] Output: trueExample 2: Input: root [1,2,2,null,3,null,3] Output: falseleetco…
阅读更多...
Linux常用命令——nl命令

Linux常用命令——nl命令

在线Linux命令查询工具(http://www.lzltool.com/LinuxCommand) nl 在Linux系统中计算文件内容行号 补充说明 nl命令读取 file 参数&#xff08;缺省情况下标准输入&#xff09;&#xff0c;计算输入中的行号&#xff0c;将计算过的行号写入标准输出。在输出中&#xff0c;n…
阅读更多...
牛啊~ 长这么大还是头一次见24W字的SpringBoot从入门到实战文档

牛啊~ 长这么大还是头一次见24W字的SpringBoot从入门到实战文档

牛啊&#xff01;长这么大还是头一次见24W字的SpringBoot从入门到实战文档&#xff01; 不服还真不行&#xff0c;因为这份文档包含的内容是又全又新&#xff0c;而且还特别高深&#xff0c;从入门到实战的内容全都有&#xff01;&#xff01; 继续往下看&#xff1a; 本文档从…
阅读更多...
EMQ设定ACL规则来控制客户端对主题的订阅权限

EMQ设定ACL规则来控制客户端对主题的订阅权限

实现原理&#xff1a;EMQ可以通过制订ACL规则&#xff0c;校验客户端每个发布(Publish)/订阅(Subscribe) 的权限 本次采用的是EMQ Mnesia ACL。使用 EMQ X 内置的 Mnesia 数据库存储 ACL 规则 测试过程&#xff1a; 1本次实验环境&#xff0c;1个服务端&#xff08;发布1个主…
阅读更多...
NumPy一维数组、二维数组与Pandas的Series、DataFrame行列结构和横纵方向的统一说明

NumPy一维数组、二维数组与Pandas的Series、DataFrame行列结构和横纵方向的统一说明

最近在这个问题上耽误了一些时间&#xff0c;原因是之前个人理解上出了一些偏差&#xff0c;又受到错误文章的误导&#xff0c;把这个问题搞复杂了&#xff0c;现在统一梳理一下。在展开之前&#xff0c;先明确说明的是&#xff1a;NumPy的二维数组与Pandas的DataFrame&#xf…
阅读更多...
7、Javaweb_tomcatservlet

7、Javaweb_tomcatservlet

web相关概念 1. 软件架构 1. C/S&#xff1a;客户端/服务器端 2. B/S&#xff1a;浏览器/服务器端 2. 资源分类 1. 静态资源&#xff1a;所有用户访问后&#xff0c;得到的结果都是一样的&#xff0c;称为静态资源.静态资源可以直接被浏览器解析 * 如&am…
阅读更多...
2023年最全盘点 | 16款跨平台应用程序开发框架

2023年最全盘点 | 16款跨平台应用程序开发框架

近年来小程序技术被微信及其生态应用带的如火如荼的&#xff0c;开发者的世界里&#xff0c;小程序的技术非常受关注&#xff0c;特别在流量承接及跨端开发方面&#xff0c;均受到不同规模的企业关注及积极实践。 2023年&#xff0c;小程序依然很火&#xff0c;但却有了一些不…
阅读更多...
元宇宙产业委MCC｜于佳宁：加密资产摆脱不了周期性规律

元宇宙产业委MCC｜于佳宁：加密资产摆脱不了周期性规律

2022年&#xff0c;加密行业面临寒冬&#xff0c;加密货币市场总价值大量缩水&#xff0c;降逾1.45万亿美元&#xff0c;期间多家加密公司接连倒塌&#xff0c;引发市场连锁效应。 加密货币总市值降逾1.45万亿美元 根据CoinMarketCap数据&#xff0c;加密货币总市值(Total Cry…
阅读更多...
【服务器数据恢复】某品牌DS系列服务器RAID5数据恢复案例

【服务器数据恢复】某品牌DS系列服务器RAID5数据恢复案例

服务器数据恢复环境&#xff1a; 某单位一台某品牌DS系列服务器连接4个扩展柜&#xff1b; 50块磁盘组建两组RAID5&#xff0c;其中一组由27块磁盘组建的RAID5存放的是Oracle数据库文件&#xff1b; 上层一共划分11个卷。 服务器故障&#xff1a; 磁盘故障导致存放Oracle数据库…
阅读更多...
JavaScript类和对象

JavaScript类和对象

1、面向对象与面向过程 1.1 面向过程编辑POP(Process-oriented programming) 面向过程就是分析出解决问题所需要的步骤&#xff0c;然后用函数把这些步骤一步一步实现&#xff0c;使用的时候再一个一个的依次调用就可以了。面向过程&#xff0c;就是按照我们分析好的步骤&…
阅读更多...
20张图带你了解JVM运行时数据区

20张图带你了解JVM运行时数据区

运行时数据区总览 内存是非常重要的系统资源&#xff0c;是硬盘和CPU的中间仓库及桥梁&#xff0c;承载着操作系统和应用程序的实时运行。JVM内存布局规定了Java在运行过程中内存申请、分配、管理的策略&#xff0c;保证了JVM的高效稳定运行。不同的JVM对于内存的划分方式和管…
阅读更多...
C 程序设计教程（11）—— 字符数据的输入与输出

C 程序设计教程（11）—— 字符数据的输入与输出

C 程序设计教程&#xff08;11&#xff09;—— 字符数据的输入与输出 该专栏主要介绍 C 语言的基本语法&#xff0c;作为《程序设计语言》课程的课件与参考资料&#xff0c;用于《程序设计语言》课程的教学&#xff0c;供入门级用户阅读。 目录C 程序设计教程&#xff08;11&…
阅读更多...
【2004NOIP普及组】T2.花生采摘 试题解析

【2004NOIP普及组】T2.花生采摘 试题解析

【2004NOIP普及组】T2.花生采摘 试题解析 时间限制: 1000 ms 内存限制: 65536 KB 【题目描述】 鲁宾逊先生有一只宠物猴，名叫多多。这天，他们两个正沿着乡间小路散步，突然发现路边的告示牌上贴着一张小小的纸条：“欢迎免费品尝我种的花生！——熊字”。 鲁宾逊先生…
阅读更多...
Android---Chip

Android---Chip

Chip Chip 代表一个小块中的复杂实体&#xff0c;如联系人。它是一个圆形按钮&#xff0c;由一个标签&#xff0c;一个可选的芯片图标和一个可选的关闭图标组成。如果 Chip 可检查&#xff0c;则可以点击或切换Chip 。 style"style/Widget.MaterialComponents.Chip.Action…
阅读更多...
疫情在家搭建的简单易学的SLAM建图机器人

疫情在家搭建的简单易学的SLAM建图机器人

1 简介 Easy_mqOS 是我仿照ROS 搭建的基于MQTT的简易机器人分布式开发框架,是一种轻量级并且十分容易上手的框架&#xff0c;支持多个节点的主题的订阅和单topic发布,节点之间独立、解耦合。没有复杂的文件配置&#xff0c;一定的make编程基础&#xff0c;像正常启动服务一样&a…
阅读更多...
Redis未授权访问漏洞(四)SSH key免密登录

Redis未授权访问漏洞(四)SSH key免密登录

前言 系列文章 Redis未授权访问漏洞(一)先导篇 Redis未授权访问漏洞(二)Webshell提权篇 Redis未授权访问漏洞(三)Redis写入反弹连接定时任务 SSH key免密登录 实战实验 环境准备 实验前我们先来复习一遍ssh-key免密登录的流程 攻击机&#xff1a; Centos7 IP:192.168.142.44 靶…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023