layui经典模块化前端UI框架初识

layui产生背景

layui相对于vue来说确实稍有逊色,但是官网提供的入门文档以及完善的框架结构,使的很多人开始用layui来开发前端页面,那么什么人会去使用layui呢?

  1. 针对后端开发人员,在对前端知之甚少的情况下需要自行开发前端页面
  2. 前后端数据动态交互要求较低的前端开发工程师
  3. 测试开发工程师

layui使用入门

首先我们来认识一下layui

layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。layui 首个版本发布于 2016 年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。

layui官网直达链接:https://www.layui.com/
layui前面的使用方法在官网文档中以及提及了,那么这里主要从另外一个层面去使用layui,layui官网首页下载的源码内容如下:


基本有点前端基础知识的开发工程师应该从图中可以看出,layui源码下文件目录基本以及做好了分类,生成了基本的文件目录css、js、font、images以及第三方组件lay目录。那么我们开发的时候可以在上级目录的同级目录新增templates目录,使的整个前端项目相似于独立开发结构,如图:

 


temlates目录主要是放一些html文件内容,适配django+flask(我的后端语言是python)。在开发的构成中首先我们的知道layui为什么会如此的方便,开发layui的作者将layui的什么功能引以为豪呢?先看一下百度layui的呈现界面,此界面的展示内容可以作为layui的精髓内容:

 


从展示页面来看主要提及到如下功能:

 

  1. layui文档
  2. 后台模板
  3. layui在线
  4. layui插件
  5. layui教程
  6. 网页聊天

layui文档和教程这个不过多说明,官网入门文档就是;来看一下后台模板,layui提供了一个基本的后台管理界面的主页布局和导航源码,我们使用的时候基本傻瓜式套用即可,直达地址https://www.layui.com/admin/
单页版方案演示界面如下


特别需要注意的是layui的后台模板是需要收费的,当然我也支持大家付费进行使用,只是但凡成人总有富贵贫穷之分,这里如果不是非常富裕的建议使用基于layui开发的后台模板xadmin,直达地址:
http://x.xuebingsi.com
官方给我们提供的layui在线,这个功能对于前端开发来说起到了很大的辅助作用。直达地址:https://www.layui.com/demo/页面展示效果

 


layui官网中提供了很多的组件比较出名的就是layer、laydate、layim.

 


其实layui还有一个引以为豪的地方,只是这个功能由大家进行维护,这就是layui社区直达地址https://fly.layui.com/,在社区里面有很多在开发过程中遇到的疑难问题解决方案。

 

posted @ 2020-04-13 21:57  pujen_yuan  阅读(399)  评论(0编辑  收藏