【开发】前端工程——layui

已于 2023-03-14 21:37:11 修改
阅读量1.2k 收藏 4
点赞数
分类专栏： 开发 # 前端工程 文章标签： 前端 layui javascript
于 2023-03-14 21:34:35 首次发布
本文为博主（@AmosTian）原创文章。[email protected]
本文链接：https://blog.csdn.net/qq_40479037/article/details/129539500
版权

layui

常用组件

1. 常用
页面元素
布局
布局容器
栅格系统
基本元素
按钮
导航
选项卡
表格
表单
组件示例
弹出层
日期和时间选择
数据表格
分页

2. LayUI的安装与使用

layui是一款采用自身模块规范编写的前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛低。由国人开发，16年出厂的框架，和Bootstrap有些相似，但该框架极大的好处就是定义了很多前后端交互的样式接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的成本

官网：Layui - 经典开源模块化前端 UI 框架

文档：Layui 开发使用文档 - 入门指南

特点
  • layui属于轻量级框架。适合开发后台前端，在服务端页面由很好效果
  • layui是提供给后端开发人员的ui框架，基于DOM驱动
目录结构

它经过了自动化构建，更适合用于生产环境

├─css //css目录
│  │─modules //模块 css 目录（一般如果模块相对较大，我们会单独提取，如下：）
│  │  ├─laydate
│  │  └─layer
│  └─layui.css //核心样式文件
├─font  //字体图标目录
└─layui.js //核心库
简单使用
<head>
    <meta charset="utf-8">
  	<title>开始使用 layui</title>
  	<!--引入样式-->
  	<link rel="stylesheet" href="./layui/css/layui.css">
  	<!--引入layui-->
    <script src="./layui/layui.js"></script>
</head>

<!--定义变量，与待引入的组件同名-->
<script>
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World');
});
</script>

3. 布局容器与栅格系统

布局容器
<!--固定宽度（两侧留白效果）-->
<div class="layui-container"></div>

<!--完整宽度（占据屏幕100%）-->
<div class="layui-container"></div>
栅格系统
布局规则

在这里插入图片描述

在这里插入图片描述

  1. layui-row 定义行

    <div class="layui-row"></div>

  2. llayui-col-md*预设类来定义一组列(column)，且放在行（row）内

    • md 表示不同屏幕取值

      • xs：超小屏幕(手机)
      • sm：小屏幕（平板）
      • md：桌面等中等屏幕
      • lg：桌面大型屏幕

    • *表示列数量

      该列所占用的12等数

      可选数量1-12，超过则自动换行

响应式规则

在这里插入图片描述

  • 栅格会自动根据屏幕分辨率选择对应的样式效果
列边距

通过列间距的预设类，来说设定列之间的间距。且一行中最左的列不会出现做边距，最右的列不会出现右边距。预设十二种不同尺寸的边距

/* 支持列之间为 1px-30px 区间的双数间隔，以及 1px，5px，15px，25px的单数间距 */
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-md-offset* 的预设类，从而列向右偏移

layui-col-md-offset3 ，代表在 “中型屏幕下”，让该列向右偏移3个列宽度

当低于桌面屏幕的规定的临界值，就会堆叠排列

列嵌套

在列元素 layui-col-md* 中插入行元素 layui-row 可以完成嵌套

4. 基本元素

按钮

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

<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
按钮主题
名称组合
原始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”

在这里插入图片描述

名称组合
主色class=“layui-btn layui-btn-primary layui-border-green”
百搭class=“layui-btn layui-btn-primary layui-border-blue”
暖色class=“layui-btn layui-btn-primary layui-border-orange”
警告class=“layui-btn layui-btn-primary layui-border-red”
深色class=“layui-btn layui-btn-primary layui-border-black”

在这里插入图片描述

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

在这里插入图片描述

<button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>

在这里插入图片描述

圆角按钮
主题组合
原始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”

在这里插入图片描述

按钮组

将按钮放入一个*class=“layui-btn-group”*元素中，即可形成按钮组，按钮本身仍然可以随意搭配

<div class="layui-btn-group">
  <button type="button" class="layui-btn">增加</button>
  <button type="button" class="layui-btn">编辑</button>
  <button type="button" class="layui-btn">删除</button>
</div>

在这里插入图片描述

<div class="layui-btn-group">
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe654;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe642;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe640;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe602;</i>
  </button>
</div>

在这里插入图片描述

<div class="layui-btn-group">
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon">&#xe654;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon">&#xe642;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon">&#xe640;</i>
  </button>
</div>

在这里插入图片描述

图标

字体图标 - 页面元素 - Layui

导航

导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。面包屑结构简单，支持自定义分隔符。千万不要忘了加载 element模块。虽然大部分行为都是在加载完该模块后自动完成的，但一些交互操作，如呼出二级菜单等，需借助element模块才能使用。

依赖加载模块：element

实现步骤：

  1. 引入资源

    <!--引入样式-->
