大数据可视化大屏实战项目（4）物流数据云看台（包括动态登陆页面）—HTML+CSS+JS【源码在文末】（可用于比赛项目或者作业参考中）

大数据可视化大屏实战项目（4）物流数据云看台（包括动态登陆页面）—HTML+CSS+JS【源码在文末】（可用于比赛项目或者作业参考中🐕🐕🐕）

一，项目概览

☞☞☞☞☞☞项目演示链接：http://59.110.22.223:8080/Data/4/

☞☞☞☞☞☞项目演示链接：http://59.110.22.223:8080/Data/4/

image-20230904092110563

image-20230904092603407

image-20230904092623160

image-20230904092632010

二，运行视频

☞☞☞☞☞☞B站演示视频：
【大数据可视化大屏实战项目（4）物流数据云看台（包括动态登陆页面）—HTML+CSS+JS（可用于比赛项目或者作业参考中）】 https://www.bilibili.com/video/BV1EN411v7Yx/?share_source=copy_web&vd_source=b2e9b9ed746acda34f499009647748ed

三，部分代码讲解

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>看板</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/scanboard.css" />
<link rel="stylesheet" type="text/css" href="css/animsition.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.shCircleLoader.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.shCircleLoader-min.js"></script>
</head>
<body><div id="loader"></div><script type="text/javascript">$('#loader').shCircleLoader({color: "#00deff"});</script><!--Top Start!--><div class="scanboardWp animsition"><div id="top"><div class="wp clearfix"><div class="left pageTit"><a class="summaryBtn" href="javascript:;">物流汇总看板</a></div><div class="center topLogo"><a href="https://paycloud.vip"><img src="images/logo.png"></a></div><div class="right topBar"><div class="topTime">时间加载中...</div><div class="clearfix"><a href="index.html" class="signOut fr">退出</a><div class="company fr"><h3 style="">资源优选</h3><div class="dropdown"><a href="https://paycloud.vip">资源淘宝店</a><a href="https://paycloud.vip">可视化模板精选</a><a href="https://paycloud.vip">优质资源</a></div></div></div></div></div></div><!--Top End!--><!--Main Start!--><div id="main" class="wp clearfix"><div class="left"><!--今日运单数量--><div class="item waybill"><div class="itemTit"><span class="border-yellow">今日运单数量</span></div><div class="itemCon itembg"><div class="progress" progress="80%"><h3 class="clearfix"><span>正常单</span><i>80单</i></h3><div class="progressBar"><span></span></div><h4>0%</h4></div><div class="progress" progress="15%"><h3 class="clearfix"><span>临时单</span><i>15单</i></h3><div class="progressBar"><span></span></div><h4>0%</h4></div><div class="progress" progress="5%"><h3 class="clearfix"><span>异常单</span><i>5单</i></h3><div class="progressBar"><span></span></div><h4>0%</h4></div></div></div><!--各阶段平均用时统计--><div class="item"><div class="itemTit"><span class="border-green">各阶段平均用时统计</span></div><div class="itemCon"><ul class="listStyle"><li class="clearfix"><span>下单…配车</span><span><strong>3.4</strong>秒</span></li><li class="clearfix"><span>配车…装货</span><span><strong>24</strong>分钟</span></li><li class="clearfix"><span>到厂卸货</span><span><strong>14</strong>分钟</span></li><li class="clearfix"><span>装回收器具</span><span><strong>7</strong>分钟</span></li><li class="clearfix"><span>卸回收器具</span><span><strong>5</strong>分钟</span></li></ul></div></div><!--人员信息--><div class="item"><div class="itemTit"><span class="border-blue">人员信息</span></div><div class="itemCon itembg"><ul class="listStyle"><li class="clearfix"><span>领导：<strong>5</strong>人</span><span>司机：<strong>36</strong>人</span><span>门卫：<strong>6</strong>人</span><span>器具中心：<strong>15</strong>人</span><span>派单员：<strong>20</strong>人</span><span>售后卸载：<strong>29</strong>人</span><span>财务：<strong>3</strong>人</span><span>售后回收：<strong>10</strong>人</span></li></ul></div></div></div><div class="center"><div class="centerWp"><!--中间大地图--><div class="mapContainer"><div class="btnLayer"><div class="search"><div class="searchInner"><a href="javascript:;" class="searchBtn"><span class="icoSearch"></span></a><form class="searchForm"><button class="icoSearch"></button><input type="text" name="" placeholder="请搜索车辆"></form></div></div><a href="javascript:;" class="infoBtn"><span class="icoCar"></span></a></div><div id="myMap" class="item"></div></div><!--月运单量统计图--><div class="billChart"><div class="itemTit"><span class="border-blue">月运单量统计图<small>(2017年12月)</small></span></div><div id="myChart1"></div></div></div></div><div class="right"><!--总计运单数--><div class="item total itembg"><div class="itemTit"><span class="border-yellow">总计运单数</span></div><div class="itemCon"><div class="totalNum"><strong id="totalNum" total="368082">0</strong><span>单</span></div></div></div><!--基本信息--><div class="item basicInfo"><div class="itemTit"><span class="border-green">基本信息</span></div><div class="itemCon itembg"><div class="infoPie"><ul class="clearfix"><li class="color-yellow"><span class="border-yellow" id="indicator1" total="32">0</span><p>在途车辆</p></li><li class="color-green"><span class="border-green" id="indicator2" total="65">0</span><p>出车次数</p></li><li class="color-blue"><span class="border-blue" id="indicator3" total="100">0</span><p>今日订单</p></li></ul><div id="indicatorContainer"></div></div></div></div><!--运单状态--><div class="item billState"><div class="itemTit"><span class="border-green">运单状态</span></div><div class="itemCon"><div class="StateBox"><div class="StateTit"><span>订单编号</span><span>使用时间</span><span>满载率</span></div><div id="FontScroll"><ul><li><div class="fontInner clearfix"><span>ZC1712120023</span><span>2小时15分</span><span><div class="progress" progress="78%"><div class="progressBar"><span></span></div><h3><i><h4></h4></i></h3></div></span></div></li><li><div class="fontInner clearfix"><span>ZC1712120023</span><span>2小时15分</span><span><div class="progress" progress="80%"><div class="progressBar"><span></span></div><h3><i><h4></h4></i></h3></div></span></div></li><li><div class="fontInner clearfix"><span>ZC1712120023</span><span>2小时15分</span><span><div class="progress" progress="49%"><div class="progressBar"><span></span></div><h3><i><h4></h4></i></h3></div></span></div></li><li><div class="fontInner clearfix"><span>ZC1712120023</span><span>2小时15分</span><span><div class="progress" progress="7%"><div class="progressBar"><span></span></div><h3><i><h4></h4></i></h3></div></span></div></li><li><div class="fontInner clearfix"><span>ZC1712120023</span><span>2小时15分</span><span><div class="progress" progress="55%"><div class="progressBar"><span></span></div><h3><i><h4></h4></i></h3></div></span></div></li><li><div class="fontInner clearfix"><span>ZC1712120023</span><span>2小时15分</span><span><div class="progress" progress="100%"><div class="progressBar"><span></span></div><h3><i><h4></h4></i></h3></div></span></div></li><li><div class="fontInner clearfix"><span>ZC1712120023</span><span>2小时15分</span><span><div class="progress" progress="94%"><div class="progressBar"><span></span></div><h3><i><h4></h4></i></h3></div></span></div></li><li><div class="fontInner clearfix"><span>ZC1712120023</span><span>2小时15分</span><span><div class="progress" progress="23%"><div class="progressBar"><span></span></div><h3><i><h4></h4></i></h3></div></span></div></li><li><div class="fontInner clearfix"><span>ZC1712120023</span><span>2小时15分</span><span><div class="progress" progress="67%"><div class="progressBar"><span></span></div><h3><i><h4></h4></i></h3></div></span></div></li><li><div class="fontInner clearfix"><span>ZC1712120023</span><span>2小时15分</span><span><div class="progress" progress="42%"><div class="progressBar"><span></span></div><h3><i><h4></h4></i></h3></div></span></div></li><li><div class="fontInner clearfix"><span>ZC1712120023</span><span>2小时15分</span><span><div class="progress" progress="38%"><div class="progressBar"><span></span></div><h3><i><h4></h4></i></h3></div></span></div></li><li><div class="fontInner clearfix"><span>ZC1712120023</span><span>2小时15分</span><span><div class="progress" progress="76%"><div class="progressBar"><span></span></div><h3><i><h4></h4></i></h3></div></span></div></li></ul></div></div></div></div></div></div><!--Main End!--></div><div class="filterbg"></div><div class="popup"><a href="javascript:;" class="popupClose"></a><div class="summary"><div class="summaryTop"><div id="summaryPie1" class="summaryPie"></div><div id="summaryPie2" class="summaryPie"></div><div id="summaryPie3" class="summaryPie"></div></div><div class="summaryBottom"><div class="summaryBar"><div class="summaryTit"><img src="images/tit1.png"></div><div id="summaryBar"></div></div><div class="summaryLine"><div class="summaryTit"><img src="images/tit2.png"></div><div id="summaryLine"></div></div></div></div></div><div class="carInfo"><a href="javascript:;" class="carClose"></a><div class="infoBox"><div class="infoTop"><div class="infoTit"><img src="images/tit3.png"></div></div><div class="infoMain"><div class="infoLeft fl"><div class="topSearch"><form><button></button><input type="text" name="" placeholder="请输入车牌号搜索"></form></div><div class="carState"><h3><span class="fl">车牌号码</span><span class="fr">状态</span></h3><ul class="stateUl"><li><p>粤A3456344</p><span class="work">工作</span></li><li><p>粤A3456344</p><span class="nowork">休息</span></li><li><p>粤A3456344</p><span class="work">工作</span></li><li><p>粤A3456344</p><span class="nowork">休息</span></li><li><p>粤A3456344</p><span class="work">工作</span></li><li><p>粤A3456344</p><span class="nowork">休息</span></li><li><p>粤A3456344</p><span class="work">工作</span></li><li><p>粤A3456344</p><span class="nowork">休息</span></li><li><p>粤A3456344</p><span class="work">工作</span></li><li><p>粤A3456344</p><span class="nowork">休息</span></li><li><p>粤A3456344</p><span class="work">工作</span></li><li><p>粤A3456344</p><span class="nowork">休息</span></li><li><p>粤A3456344</p><span class="work">工作</span></li><li><p>粤A3456344</p><span class="nowork">休息</span></li><li><p>粤A3456344</p><span class="work">工作</span></li><li><p>粤A3456344</p><span class="nowork">休息</span></li><li><p>粤A3456344</p><span class="work">工作</span></li><li><p>粤A3456344</p><span class="nowork">休息</span></li></ul></div></div><div class="infoRight fr"><div class="rightWp"><div class="carIntro"><div class="introBox fl"><div class="carImg fl"><img src="images/car.jpg"></div><div class="carText fl clearfix"><p>车辆类型：大车</p><p>本周工作时长：34.45小时</p><p>车牌号码：粤A3456344</p><p>统计时段：2018-1-12至2018-2-13</p><p>可载容量：20.0方</p><p>当前状态：<span class="color-green">工作</span></p></div></div><div class="driver fr"><div class="photo"><img src="images/photo.jpg"></div><p>司机：李思林</p></div></div><div class="timetable"><div class="topTool"><div class="tableExplain fl"><div class="itemExplain fl"><span class="bg-green"></span><p>司机工作时间</p></div><div class="itemExplain fl"><span class="bg-blue"></span><p>标准白晚班时间</p></div></div><div class="topBtns fr"><a href="javascript:;" class="prevWeek">上一周</a><a href="javascript:;" class="nextWeek">下一周</a></div></div><div class="tiemWp"><div class="timeInner"><div class="weekList"><div class="weekItem"><div class="space1"></div><p>星期一</p></div><div class="weekItem"><div class="space1"></div><p>星期二</p></div><div class="weekItem"><div class="space1"></div><p>星期三</p></div><div class="weekItem"><div class="space1"></div><p>星期四</p></div><div class="weekItem"><div class="space1"></div><p>星期五</p></div><div class="weekItem"><div class="space1"></div><p>星期六</p></div><div class="weekItem"><div class="space1"></div><p>星期天</p></div></div><div class="timeBox"><div class="dataContainer"><div class="dataBox"><div class="space1"></div><div class="workTime"></div><div class="space2"></div><div class="standard"></div><div class="space3"></div></div><div class="dataBox"><div class="space1"></div><div class="workTime"></div><div class="space2"></div><div class="standard"></div><div class="space3"></div></div><div class="dataBox"><div class="space1"></div><div class="workTime"></div><div class="space2"></div><div class="standard"></div><div class="space3"></div></div><div class="dataBox"><div class="space1"></div><div class="workTime"></div><div class="space2"></div><div class="standard"></div><div class="space3"></div></div><div class="dataBox"><div class="space1"></div><div class="workTime"></div><div class="space2"></div><div class="standard"></div><div class="space3"></div></div><div class="dataBox"><div class="space1"></div><div class="workTime"></div><div class="space2"></div><div class="standard"></div><div class="space3"></div></div><div class="dataBox"><div class="space1"></div><div class="workTime"></div><div class="space2"></div><div class="standard"></div><div class="space3"></div></div></div><div class="timeLine line1"><span>0:00</span></div><div class="timeLine line2"><span>3:00</span></div><div class="timeLine line3"><span>6:00</span></div><div class="timeLine line4"><span>9:00</span></div><div class="timeLine line5"><span>12:00</span></div><div class="timeLine line6"><span>15:00</span></div><div class="timeLine line7"><span>18:00</span></div><div class="timeLine line8"><span>21:00</span></div><div class="timeLine line9"><span>24:00</span></div></div></div><div class="totalTable"><div class="totalTit"><span>总用时/天</span><span>总单数/天</span></div><div class="totalData"><div class="totalItem"><div class="space1"></div><div class="tatleWp"><span>0.00</span><span>0</span></div><div class="totalBar"></div></div><div class="totalItem"><div class="space1"></div><div class="tatleWp"><span>0.00</span><span>0</span></div><div class="totalBar"></div></div><div class="totalItem"><div class="space1"></div><div class="tatleWp"><span>0.00</span><span>0</span></div><div class="totalBar"></div></div><div class="totalItem"><div class="space1"></div><div class="tatleWp"><span>0.00</span><span>0</span></div><div class="totalBar"></div></div><div class="totalItem"><div class="space1"></div><div class="tatleWp"><span>0.00</span><span>0</span></div><div class="totalBar"></div></div><div class="totalItem"><div class="space1"></div><div class="tatleWp"><span>0.00</span><span>0</span></div><div class="totalBar"></div></div><div class="totalItem"><div class="space1"></div><div class="tatleWp"><span>0.00</span><span>0</span></div><div class="totalBar"></div></div></div></div></div></div></div></div></div></div></div><canvas id="canvas" style="position: absolute;top: 0;left: 0;"></canvas> 
</body>
<script type="text/javascript" src="js/bg.js"></script>
<script type="text/javascript" src="js/scanboard.js"></script>
<script type="text/javascript" src="js/fontscroll.js"></script>
<script type="text/javascript" src="js/jquery.animsition.js"></script>
<script type="text/javascript" src="js/jquery.nicescroll.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=f8ffe058b8e6f5b05e8ff43ca4207393"></script>
</html>

