Layui简介

layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

为啥使用Layui，因为Layui对后端实在太友好，前端我真的哭死什么VUE，React这些学起来周期还长，使用Layui能快速搭建你想要的前端网页，可以说学习Layui作为过渡史很不错的选择。PS(你得会HTML和CSS还有JS，说白了就是前端三件套)

官网地址附上Layui - 经典开源模块化前端 UI 组件库(官方开发文档)

下载地址

https://res.layui.com/static/download/layui/layui-v2.5.7.zip?v=1

项目结构

  1. ├─css //css目录
  2. │ │─modules //模块 css 目录（一般如果模块相对较大，我们会单独提取，如下：）
  3. │ │ ├─laydate
  4. │ │ └─layer
  5. │ └─layui.css //核心样式文件
  6. ├─font //字体图标目录
  7. └─layui.js //核心库

因为Layui本身并不是很大所以我更喜欢把layui下载到本地进行引入

环境搭建

项目引入


Layui一个不会前端的后端苦逼崽的学习历程_css

Layui一个不会前端的后端苦逼崽的学习历程_html_02


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>layui环境初始化</title>
        <link rel="stylesheet" type="text/css" href="layui-v2.5.7/layui/css/layui.css"/>
    </head>
    <body>
        
        <!-- 引入layui的js库 -->
        <script src="layui-v2.5.7/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

模块

layui 定义为「经典模块化」，并非是自吹她自身有多优秀，而是有意避开当下 JS 社区的主流方案，试图以尽可能简单的方式去诠释高效！她的所谓经典，是在于对返璞归真的执念，她以当前浏览器普通认可的方式去组织模块！我们认为，这恰是符合当下国内绝大多数程序员从旧时代过渡到未来新标准的绝佳指引。(这不是我说的，官网说的)

