如何使用layui

- 日理万妓 2021-09-17 03:36 444阅读 0赞

原文地址 [https://blog.csdn.net/qq\_28379809/article/details/80098653][https_blog.csdn.net_qq_28379809_article_details_80098653]

# 快速上手layui #

*   *  一、介绍
     *  二、开始使用layui
     *  三、layui表单
     *  四、layui弹出层
     *  五、layui文件上传
     *  六、layui分页
     *  七、layui数据表格

--------------------

## 一、介绍 ##

> 在使用[layui][]之前，我们先要了解一下layui是什么？  
> 我觉得用贤心大大的一句话来概括就好了：为后端程序员设计的前端框架。  
> 更加详细的描述是：这是一个封装了各种css和js、Ajax等等的前端框架，其封装程度之高，有时甚至对程序员来说不大友好。但对于前端技术一般的人来说，layui不失为一个好的工具。

--------------------

## 二、开始使用layui ##

> 官网地址：[layui][]  
> 使用方式：下载后导入项目，然后引用即可

> 先要引用jquery，然后再引用layui.js和layui.css。  
> 为什么一定要本地呢？没有CDN？  
> 上面说了，layui封装得太“好”了，程序员的自主性受到限制，这个时候需要修改layui的源码，比如css的样式——这也是layui的正确用法，而不只是简单地使用。

layui的模块：layui是模块化的，包括form，layer，laydate，laypage等等模块，正是这些模块组成了完整的layui。使用layui的时候，需要指明自己使用的模块。

--------------------

> 开始使用layui：

--------------------

## 三、layui表单 ##

> 下面以HTML中最常见的form表单来演示layui的使用。  
> html部分：

<fieldset class="layui-elem-field layui-field-title" style="margin-top:30px;">
        <legend style="text-align:center;">注册新账户</legend>
    </fieldset>
    <form id="reform" class="layui-form layui-form-pane"  th:action="@{/user/register.html}" method="POST">
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
            <input type="text" name="email" lay-verify="email" placeholder="请输入" autocomplete="off" class="layui-input" />
            </div>
        </div>
    
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" />
            </div>
        </div>
    
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password"  lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input" />
            </div>
        </div>
    
        <div class="layui-form-item">
            <label class="layui-form-label">重复密码</label>
            <div class="layui-input-block">
                <input type="password" name="repassword"   lay-verify="repass" placeholder="请输入密码" autocomplete="off" class="layui-input" />
            </div>
        </div>
    
        <div class="layui-form-item">
            <button  class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="demo1">注册</button>
        </div>
    
        <div style="text-align:center;margin-top:15px;">
            <input type="checkbox" name="agree"  lay-skin="primary" checked=""/>
                                   我已阅读并同意
            <a href="#" id="agreementLink">《隐私条款》</a>
        </div>
    </form>

javscript部分：

<script> layui.use(['form'], function(){ var form = layui.form; //自定义验证规则 form.verify({ pass: [/(.+){6,12}$/, '密码必须6到12位'] ,repass:function(value){ var pvalue = $("input[name='password']").val(); if(pvalue!=value){ return "两次输入的密码不一致"; } } }); //监听提交 form.on('submit(demo1)', function(data){ var agreeChecked = data.field.agree; if(agreeChecked!="on"){ msg("未同意隐私条款"); return false;//阻止表单提交 } }); }); </script>

效果图：  
![注册界面][register.png]

## 四、layui弹出层 ##

> 下面讲述一下弹出层，弹出可以说是一个很常见的东西了，但基础的HTML/JS只有丑陋的alert(“”)方法，layui包含了一个叫做layer的弹出层模块。  
> 使用[layer][]的两种方式：一、像上面使用form模块一样，layui.use声明，然后在use后面的function里使用； 二、导入独立的layer模块文件，然后就可以直接使用；  
> 关于第一种方式不予讨论，这里介绍一下第二种方式。

首先，从[layer官网][layer]下载layer的文件，解压并放入自己的项目下，然后`<script th:src="@{/layer/layer.js}"></script>`类似这样的形式引入layer.js文件。

Example：

function msg(msg){ 
        //墨绿深蓝风
        layer.alert(msg, {
          title:'消息'
          ,skin: 'layui-layer-molv' //样式类名
          ,closeBtn: 0
         },function(index){ 
            layer.close(index);//关闭
         });
    }

效果图：  
![弹出提示][msg.png]

> layer不仅仅可以弹出提示框，还可以做到一些有趣且实用的动态效果，甚至可以加载一个弹出的HTML界面出来。更多的东西请参考[layer官网][layer]。

--------------------

## 五、layui文件上传 ##

> 下面介绍一下layui的文件上传，即upload模块

<div class="layui-tab-item">
        <div class="layui-upload">
            <button type="button" class="layui-btn layui-btn-normal" id="headButton">
                <i class="layui-icon"></i>选择图片
            </button>    
            <button type="button" class="layui-btn" id="headAddButton">开始上传</button>
        </div>
    
        <div class="layui-inline layui-word-aux" style="margin-top:20px;">
            <label>注意：支持jpg，png和gif格式，文件大小应小于10MB</label>
        </div>
    </div>

<script> layui.use('upload',function(){ var $ = layui.jquery ,upload = layui.upload; //选完文件后不自动上传 upload.render({ elem: '#headButton' ,url: getRootPath()+'/user/uploadPicture' ,size: 10*1024 //10*1024KB = 10MB ,accept: 'images' ,acceptMime: 'image/jpg,image/png,image/gif' ,auto: false ,bindAction: '#headAddButton' ,done: function(res){ msg(res.msg); //刷新头像地址 var resUrl = res.url; if(resUrl!=""){ document.getElementById("userImg").src=getRootPath()+ resUrl; } } }); }); </script>

后端（java-spring-controller类中）：

@Autowired
    FileService fileService;
    
    @RequestMapping(path="/uploadPicture",method= {RequestMethod.POST})
    @ResponseBody
    public Map<String,Object> uploadFile(@RequestParam("file")MultipartFile file,HttpServletRequest request){
        Map<String,Object> map = new HashMap<String,Object>();
        String path = fileService.uploadImg(file, "head");//service层保存文件
    
        //返回值，必须按照这样写——要符合upload模块的回调接口才行
        map.put("code", 0); //0表示成功
        map.put("msg","上传成功");
        map.put("data", "");
        map.put("url", path);
        return map;
    }

> upload上传接口和返回值：

//上传接口
    upload.render({
      elem: '#id'
      ,url: '/api/upload/' //必填项
      ,method: ''  //可选项。HTTP类型，默认post
      ,data: {} //可选项。额外的参数，如：{id: 123, abc: 'xxx'}
    });   
    
    //返回值
    {
      "code": 0
      ,"msg": ""
      ,"data": {
        "src": "http://cdn.layui.com/123.jpg"
      }
    }

有关Javaweb文件上传可以参照我的另一篇博客：[轻松实现Javaweb文件上传][Javaweb]

效果图：  
![图片上传][upload.png]

> layui的upload模块能够在前端进行配置文件大小、格式、预览，还可以做到批量上传、重传功能。更多的内容请参照layui的[upload模块][upload]。

--------------------

## 六、layui分页 ##

> 在网站中也经常会用到分页，后端的分页是容易实现的，但对于前端来说就不是那么理想了。layui提供了自己的分页模块——[laypage][]。

layui.use(['element','laypage'], function(){ 
          var element = layui.element
          ,laypage = layui.laypage;
    
          $.ajax({
             url:getRootPath()+'/news/count'
             ,type:'GET'
             ,async:true  //false表示非异步，即同步，即请求处理完毕后才能返回；
             ,data:{
       "page":1, "limit":10}
             ,dataType:'json'
             ,success:function(alldata){ 
                var numbers = alldata.count;
                //总页数大于页码总数
                laypage.render({
                    elem: 'demo'
                    ,count: numbers//数据总数
                    ,first: '首页'
                    ,last: '尾页'
                    ,jump: function(obj){ 
                      $.ajax({
                        url:getRootPath()+'/news/list'
                        ,type:'GET'
                        ,async:true
                        ,data:{
       "page":obj.curr, "limit":obj.limit}
                        ,dataType:'json'
                        ,success:function(data){ 
                            var shtml = getNewsContentHTML(data);//js处理数据并填充div
                            document.getElementById("allNewsDiv").innerHTML=shtml;
                        }
                      });
                    }
                 });
             } 
          });
    });

> 如上，分页跳转的事件是在jump中进行的，在里面编写AJAX请求，通过jump的obj参数获得page和limit参数，然后在请求执行完毕并返回数据后进行处理即可

--------------------

## 七、layui数据表格 ##

> 表格时常见的功能，但js拼接HTML表格算是一件比较繁琐且容易出错的事情。

<table class="layui-hide" id="teamTable" lay-filter="teamTool">
    </table>

效果图：  
![表格与分页][team.png]

[https_blog.csdn.net_qq_28379809_article_details_80098653]: https://blog.csdn.net/qq_28379809/article/details/80098653
[layui]: http://www.layui.com/
[register.png]: http://p7rx7j5v6.bkt.clouddn.com/note/img/register.png
[layer]: http://layer.layui.com/
[msg.png]: http://p7rx7j5v6.bkt.clouddn.com/note/img/msg.png
[Javaweb]: https://blog.csdn.net/qq_28379809/article/details/80018445
[upload.png]: http://p7rx7j5v6.bkt.clouddn.com/note/img/upload.png
[upload]: http://www.layui.com/doc/modules/upload.html
[laypage]: http://www.layui.com/doc/modules/laypage.html
[team.png]: http://p7rx7j5v6.bkt.clouddn.com/note/img/team.png