这是一个HTML页面的代码，它用于创建一个网页，通常用于显示仪表板（Dashboard）和相关信息。我将逐段解释这段HTML代码的主要部分：

  1. <!DOCTYPE html>: 这是文档类型声明，用于告诉浏览器这是一个HTML5文档。

  2. <html>: HTML文档的根元素。

  3. <head>: 头部部分，通常包含一些关于文档的元信息，例如字符编码、视口设置、页面标题和外部资源链接。

    • <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />: 设置文档的字符编码为UTF-8，以支持各种字符。
    • <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">: 设置视口的缩放比例、用户不可缩放和适应设备宽度。
    • <title>看板</title>: 设置页面的标题为“看板”。
    • 一系列<link>元素用于引入外部CSS样式文件，这些样式文件位于css/目录下。
    • 一系列<script>元素用于引入外部JavaScript文件，这些脚本文件位于js/目录下。

  4. <body>: 网页的主体部分，包含了页面上的所有可见内容。

    • <div id="loader"></div>: 一个<div>元素，具有ID为"loader"，用于显示加载动画。
    • <script type="text/javascript"> ... </script>: 包含JavaScript代码，用于初始化加载动画，具体来说，使用jQuery库初始化一个带有颜色的圆形加载器。

    页面主体分为三个部分：Top、Main、和一些弹出式窗口。

  5. Top 部分: 包含了页面的顶部导航栏和一些公司信息。

    • 导航栏包括标题、公司Logo、时间显示和退出按钮。
    • 公司信息以一个下拉菜单的形式展示，包括一些公司相关链接。

  6. Main 部分: 包含了页面的主要内容，分为左、中、右三个部分。

    • 左侧包含了三个子模块：今日运单数量、各阶段平均用时统计和人员信息。
    • 中间部分包含了地图展示和月运单量统计图。
    • 右侧包含了总计运单数、基本信息和运单状态的信息。

  7. 弹出式窗口: 包括一个筛选弹窗和一个车辆信息弹窗，用于用户与页面交互时弹出显示相关信息。

  8. <canvas id="canvas" style="position: absolute;top: 0;left: 0;"></canvas>: 一个HTML5 <canvas> 元素，用于绘制图形。可能在JavaScript中使用它来创建动画或其他可视化效果。

  9. <script>元素: 包含了一系列JavaScript文件的引用，用于实现页面的交互和功能。这些脚本包括动画效果、地图显示、图表绘制等等。