<link rel="stylesheet" href="./layui/css/layui.css">
<!--引入layui-->
<script src="./layui/layui.js"></script>

  2. 依赖加载模块

    <script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>

  3. 显示指定类型的导航

水平导航栏

选中 layui-this

<ul class="layui-nav">
	<li class="layui-nav-item">最新活动</li>
    <li class="layui-nav-item layui-this">产品</li>
    <li class="layui-nav-item">大数据</li>
</ul>

在这里插入图片描述

二级菜单

<ul class="layui-nav">
	<li class="layui-nav-item">最新活动</li>
    <li class="layui-nav-item layui-this">产品</li>
    <li class="layui-nav-item">大数据</li>
    <li class="layui-nav-item">
        <a>解决方案</a>
        <dl class="layui-nav-child">
        	<dd><a href="">移动模块</a></dd>
      		<dd><a href="">后台模版</a></dd>
      		<dd><a href="">电商平台</a></dd>
        </dl>
    </li>
</ul>

在这里插入图片描述

垂直导航
<ul class="layui-nav layui-nav-tree">
	<li class="layui-nav-item">最新活动</li>
    <li class="layui-nav-item layui-this">产品</li>
    <li class="layui-nav-item">大数据</li>
    <li class="layui-nav-item">
        <a>解决方案</a>
        <dl class="layui-nav-child">
        	<dd><a href="">移动模块</a></dd>
      		<dd><a href="">后台模版</a></dd>
      		<dd><a href="">电商平台</a></dd>
        </dl>
    </li>
</ul>

在这里插入图片描述

侧边导航
<ul class="layui-nav layui-nav-side">
	<li class="layui-nav-item">最新活动</li>
    <li class="layui-nav-item layui-this">产品</li>
    <li class="layui-nav-item">大数据</li>
    <li class="layui-nav-item">
        <a>解决方案</a>
        <dl class="layui-nav-child">
        	<dd><a href="">移动模块</a></dd>
      		<dd><a href="">后台模版</a></dd>
      		<dd><a href="">电商平台</a></dd>
        </dl>
    </li>
</ul>

在这里插入图片描述

导航主题

通过对导航追加CSS背景类，让导航呈现不同的主题色

水平导航支持的其它背景主题有：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）
垂直导航支持的其它背景主题有：layui-bg-cyan（藏青）

面包屑式导航
<span class="layui-breadcrumb">
  <a href="">首页</a>
  <a href="">国际新闻</a>
  <a href="">亚太地区</a>
  <a><cite>正文</cite></a>
</span>

在这里插入图片描述

你还可以通过设置属性 lay-separator=“-” 来自定义分隔符。如： 首页- 国际新闻- 亚太地区- 正文

选项卡

导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。面包屑结构简单，支持自定义分隔符。

依赖加载组件：element （请注意：必须加载element模块，相关功能才能正常使用，详见：内置组件 - 常用元素操作）

实现步骤

  1. 引入资源

    <!--引入样式-->
<link rel="stylesheet" href="./layui/css/layui.css">
<!--引入layui-->
<script src="./layui/layui.js"></script>

  2. 依赖加载模块

    <script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
      var element = layui.element;

      //…
    });
</script>

  3. 加载HTML

    • layui-tab 选项卡
      • layui-this 选中
    • layui-tab 选项头
    • layui-tab-content 选项体
      • layui-tab-item 选项内容
        • layui-show 展示内容
    <div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理</li>
    <li>权限分配</li>
    <li>商品管理</li>
    <li>订单管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容1</div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item">内容3</div>
    <div class="layui-tab-item">内容4</div>
    <div class="layui-tab-item">内容5</div>
  </div>
</div>

    在这里插入图片描述

选项卡风格

默认风格 layui-tab

简约风格 layui-tab-brief

在这里插入图片描述

卡片风格 layui-tab-card

在这里插入图片描述

带删除的选项卡

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

<div class="layui-tab" lay-allowClose="true">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户基本管理</li>
    <li>权限分配</li>
    <li>全部历史商品管理文字长一点试试</li>
    <li>订单管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">1</div>
    <div class="layui-tab-item">2</div>
    <div class="layui-tab-item">3</div>
    <div class="layui-tab-item">4</div>
    <div class="layui-tab-item">5</div>
    <div class="layui-tab-item">6</div>
  </div>
</div>

在这里插入图片描述

表格

基本用法

<table class="layui-table">
    <!--设置每一列的宽度 单位:px-->
      <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>

基本属性

属性名属性值备注
lay-even无用于开启 隔行 背景，可与其它属性一起使用
lay-skin=“属性值”line （行边框风格） row （列边框风格） nob （无边框风格）若使用默认风格不设置该属性即可
lay-size=“属性值”sm （小尺寸） lg （大尺寸）若使用默认尺寸不设置该属性即可
<table class="layui-table" lay-skin="line">
  行边框表格（内部结构参见右侧目录“常规用法”）
</table>

在这里插入图片描述

<table class="layui-table" lay-skin="row">
  列边框表格（内部结构参见右侧目录“常规用法”）
