【前端】layui学习笔记

参考视频：LayUI

1.介绍

官网：http://layui.apixx.net/index.html

国人16年开发的框架,拿来即用,门槛低
…

2. LayUi的安装及使用

Layui 是一套开源的 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，极易上手，拿来即用。其风格简约轻盈，而内在雅致丰盈，甚至包括文档在内的每一处细节都经过精心雕琢，非常适合网页界面的快速构建。Layui 区别于一众主流的前端框架，却并非逆道而行，而是信奉返璞归真之道。确切地说，它更多是面向于追求简单的务实主义者，即无需涉足各类构建工具，只需面向浏览器本身，便可将页面所需呈现的元素与交互信手拈来，常用来当做后台管理系统的框架

2.1 LayUi的特点

  1. 原生态开发
  2. 轻量级模块化
  3. 外简内丰
  4. 开箱即用

2.2 安装和使用

官网下载,本地引入核心css和核心js
测试html如下

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>开始使用 layui</title><link rel="stylesheet" href="./layui-v2.6.8/layui/css/layui.css"><script src="./layui-v2.6.8/layui/layui.js"></script>
</head>
<body>
<!-- 你的 HTML 代码 -->
<script>layui.use(['layer', 'form'], function(){var layer = layui.layer,form = layui.form;layer.msg('Hello World');});
</script>
</body>
</html>

3. 页面元素

3.1 布局

3.1.1 布局容器

3.1.1.1 固定宽度
 <!--固定宽度(两侧有留白效果)-->
<div  class="layui-container" style="background-color:navajowhite;height: 300px">固定宽度
</div>
3.1.1.2 完整宽度
<!--完整宽度(占据屏幕的100%)-->
<div class="layui-fluid" style="background-color:yellow;height: 300px">完整宽度
</div>

3.1.2 栅格系统

为了丰富网页布局，简化 HTML/CSS 代码的耦合，并提升多终端的适配能力，layui 在 2.0 的版本中引进了自己的一套具备响应式能力的栅格系统。我们将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。

3.1.2.1 栅格布局规则：

在这里插入图片描述

3.1.2.2 响应式规则

栅格会根据屏幕的分辨率选择对应的样式效果

在这里插入图片描述

3.1.2.3 列间距

通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距，预设了 12 种不同尺寸的边距，分别是：

layui-col-space1
layui-col-space2
layui-col-space4
layui-col-space5
layui-col-space6
layui-col-space8
layui-col-space10
layui-col-space12
layui-col-space14
layui-col-space15
layui-col-space16
layui-col-space18
layui-col-space20
layui-col-space22
layui-col-space24
layui-col-space25
layui-col-space26
layui-col-space28
layui-col-space30
layui-col-space32
<p>即：支持列之间为 1px-32px 区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔</p>
·如果需要的间距高于30px（一般不常见），请采用偏移，下文继续讲解·
3.1.2.4 列偏移

对列追加 类似 layui-col-md-offset* 的预设类，从而让列向右偏移。其中 * 号代表的是偏移占据的列数，可选中为 1 - 12。

3.1.2.5 列嵌套