总的来说，这段HTML代码描述了一个仪表板页面，包括导航、信息展示、地图、图表等内容，通过JavaScript实现了一些动态效果和交互功能。如果需要进一步了解页面的细节和功能，需要查看引用的JavaScript文件和相关CSS样式文件。

可视化图表的使用技巧

1、柱状图

柱状图中的颜色尽量不要超过3种。
柱状图柱子间的宽度和间隙要是适当。住在太窄，用户的视觉可能会集中在两个柱子之间的负空间
对多个数据系列排序时，最好复合一定的逻辑，用直观的方式引导用户更好的查看数据，此时可以通过升序和降序排列。
2、折线图

折线图连接各点可以使用直线和曲线，这样更美观，数据展示更加清晰
折线的颜色要清晰，尽量不要使用与背景色和坐标轴相近的颜色
折线图中的线条尽量不要超过4条，过多的线条会导致界面混乱，无法阅读。
3、饼图

饼图适合用来展示单一维度数据的占比，要求其数值没有零或者负值，并确保各个分块占比总和为100%。
饼图不适合用于精确数据的比较，因此当各类别数据占比相似时，很难分辨出哪个类别占比比较大。
大多数人的视觉习惯是按照顺时针自上而下的顺序去观察，因此在绘制饼图时建议从12点钟开始沿着顺时针右边的第一个分块绘制饼图最大的数据分块，这样可以有效地强调其重要性
4、散点图