</table>

在这里插入图片描述

<table class="layui-table" lay-even lay-skin="nob">
  无边框表格（内部结构参见右侧目录“常规用法”）
</table>

在这里插入图片描述

表单

在一个容器中设定 class=“layui-form” 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。

依赖加载模块：form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）

  1. 在一个容器中设定 class="layui-form" 来标识一个表单元素块

    <form class="layui-form" action="">
    
</form>

  2. 基本的行区块结构，它提供了响应式的支持。但如果你不大喜欢，你可以换成你的结构，但必须要在外层容器中定义class=“layui-form”，form模块才能正常工作。

    <div class="layui-form-item">
  <label class="layui-form-label">标签区域</label>
  <div class="layui-input-block">
    原始表单元素区域
  </div>
</div>
输入框
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">

required：注册浏览器所规定的必填字段
lay-verify：注册form模块需要验证的类型 取值
class=“layui-input”：layui.css提供的通用CSS类

class=“layui-input-block”：占据全部宽度

class=“layui-input-inline”：占据部分宽度

属性

placeholder 文本框默为空，默认显示的文本信息

autocomplete 表单元素是否自动填充 off |

当浏览器缓存中存在相同 name 属性的值时，会填充

下拉选择框
<select name="city" lay-verify="">
  <option value="">请选择一个城市</option>
  <option value="010">北京</option>
  <option value="021">上海</option>
  <option value="0571">杭州</option>
</select>

  • 通过 selected 属性设置默认选中项

  • 通过 disabled 属性开启禁用，可以设置 select 和 option 标签禁用下拉框或下拉选项

  • select分组

    optgroup

    <select name="quiz">
  <option value="">请选择</option>
  <optgroup label="城市记忆">
    <option value="你工作的第一个城市">你工作的第一个城市？</option>
  </optgroup>
  <optgroup label="学生时代">
    <option value="你的工号">你的工号？</option>
    <option value="你最喜欢的老师">你最喜欢的老师？</option>
  </optgroup>
</select>

在这里插入图片描述

  • 通过设定属性 lay-search 来开启搜索匹配功能——模糊匹配

    <select name="city" lay-verify="" lay-search>
  <option value="010">layer</option>
  <option value="021">form</option>
  <option value="0571" selected>layim</option>
  ……
</select>

在这里插入图片描述

复选框
默认风格：
<input type="checkbox" name="" title="写作" checked>
<input type="checkbox" name="" title="发呆"> 
<input type="checkbox" name="" title="禁用" disabled>

在这里插入图片描述

原始风格：
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
<input type="checkbox" name="" title="发呆" lay-skin="primary"> 
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>

在这里插入图片描述

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

checkbox复选框的“变种”，通过设定 lay-skin=“switch” 形成了开关风格

<input type="checkbox" name="xxx" lay-skin="switch">
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
<input type="checkbox" name="aaa" lay-skin="switch" disabled>

在这里插入图片描述

  • 属性checked可设定默认开
  • 属性disabled开启禁用
  • 属性lay-text可自定义开关两种状态的文本
  • 设置*value=“1”*可自定义值，否则选中时返回的就是默认的on
单选框
<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>

在这里插入图片描述

  • 属性title可自定义文本
  • 属性disabled开启禁用
  • 设置*value=“xxx”*可自定义值，否则选中时返回的就是默认的on
文本域
<textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>

在这里插入图片描述

组装行内表单
<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>

在这里插入图片描述

  • class=“layui-inline”：定义外层行内
  • class=“layui-input-inline”：定义内层行内
忽略美化渲染

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

方框表单

通过追加 layui-form-pane 的class，来设定表单的方框风格。内部结构不变

5. 组件

layui-layer

layer 已然成为网页弹出层的首先交互方案

模块加载名称：layer，独立版本：layer.layui.com

layer弹层组件开发文档 - Layui

使用场景

由于layer可以独立使用，也可以通过Layui模块化使用

场景用前准备调用方式
1. 作为独立组件使用如果你只是单独想使用 layer，你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。通过script标签引入layer.js后，直接用即可。 参考：快速上手
2. layui 模块化使用如果你使用的是 layui，那么你直接在官网下载 layui 框架即可，无需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js通过*layui.use(‘layer’, callback)*加载模块
基本参数

基础参数主要指调用方法时用到的配置项,以键值形式存在，基础参数可合理应用于任何层类型中

  1. type - 基本层类型

    类型：Number，默认：0

可传入的值有：
	0（信息框，默认）
	1（页面层）
	2（iframe层）
	3（加载层）
	4（tips层）

    若你采用*layer.open({type: 1})*方式调用，则type为必填项

  2. title - 标题

    类型：String/Array/Boolean，默认：'信息'

1. 若你传入的是普通的字符串，如title :'我是标题'，那么只会改变标题文本
2. 若你还需要自定义标题区域样式，那么你可以title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式
3. 如果你不想显示标题栏，你可以title: false

  3. content - 内容

    类型：String/DOM/Array，默认：''

