LayUI优势
接上节Spring boot项目开发实战一(环境搭建)搭建好前后端环境后,数据传输的唯一方式就是HTTP协议。对于LayUI来说,是一套开源的 Web UI 解决方案,采用自身经典的模块化规范,并遵循原生 HTML/CSS/JS 的开发方式。对于模块化,最印象深刻的就是node,开发node遵循了commonjs准则,一切皆模块。
对于LayUI来说,也是模块化开发,每个组件及工具都是一个模块,可复用的模块,不同于node的模块来说,layui支持原生的js,css,html,并提供了一套完整的开发方案,可复用的模块和组件极高的提高了开发效率,对于layui来说除了导入layui.js外几乎不需要其他任何模块就能完成基于layui的模块化开发,而不需要下载任何插件。
LayUI最重要的特性就是学习周期短,拿来即用。例如,就布局来说,使用layui的栅格系统
只需要两步:
- 导入
layui.js
和layui.css
<!--引入 layui.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.4.5/css/layui.min.css">
<!-- 引入 layui.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.4.5/layui.js"></script>
- 引入layui模块
<script src="./layui/layui.js"></script>
<script>
layui.use(['layer', 'form'], function(){ //use方法的数组内引入
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
});
</script>
- 修改class属性为内置属性
<button type="button" class="layui-btn">一个标准的按钮</button> <!--class = layui-btn-->
实现上面两个步骤后就直接可以使用放心粘贴 😃 layui的模块代码了,实现拿来即用,需要注意的是使用时需要导入模块,即拿来即用,需要那个模块就导入模块名称即可。
layui.use(['layer', 'form','button','menu'], function(){ //use方法的数组内引入
var layer = layui.layer
,form = layui.form
,button = layui.button
,menu = layui.menu;
layer.msg('Hello World');
});
测试代码:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--引入 layui.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.4.5/css/layui.min.css">
<!-- 引入 layui.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.4.5/layui.js"></script>
</head>
<body>
<h1>hello</h1>
<button type="button" class="layui-btn">一个标准的按钮</button>
</body>
<script>
layui.use(['layer', 'form','button'], function(){
var layer = layui.layer
,form = layui.form
,button = layui.button;
layer.msg('Hello World');
});
</script>
</html>
三个步骤即实现了layui的使用,快捷又方便,学习周期很短。
不同于VueJs,AngularJs,ReactJs,layui独立于MVVN模式,一般不支持原生js。偏向于数据匹配视图,后台返回的数据需要有一定的格式。
layui的基本使用在官网开发手册上非常详细,可以使用演示的框架快速构建后台管理页面
项目构建为任意自己喜欢的样子,
layui构建echarts
的构建过程请移步layui 使用 echarts讲的非常详细,感谢作者!
LayUI使用AJAX
//加载jquery模块
layui.use(['jquery', 'layer'], function(){
var $ = layui.$ //重点处
,layer = layui.layer;
//后面就跟你平时使用jQuery一样$为关键符号
$('body').append('Hello jQuery');
注意是
var $ = layui.$
而不是var $ = layui.juqery
在使用内置模块jquery时,一定要在layui内部使用,外部是无效的,在外部使用也就失去了使用layui框架的意义,使用在模块类响应的数据才可填充到又layui模块构建的视图中。
LayUI方法定义
在layui的use中常规的js定义方法1是无效的,应为不符合js模块的规范,需要使用layui的接口window
定义。
//渲染数据
function updateSaleDat(vo){
document.getElementById("saleData").innerText = vo
}
在layui模块中可是使用js的内置api但是想函数式编程的模块不允许使用。
window
接口定义方法
window.funName = function (){}
//渲染数据
window.updateSaleData = function(vo){
document.getElementById("saleData").innerText = vo
}
渲染成功。
windows
接口的作用是将layui.use
内部定义的模块或方法向外部的script
暴露即和原生定义在script
标签内部的方法无差别,方便在页面的任意地方调用。即window
是layui模块与js数据交换的通道。