如果一个散点图没有显示变量的任何关系，那么或许该图表类型不是次数据的最佳选择
散点图只有在足够多的数据点并且数据间有相关性时，才能呈现很好的结果。
如果数据包含不同系列，可以给不同系列使用不同的颜色

数据功能图介绍
在大数据的可视化图中，按照数据的作用和功能可以把图分为比较类图、分布类图、流程类图、地图类图、占比类图、区间类图、关联类图、时间类图和趋势类图等。
1、比较类图
比较类图可视化的方法通常是显示值与值之间的不同和相似之处，使用图形的长度、宽度、位置、面积、角度和颜色来比较数值的大小，通常用于展示不同分类间的数值对比一级不同时间点的数据对比。常见的比较类图主要有柱状图、双向柱状图、气泡图、子弹图、色块图、漏斗图和直方图等

2、分布类图
分布类图可视化的方法通常是显示频率，将数据分散在一个区间或分组，并使用图形的为、大小、颜色的渐变程度类表现数据的分布。分布类图通常用于展示连续数据上数值的分布情况。常见的分布类图主要有箱型图、热力图、散点图、分布曲线图、色块图和直方图

3、流程类图
流程类图可视化的方法通常是显示流程流转和流程流量。一般流程都会呈现出多个环节，每个环节之间会有相应的流量关系，因此这类图形可以很好的表示这些流量关系。常见的流程图主要有漏斗图和桑基图