content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。

/* 信息框 */
layer.open({
    type:0,
    title:['标题','color:red'],
    //content可传入任意的文本或html
    content:"Hello"
})

在这里插入图片描述

/* 页面层 */
layer.open({
    type:1,
    title:"系统消息",
    content: "<div style='height:100px;width:200px'>Hello</div>"
})

在这里插入图片描述

/* iframe */
layer.open({
    type:2,
    title:"系统消息",
    //content是一个URL，如果不想让那个Iframe出现滚动条，可以content:['url','no']
    content: "<div style='height:100px;width:200px'>Hello</div>"
})

在这里插入图片描述

/* tips */
<span>内容1</span>
<span>内容2</span>
<span>内容3</span>
<span id="#sp">内容4</span>

layer.open({
    type:4,
    content:['内容','#sp']//数组第二项即吸附元素选择器或者DOM
})

在这里插入图片描述

aera - 宽高
类型：String/Array，默认：'auto'

在默认状态下，layer是宽高都自适应的，
	只定义宽度时，你可以area: '500px'，高度仍然是自适应的。
	当你宽高都要定义时，你可以area: ['500px', '300px']
icon - 图标

信息框和加载层的私有参数

类型：Number，默认：-1（信息框）/0（加载层）

信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6如果是加载层，可以传入0-2。

  1. layer.alert("很高兴见到你",{icon:6})

    在这里插入图片描述

  2.  layer.msg('?',{
     time: 0,//不自动关闭
     btn:['是','否'],//按钮
     yes: function(index){
         layer.close(index);//关闭当前弹出层
         layer.msg('你好!',{
             icon: 6//图标
             btn:['开心','不开心']
         })
     }
 })

    在这里插入图片描述

  3. layer.msg('常用的弹出层')

    在这里插入图片描述

  4. layer.msg('玩命加载中...',function(){
    //关闭后操作
    layer.msg('')
})

在这里插入图片描述
在这里插入图片描述

日期和时间组件

layDate 包含了大量的更新，其中主要以：年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器.五种类型的选择方式为基本核心，并且均支持范围选择（即双控件）

模块加载名称：laydate，独立版本：http://www.layui.com/laydate/

使用
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="/static/build/layui.css" media="all">
    </head>
    <body>
        <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
            <input type="text" class="layui-input" id="test1">
        </div>

        <script>
            layui.use('laydate', function(){
                var laydate = layui.laydate;

                //执行一个laydate实例
                laydate.render({
                    elem: '#test1' //将日期控件绑定到元素上
                });
            });
        </script>
    </body>
</html>
参数

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

  1. elem - 绑定元素

    类型：String/DOM，默认值：无

必填项，用于绑定执行日期渲染的元素，值一般为选择器，或DOM对象

    laydate.render({ 
  elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等
});

  2. type - 控件选择类型

    类型：String，默认值：date

    用于单独提供不同的选择器类型，可选值如下表：

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

    在这里插入图片描述

    //年月范围选择
laydate.render({ 
  elem: '#test'
  ,type: 'month'
  ,range: true //或 range: '~' 来自定义分割字符
});

    在这里插入图片描述

    //日期范围选择
laydate.render({ 
  elem: '#test'
  ,range: true //或 range: '~' 来自定义分割字符
});

    在这里插入图片描述

    //时间范围选择
laydate.render({ 
  elem: '#test'
  ,type: 'time'
  ,range: true //或 range: '~' 来自定义分割字符
});

在这里插入图片描述

//日期时间范围选择
laydate.render({ 
  elem: '#test'
  ,type: 'datetime'
  ,range: true //或 range: '~' 来自定义分割字符
});

在这里插入图片描述

  1. format - 自定义格式

    类型：String，默认值：yyyy-MM-dd

    通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。layDate 支持的格式如下：

    格式符说明
    yyyy年份，至少四位数。如果不足四位，则前面补零
    y年份，不限制位数，即不管年份多少位，前面均不补零
    MM月份，至少两位数。如果不足两位，则前面补零。
    M月份，允许一位数。
    dd日期，至少两位数。如果不足两位，则前面补零。
    d日期，允许一位数。
    HH小时，至少两位数。如果不足两位，则前面补零。
    H小时，允许一位数。
    mm分钟，至少两位数。如果不足两位，则前面补零。
    m分钟，允许一位数。
    ss秒数，至少两位数。如果不足两位，则前面补零。
    s秒数，允许一位数。

    通过上述不同的格式符组合成一段日期时间字符串，可任意排版

    格式示例值
    yyyy-MM-dd HH:mm:ss2017-08-18 20:08:08
    yyyy年MM月dd日 HH时mm分ss秒2017年08月18日 20时08分08秒
    yyyyMMdd20170818
    dd/MM/yyyy18/08/2017
    yyyy年M月2017年8月
    M月d日8月18日

  2. 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 的时间戳
});
分页

模块加载名称：laypage

