【前端】layui前端框架学习笔记

【前端目录贴】
参考视频:LayUI
参考笔记:https://blog.csdn.net/qq_61313896/category_12432291.html

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.4.1 静态表格

layui-table

3.2.4.2 基础属性

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>布局容器</title><!--引入核心css文件--><link rel="stylesheet" href="./layui/css/layui.css"></head>
<body>
<!--基本样例-->
<table class="layui-table" ><colgroup><col width="150"><col width="200"><col></colgroup><thead><tr><th>昵称</th><th>加入时间</th><th>签名</th></tr></thead><tbody><tr><td>贤心</td><td>2016-11-29</td><td>人生就像是一场修行</td></tr><tr><td>许闲心</td><td>2016-11-28</td><td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td></tr></tbody>
</table><!--基础属性-->
<table class="layui-table" lay-even lay-skin="line" lay-size="sm">
<!--<table class="layui-table" lay-even lay-skin="row">-->
<!--<table class="layui-table" lay-even lay-skin="nob">--><colgroup><col width="150"><col width="200"><col></colgroup><thead><tr><th>昵称</th><th>加入时间</th><th>签名</th></tr></thead><tbody><tr><td>贤心</td><td>2016-11-29</td><td>人生就像是一场修行</td></tr><tr><td>许闲心</td><td>2016-11-28</td><td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td></tr><tr><td>贤心</td><td>2016-11-29</td><td>人生就像是一场修行</td></tr><tr><td>许闲心</td><td>2016-11-28</td><td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td></tr><tr><td>贤心</td><td>2016-11-29</td><td>人生就像是一场修行</td></tr><tr><td>许闲心</td><td>2016-11-28</td><td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td></tr></tbody>
</table>
</body>
</html>

3.2.5 表单

在一个容器中设定 class=“layui-form” 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。
依赖加载模块：form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）

layui-form

3.2.5.1 基本结构
<div class="layui-form-item"><label class="layui-form-label">标签区域</label><div class="layui-input-block">原始表单元素区域</div>
</div>

常用属性
required：注册浏览器所规定的必填字段
lay-verify：注册form模块需要验证的类型
layui-input-block 占据整行宽度
layui-input-inline 不会占据部分宽度

3.2.5.2 文本框
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">

autocomplete是否自动填充（当浏览器缓存中存在相同的name属性时，会填充）
placeholder 为空时,默认显示的文本信息
class="layui-input"：layui.css提供的通用CSS类

3.2.5.3 下拉选择框

optgroup 标签给select分组
通过selected属性设置默认选中项
disabled禁用该选择:可可以设置select和option标签(禁用下拉框和禁用下拉选项)
lay-search 来开启搜索匹配功能

 <!--下拉选择框--><!--第一项主要是占个坑，让form模块预留“请选择”的提示空间，否则将会把第一项（存在value值）作为默认选中项。你可以在option的空值项中自定义文本，如：请选择分类。--><div class="layui-form-item"><label class="layui-form-label">我是下拉选择框</label><div class="layui-input-inline"><!--通过selected属性设置默认选中项--><!--disabled禁用该选择:可以针对所有选择,也可以针对单个item--><!--<select name="city" lay-verify="required" disabled>--><select name="city" lay-verify="required"><option value="">请选择一个城市</option><option value="010" selected>北京</option><option value="021">上海</option><option value="0571" disabled>杭州</option></select><select name="quiz" lay-verify="required"><option value="">请选择</option><optgroup label="城市记忆"><option value="你工作的第一个城市" selected>你工作的第一个城市？</option></optgroup><optgroup label="学生时代"><option value="你的工号">你的工号？</option><option value="你最喜欢的老师">你最喜欢的老师？</option></optgroup></select><select name="city" lay-search><option value="">请选择一个城市</option><option value="010">你好啊北京,hello</option><option value="021" selected>上海</option><option value="0571" disabled>杭州</option></select></div></div>

在这里插入图片描述

3.2.5.3 复选框

属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）
属性checked可设定默认选中
属性lay-skin可设置复选框的风格
设置value="1"可自定义值，否则选中时返回的就是默认的on+

  <div class="layui-form-item"><label class="layui-form-label">标签区域22</label><div class="layui-input-block"><!--默认风格：--><input type="checkbox" name="hobby" title="写作" checked><input type="checkbox" name="hobby" title="发呆"><input type="checkbox" name="hobby" title="禁用" disabled><!--原始风格：--><hr/><input type="checkbox" name="hobby" title="写作" lay-skin="primary" checked><input type="checkbox" name="hobby" title="发呆" lay-skin="primary"><input type="checkbox" name="hobby" title="禁用" lay-skin="primary" disabled></div></div>