理论上，你可以对栅格进行无穷层次的嵌套，这更加增强了栅格的表现能力。而嵌套的使用非常简单。在列元素（layui-col-md*）中插入一个行元素（layui-row），即可完成嵌套。下面是一个简单的例子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>布局容器</title><!--引入核心css文件--><link rel="stylesheet"  href="./layui/css/layui.css"></head>
<body>
<!--布局容器-->
<div class="layui-container">
<!--栅格系统1.定义行.layui-row2.定义列 .layui-col-md*md:表示不同屏幕的表示（xs,sm,md,lg)* 表示列的数量3.每一行被均分为12列，列的总数不能超过12，否则会自动换行4.响应式规则，栅格会根据屏幕的分辨率选择对应的样式效果5.列边距 . layui-col-space** 表示px值（1-30）6.列偏移 . layui-col-md-offset** 代表的是右偏移占据的列数7.列嵌套列中可以无限嵌套列--><!--定义行--><div class="layui-row" ><!--定义列--><div class="layui-col-md5" style="background-color: yellow">内容5/12</div><div class="layui-col-md7" style="background-color: #00f7de">内容7/12</div></div><!--定义行--><div class="layui-row" ><!--定义列--><div class="layui-col-md4" style="background-color:rebeccapurple">内容4/12</div><div class="layui-col-md4" style="background-color: red">内容4/12</div><div class="layui-col-md5" style="background-color: blue">内容5/12</div></div><hr/>
<!--    响应式规则--><div class="layui-row"><div class="layui-col-xs6 layui-col-sm6 layui-col-md4"><div class="grid-demo grid-demo-bg1">xs:6/12 | sm:6/12 | md:4/12</div></div><div class="layui-col-xs6 layui-col-sm6 layui-col-md4"><div class="grid-demo layui-bg-red">xs:6/12 | sm:6/12 | md:4/12</div></div><div class="layui-col-xs4 layui-col-sm12 layui-col-md4"><div class="grid-demo layui-bg-blue">xs:4/12 | sm:12/12 | md:4/12</div></div><div class="layui-col-xs4 layui-col-sm7 layui-col-md8"><div class="grid-demo layui-bg-green">xs:4/12 | sm:7/12 | md:8/12</div></div><div class="layui-col-xs4 layui-col-sm5 layui-col-md4"><div class="grid-demo layui-bg-black">xs:4/12 | sm:5/12 | md:4/12</div></div></div><hr><h3>列间距</h3><div class="layui-row layui-col-space30"><div class="layui-col-md4" ><div style="background-color: blue">1/3</div></div><div class="layui-col-md4" ><div style="background-color: blue">1/3</div></div><div class="layui-col-md4" ><div style="background-color: purple">1/3</div></div></div><h3>列偏移</h3><div class="layui-row"><div class="layui-col-md4" ><div style="background-color: blue">4/12</div></div><div class="layui-col-md4 layui-col-md-offset3" ><div style="background-color: red">4/12</div></div></div><hr><h3>列嵌套</h3><div class="layui-row"><div class="layui-col-md6" style="background-color: red"><div class="layui-row" ><!--定义列--><div class="layui-col-md4" style="background-color:rebeccapurple">内容4/12</div><div class="layui-col-md4" style="background-color: red">内容4/12</div><div class="layui-col-md4" style="background-color: blue">内容5/12</div></div></div></div>
</div>
</body>
</html>

3.2 基本元素

3.2.1 按钮

向任意HTML元素设定class="layui-btn"，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。

3.2.1.1 主题

在这里插入图片描述

名称组合
原始class=“layui-btn layui-btn-primary”
默认class=“layui-btn”
百搭class=“layui-btn layui-btn-normal”
暖色class=“layui-btn layui-btn-warm”
警告class=“layui-btn layui-btn-danger”
禁用class=“layui-btn layui-btn-disabled”
3.2.1.2 尺寸

在这里插入图片描述

尺寸组合
大型class=“layui-btn layui-btn-lg”
默认class=“layui-btn”
小型class=“layui-btn layui-btn-sm”
迷你class=“layui-btn layui-btn-xs”
3.2.1.3 圆角

在这里插入图片描述

主题组合
原始class=“layui-btn layui-btn-radius layui-btn-primary”
默认class=“layui-btn layui-btn-radius”
百搭class=“layui-btn layui-btn-radius layui-btn-normal”
暖色class=“layui-btn layui-btn-radius layui-btn-warm”
警告class=“layui-btn layui-btn-radius layui-btn-danger”
禁用class=“layui-btn layui-btn-radius layui-btn-disabled”
3.2.1.4 图标

在这里插入图片描述

温馨提示：各种图标字体请移步(**官网**)文档左侧【页面元素 - 图标】阅览