4、地图类图
地图类图可视化的方法是显示地理区域上的数据，并在显示是使用地图作为背景，通过图形的位置来表现数据的地理位置。地图类图通常用来展示数据在不同地理区域上的分布情况。常见的地图类图主要有待气泡的地图和统计地图

5、占比类图
占比类图可视化的范式是显示同一维度上的占比关系。常见的占比类图主要有换图、马赛克图、堆叠面积图、堆叠柱状图和矩形树图

6、区间类图
区间类图可视化的方法是显示同一维度上值的上限和下限之间的差异。区间类图使用图形的大小和位置表示数值的上限和下限，通常用于表示数据在某一分类（时间点）上的最大值和最小值。常见的区间类图主要有仪表盘图和堆叠面积图

7、关联类图
关联类图可视化的方法显示数据之间的相互关系。关联类图使用图形的嵌套和位置表示数据之间的关系，通常用于表示数据之间的前后顺序、父子关系和相关性。常见的关联类图主要有和弦图、桑基图、矩阵树图、树状图和韦恩图

8、时间类图
时间类图可视化的方法显示以时间为特定维度的数据。时间类图使用图形的位置表现出数据在时间深的房补，通常用于表现数据在时间维度上的趋势和变化。常见的实践类图主要有面截图、K线图、卡吉图和螺旋图

