프런트엔드 프레임워크layui로 빠르게 시작하기
- 尚앞으로
- 2019-11-15 11:36:1410014검색
layui(동음어: UI 유사)는 자체 모듈 사양으로 작성된 프런트 엔드 UI 프레임워크로 기본 HTML/CSS/JS의 작성 및 구성 형식을 따르며 임계값이 매우 낮으며 외부에서 사용할 수 있습니다. 상자.
1. 소개
layui를 사용하기 전에 먼저layui가 무엇인지부터 이해해야겠죠?
저자 Xianxin의 말은 백엔드 프로그래머를 위해 설계된 프론트엔드 프레임워크라는 한 문장으로 요약할 수 있을 것 같습니다.
더 자세한 설명은 다음과 같습니다. 다양한 CSS, JS, Ajax 등을 캡슐화하는 프런트엔드 프레임워크입니다. 캡슐화 수준이 너무 높아 프로그래머에게 친숙하지 않을 때도 있습니다. 하지만 평균적인 프론트엔드 기술을 가진 사람들에게는layui가 좋은 도구입니다.
2.layui 사용 시작하기
사용방법: 다운로드 후 프로젝트를 import한 후 참조
<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 패키지는 너무 "좋고" 프로그래머의 자율성이 제한되어 있습니다. 이 때 CSS 스타일 등의 소스 코드를 수정해야 합니다. 이것도 올바른 사용법입니다. 레이유이는 단지 사용법이 간단하지 않습니다.
layui 모듈:layui는 form, layer,laydate,laypage 및 기타 모듈을 포함하는 모듈식입니다. layui를 사용하는 경우 사용 중인 모듈을 지정해야 합니다.
layui 사용 시작:
<script>
layui.use(['mod1', 'mod2'],function(args){
var mo1 = layui.mod1
,mo2 = layui.mod2;
});
</script>3. Layui form
다음은 Layui의 사용을 보여주기 위해 HTML에서 가장 일반적인 양식을 사용합니다.
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>Rendering:
4. Layui 팝업 레이어
팝업 레이어에 대해 이야기해보자. 그러나 기본 HTML/JS에는 보기 흉한 경고("") 메서드만 있고,layui에는 레이어라는 팝업 레이어 모듈이 포함되어 있습니다.
레이어를 사용하는 두 가지 방법:
먼저 위의 양식 모듈과 같이layui.use를 선언하고 사용 후 함수에서 사용합니다.
두 번째, 독립 레이어 모듈 파일을 가져오고 다음을 수행할 수 있습니다.
첫 번째 방법은 여기서 다루지 않겠습니다.
먼저 레이어 공식 웹사이트에서 레이어 파일을 다운로드하고 압축을 풀어 자신의 프로젝트에 넣은 다음 양식에 있는 layer.js 파일을 가져옵니다.
예:
function msg(msg){
//墨绿深蓝风
layer.alert(msg, {
title:'消息'
,skin: 'layui-layer-molv' //样式类名
,closeBtn: 0
},function(index){
layer.close(index);//关闭
});
}렌더링:
layer는 프롬프트 상자를 표시할 수 있을 뿐만 아니라 흥미롭고 실용적인 동적 효과를 만들 수 있으며 팝업 HTML 인터페이스도 로드할 수 있습니다.
5. Layui 파일 업로드
다음은 Layui의 파일 업로드, 즉 업로드 모듈
<!-- 上传图片-->
<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/12프런트엔드 프레임워크layui로 빠르게 시작하기"
}
}Rendering:
layui의 업로드 모듈은 프런트 엔드에서 파일 크기, 형식 및 미리 보기를 구성할 수 있으며 일괄 업로드 및 재전송 기능도 수행할 수 있습니다.
6. Layui Pagination
페이지네이션은 웹사이트에서 자주 사용됩니다. 백엔드에서의 페이지네이션은 구현하기 쉽지만 프론트엔드에서는 그다지 이상적이지 않습니다. 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 매개변수를 통해 페이지 및 제한 매개변수를 얻은 다음 요청이 실행되고 데이터가 반환된 후에 처리합니다.
7. Layui 데이터 테이블
테이블은 일반적인 기능이지만 HTML 테이블을 접합하는 js는 상대적으로 지루하고 오류가 발생하기 쉽습니다.
<!-- team分页table --> <table class="layui-hide" id="teamTable" lay-filter="teamTool"> </table>rrree
렌더링:
Layui에 대한 더 많은 지식을 보려면 layui 프레임워크에 주목하세요.
위 내용은 프런트엔드 프레임워크layui로 빠르게 시작하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!