<button type="button" class="layui-btn"><i class="layui-icon layui-icon-down layui-font-12"></i> 按钮
</button>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>布局容器</title><!--引入核心css文件--><link rel="stylesheet" href="./layui/css/layui.css"></head>
<body>
<!--基础按钮-->
<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://baidu.com" class="layui-btn">一个可跳转的按钮</a>
<div class="layui-btn">一个按钮</div><hr/>
<!-- 不同主题按钮-->
<div><button type="button" class="layui-btn layui-btn-primary">原始按钮</button><button type="button" class="layui-btn">默认按钮</button><button type="button" class="layui-btn layui-btn-normal">百搭按钮</button><button type="button" class="layui-btn layui-btn-warm">暖色按钮</button><button type="button" class="layui-btn layui-btn-danger">警告按钮</button><button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
</div><hr/>
<!-- 不同尺寸按钮-->
<div><div class="layui-btn-container"><button type="button" class="layui-btn layui-btn-primary layui-btn-lg">大型按钮</button><button type="button" class="layui-btn layui-btn-primary">默认按钮</button><button type="button" class="layui-btn layui-btn-primary layui-btn-sm">小型按钮</button><button type="button" class="layui-btn layui-btn-primary layui-btn-xs">迷你按钮</button></div>
</div><hr/>
<!--    圆角-->
<div class="layui-btn-container"><button type="button" class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button><button type="button" class="layui-btn layui-btn-radius">默认按钮</button><button type="button" class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button><button type="button" class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button><button type="button" class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button><button type="button" class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>
</div>
<hr/>
<!--图标-->
<!--从 layui 2.3.0 开始，支持 font-class 的形式定义图标：-->
<i class="layui-icon layui-icon-face-smile"></i>
<!--注意：在 layui 2.3.0 之前的版本，只能设置 unicode 来定义图标-->
<i class="layui-icon">&#xe60c;</i><button type="button" class="layui-btn"><i class="layui-icon layui-icon-face-smile"></i>按钮
</button>
</body>
</html>

3.2.2 导航

导航一般指页面引导性频道集合,多以菜单的形式呈现,可用于头部和侧边,面包屑结构简单,支持自定义分隔符
依赖加载模块: element

  • 实现步骤
  1. 引入资源
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
  1. 依赖加载模块
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){var element = layui.element;//…
});
</script>
3.2.2.1 水平导航

水平导航: layui-nav
当前被选中项: layui-this
二级菜单: layui-nav-child

3.2.2.2 垂直/侧边导航

垂直导航: layui-nav layui-nav-tree
侧边导航: layui-nav layui-nav-tree layui-nav-side

3.2.2.3 导航主题

颜色:layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）
徽章:

3.2.2.4 面包屑