3.2.5.5 开关

其实就是checkbox复选框的“变种”，通过设定 lay-skin="switch" 形成了开关风格
属性checked可设定默认开
属性disabled开启禁用
属性lay-text可自定义开关两种状态的文本
设置value="1"可自定义值，否则选中时返回的就是默认的on

<!--开关--><div class="layui-form-item"><label class="layui-form-label">标签区域22</label><div class="layui-input-block"><!--默认风格：--><input type="checkbox" name="xxx" lay-skin="switch" lay-text="开/关闭"><input type="checkbox" name="yyy" lay-skin="switch" checked disabled><input type="checkbox" name="zzz" lay-skin="switch" value="1"></div></div>
3.2.5.6 单选框

属性title可自定义文本
属性disabled开启禁用
设置value="xxx"可自定义值，否则选中时返回的就是默认的on

<!--单选框--><div class="layui-form-item"><label class="layui-form-label">标签区域22</label><div class="layui-input-block"><input type="radio" name="sex" value="nan" title="男"><input type="radio" name="sex" value="nv" title="女" checked><input type="radio" name="sex" value="" title="中性" disabled></div></div>
3.2.5.7 文本域

class="layui-textarea"：layui.css提供的通用CSS类

 <!--文本域--><div class="layui-form-item"><label class="layui-form-label">标签区域22</label><div class="layui-input-block"><textarea name="aaa" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea></div></div>
3.2.5.8 组装行内表单

class=“layui-inline”：定义外层行内
class=“layui-input-inline”：定义内层行内

<!--组装行内表单--><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">范围</label><div class="layui-input-inline" style="width: 100px;"><input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input"></div><div class="layui-form-mid">-</div><div class="layui-input-inline" style="width: 100px;"><input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">密码</label><div class="layui-input-inline" style="width: 100px;"><input type="password" name="" autocomplete="off" class="layui-input"></div></div></div>
3.2.5.9 忽略美化渲染

对表单元素增加属性 lay-ignore 设置后，将不会对该标签进行美化渲染，即保留系统风格

 <!--忽略美化渲染--><div class="layui-form-item"><label class="layui-form-label">密码</label><div class="layui-input-block"  ><select name="city" lay-search lay-ignore><option value="">请选择一个城市</option><option value="010">你好啊北京,hello</option><option value="021" selected>上海</option><option value="0571" disabled>杭州</option></select></div></div>
3.2.5.10 表单方框风格

追加 layui-form-pane 的class，来设定表单的方框风格

<form class="layui-form layui-form-pane" action="">内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性（否则会看起来比较别扭），如：<div class="layui-form-item" pane><label class="layui-form-label">单选框</label><div class="layui-input-block"><input type="radio" name="sex" value="男" title="男"><input type="radio" name="sex" value="女" title="女" checked></div></div>
</form>

3.3 组件示例

3.3.1 弹层组

在这里插入图片描述

3.3.1.1 作为独立组件使用(未下载到独立版本)

引入jQuery1.8以上的任意版本，
引入layer.js
引入layer.css

<script>
layer.msg('hello'); 
</script>
3.3.1.2 layui 模块化使用

引入layui.css
引入layui.js

layui.use('form', function () {var layer = layui.layer;layer.msg('hello');});
3.3.1.3 内置方法

layer.open
layer.msg

3.3.1.4 type-基本层类型

类型：Number，默认：0
layer提供了5种层类型。可传入的值有：
0（信息框，默认）
1（页面层）
2（iframe层）
3（加载层）
4（tips层）
若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）

3.3.1.5 title-标题

类型：String/Array/Boolean，默认：‘信息’
title支持三种类型的值，若你传入的是普通的字符串，如title :‘我是标题’，那么只会改变标题文本；若你还需要自定义标题区域样式，那么你可以title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
总结:
title :'我是标题'
title: ['文本', 'font-size:18px;']
title: false

3.3.1.6 content-内容

类型：String/DOM/Array，默认：‘’
content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同