9、趋势类图
趋势类图可视化的方式分析数据的变化趋势，趋势类图使用图形的位置表现出数据在连续区域上的分布，通常展示数据在连续区域上的大小变化的规律。常见的趋势类图主要有面积图、K线图、折线图和回归曲线图

四，源码

链接：https://pan.baidu.com/s/13RP2wnNFIHEQSyweOdKubA
提取码：

创作不易，项目已加密，有偿（—9.9r—，可修改页面，做实验报告，代码讲解，待上服务器等…）

请私信作者（v）15135757306

注：非白嫖仅为维护服务器，若想白嫖请CSDN私信我（大概率可能时间忙顾不上回复）

若侵权请私信作者下架博客

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

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

相关文章

【STM32】学习笔记(TIM定时器)

【STM32】学习笔记(TIM定时器)

TIM&#xff08;Timer&#xff09;定时器 定时器可以对输入的时钟进行计数&#xff0c;并在计数值达到设定值时触发中断 16位计数器、预分频器、自动重装寄存器的时基单元&#xff0c;在72MHz计数时钟下可以实现最大59.65s的定时 不仅具备基本的定时中断功能&#xff0c;而且…
阅读更多...
Javase | IO流

Javase | IO流

目录&#xff1a; 1.输入 (Intput/Read)2.输出 (Output/Write)3.IO4.IO流5.IO流的分类&#xff1a;5.1 分类总述5.2 按照 “流的方向” 进行分类5.3 按照 “读取数据的方式” 进行分类 6.IO包下要重点掌握的流&#xff1a;6.1 文件专属 (流)6.2 转换流 ( 将字节流转换为字符流 …
阅读更多...
2023.9 - java - 浅拷贝