面包屑导航: layui-breadcrumb
自定义分隔符: lay-separator="-" 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>布局容器</title><!--引入核心css文件--><link rel="stylesheet" href="./layui/css/layui.css"><script src="layui/layui.js"></script></head>
<body>
<script>//注意：导航 依赖 element 模块，否则无法进行功能性操作layui.use('element', function(){var element = layui.element;//…});
</script>
<!--<hr/>-->
<!--<h3>水平导航</h3>-->
<!--<ul class="layui-nav">-->
<!--    <li class="layui-nav-item"><a href="">最新活动</a></li>-->
<!--    <li class="layui-nav-item layui-this"><a href="">产品</a></li>-->
<!--    <li class="layui-nav-item"><a href="">大数据</a></li>-->
<!--    <li class="layui-nav-item">-->
<!--        <a href="javascript:;">解决方案</a>-->
<!--        <dl class="layui-nav-child"> &lt;!&ndash; 二级菜单 &ndash;&gt;-->
<!--            <dd><a href="">移动模块</a></dd>-->
<!--            <dd><a href="">后台模版</a></dd>-->
<!--            <dd><a href="">电商平台</a></dd>-->
<!--        </dl>-->
<!--    </li>-->
<!--    <li class="layui-nav-item"><a href="">社区</a></li>-->
<!--</ul>--><!--<hr/>-->
<!--<h3>垂直导航</h3>-->
<!--<ul class="layui-nav  layui-nav-tree">-->
<!--    <li class="layui-nav-item"><a href="">最新活动</a></li>-->
<!--    <li class="layui-nav-item layui-this"><a href="">产品</a></li>-->
<!--    <li class="layui-nav-item"><a href="">大数据</a></li>-->
<!--    <li class="layui-nav-item">-->
<!--        <a href="javascript:;">解决方案</a>-->
<!--        <dl class="layui-nav-child"> &lt;!&ndash; 二级菜单 &ndash;&gt;-->
<!--            <dd><a href="">移动模块</a></dd>-->
<!--            <dd><a href="">后台模版</a></dd>-->
<!--            <dd><a href="">电商平台</a></dd>-->
<!--        </dl>-->
<!--    </li>-->
<!--    <li class="layui-nav-item"><a href="">社区</a></li>-->
<!--</ul>-->
<!--<h3>侧边导航</h3>-->
<!--<ul class="layui-nav  layui-nav-tree layui-nav-side">-->
<!--    <li class="layui-nav-item"><a href="">最新活动</a></li>-->
<!--    <li class="layui-nav-item layui-this"><a href="">产品</a></li>-->
<!--    <li class="layui-nav-item"><a href="">大数据</a></li>-->
<!--    <li class="layui-nav-item">-->
<!--        <a href="javascript:;">解决方案</a>-->
<!--        <dl class="layui-nav-child"> &lt;!&ndash; 二级菜单 &ndash;&gt;-->
<!--            <dd><a href="">移动模块</a></dd>-->
<!--            <dd><a href="">后台模版</a></dd>-->
<!--            <dd><a href="">电商平台</a></dd>-->
<!--        </dl>-->
<!--    </li>-->
<!--    <li class="layui-nav-item"><a href="">社区</a></li>-->
<!--</ul>--><!--<h3>主题:颜色,徽章</h3>-->
<!--<ul class="layui-nav  layui-nav-tree layui-nav-side layui-bg-red">-->
<!--    <li class="layui-nav-item"><a href="">最新活动</a></li>-->
<!--    <li class="layui-nav-item layui-this"><a href="">产品<span class="layui-badge">6</span></a></li>-->
<!--    <li class="layui-nav-item"><a href="">大数据</a></li>-->
<!--    <li class="layui-nav-item">-->
<!--        <a href="javascript:;">解决方案</a>-->
<!--        <dl class="layui-nav-child"> &lt;!&ndash; 二级菜单 &ndash;&gt;-->
<!--            <dd><a href="">移动模块</a></dd>-->
<!--            <dd><a href="">后台模版</a></dd>-->
<!--            <dd><a href="">电商平台</a></dd>-->
<!--        </dl>-->
<!--    </li>-->
<!--    <li class="layui-nav-item"><a href="">社区</a></li>-->
<!--</ul>--><!--lay-separator 自定义分隔符-->
<h3>面包屑导航</h3>
<span class="layui-breadcrumb" lay-separator="-"><a href="">首页</a><a href="">国际新闻</a><a href="">亚太地区</a><a><cite>正文</cite></a>
</ul>
</span>
</body>
</html>

3.2.3 选项卡

导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。面包屑结构简单，支持自定义分隔符。
依赖加载组件：element （请注意：必须加载element模块，相关功能才能正常使用，详见：内置组件 - 常用元素操作）

  • 实现步骤
  1. 引入资源
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
  1. 依赖加载模块
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){var element = layui.element;//…
});
</script>
3.2.3.1 默认Tab选项卡

默认Tab选项卡: layui-tab
选项卡内容: layui-tab-content

3.2.3.2 Tab简洁风格

Tab简洁风格: layui-tab layui-tab-brief

3.2.3.3 Tab卡片风格

Tab卡片风格: layui-tab layui-tab-card

3.2.3.4 带删除的Tab

以对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除

3.2.4 表格

3.2.5 表单

3.3 组件示例

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

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

相关文章

Docker Compose环境的安装通过docker compose完成python程序的运行

Docker Compose环境的安装通过docker compose完成python程序的运行

目录 Docker Compose环境的安装 通过docker compose完成python程序的运行 Docker Compose环境的安装 ##### 方法一&#xff1a;直接下载编译好的二进制文件 注意&#xff1a;只有linux平台上在安装docker时没有安装docker-compose&#xff0c;windows、macos安装docker时自…
阅读更多...
C# wpf 嵌入wpf控件

C# wpf 嵌入wpf控件

WPF Hwnd窗口互操作系列 第一章 嵌入Hwnd窗口 第二章 嵌入WinForm控件 第三章 嵌入WPF控件&#xff08;本章&#xff09; 文章目录 WPF Hwnd窗口互操作系列前言一、如何实现&#xff1f;1、继承HwndHost2、添加Content属性3、创建wpf窗口并设置Content4、关闭wpf窗口 二、完整…
阅读更多...
Android卡顿掉帧问题分析之实战篇

Android卡顿掉帧问题分析之实战篇