/!*如果是页面层*/
layer.open({type: 1, content: '传入任意的文本或html' //这里content是一个普通的String
});
layer.open({type: 1,content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});
//Ajax获取
$.post('url', {}, function(str){layer.open({type: 1,content: str //注意，如果str是object，那么需要字符拼接。});
});
/!*如果是iframe层*/
layer.open({type: 2, content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
}); 
/!*如果是用layer.open执行tips层*/
layer.open({type: 4,content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
});
3.3.1.7 area - 宽高

类型：String/Array，默认：‘auto’
在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: ‘500px’，高度仍然是自适应的。当你宽高都要定义时，你可以area: [‘500px’, ‘300px’]

3.3.1.8 icon - 图标

信息框和加载层的私有参数
类型：Number，默认：-1（信息框）/0（加载层）
信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6如果是加载层，可以传入0-2

3.3.2 日期与时间选择

3.3.2.1 作为独立组件使用(未下载到独立版本)
3.3.2.2 在 layui 模块中使用
 layui.use('form', function () {var laydate = layui.laydate;});
3.3.1.4 基础参数选项

通过核心方法：laydate.render(options) 来设置基础参数，也可以通过方法：laydate.set(options) 来设定全局基础参数.

 laydate.render({elem: '#test1' //指定元素
});
3.3.1.5 elem - 绑定元素

类型：String/DOM，默认值：无
必填项，用于绑定执行日期渲染的元素，值一般为选择器，或DOM对象

laydate.render({ elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等
});
3.3.1.6 type - 控件选择类型

类型：String，默认值：date
用于单独提供不同的选择器类型

type可选值名称用途
year年选择器只提供年列表选
month年月选择器只提供年、月选择
date日期选择器可选择：年、月、日。type默认值，一般可不填
time时间选择器只提供时、分、秒选择
datetime日期时间选择器可选择：年、月、日、时、分、秒
//日期范围选择
laydate.render({ elem: '#test',range: true //或 range: '~' 来自定义分割字符
});//日期时间范围选择
laydate.render({ elem: '#test',type: 'datetime',range: true
});//时间范围选择
laydate.render({ elem: '#test',type: 'time',range: true
});//年范围选择
laydate.render({ elem: '#test',type: 'year',range: true
});//年月范围选择
laydate.render({ elem: '#test',type: 'month',range: true
});
3.3.1.7 format - 自定义格式

类型：String，默认值：yyyy-MM-dd
通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。layDate 支持的格式如下

格式符说明
yyyy年份，至少四位数。如果不足四位，则前面补零
y年份，不限制位数，即不管年份多少位，前面均不补零
MM月份，至少两位数。如果不足两位，则前面补零。
M月份，允许一位数。
dd日期，至少两位数。如果不足两位，则前面补零。
d日期，允许一位数。
HH小时，至少两位数。如果不足两位，则前面补零。
H小时，允许一位数。
mm分钟，至少两位数。如果不足两位，则前面补零。
m秒数，至少两位数。如果不足两位，则前面补零。
s秒数，允许一位数。
laydate.render({elem: '#test6', format: 'yyyy年MM月dd日' //可任意组合
});
3.3.1.8 value - 初始值

类型：String，默认值：new Date()
支持传入符合format参数设定的日期格式字符，或者 new Date()

//传入符合format格式的字符给初始值
laydate.render({ elem: '#test',value: '2018-08-18' //必须遵循format参数设定的格式
});//传入Date对象给初始值
laydate.render({ elem: '#test',value: new Date(1534766888000) //参数即为：2018-08-20 20:08:08 的时间戳
});

3.3.3 分页

模块加载名称：laypage

3.3.3.1 基础参数选项

通过核心方法：laypage.render(options) 来设置基础参数。由于使用非常简单，本篇直接罗列核心接口的参数选项

在这里插入图片描述

<div id="test1"></div>
<script>//注意：导航 依赖 element 模块，否则无法进行功能性操作layui.use('form', function () {var laypage = layui.laypage;//执行一个laypage实例laypage.render({elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号, count: 60 //数据总数，从服务端得到, limit: 5 //dize大小   默认一页10条, limits: [10, 20, 30, 40, 50] //每页条数的选择项,和layout中的limit搭配使用// ,layout:['prev', 'page', 'next','limit'], layout: ['prev', 'page', 'next', 'limit', 'count']//自定义排版, groups: 6,jump: function (obj, first) {//obj包含了当前分页的所有参数，比如：console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。console.log(obj.limit); //得到每页显示的条数//首次不执行if (!first) {console.log('首次不执行执行')}}});});
</script>
3.3.3.2 jump - 切换分页的回调

当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）

laypage.render({elem: 'test1',count: 70 //数据总数，从服务端得到,jump: function(obj, first){//obj包含了当前分页的所有参数，比如：console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。console.log(obj.limit); //得到每页显示的条数//首次不执行if(!first){//do something}}
});

3.3.4 数据表格

模块加载名称：table

3.3.4.1 快速使用
<table id="demo" lay-filter="test"></table>
<script>layui.use('form', function () {var table = layui.table;//第一个实例table.render({elem: '#demo', height: 312, url: 'singers.json' //数据接口, page: true //开启分页, cols: [[ //表头{field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}, {field: 'singer_name', title: '歌手名称', width: 150}, {field: 'singer_pic', title: '歌手图片', width: 80, sort: true}, {field: 'other_name', title: '别称', width: 80}, {field: 'singer_id', title: '歌手id', width: 177,sort: true}]]});});
</script>

js数据格式

{"code": 0,"msg": "","count": 50,"data": [{"singer_name": "周杰伦","singer_pic": "http://y.gtimg.cn/music/photo_new/T001R150x150M0000025NhlN2yWrP4.webp","other_name": "Jay Chou","singer_id": 4558,"id": 1},{"singer_name": "林俊杰","singer_pic": "http://y.gtimg.cn/music/photo_new/T001R150x150M000001BLpXF2DyJe2.webp","other_name": "JJ Lin","singer_id": 4286,"id": 2}]
}
3.3.4.2 三种初始化渲染方式

默认方式是方法渲染
在这里插入图片描述

3.3.4.3 方法渲染
<table id="demo2"></table>

 // 方法渲染table.render({elem: '#demo2', height: 312, url: 'singers.json' //数据接口, page: true //开启分页, cols: [[ //表头{field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}, {field: 'singer_name', title: '歌手名称', width: 150}, {field: 'singer_pic', title: '歌手图片', width: 80, sort: true}, {field: 'other_name', title: '别称', width: 80}, {field: 'singer_id', title: '歌手id', width: 177,sort: true}]]});
3.3.4.4 自动渲染

所谓的自动渲染，即：在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。其特点在上文也有阐述。你需要关注的是以下三点：

  1. 带有 class=“layui-table” 的 <table> 标签。
  2. 对标签设置属性 lay-data=“” 用于配置一些基础参数
  3. 在 <th> 标签中设置属性lay-data=""用于配置表头信息
<table id="demo3" class="layui-table" lay-data="{height:315, url:'singers.json' ,page:true}"><thead><tr><th lay-data="{field:'id', width:80, sort: true}">ID</th><th lay-data="{field:'singer_name', width:80, sort: true}">歌手名称</th><th lay-data="{field:'singer_pic', width:80, sort: true}">歌手图片</th><th lay-data="{field:'other_name', width:80, sort: true}">别称</th><th lay-data="{field:'singer_id', width:80, sort: true}">歌手id</th></tr></thead>
</table>
3.3.4.5 转换静态表格

页面已经存在了一段有内容的表格，它由原始的table标签组成，这时你需要赋予它一些动态元素

<table lay-filter="demo4"><thead><tr><th lay-data="{field:'username', width:100}">昵称</th><th lay-data="{field:'experience', width:80, sort:true}">积分</th><th lay-data="{field:'sign'}">签名</th></tr></thead><tbody><tr><td>贤心1</td><td>66</td><td>人生就像是一场修行a</td></tr><tr><td>贤心2</td><td>88</td><td>人生就像是一场修行b</td></tr><tr><td>贤心3</td><td>33</td><td>人生就像是一场修行c</td></tr></tbody>
</table>

//转换静态表格table.init('demo4', {height: 315 //设置高度,limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致//支持所有基础参数
});
3.3.4.6 基础参数使用的场景

基础参数使用场景

场景一：下述方法中的键值即为基础参数项
table.render({height: 300,url: '/api/data'
});场景二：下述 lay-data 里面的内容即为基础参数项，切记：值要用单引号
<table lay-data="{height:300, url:'/api/data'}" lay-filter="demo"> …… </table>更多场景：下述 options 即为含有基础参数项的对象
> table.init('filter', options); //转化静态表格
> var tableObj = table.render({});tableObj.reload(options); //重载表格

参考:http://layui.apixx.net/doc/modules/table.html#option

3.3.4.7 开启分页

page: true //开启分页

3.3.4.8 开启头部工具栏&行工具栏
<!--表格工具栏-->
<script type="text/html" id="toolbarDemo"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="addAll">添加</button><button class="layui-btn layui-btn-sm" lay-event="deleteAll">删除</button><button class="layui-btn layui-btn-sm" lay-event="updateAll">编辑</button></div>
</script>
<!--表头工具栏-->
<script type="text/html" id="barDemo"><a class="layui-btn layui-btn-xs" lay-even="edit">编辑</a><a class="layui-btn layui-btn-xs" lay-even="delete">删除</a>
</script>

绑定表格工具栏：toolbar:'#toolbarDemo'
绑定表头工具栏： {toolbar: '#barDemo'}

3.3.4.9 事件监听
  • 头工具事件
//test 为容器的lay-filter=""属性值
table.on('toolbar(test)', function(obj){var checkStatus = table.checkStatus(obj.config.id);switch(obj.event){case 'add':layer.msg('添加');break;case 'delete':layer.msg('删除');break;case 'update':layer.msg('编辑');break;};
});
  • 行工具事件
table.on('tool(test)', function (obj) {console.log(1)// var checkStatus = table.checkStatus(obj.config.id);//获取当前事件名var tr = obj.data;//当前行数据var event = obj.event;console.log(event)switch (obj.event) {case 'delete':layer.confirm('确认要删除吗?', function (index) {//删除指定trobj.del();删除对应行（tr）的DOM结构，并更新缓存console.log('删除了')//关闭弹出层,(index是当前弹出层的下标)layer.close(index);//...//向服务端发送删除指令});break;case 'edit':layer.prompt({//表单元素的类型 0=文本框, 1=密码框, 2=文本域formType: 0,value: tr.singer_name //设置输入框的值}, function (value, index) {//修改指定单元格的值//value表示修改后输入的值obj.update({singer_name:value})layer.close(index);});break;}});
3.3.4.10 开启单元格编辑

单元格编辑类型（默认不开启）目前只支持：text（输入框）
{field: 'singer_name', title: '歌手名称', width: 150,edit:'text'}

  • 监听单元格编辑事件
//监听单元格编辑事件table.on('edit(test)', function (obj) {console.log(obj)//修改后得值var value=obj.value;//得到当前修改的tr对象var data=obj.data;//得到修改后的字段var field  = obj.field;layer.alert('id:'+data.id+'的'+field+'字段值修改为:'+value);});
3.3.4.11 数据表格的重载

在这里插入图片描述

3.3.5 LayUIMini

基于Layui编写的一套最简洁、易用的后台框架模板
官网地址:http://layuimini.99php.cn/

3.3.5.1 LayUIMini使用

…

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

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

相关文章

[Python] 如何导出PDF文件中的图片

[Python] 如何导出PDF文件中的图片

文章目录 一、背景说明二、代码编写三、问题3.1、如何得到图片的xref&#xff1f;3.2、xref有什么用呢&#xff1f; 四、总结 一、背景说明 最近在看一份pdf的书籍&#xff0c;其中有一些图片绘制地比较出色&#xff0c;所以就打算将其复制出来&#xff0c;以便于在需要的时候…
阅读更多...
鸿蒙实战开发-如何使用声明式UI编程框架的基础组件

鸿蒙实战开发-如何使用声明式UI编程框架的基础组件

介绍 在本教程中&#xff0c;我们将通过一个简单的样例&#xff0c;学习如何使用声明式UI编程框架的基础组件。本篇Codelab将会使用Image组件、Slider组件、Text组件共同实现一个可调节的风车动画&#xff0c;实现效果如图所示 相关概念 Text组件&#xff1a;文本组件&#x…
阅读更多...
使用虚幻引擎为AR体验提供动力

使用虚幻引擎为AR体验提供动力

Powering AR Experiences with Unreal Engine ​​​​​​​ 目录 1. 虚幻引擎概述 2. 虚幻引擎如何为AR体验提供动力 3. 虚幻引擎中AR体验的组成部分是什么&#xff1f; 4. 使用虚幻引擎创建AR体验 5. 虚幻引擎中AR的优化提示 6. 将互动性融入AR与虚幻引擎 7. 在AR中…
阅读更多...
故障诊断模型 | 基于LSTM长短期记忆神经网络的滚动轴承故障诊断（Pytorch）

故障诊断模型 | 基于LSTM长短期记忆神经网络的滚动轴承故障诊断（Pytorch）

概述 LSTM（Long Short-Term Memory）是一种常用的循环神经网络（RNN），在时间序列数据处理任务中表现优秀，可用于滚动轴承故障诊断。 滚动轴承故障通常会导致振动信号的变化，这些振动信号可以被视为时间序列数据。LSTM能够捕捉时间序列之间的依赖关系，从而对滚动轴承的故…
阅读更多...
SQL | SQL 3小时快速入门学习笔记

SQL | SQL 3小时快速入门学习笔记

【【数据库】SQL 3小时快速入门 #数据库教程 #SQL教程 #MySQL教程 #database#Python连接数据库】 课程链接 一、SQL 1.资料库管理系统&#xff08;Database Management System&#xff0c;简称DBMS&#xff09; 是整理资料的软件。其主要功能包括数据的存储、检索、更新和删除…
阅读更多...
Linux（CentOS 7 ）基于git、maven实现springboot自动化部署

Linux（CentOS 7 ）基于git、maven实现springboot自动化部署

前提 1、已安装git、maven、java环境 不清楚的可以看另一篇文章&#xff1a; https://blog.csdn.net/weixin_44646763/article/details/137041469 2、已为项目设置远程 git 仓库 origin (可以通过&#xff1a;git remote add origin https://github.com/xxx/xxx.git设置) 创…
阅读更多...
在 KubeSphere 中玩转 KubeEdge 边缘计算

在 KubeSphere 中玩转 KubeEdge 边缘计算

文章目录 一、边缘计算概念二、边缘计算痛点三、边缘计算应用场景四、常见边缘计算框架五、KubeEdge 架构4.1、kubeedge云端4.2、kubeedge边端4.3、安装部署4.3.1、安装 Cloudcore4.3.2、添加边缘节点4.3.3、开启Metrics& 日志 4.4、运行应用 六、云边服务互访6.1、部署 Ed…
阅读更多...
LLM--提示词Propmt的概念、作用及如何设计提示词

LLM--提示词Propmt的概念、作用及如何设计提示词

文章目录 1. 什么是提示词&#xff1f;2. 提示词的作用3. 如何设计提示词&#xff1f;3.1. 提供详细的信息3.2. 指定角色3.3. 使用分隔符和特殊符号3.4. 提供示例3.5. 少量示例的思维链&#xff08;COT&#xff09;模型3.6. 思维树&#xff08;TOT&#xff09;模型3.7. 自洽性 …
阅读更多...
论文笔记 - ：MonoLSS: Learnable Sample Selection For Monocular 3D Detection

论文笔记 - ：MonoLSS: Learnable Sample Selection For Monocular 3D Detection

论文笔记✍MonoLSS: Learnable Sample Selection For Monocular 3D Detection &#x1f4dc; Abstract &#x1f528; 主流做法限制 &#xff1a; 以前的工作以启发式的方式使用特征来学习 3D 属性&#xff0c;没有考虑到不适当的特征可能会产生不利影响。 &#x1f528; 本…
阅读更多...
C++刷题篇——07检测热点字符

C++刷题篇——07检测热点字符

一、题目 二、解题思路 1、使用map&#xff0c;key为元素&#xff0c;value为出现的次数 2、由于sort不适用于map&#xff0c;因此要将map的key、value放到vector中&#xff0c;再对vector排序 3、对map排序&#xff1a;方法1&#xff1a;使用二维数组vector<vector<>…
阅读更多...
力扣 1143. 最长公共子序列

力扣 1143. 最长公共子序列

题目来源&#xff1a;https://leetcode.cn/problems/longest-common-subsequence/description/ C题解&#xff08;思路来源代码随想录&#xff09;&#xff1a;动态规划。 1. 确定dp数组&#xff08;dp table&#xff09;以及下标的含义 dp[i][j]&#xff1a;长度为[0, i - 1]…
阅读更多...
R2GenCMN中的Encoder_Decoder结构

R2GenCMN中的Encoder_Decoder结构

R2GenCMN中的 Encoder_Decoder 结构 Encoder_Decoder 结构直接关系到文本的生成&#xff0c;它结构参考的transformer的结构 我们这里主要看代码的实现&#xff0c;从视觉编码器的输出开始 1. 模型结构 首先介绍一下整体结构&#xff0c;这里的baseCMN其实就是一个包装了的T…
阅读更多...
编曲知识16：贴唱混音思路 录音 对轨 降噪

编曲知识16：贴唱混音思路 录音 对轨 降噪

贴唱混音思路 录音 对轨 降噪小鹅通-专注内容付费的技术服务商https://app8epdhy0u9502.pc.xiaoe-tech.com/live_pc/l_6607f17ae4b092c1684f438a?course_id=course_2XLKtQnQx9GrQHac7OPmHD9tqbv 混音思路 贴唱混音、分轨混音 贴唱：由翻唱混音发展而来，指仅处理人声和伴奏…
阅读更多...
算法学习——LeetCode力扣补充篇6（132. 分割回文串 II、673. 最长递增子序列的个数、841. 钥匙和房间、463. 岛屿的周长）

算法学习——LeetCode力扣补充篇6（132. 分割回文串 II、673. 最长递增子序列的个数、841. 钥匙和房间、463. 岛屿的周长）

算法学习——LeetCode力扣补充篇6 132. 分割回文串 II 132. 分割回文串 II - 力扣&#xff08;LeetCode&#xff09; 描述 给你一个字符串 s&#xff0c;请你将 s 分割成一些子串&#xff0c;使每个子串都是 回文串 。 返回符合要求的 最少分割次数 。 示例 示例 1&#…
阅读更多...
CCIE-07-OSPF_TS

CCIE-07-OSPF_TS

目录 实验条件网络拓朴逻辑拓扑实现目标 环境配置开始Troubleshooting问题1. R22的e0/0接口配置了网络类型问题2. R22和R21之间的IP地址子网掩码长度不一致问题3. R21的e0/0口配置了被动接口问题4. R3配置了不一致的hello-time问题5. R21配置了max-metric导致路由无效问题6. R3…
阅读更多...
深度学习评价指标（1）：目标检测的评价指标

深度学习评价指标（1）：目标检测的评价指标

1. 简述 在计算机视觉/深度学习领域&#xff0c;每一个方向都有属于自己的评价指标。通常在评估一个模型时&#xff0c;只需要计算出相应的评价指标&#xff0c;便可以评估算法的性能。同时&#xff0c;所谓SOTA&#xff0c;皆是基于某一评价指标进行的评估。 接下来&#xff0…
阅读更多...
【JavaWeb】Day29.SpringBootWeb请求响应——请求（二）

【JavaWeb】Day29.SpringBootWeb请求响应——请求（二）

请求响应 4.数组集合参数 数组集合参数的使用场景&#xff1a;在HTML的表单中&#xff0c;有一个表单项是支持多选的(复选框)&#xff0c;可以提交选择的多个值。 4.1 数组 数组参数&#xff1a;请求参数名与形参数组名称相同且请求参数为多个&#xff0c;定义数组类型形参即…
阅读更多...
IO流c++

IO流c++

IO流类库 输入输出流 #include <iostream> using namespace std;class InCount { public:InCount(int a 0, int b 0){c1 a;c2 b;}void show(void){cout << "c1" << c1 << "\t" << "c2" << c2 << …
阅读更多...
Springboot Thymeleaf 实现数据添加、修改、查询、删除

Springboot Thymeleaf 实现数据添加、修改、查询、删除

1、引言 在Spring Boot中使用Thymeleaf模板引擎实现数据的添加、修改、查询和删除功能&#xff0c;通常步骤如下&#xff1a; 在Controller类中&#xff0c;定义处理HTTP请求的方法。创建Thymeleaf模板来处理表单的显示和数据的绑定。 2、用户数据添加 1、 在Controller类中…
阅读更多...
Pytorch 下载失败原因

Pytorch 下载失败原因

错误信息&#xff1a; ERROR: Could not find a version that satisfies the requirement torch (from versions: none) ERROR: No matching distribution found for torch 解决方案&#xff1a; 在官网看到&#xff0c;它需要python3.8-3.11的环境。过高和过低的版本都不…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023