layui.use(['upload', 'table']

这里便是使用upload模块和table模块

var $ = layui.jquery, upload = layui.upload, table = layui.table;

无论是upload还是table都需要创建对象

然后对象调用方法

下文会继续阐述

<script th:inline="none">
  layui.use(['upload', 'table'], function(){
    var $ = layui.jquery, upload = layui.upload, table = layui.table;

    // 普通文件上传，指定允许上传的图片类型
    upload.render({
      elem: '#fileUpload',   // 上传文件的按钮 <button type="button" class="layui-btn" id="fileUpload">
      url: '/file/upload',  // 需要修改为自己后台的接口
      accpet: 'file',       // 普通文件
      done: function(res){
        layer.msg(res.msg);
        if (res.code == 0) {
          setTimeout(function () {
            window.location.href = res.url;
          }, 2000);
        } else {
          alert("上传失败");
        }
      }
    });

    // 渲染表格
    table.render({
      elem: '#fileList',
      height: 640,
      minWidth: 80,
      url: '/file/all',    // ajax请求，访问路径一定要写正确/file/all, 切记。
      parseData: function (res) {
        return {
          "code": res.code,
          "msg": "",
          "count": res.count,
          "data": res.data,
        };
      },
      method: 'post',
      limit: 10,
      page: true,
      cols: [[
        {field: 'id', title: 'ID', sort: true, fixed: 'left'},
        {field: 'fileName', title: '文件名'},
        {field: 'ext', title: '文件后缀'},
        {field: 'path', title: '存储路径'},
        {field: 'size', title: '大小'},
        {field: 'type', title: '类型'},
        {field: 'downloadCounts', title: '下载次数'},
        {field: 'uploadTime', title: '上传时间'},
        {title: '操作', align: 'center', toolbar: '#optBar', width: 200, fixed: 'right'}
      ]]
    });


    //监听工具条
    table.on('tool(fileTable)', function (obj) {
      var data = obj.data;
      if (obj.event === 'download') {
        window.open("/file/download/" + data.id);
        obj.update({
          "downloadCounts": data.downloadCounts + 1
        });
      } else if (obj.event === 'delete') {
        layer.confirm('真的删除文件吗？', function (index) {
          $.ajax({
            url: "/file/delete/" + data.id,
            type: "Get",
            success: function (res) {
              layer.msg(res.msg);
              obj.del();
            },
            error: function (res) {
              $.message.alert('msg', res.msg);
            }
          });
          layer.close(index);
        });
      } else if (obj.event === 'preview') {

        layer.open({
          type: 2,
          skin: 'layui-layer-demo', //样式类名
          title: '文件预览',
          closeBtn: 1, //显示关闭按钮
          anim: 2,
          area: ['893px', '600px'],
          shadeClose: true, //开启遮罩关闭
          content: '/file/preview/' + data.id
        });
      }
    });

  });
</script>

因为我最近做的项目需要的是这两个模块，所以本文会以介绍这两个模块为主

table模块

想要完成一个如下的表格

昵称

加入时间

签名

浅辄

2023-4-1

Salvation lies within

许闲心

2016-11-28

于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…

<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>2023-4-1td>
      <td>Salvation lies within</td>
    </tr>
    <tr>
      <td>许闲心</td>
      <td>2016-11-28</td>
      <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
    </tr>
  </tbody>
</table>

其实我们并不需要多么好看的界面，只需要有表格并且能渲染数据就行

upload模块

一切从小试牛刀开始。通常情况下，我们上传文件是借助 type="file" 的 input 标签来完成的，但非常遗憾的是，它不能很好地与其它表单元素并存，所以我们常常要单独为它做一个业务层面的“异步上传”，即先让图片上传，再和其它表单一起提交保存。下面是一个小示例：

Layui一个不会前端的后端苦逼崽的学习历程_html_03

这原本只是一个普通的 button，正是 upload 模块赋予了它“文件选择”的特殊技能。当然，你还可以随意定制它的样式，而不是只局限于按钮。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>upload模块快速使用</title>
  <link rel="stylesheet" href="/static/build/layui.css" media="all">
</head>
<body>
 
<button type="button" class="layui-btn" id="test1">
  <i class="layui-icon"></i>上传图片
</button>
 
<script src="/static/build/layui.js"></script>
<script>
layui.use('upload', function(){
  var upload = layui.upload;
   
  //执行实例
  var uploadInst = upload.render({
    elem: '#test1' //绑定元素
    ,url: '/upload/' //上传接口
    ,done: function(res){
      //上传完毕回调
    }
    ,error: function(){
      //请求异常回调
    }
  });
});
</script>
</body>
</html>

call_back函数

这里需要说明一下什么是回调：

编程分为两类：系统编程（system programming）和应用编程（application programming）。所谓系统编程，简单来说，就是编写库；而应用编程就是利用写好的各种库来编写具某种功用的程序，也就是应用。系统程序员会给自己写的库留下一些接口，即API（application programming interface，应用编程接口），以供应用程序员使用。所以在抽象层的图示里，库位于应用的底下。

当程序跑起来时，一般情况下，应用程序（application program）会时常通过API调用库里所预先备好的函数。但是有些库函数（library function）却要求应用先传给它一个函数，好在合适的时候调用，以完成目标任务。这个被传入的、后又被调用的函数就称为回调函数（callback function）。

简单一点的就是说你在一个函数里需要调用另一个函数，他的形参就是需要传入的另一个函数

Layui一个不会前端的后端苦逼崽的学习历程_layui_04

可以看到，回调函数通常和应用处于同一抽象层（因为传入什么样的回调函数是在应用级别决定的）。而回调就成了一个高层调用底层，底层再回过头来调用高层的过程。（我认为）这应该是回调最早的应用之处，也是其得名如此的原因。

使用 upload 模块必须与 upload.render(options) 方法打交道，其中的 options即为基础参数，它是一个对象。

upload.render的对象参数如下

这里的需要注意的是他的回调函数

参数选项

说明

类型

默认值

elem

指向容器选择器，如：elem: ‘#id’。也可以是DOM对象

string/object

-

url

服务端上传接口，返回的数据规范请详见下文

string

-

data

请求上传接口的额外参数。如：data: {id: ‘xxx’} 从 layui 2.2.6 开始，支持动态值，如:data: { id: function(){ return $(‘#id’).val(); }}

object

-

headers

接口的请求头。如：headers: {token: ‘sasasas’}。注：该参数为 layui 2.2.6 开始新增



accept

指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）

string

images

acceptMime

规定打开文件选择框时，筛选出的文件类型，值为用逗号隔开的 MIME 类型列表。如： acceptMime: ‘image/*’（只显示图片文件） acceptMime: ‘image/jpg, image/png’（只显示 jpg 和 png 文件） 注：该参数为 layui 2.2.6 开始新增

string

images

exts

允许上传的文件后缀。一般结合 accept 参数类设定。假设 accept 为 file 类型时，那么你设置 exts: ‘zip|rar|7z’ 即代表只允许上传压缩格式的文件。如果 accept 未设定，那么限制的就是图片的文件格式

string

jpg|png|gif|bmp|jpeg

auto

是否选完文件后自动上传。如果设定 false，那么需要设置 bindAction 参数来指向一个其它按钮提交上传

boolean

true

bindAction

指向一个按钮触发上传，一般配合 auto: false 来使用。值为选择器或DOM对象，如：bindAction: ‘#btn’

string/object

-

field

设定文件域的字段名

string

file

size

设置文件最大可允许上传的大小，单位 KB。不支持ie8/9

number

0（即不限制）

multiple

是否允许多文件上传。设置 true即可开启。不支持ie8/9

boolean

false

number

设置同时可上传的文件数量，一般配合 multiple 参数出现。 注意：该参数为 layui 2.2.3 开始新增

number

0（即不限制）

drag

是否接受拖拽的文件上传，设置 false 可禁用。不支持ie8/9

boolean

true

回调




choose

选择文件后的回调函数。返回一个object参数，详见下文

function

-

before

文件提交上传前的回调。返回一个object参数（同上），详见下文

function

-

done

执行上传请求后的回调。返回三个参数，分别为：res（服务端响应信息）、index（当前文件的索引）、upload（重新上传的方法，一般在文件上传失败后使用）。详见下文

function

-

error

执行上传请求出现异常的回调（一般为网络异常、URL 404等）。返回两个参数，分别为：index（当前文件的索引）、upload（重新上传的方法）。详见下文

function

-

上传接口

接口便是如此传输参数的

需要注意的一点：该接口返回的相应信息（response）必须是一个标准的 JSON 格式，要不然就库库给你报错，

数据接口请求异常：error