本文将结合典型实战案例&#xff0c;分析常见的造成卡顿等性能问题的原因。从系统工程师的总体角度来看 &#xff0c;造成卡顿等性能问题的原因总体上大致分为三个大类&#xff1a;一类是流程执行异常&#xff1b;二是系统负载异常&#xff1b;三是编译问题引起。 1 流程执行异…
阅读更多...
边缘计算迎来“量子飞跃”！支持抗量子密码，AMD推出FPGA新系列

边缘计算迎来“量子飞跃”！支持抗量子密码，AMD推出FPGA新系列

3月6日&#xff0c;AMD宣布推出AMD Spartan™ UltraScale™ FPGA系列&#xff0c;这是AMD成本优化FPGA和自适应SoC广泛产品组合的最新成员。 距离1月22日&#xff0c;AMD推出业界首款符合VESA DisplayPort 2.1标准的FPGA和自适应SoC实现&#xff0c;也才过了一个多月的时间。 S…
阅读更多...
【深度学习基础（4）】pytorch 里的log_softmax, nll_loss, cross_entropy的关系

【深度学习基础（4）】pytorch 里的log_softmax, nll_loss, cross_entropy的关系

一、常用的函数有&#xff1a; log_softmax,nll_loss, cross_entropy 1.log_softmax log_softmax就是log和softmax合并在一起执行&#xff0c;log_softmaxlogsoftmax 2. nll_loss nll_loss函数全称是negative log likelihood loss, 函数表达式为&#xff1a;f(x,class)−x[…
阅读更多...
【opencv】教程代码 —ImgProc （5）提取图像中水平线和垂直线的opencv示例

【opencv】教程代码 —ImgProc （5）提取图像中水平线和垂直线的opencv示例

5. Morphology_3.cpp 提取图像中水平线和垂直线的opencv示例 原图notes.png 灰度化 二值化 提取水平线 提取垂直线 对垂直图像取反 提取边缘 使用膨胀操作处理边缘 平滑处理&#xff1a;vertical.copyTo(smooth); blur(smooth, smooth, Size(2, 2)); smooth.copyTo(vertical, e…
阅读更多...
【spring】@Component注解学习

【spring】@Component注解学习

Component介绍 Component 是 Spring 框架中的一个注解&#xff0c;用于将一个类标记为 Spring 上下文中的一个组件。当一个类被标记为 Component 时&#xff0c;Spring 容器会在启动时自动扫描并实例化这个类&#xff0c;并将其注册到 Spring 上下文中。 Component 注解可以用…
阅读更多...
通过Appium和Xcode Accessibility Inspector获取iOS应用元素定位的方法

通过Appium和Xcode Accessibility Inspector获取iOS应用元素定位的方法

在 iOS 移动应用程序上使用选择器查找元素定位是我们在移动端 UI 自动化测试的先决条件。 但是&#xff0c;由于应用程序内容在原生 iOS 应用程序中的呈现方式&#xff0c;我们可以用来定位应用程序元素的选择器与 Web 浏览器元素有很大不同。 在本文中&#xff0c;我们将了解 …
阅读更多...
wordcloud-1.9.2(1.9.3) for python 3.6/python3.X增强补丁

wordcloud-1.9.2(1.9.3) for python 3.6/python3.X增强补丁

wordcloud-1.9.1开始无法在python3.6和海龟编辑器内正常使用&#xff0c;特做了一个whl 提供给python3.6使用。 另外我自己使用Python3.8 &#xff0c;因此wordcloud-1.9.2-cp36-cp36-win_amd64.whl 和wordcloud-1.9.3-cp38-cp38-win_amd64.whl&#xff0c;词云图上有前20个单…
阅读更多...
未来制造：机器人行业新质生产力提升策略

未来制造：机器人行业新质生产力提升策略

机器人行业新质生产力提升咨询方案 一、机器人行业目前发展现状及特点&#xff1a; 创新活跃、应用广泛、成长性强。 二、机器人企业发展新质生产力面临的痛点&#xff1a; 1、高端人才匮乏 2、核心技术受限 3、竞争日益国际化 4、成本控制挑战 5、用户体验提升需求 三…
阅读更多...
浅谈电商网络爬虫技术

浅谈电商网络爬虫技术

