【WEB前端开辟】疾速上手前端框架layui
2019-11-16前端开发搜奇网102°c
A+ A-一、引见
在运用layui之前,我们先要相识一下layui是什么?
我以为用作者贤心的一句话来归纳综合就好了:为后端程序员设想的前端框架。
越发细致的形貌是:这是一个封装了种种css和js、Ajax等等的前端框架,其封装水平之高,偶然以至对程序员来讲不大友爱。但关于前端手艺平常的人来讲,layui不失为一个好的东西。
二、最先运用layui
运用体式格局:下载后导入项目,然后援用即可
<script th:src="@{/jquery-3.3.1.min.js}"></script> <script th:src="@{/layui/layui.js}"></script> <link rel="stylesheet" th:href="@{/layui/css/layui.css}" />
先要援用jquery,然后再援用layui.js和layui.css。
为何一定要当地呢?没有CDN?
上面说了,layui封装得太“好”了,程序员的自主性受到限制,这个时刻须要修正layui的源码,比方css的款式——这也是layui的准确用法,而不只是简朴地运用。
layui的模块:layui是模块化的,包含form,layer,laydate,laypage等等模块,恰是这些模块组成了完全的layui。运用layui的时刻,须要指明本身运用的模块。
最先运用layui:
<script> layui.use(['mod1', 'mod2'],function(args){ var mo1 = layui.mod1 ,mo2 = layui.mod2; }); </script>
三、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部份:
<!-- js for form input and submit --> <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>
效果图:
四、layui弹出层
下面报告一下弹出层,弹出可以说是一个很罕见的东西了,但基本的HTML/JS只要貌寝的alert("")要领,layui包含了一个叫做layer的弹出层模块。
运用layer的两种体式格局:
一、像上面运用form模块一样,layui.use声明,然后在use背面的function里运用;
二、导入自力的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);//封闭 }); }
效果图:
layer不单单议可以弹出提示框,还可以做到一些风趣且有用的动态效果,以至可以加载一个弹出的HTML界面出来。
五、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" } }
效果图:
layui的upload模块可以在前端举行配置文件大小、花样、预览,还可以做到批量上传、重传功用。
六、layui分页
在网站中也常常会用到分页,后端的分页是轻易完成的,但关于前端来讲就不是那末理想了。layui供应了本身的分页模块——laypage。
<div id="allNewsDiv"></div> <div id="demo"></div>
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表格算是一件比较烦琐且轻易失足的事变。
<!-- team分页table --> <table class="layui-hide" id="teamTable" lay-filter="teamTool"> </table>
<script> layui.use('table',function(){ var table = layui.table;//模块声明 table.render({ elem:'#teamTable' ,method:'get' ,url:getRootPath()+'/team/admin/list' //返回一个List<TeamMember>的list ,cellMinWidth:80 ,cols:[[ {field:'id', title:'ID', sort:true} ,{field:'name', title:'姓名'} ,{field:'birth', title:'出生日期'} //这里的templet值时模板元素的挑选器 ,{field:'position', title:'身份'} ,{field:'information', title:'个人信息'} ,{field:'right', title:'操纵', toolbar:'#barDemo'} ]] ,page:true //开启分页 }); //监听东西条 table.on('tool(teamTool)', function(obj){ //注:tool是东西条事宜名,test是table原始容器的属性 lay-filter="对应的值" var data = obj.data; //取得当前行数据 var layEvent = obj.event; //取得 lay-event 对应的值(也可所以表头的 event 参数对应的值) var tr = obj.tr; //取得当前行 tr 的DOM对象 console.log("id:"+data.id); if(layEvent === 'detail'){ //检察 //do something layer.msg('ID:'+ data.id + ' 的检察操 } else if(layEvent === 'del'){ //删除 layer.confirm('确认删除职员信息?', function(index){ //do something layer.close(index); }); } else if(layEvent === 'edit'){ //编辑 //do something } }); }); </script> <!-- tools --> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">检察</a> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script>
效果图:
更多layui学问请关注layui框架。
以上就是疾速上手前端框架layui的细致内容,更多请关注ki4网别的相干文章!