1. Введение
В использованииlayuiПрежде, давайте сначала разберемся, что такое layui? Я думаю, что было бы хорошо подвести итог в одном предложении сердца автора: интерфейсный фреймворк, разработанный для внутренних программистов. Более подробное описание такое: это front-end фреймворк, который инкапсулирует различные css, js, Ajax и т.д., причем его инкапсуляция настолько высока, что иногда не дружелюбна к программистам. Но для людей со средними технологиями фронтенда лайуи — хороший инструмент.
2. Начните использовать лайуи
Адрес официального сайта: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? Как было сказано выше, пакет лайуи слишком "хороший", а автономия программиста ограничена.В это время необходимо модифицировать исходный код лайуи, например стиль css - это тоже правильное использование layui, а не простое использование.
Модули лайуи: лайуи является модульным, включая такие модули, как форма, слой, лайдата, лайпейдж и т. д. Именно эти модули составляют полный лайуи. При использовании layui вам необходимо указать модуль, который вы используете.
Начните использовать лайуи:
<script>
layui.use(['mod1', 'mod2'],function(args){
var mo1 = layui.mod1
,mo2 = layui.mod2;
});
</script>
Три, форма лайуи
Ниже используется наиболее распространенная форма формы в HTML, чтобы продемонстрировать использование 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>
javascript часть:
<!-- 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>
Изображение эффекта:
Четыре, всплывающий слой лайуи
Давайте поговорим о всплывающем слое. Можно сказать, что всплывающее окно — очень распространенная вещь, но базовый HTML/JS имеет только уродливый метод alert(""), а layui включает модуль всплывающего слоя, называемый layer . использоватьlayerдвумя способами: 1. Как и при использовании модуля формы выше, объявите layui.use, а затем используйте его в функции после использования 2. Импортируйте файл модуля независимого слоя, а затем используйте его напрямую; Первый метод обсуждаться не будет, здесь будет представлен второй метод.
Во-первых, изофициальный сайт слояЗагрузите файл слоя, разархивируйте его и поместите под свой собственный проект, затем
<script th:src="@{/layer/layer.js}"></script>Представьте файл layer.js в такой форме.
Пример:
function msg(msg){
//墨绿深蓝风
layer.alert(msg, {
title:'消息'
,skin: 'layui-layer-molv' //样式类名
,closeBtn: 0
},function(index){
layer.close(index);//关闭
});
}
Изображение эффекта:
Слой может не только отображать окно подсказки, но также создавать интересные и практичные динамические эффекты и даже загружать всплывающий HTML-интерфейс. Для получения дополнительной информации см.официальный сайт слоя.
Пять, загрузка файла лайуи
Давайте представим загрузку файла лайуи, то есть модуль загрузки
<!-- 上传图片-->
<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.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 вы можете обратиться к другому моему блогу:Простая загрузка веб-файлов Java
Изображение эффекта:
Модуль загрузки layui может настраивать размер файла, формат, предварительный просмотр во внешнем интерфейсе, а также может выполнять функции пакетной загрузки и повторной передачи. Для получения дополнительной информации, пожалуйста, обратитесь к сайту Lauiзагрузить модуль.
Шесть, простой пейджинг
Пейджинг также часто используется на веб-сайтах.Пейджинг на бэкенде легко реализовать, но он не так идеален для внешнего интерфейса. 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;
}
});
}
});
}
});
});
Как и выше, переход на страницу события выполняется в переходе, который обрабатывается после подготовки AJAX-запроса, получения страницы параметров и ограничения параметра obj, а затем завершает запрос и возвращает данные в
Семь, таблица данных лайуи
Обычная функция для таблиц, но сращивание таблиц HTML с помощью js — громоздкая и подверженная ошибкам вещь.
<!-- 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>
Изображение эффекта:
Что ж, это конец введения о лайуи, для более подробного и глубокого понимания, пожалуйста, перейдите кофициальный сайт лайуи.