2023.9 - java - 浅拷贝

与 js的浅拷贝不同&#xff1a; 在 JavaScript 中&#xff0c; Object.assign() 或 spread 运算符等方法可以实现浅拷贝&#xff0c;但只针对对象的第一层属性进行复制。如果一个对象只包含基本数据类型的属性&#xff0c;那么对浅拷贝出来的对象进行修改不会影响原始对象&…
阅读更多...
C#安装“Windows 窗体应用(.NET Framework)”

C#安装“Windows 窗体应用(.NET Framework)”

目录 背景: 第一步: 第二步: 第三步&#xff1a; 总结: 背景: 如下图所示:在Visual Studio Installer创建新项目的时候&#xff0c;想要添加windows窗体应用程序&#xff0c;发现里面并没有找到Windows窗体应用(.NET Framework)模板&#xff0c;快捷搜索也没有发现&#…
阅读更多...
22.3D等距社交媒体菜单的悬停特效

22.3D等距社交媒体菜单的悬停特效

效果 源码 <!doctype html> <html><head><meta charset="utf-8"><title>CSS Isometric Social Media Menu</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.…
阅读更多...
springboot web开发登录拦截器

springboot web开发登录拦截器

在SpringBoot中我们可以使用HandlerInterceptorAdapter这个适配器来实现自己的拦截器。这样就可以拦截所有的请求并做相应的处理。 应用场景 日志记录&#xff0c;可以记录请求信息的日志&#xff0c;以便进行信息监控、信息统计等。权限检查&#xff1a;如登陆检测&#xff…
阅读更多...
SQL sever中用户管理

SQL sever中用户管理

目录 一、用户管理常见方法 二、用户管理方法示例 2.1. 创建登录账户&#xff1a; 2.1.1 检查是否创建账户成功&#xff1a; 2.2. 创建数据库用户&#xff1a; 2.2.1检查用户是否创建成功&#xff1a; 2.3. 授予权限&#xff1a; 2.3.1授予 SELECT、INSERT 和 U…
阅读更多...
什么是BEM命名规范（Block-Element-Modifier Notation）？它有什么优势？

什么是BEM命名规范（Block-Element-Modifier Notation）？它有什么优势？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ BEM命名规范&#xff08;Block-Element-Modifier Notation&#xff09;⭐ BEM命名结构⭐ 优势⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎…
阅读更多...
如何解决分库分表主键问题？

如何解决分库分表主键问题？

分析&回答 从问题角度出发&#xff1a;我们需要一个全局唯一的 id 来支持&#xff0c;排序问题等。这都是你实际生产环境中必须考虑的问题。可以先看下我们之前的文章分布式系统唯一ID如何生成&#xff1f; 雪花算法和雪花算法的变种是大家常用的 喵呜面试助手&#xff1…
阅读更多...
春秋云镜 CVE-2018-1273

春秋云镜 CVE-2018-1273

春秋云镜 CVE-2018-1273 Spring-data-commons 远程命令执行漏洞 靶标介绍 Spring Data是一个用于简化数据库访问&#xff0c;并支持云服务的开源框架&#xff0c;Spring Data Commons是Spring Data下所有子项目共享的基础框架。Spring Data Commons 在2.0.5及以前版本中&…
阅读更多...
【算法】滑动窗口

【算法】滑动窗口

滑动窗口应用场景 关键词&#xff1a; 满足xxx条件&#xff08;计算结果&#xff0c;出现次数&#xff0c;同时包含&#xff09; 最长/最短 子串/子数组/子序列 例如&#xff1a;长度最小的子数组 滑动窗使用思路&#xff08;寻找最长&#xff09; 核心&#xff1a;左右双指…
阅读更多...
git大文件推送报错

git大文件推送报错