摘 要 目前网络上存在着海量的数据资料&#xff0c;将这些数据爬取保存下来&#xff0c;并进行进一步操作&#xff0c;即可挖掘出数据的潜在价值。如今的互联网存在的缺陷是用户很难获得有用的数据资料&#xff0c;虽然传统的搜索引擎可以为用户返回大量信息&#xff0c;但是…
阅读更多...
PyTorch----torch.nn.init.kaiming_normal_

PyTorch----torch.nn.init.kaiming_normal_

神经网络为什么要进行权重初始化&#xff1f; 神经网络进行权重初始化的目的在于促进网络的有效训练和收敛。正确的权重初始化可以帮助缓解梯度消失或梯度爆炸等问题&#xff0c;并且有助于加速训练过程。以下是权重初始化的几个重要原因&#xff1a; 1. **避免梯度消失或梯度…
阅读更多...
设计模式之组合模式解析

设计模式之组合模式解析

组合模式 1&#xff09;概述 1.定义 组合多个对象形成树形结构以表示具有“整体—部分”关系的层次结构。 组合模式对单个对象&#xff08;即叶子对象&#xff09;和组合对象&#xff08;即容器对象&#xff09;的使用具有一致性&#xff0c;组合模式又称为“整体—部分”(…
阅读更多...
SpringBoot整合Redis：缓存击穿--互斥锁解决

SpringBoot整合Redis：缓存击穿--互斥锁解决

&#x1f389;&#x1f389;欢迎光临&#xff0c;终于等到你啦&#x1f389;&#x1f389; &#x1f3c5;我是苏泽&#xff0c;一位对技术充满热情的探索者和分享者。&#x1f680;&#x1f680; &#x1f31f;持续更新的专栏Redis实战与进阶 本专栏讲解Redis从原理到实践 …
阅读更多...
数字时代的风向标：Facebook如何引领社交媒体的发展方向

数字时代的风向标：Facebook如何引领社交媒体的发展方向

引言 在当今数字时代&#xff0c;社交媒体已经成为人们生活中不可或缺的一部分&#xff0c;而Facebook作为其中的领军者&#xff0c;不仅影响着亿万用户的生活&#xff0c;也在塑造着整个社交媒体行业的发展方向。本文将深入探讨Facebook在数字时代的地位、影响力以及对社交媒…
阅读更多...
3d放上模型为什么渲染不出来---模大狮模型网

3d放上模型为什么渲染不出来---模大狮模型网

如果在3D软件中放置模型后无法正确渲染出来&#xff0c;可能有几个常见的原因导致这种情况发生&#xff1a; 材质设置问题&#xff1a;确保所放置的模型具有正确的材质和纹理&#xff0c;并且材质设置正确。如果材质设置有误&#xff0c;可能会导致模型无法正确显示。 光照设置…
阅读更多...
Vue 二次封装组件的艺术与实践

Vue 二次封装组件的艺术与实践

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…
阅读更多...
备考ICA----Istio实验9---熔断Circuit Breaking 实验

备考ICA----Istio实验9---熔断Circuit Breaking 实验

备考ICA----Istio实验9—熔断Circuit Breaking 实验 1. 环境准备 创建httpbin环境 kubectl apply -f istio/samples/httpbin/httpbin.yaml kubectl get svc httpbin2. 创建测试用客户端 kubectl apply -f istio/samples/httpbin/sample-client/fortio-deploy.yaml3. 创建Ht…
阅读更多...
Intellij IDEA 类注释模板设置

Intellij IDEA 类注释模板设置

1、配置全局USER 在此配置全局USER&#xff0c;用于填充自动生成的注释中的作者author属性。 注释模板中的user参数是默认是获取系统的用户&#xff08;当然注释作者也可以直接写固定值&#xff09;&#xff0c;如果不想和系统用户用同一个信息&#xff0c;可以在IDEA中进行配…
阅读更多...
【自我提升】一、Hyperledger Fabric 概念梳理

【自我提升】一、Hyperledger Fabric 概念梳理

写在前面&#xff1a;最近因为业务需要&#xff0c;开始学习Hyperledger Fabric了&#xff0c;做java全栈工程师可真难搞。现在算是啥类型的都在涉及了&#xff0c;现在这个技术啥都不懂&#xff0c;就先开个学习专栏&#xff0c;记录记录。顺带也给各位道友参考参考。 目录 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023