使用
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>layPage快速使用</title>
        <link rel="stylesheet" href="/static/build/layui.css" media="all">
        <script src="/static/build/layui.js"></script>
    </head>
    <body>
        <div id="test1"></div>
        
        <script>
            layui.use('laypage', function(){
                var laypage = layui.laypage;

                //执行一个laypage实例
                laypage.render({
                    elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
                    ,count: 50 //数据总数，从服务端得到
                });
            });
        </script>
    </body>
</html>

在这里插入图片描述

基本参数

通过核心方法：laypage.render(options) 来设置基础参数。

参数选项说明类型默认值
elem指向存放分页的容器，值可以是容器ID、DOM对象。如： 1. elem: ‘id’ 注意：这里不能加 # 号 2. elem: document.getElementById(‘id’)String/Object-
count数据总数。一般通过服务端得到Number-
limit每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。Number10
limits每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框Array[10, 20, 30, 40, 50]
curr起始页。一般用于刷新类型的跳页以及HASH跳页。如：</>code//开启location.hash的记录laypage.render({ elem: 'test1' ,count: 500 ,curr: location.hash.replace('#!fenye=', '') //获取起始页 ,hash: 'fenye' //自定义hash值}); Number1
groups连续出现的页码个数Number5
prev自定义“上一页”的内容，支持传入普通文本和HTMLString上一页
next自定义“下一页”的内容，同上String下一页
first自定义“首页”的内容，同上String1
last自定义“尾页”的内容，同上String总页数值
layout自定义排版。可选值有：count（总条目输区域）、prev（上一页区域）、page（分页区域）、next（下一页区域）、limit（条目选项区域）、refresh（页面刷新区域。注意：layui 2.3.0 新增） 、skip（快捷跳页区域）Array[‘prev’, ‘page’, ‘next’]
theme自定义主题。支持传入：颜色值，或任意普通字符。如： 1. theme: ‘#c00’ 2. theme: ‘xxx’ //将会生成 class=“layui-laypage-xxx” 的CSS类，以便自定义主题String-
hash开启location.hash，并自定义 hash 值。如果开启，在触发分页时，会自动对url追加：#!hash值={curr} 利用这个，可以在页面载入时就定位到指定页String/Booleanfalse
jump - 切换分页的回调
laypage.render({
    elem: 'test1'
    ,count: 70 //数据总数，从服务端得到
    ,jump: function(obj, first){
        //obj包含了当前分页的所有参数，比如：
        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
        console.log(obj.limit); //得到每页显示的条数

        //首次不执行
        if(!first){
            //do something
        }
    }
});
数据表格

它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。

模块加载名称：table

使用

在页面放置一个元素

，然后通过 table.render() 方法指定该容器 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>table模块快速使用</title>
  <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>
 
<table id="demo" lay-filter="test"></table>
 
<script src="/layui/layui.js"></script>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  //第一个实例
  table.render({
    elem: '#demo'
    ,height: 312
    ,url: '/demo/table/user/' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:80}
      ,{field: 'sex', title: '性别', width:80, sort: true}
      ,{field: 'city', title: '城市', width:80} 
      ,{field: 'sign', title: '签名', width: 177}
      ,{field: 'experience', title: '积分', width: 80, sort: true}
      ,{field: 'score', title: '评分', width: 80, sort: true}
      ,{field: 'classify', title: '职业', width: 80}
      ,{field: 'wealth', title: '财富', width: 135, sort: true}
    ]]
  });
  
});
</script>
</body>
</html>

数据格式
{
    "count":,
    "data":[
        {
        	"id":,
            "username":,
            "sex":
    	}
    ]
}

在这里插入图片描述

初始化渲染方式
方式机制适用场景
方法渲染用JS方法的配置完成渲染（推荐）无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。
自动渲染HTML配置，自动渲染无需写过多 JS，可专注于 HTML 表头部分
转换静态表格转化一段已有的表格元素无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可

自动渲染

在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染

  1. 带有 class=“layui-table” 的 标签。
  2. 对标签设置属性 lay-data=“” 用于配置一些基础参数
  3. 在 标签中设置属性*lay-data=“”*用于配置表头信息
<table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true, id:'test'}" lay-filter="test">
  <thead>
    <tr>
      <th lay-data="{field:'id', width:80, sort: true}">ID</th>
      <th lay-data="{field:'username', width:80}">用户名</th>
      <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
      <th lay-data="{field:'city'}">城市</th>
      <th lay-data="{field:'sign'}">签名</th>
      <th lay-data="{field:'experience', sort: true}">积分</th>
      <th lay-data="{field:'score', sort: true}">评分</th>
      <th lay-data="{field:'classify'}">职业</th>
      <th lay-data="{field:'wealth', sort: true}">财富</th>
    </tr>
  </thead>
</table>

方法渲染

原始的 table 标签只需要一个 选择器

<table id="demo" lay-filter="test"></table>

layui.user('table',function(){
    var table = layui.table;

    //执行渲染
    table.render({
        elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
        ,height: 315 //容器高度
        ,cols: [{}] //设置表头
        //,…… //更多参数参考右侧目录：基本参数选项
    });
})

