最新消息:文章中包含代码时,请遵守代码高亮规范!

妈妈再也不用担心我不会前端了–前后端框架layui【原创】

原创文章 祝, 毕亮 1700浏览 0评论

同往常一样, 写累了代码,逛逛博客论坛,这次的layui瞬间进入我的眼球,打开官网。一种相见恨往的感觉。确实是后端或者说是前端开发人员用的一套很不错的框架。小编也是立马打开软件研究了一番。

官网地址:http://www.layui.com;

首先,给大家介绍一下关于这个前后端的框架。layui正确的发音是’累哟’(小编自己创造的啊),下面我们区分一下下面这几个名词

lay, layer, layui的三个英文的意思(水对于这个框架来讲);

lay  躺下的意思(也就是奠定的意思) 它不代表任何东西;

layer它只是一个弹出层组件而已,仅此而已。

layui 才是我们的框架,而layer只不过是他的其中的一个子类而已。

我们可以这样理解,layui是我们房子的框架, layer是我们的里面的每个单独的房间,而lay就是地基。

好了,入门开始,从HelloWord开始吧!看看强大的框架是怎么运行HelloWord!看如下代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>开始使用Layui</title>
<link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>

<!-- 你的HTML代码 -->

<script src="../layui/layui.js"></script>
<script>

//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form();

layer.msg('Hello World');
});
</script>

</body>
</html>

接下来我们讲解一下这个HelloWord是怎么工作的首先在;静态页或者是你自己的项目中引入layui.js和layui.css这个我想大家应该都会吧。现在我们分析一下HelloWord是怎么显示出来的.

layui.use(['layer', 'form'], function(){do something});

首先你要知道layui是什么,看 layui.js你会发现这么一段win.layui = new Lay();一看就明白了吧。在后端理解看来是不是可以看成一个对象。而layui.use([mods], callback)   官方解释为mods里面必须是一个合法的模块名,不能包含目录。如果需要加载目录,建议采用extend建立别名,也就是说你引用的form模块一定要是合法的,何为合法呢?看下面的图;

粘贴图片(1).png

这是layui框架自带的一些模块。比如上图所说的 “form”,“upload”等。这里我们使用的是“layer”和“form”两个模块。layer是layui的弹出层模块,

而“form”则是layui的表单模块。

var layer = layui.layer

估计大家一眼看上去感觉不是太好理解,上图中的layer模块后面有个“modules/layer”是什么意思呢,从表面上看是一个路径,对的,就是一个文件的路经.

粘贴图片(2).png

上述所说的layui.layer意思就是说layui框架调用layer这个模块,怎么找到这个模块呢?如上图所示,他会将位于目录lay下的layer.js文件加载进来,也就是说当我需要某个模块的时候,这个模块就被加载进来了。这也是layui开发者的终极意图。了解了怎么去调用每个模块,你离大功告成也就不远了。我们看看他说调用的模块的js文件。

粘贴图片.png

这就是位于lay/modules下的所有的js文件。layer.js看到了吧。同理form = layui.form(); 也是这个意思;

layer.msg(“HelloWord”)就不用多说了吧,layer.js文件下的一个方法.

粘贴图片(3).png

里面的参数小编就不做一一解释了,配置弹框的皮肤,显示的时间等。有兴趣的可以看看官网。

好了关于layui的框架的初体验就先说这么多了。未完待续。。。。。

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/19917.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Galen的打赏,我们会更加努力!    如果您想成为作者,请点我

发表我的评论
取消评论

表情