Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to quickly get started with the front-end framework layui, the article introduces in great detail, has a certain reference value, interested friends must read it!

Layui (homophonic: class UI) is a front-end UI framework written by its own module specification, which follows the writing and organization form of native HTML/CSS/JS. It has a very low threshold and is ready to use.

I. introduction

Before using layui, we need to know what layui is.

I think it would be nice to sum it up in the words of the author's virtuous heart: a front-end framework designed for back-end programmers.

A more detailed description is that this is a front-end framework that encapsulates a variety of css and js, Ajax, and so on, with a high degree of encapsulation and sometimes not even friendly to programmers. But for people with average front-end technology, layui is a good tool.

Start using layui

How to use: import the project after download, and then reference it.

Reference jquery first, followed by layui.js and layui.css.

Why does it have to be local? No CDN?

As mentioned above, layui is encapsulated too well, and programmers' autonomy is limited, so you need to modify the source code of layui, such as the style of css-this is also the correct use of layui, not just simple use.

Layui modules: layui is modular, including form,layer,laydate,laypage and other modules, it is these modules that make up the complete layui. When using layui, you need to specify the module you use.

Start using layui:

Layui.use (['mod1',' mod2'], function (args) {var mo1 = layui.mod1, mo2 = layui.mod2;})

3. Layui form

The following demonstrates the use of layui with the most common form form in HTML.

Html section:

Register a new account mailbox username password duplicate password Register I have read and agreed to the Privacy Policy

Javscript section:

Layui.use (['form'], function () {var form = layui.form; / / Custom Verification Rule form.verify ({pass: [/ (. +) {6pjue 12} $/,' password must be 6 to 12 digits'], repass:function (value) {var pvalue = $("input [name = 'password']") .val (); if (pvalueentered value) {return "password inconsistency" }); / / listens to the submission form.on ('submit (demo1)', function (data) {var agreeChecked = data.field.agree; if (agreeCheckedsubmission = "on") {msg ("does not agree to the Privacy Policy"); return false;// prevents form submission}});})

Effect picture:

4. Layui pop-up layer

Let's talk about the pop-up layer, which can be said to be a common thing, but the basic HTML/JS has only ugly alert ("") methods, and layui contains a pop-up layer module called layer.

There are two ways to use layer:

First, as above using the form module, layui.use declaration, and then use in the function after the use

Import a separate layer module file, and then you can use it directly.

Let's not discuss the first way, but here's an introduction to the second way.

First, download the layer file from the layer official website, extract it and put it under your own project, and then introduce the layer.js file in a similar form.

Example:

Function msg (msg) {/ / dark green dark blue wind layer.alert (msg, {title:' message', skin: 'layui-layer-molv' / / style class name, closeBtn: 0}, function (index) {layer.close (index); / / close});}

Effect picture:

Layer can not only pop up prompt boxes, but also do some interesting and useful dynamic effects, and even load a pop-up HTML interface.

5. Upload layui files

Let's introduce the file upload of layui, that is, upload module.

 selects pictures to start uploading Note: jpg,png and gif formats are supported, and the file size should be less than 10MB layui.use ('upload',function () {var $= layui.jquery,upload = layui.upload) / / do not upload upload.render automatically after selecting files ({elem:'# headButton',url: getRootPath () +'/ user/uploadPicture',size: 10MB1024 / / 10*1024KB = 10MB accept: 'images',acceptMime:' image/jpg,image/png,image/gif',auto: false,bindAction:'# headAddButton',done: function (res) {msg (res.msg); / / refresh avatar address var resUrl = res.url If (resUrlement = "") {document.getElementById ("userImg") .src=getRootPath () + resUrl;}});})

Backend (in the java-spring-controller class):

@ AutowiredFileService fileService;@RequestMapping (path= "/ uploadPicture", method= {RequestMethod.POST}) @ ResponseBodypublic Map uploadFile (@ RequestParam ("file") MultipartFile file,HttpServletRequest request) {Map map = new HashMap (); String path= fileService.uploadImg (file, "head"); / / service layer saves the file / / return value, which must be written as follows-- map.put ("code", 0) must conform to the callback interface of upload module. / / 0: map.put ("msg", "upload successfully"); map.put ("data", ""); map.put ("url", path); return map;}

Upload upload API and returned values:

/ / upload API upload.render ({elem:'# id', url:'/ api/upload/' / / required. Method:''/ / optional. HTTP type, default post, data: {} / / optional. Additional parameters, such as: {id: 123, abc: 'xxx'}}); / / return value {"code": 0, "msg": "", "data": {"src": "http://cdn.layui.com/123.jpg"}}

Effect picture:

Layui's upload module can configure file size, format and preview at the front end, as well as batch upload and reupload functions.

VI. Layui pagination

Paging is also often used in websites. Paging at the back end is easy to achieve, but it is not so ideal for the front end. Layui provides its own paging module, laypage.

Layui.use (['element','laypage'], function () {var element = layui.element, laypage = layui.laypage; $.ajax ({url:getRootPath () +' / news/count', type:'GET', async:true / / false) means non-asynchronous, that is, synchronization, that is, it cannot be returned until the request has been processed. , data: {"page": 1, "limit": 10}, dataType:'json', success:function (alldata) {var numbers = alldata.count / / the total number of pages is greater than the total number of pages laypage.render ({elem: 'demo', count: total number of numbers// data, first:' home page', last: 'last page', 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 processes data and populates div document.getElementById ("allNewsDiv") [xss_clean] = shtml;}});})

As mentioned above, the paging jump event is carried out in jump, where the AJAX request is written, the page and limit parameters are obtained through the obj parameter of jump, and then processed after the request is executed and the data is returned.

7. Layui data sheet

Tables are common functions, but js splicing HTML tables is a tedious and error-prone thing.

Layui.use ('table',function () {var table = layui.table) / / the module declares table.render ({elem:'#teamTable',method:'get',url:getRootPath () +'/ team/admin/list' / / returns a list,cellMinWidth:80,cols of List: [[{field:'id', title:'ID', sort:true}, {field:'name', title:' name'}, {field:'birth', title:' birth date'} / / template element selector for templet value here, {field:'position') Title:' identity'}, {field:'information', title:' personal information'}, {field:'right', title:' operation', toolbar:'#barDemo'}]], page:true / / enable paging}) / / listen to the toolbar table.on ('tool (teamTool)', function (obj) {/ / Note: tool is the event name of the toolbar, and test is the attribute lay-filter= of the original table container. "var data = obj.data; / / get the current row data var layEvent = obj.event; / / get the value corresponding to lay-event (which can also be the value corresponding to the event parameter of the header) var tr = obj.tr / / get the DOM object console.log ("id:" + data.id) of the current line tr; if (layEvent = 'detail') {/ / View / / do somethinglayer.msg (View exercise of' ID:'+ data.id +'} else if (layEvent = = 'del') {/ / delete layer.confirm (' confirm to delete personnel information?' , function (index) {/ / do something layer.close (index);} else if (layEvent = 'edit') {/ / Edit / / do something});}); check and delete all the contents of the article "how to quickly get started with the front-end framework layui". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.