table.render() 方法返回一个对象：var tableIns = table.render(options)

转换静态表格

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

<table lay-filter="demo">
    <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>

var table = layui.table;

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

格式

场景一：下述方法中的键值即为基础参数项
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); //重载表格

table 数据表格文档 - Layui

工具 - 分页
参数类型说明示例值
pageBoolean/Object开启分页（默认：false） 注：从 layui 2.2.0 开始，支持传入一个对象，里面可包含 laypage 组件所有支持的参数（jump、elem除外）{theme: ‘#c00’}
cols - 表头参数
参数类型说明示例值
typeString设定列类型。可选值有：
normal（常规列，无需设定）
checkbox（复选框列）
radio（单选框列，layui 2.4.0 新增）numbers（序号列）
space（空列）		任意一个可选值
hideBoolean是否初始隐藏列，默认：false。layui 2.4.0 新增true

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

工具栏
<table id="demo" lay-filter="demo"></table>

<!--表头工具栏-->
<script type="text/html" id="toolbarDemo">
	<!-- lay-event给元素绑定事件名 -->
   <button class="layui-btn layui-btn-sm" lay-event="getcheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getcheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
</script>

<!--行工具栏-->
<script type="text/html" id="barDemo">
  <div class="layui-btn-container">
    <a class="layui-btn layui-btn-sm" lay-event="add">添加</a>
    <a class="layui-btn layui-btn-sm" lay-event="delete">删除</a>
    <a class="layui-btn layui-btn-sm" lay-event="update">编辑</a>
    </div>
</script>

<script type="text/javascript">
	layui.use("table",function(){
        var table = layui.table;
        
        table.render({
            elem:"#demo",
            url:"",,
            cols:[[
                {},
            	{fileld:'aa',type:"numbers"},
                //设置表头工具栏
                {field:"操作",type:"#barDemo"}
            ]],
            page:true,//开启分页
            toolbar:'#toolbarDemo'
        })
    })
</script>

在这里插入图片描述
在这里插入图片描述

工具栏事件
头监听事件
语法：
	table.on('toobar(lay-filter-name)',function(obj){
		obj.config对象可以获取id属性值，表示当前容器的id属性值
        //获取当前表格中被选中对象，返回数据
		var checkStatus = table.checkstatus(obj.config.id)
        console.log(checkStatus)
	});

在这里插入图片描述

表头工具栏的监听事件 - table.on(‘toolbar()’,function(){})

table.on('toobar(demo)',function(obj){
    obj.config对象可以获取id属性值，表示当前容器的id属性值
    //获取当前表格中被选中对象，返回数据
    var checkStatus = table.checkstatus(obj.config.id)
    //获取当前表格被选中的记录对象，返回数据
    console.log(checkStatus)
    //获取事件名
    var eventName = obj.event;
    var arr = chechStatus.data;
	//判断事件名，执行对应代码
    switch(eventName){
        case "getCheckStatus":
            layer.alert(JSON.stringify(arr));
            break;
        case "getCheckLength":
            layer.msg("选中了"+arr.length+"条记录!")
    		break;
        case "isAll":
            //通过isAll属性判断是否全选
            var flag = checkStatus.isAll;
            var str = flag?'全选':'未全选';
            layer.msg(str)
            break;
    }
});

行工具栏监听事件 - table.on(‘tool()’,function(){})

原始容器
<table id="demo" lay-filter="test"></table>
 
工具栏模板：
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
    <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
  </div>
</script>
 
<script;>
//JS 调用：
table.render({
  elem: '#demo'
  ,toolbar: '#toolbarDemo'
  //,…… //其他参数
});
 
//触发事件
//工具条事件
//工具条事件
table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
  var data = obj.data; //获得当前行数据
  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
  var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

  if(layEvent === 'detail'){ //查看
    //do somehing
  } else if(layEvent === 'del'){ //删除
    layer.confirm('真的删除行么', function(index){
      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
      layer.close(index);
      //向服务端发送删除指令
    });
  } else if(layEvent === 'edit'){ //编辑
    //do something
    
    //同步更新缓存对应的值
    obj.update({
      username: '123'
      ,title: 'xxx'
    });
  } else if(layEvent === 'LAYTABLE_TIPS'){
    layer.alert('Hi，头部工具栏扩展的右侧图标。');
  }
});
</script>
监听单元格编辑事件

表头参数

参数类型说明示例值
editString单元格编辑类型（默认不开启）目前只支持：text（输入框）text

在这里插入图片描述

table.on('edit(test)',functionobj(){
    //获取修改后的值
	var value  = obj.value;
	//得到当前修改的行对象
	var data = obj.data
})
表格重载
语法说明适用场景
table.reload(ID, options, deep)参数 ID 即为基础参数id对应的值，见：设定容器唯一ID 参数 options 即为各项基础参数 参数 deep：是否采用深度重载（即参数深度克隆，也就是重载时始终携带初始时及上一次重载时的参数），默认 false 注意：deep 参数为 layui 2.6.0 开始新增。所有渲染方式
tableIns.reload(options, deep)参数同上 tableIns 可通过 var tableIns = table.render() 得到仅限方法级渲染
<div class="demoTable">
	搜索ID：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off" >
    </div>
    <button class="layui-btn" id="searchBtn">
        搜索
    </button>
