如何快速上手前端框架layui_程序开发

如何快速上手前端框架layui

创始人

2024-12-17 07:42:18

0次

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。

一、介绍

在使用layui之前，我们先要了解一下layui是什么？

我觉得用作者贤心的一句话来概括就好了：为后端程序员设计的前端框架。
更加详细的描述是：这是一个封装了各种css和js、Ajax等等的前端框架，其封装程度之高，有时甚至对程序员来说不大友好。但对于前端技术一般的人来说，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部分：

    注册新账户            邮箱

用户名

密码

重复密码

我已阅读并同意《隐私条款》

javscript部分：

效果图：

四、layui弹出层

下面讲述一下弹出层，弹出可以说是一个很常见的东西了，但基础的HTML/JS只有丑陋的alert("")方法，layui包含了一个叫做layer的弹出层模块。

使用layer的两种方式：

一、像上面使用form模块一样，layui.use声明，然后在use后面的function里使用；
二、导入独立的layer模块文件，然后就可以直接使用；

关于第一种方式不予讨论，这里介绍一下第二种方式。

首先，从layer官网下载layer的文件，解压并放入自己的项目下，然后类似这样的形式引入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模块

                        选择图片                    开始上传

@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层保存文件//返回值，必须按照这样写——要符合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" }}

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; } }); } }); } });});

查看编辑删除

如何快速上手前端框架layui

相关内容

热门资讯