报错信息 不多掰扯&#xff0c;直接上报错信息和截图 Delta compression using up to 8 threadsRPC failde; HTTP 413 curl 22 The requested URL returned error: 413 Request Entity Too Large从以上的报错信息不难看出推送仓库的时候&#xff0c;请求体过大&#xff0c;为…
阅读更多...
第五讲Java面向对象——类及类的成员

第五讲Java面向对象——类及类的成员

前言 前面几讲，我们讲解了java的基础知识，也写了很多代码，有没有发现，每次编写代码前都会新建一个类，并且开头是public class修饰。可能有些同学不知道什么是类，以及前面我们提到方法。那么本讲，就要开始深入了解他们。 在开始讲解，我们将先了解一下编程的思想，面向对…
阅读更多...
8.Redis-set

8.Redis-set

Set 常用命令saddsmemberssismemberscardspopsmovesrem集合间操作sinter 交集sinterstoresunion 并集sunionstoresdiff 差集sdiffstore 命令总结 内部编码应用场景使用 set来保存用户的“标签” set(集合)就是把一些有关联的数据放刀一起。 它与list的区别如下&#xff1a; 集合…
阅读更多...
zookeeper 集群

zookeeper 集群

zookeeper 集群 1、zookeeper 集群说明 initLimit 是Zookeeper用它来限定集群中的Zookeeper服务器连接到Leader的时限 syncLimit 限制了follower服务器与leader服务器之间请求和应答之间的时限 服务器名称与地址&#xff1a;集群信息&#xff08;服务器编号&#xff0c;服务器…
阅读更多...
Blender界面学习03 原点、鼠标所在位置的缩放与旋转

Blender界面学习03 原点、鼠标所在位置的缩放与旋转

物体的坐标原点可以移动 放大缩小时默认是屏幕中央&#xff0c;修改为鼠标在哪儿就缩放哪儿 默认旋转时围绕屏幕的中心 可以修改为指定对象旋转
阅读更多...
【网络教程】群晖轻松设置钉钉机器人使用Webhook发送通知消息，分分钟搞定！

【网络教程】群晖轻松设置钉钉机器人使用Webhook发送通知消息，分分钟搞定！

文章目录 准备设置相关链接准备 演示环境：群晖DSM7.2（其他版本操作雷同）需要提前准备好你的钉钉机器人webhook链接，如果你还不会设置/获取，请点击 参考这篇文章 或自行某度设置 打开群晖，进入控制面板 —> 通知设置 —> Webhooks，如下图 然后点击新增，提供商选择…
阅读更多...
使用栈检查括号的合法性 C 实现

使用栈检查括号的合法性 C 实现

使用栈检查括号的合法性 思路讲解&#xff1a;首先从数组数组0下标开始&#xff0c;如果是左括号直接无脑压入栈&#xff0c;直到出现右括号开始判断合法与否。遇到右括号分两种情况&#xff0c;第一种是空栈的情况&#xff0c;也就是说我们第一个字符就是右括号&#xff0c;那…
阅读更多...
应用于伺服电机控制、 编码器仿真、 电动助力转向、发电机、 汽车运动检测与控制的旋变数字转换器MS5905P

应用于伺服电机控制、 编码器仿真、 电动助力转向、发电机、 汽车运动检测与控制的旋变数字转换器MS5905P

MS5905P 是一款 12bit 分辨率的旋变数字转换器。 片上集成正弦波激励电路&#xff0c;正弦和余弦允许输入峰峰值 幅度为 2.3V 到 4.0V &#xff0c;可编程激励频率为 10kHz 、 12kHz 、 15kHz 、 20kHz 。 转换器可并行或串行输出角度 和速度对应的数字量。 MS5905…
阅读更多...
C++字符串详解

C++字符串详解

C++ 大大增强了对字符串的支持，除了可以使用C风格的字符串，还可以使用内置的 string 类。string 类处理起字符串来会方便很多，完全可以代替C语言中的字符数组或字符串指针。 string 是 C++ 中常用的一个类，它非常重要，我们有必要在此单独讲解一下。 使用 string 类需要包…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023