</div>

$(document).on('click','#searchBtn',function(data){
    //获取搜索文本框的内容
    var searchText = $('demoReload');
    
    //调用数据表格的重载方法
    table.reload('demo',{
        where:{//设定需要传递的参数
            id:search.val(),
            name:""
        },
        page:{//指定条件查询的起始页，如果未指定则从当前页开始查询，此页前面的数据不纳入筛选
            curr:1
        },
    })
})

LayuiMini

layuimini - 基于Layui的后台管理系统前端模板 (99php.cn)

文件上传

<div class="layui-upload">
  <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button> 
  <div class="layui-upload-list">
    <table class="layui-table">
      <thead>
        <tr><th>文件名</th>
        <th>大小</th>
        <th>状态</th>
        <th>操作</th>
      </tr></thead>
      <tbody id="demoList"></tbody>
    </table>
  </div>
  <button type="button" class="layui-btn" id="testListAction">开始上传</button>
</div> 

layui.use(['upload', 'element', 'layer'], function(){
  var $ = layui.jquery
  ,upload = layui.upload
  ,element = layui.element
  ,layer = layui.layer;
//多文件列表示例
  var demoListView = $('#demoList')
  ,uploadListIns = upload.render({
    elem: '#testList'
    ,url: 'https://httpbin.org/post' //改成您自己的上传接口
    ,accept: 'file'
    ,multiple: true
    ,auto: false
    ,bindAction: '#testListAction'
    ,choose: function(obj){   
      var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
      //读取本地文件
      obj.preview(function(index, file, result){
        var tr = $(['<tr id="upload-'+ index +'">'
          ,'<td>'+ file.name +'</td>'
          ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
          ,'<td>等待上传</td>'
          ,'<td>'
            ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
          ,'</td>'
        ,'</tr>'].join(''));
        
        //单个重传
        tr.find('.demo-reload').on('click', function(){
          obj.upload(index, file);
        });
        
        //删除
        tr.find('.demo-delete').on('click', function(){
          delete files[index]; //删除对应的文件
          tr.remove();
          uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
        });
        
        demoListView.append(tr);
      });
    }
    ,done: function(res, index, upload){
      if(res.files.file){ //上传成功
        var tr = demoListView.find('tr#upload-'+ index)
        ,tds = tr.children();
        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
        tds.eq(3).html(''); //清空操作
        return delete this.files[index]; //删除文件队列已经上传成功的文件
      }
      this.error(index, upload);
    }
    ,error: function(index, upload){
      var tr = demoListView.find('tr#upload-'+ index)
      ,tds = tr.children();
      tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
      tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
    }
  })
AmosTian
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
layui使用label标签的方法
12-29
1. //引入layui标签 2. //body写代码 <form class=layui-form action=> 选择课程： <select id=select name=modules lay-verify=required lay-search=> --请选择--
layui基础总结及学习规划
twoyearJava的博客
09-20 669
layui基础
layui实现小卡片数据分页
weixin_44568752的博客
01-22 4467
1.html加载界面 2.渲染数据 $.ajax({ type:&amp;amp;amp;amp;quot;post&amp;amp;amp;amp;quot;, url: this.api + &amp;amp;amp;amp;quot;/WyExitInformation/imgPaging&amp;amp;amp;amp;quot;,//对应controller的URL asyn
layui入门
m0_68879220的博客
04-22 1486
1.什么是layui layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交...
layui 入门笔记
Liu_wen_wen的博客
06-28 912
layui入门 layui.css下载 layui.js下载
layui介绍及入门基础（看我这篇就会了！！！）
热门推荐
m0_73647713的博客
07-10 1万+
layui（谐音：类 UI)是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。
LayUI入门，以及介绍
lz17267861157的博客
07-10 5347
都是最基本的你学废了吗！
layUI之入门
weixin_67465673的博客
07-07 2145
目录一、layui简介 1.什么是layui2.layui、easyui与bootstrap的对比 2.1 layui和bootstrap对比（这两个都属于UI渲染框架）2.2 layui和easyui对比 3.layui入门 3.1路径问题 入门案例：点击弹出框 ​编辑②接着我们新建一个jsp页面叫demo1 二、自定义模块 1.如何扩展一个layui(自定义模块) 参考 模块规范 1）第一步:确认模块名，假设为：test.js文件放入项目任意目录下（注意：不用放入layui目录）静态资源：cs
LayUi基础入门【附有案例从0到1详解】
m0_74315688的博客
07-11 3317
不怎么怎么使用LayUi？一篇文章保姆级教学，让你一秒学会使用LayUi！！
layui框架的一些基本使用
qq_52986363的博客
01-12 8133
layui的优缺点以及使用layui前的准备 1.栅格系统 2.按钮 3.表单 4.表格 5.面板 6.时间线 7.选项卡 8.弹出层 9.数据表格
建筑材料租赁系统，后端框架SSM，前端框架LayUI，数据库MySQL
03-08
建筑材料租赁系统，后端框架SSM，前端框架LayUI，数据库MySQL，开发工具IDEA，Web服务器Tomcat，毕业设计。功能：客户管理，材料管理，订单管理，修改密码.zip 适合学习/练手、毕业设计、课程设计、期末/期中/大作业...
基于springboot的宿舍管理系统
03-08
基于springboot的宿舍管理系统：前端 html、layui，后端 springmvc、spring、mybatis；角色分为管理员，后勤，学生；集成房间管理，宿舍分配，调换申请等功能于一体的系统。.zip 适合学习/练手、毕业设计、课程设计...
基于servlet的学生信息管理系统
03-08
基于servlet的学生信息管理系统：前端 html、jquery、layui，后端 servlet，一个简洁的学生信息、教师信息管理系统.zip 适合学习/练手、毕业设计、课程设计、期末/期中/大作业、工程实训、相关项目/竞赛学习等。 ...
基于ssh的企业协同办公系统，一个融合薪资、考勤和公司公告等为一体的协调办公系统.zip
03-08
基于ssh的企业协同办公系统：前端 html、jquery、layui，后端 spring、hibernate，一个融合薪资、考勤和公司公告等为一体的协调办公系统.zip 适合学习/练手、毕业设计、课程设计、期末/期中/大作业、工程实训、相关...
基于springboot的智慧公寓管理系统
03-08
基于springboot的智慧公寓管理系统：前端 html、jquery、layui，后端 springmvc、spring、mybatis；角色分为管理员、用户；集成宿舍考评可视化，公寓管理、登记管理等功能于一体的系统。.zip 适合学习/练手、毕业...
【前端】数组的常用处理函数
lcukyNwa的博客
04-22 401
item------->每个元素值 (必)index----->索引（可选）arr-------- >当前数组（可选）推荐vscode的一款插件来写以下的demo，该插件可以直接在js文件中显示结果，搜 Quokka.js用这个插件去新建一个js文件，直接就运行在node上了forEach不会返回一个新的数组，里面改值会影响原数组，其他方法不影响原数组map可以返回新数组 用于映射，如每个元素都加倍或执行其他转换操作every返回一布尔值，需数组中全部满足。
C++ WebServer的细节理解
我的博客
04-22 594
在非阻塞模式下，如果 I/O 操作不能立即完成（例如，因为没有数据可读 或 写缓冲区满），系统不会让调用进程阻塞等待，而是立即返回一个错误（通常为 EAGAIN 或 EWOULDBLOCK）。先查询文件描述符 fd 当前的标志，然后将 O_NONBLOCK 标志加入其中，并通过 F_SETFL 来更新文件描述符，最终实现将该文件描述符切换为非阻塞模式。这意味着，如果没有待处理的连接请求（即没有客户端尝试连接到服务器），accept() 会一直阻塞，直到有新的连接请求到达或发生其他特定条件（如超时）为止。
SpringBoot项目打包分离高阶操作
最新发布
Record Little
04-23 592
虽然传输jar包 比较大，但是安全性、稳定性比较高，不需要关注pom.xml 添加了新的依赖、更新了版本号等等影响版本功能的操作。关注maven的特性， profiles即可满足， 根据不同的activation 状态，激活不同的build操作。每次修改一小部分代码或仅仅更新某个依赖jar包时，都需要重新进行整个项目的构建、打包、上传和部署。但是当你的项目趋于稳定，只有业务上的逻辑变更时，如果使用分离版本，可以加快迭代、更新的速度。弊端： 需要配置IDE命令，修改依赖时需要同时修改2处。
webman 事务回滚失效问题记录
juan9872的博客
04-21 760
webman是一款基于workerman开发的高性能HTTP服务框架。webman用于替代传统的php-fpm架构，提供超高性能可扩展的HTTP服务。你可以用webman开发网站，也可以开发HTTP接口或者微服务。除此之外，webman还支持自定义进程，可以做workerman能做的任何事情，例如websocket服务、物联网、游戏、TCP服务、UDP服务、unix socket服务等等。
Web前端开发技术——HTML,CSS,JavaScript 答案
05-20
1. HTML（超文本标记语言）是用于创建 Web 页面的标准标记语言，它描述了一个页面的结构和内容。 2. CSS（层叠样式表）是用于控制 Web 页面样式的语言，它可以对 HTML 元素的布局、字体、颜色等进行样式控制。 3. JavaScript 是用于实现 Web 页面交互效果的编程语言，它可以被用于动态地修改 HTML 和 CSS，实现用户与页面的交互。 这三种技术通常一起使用，用于创建 Web 页面，使其具有更好的结构、样式和交互效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

AmosTian

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值