欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-01 21:02:24
layui产生背景 layui相对于vue来说确实稍有逊色,但是官网提供的入门文档以及完善的框架结构,使的很多人开始用layui来开发前端页面,那么什么人会去使用layui呢? 针对后端开发人员,在对前端知之甚少的情况下需要自行开发前端页面 前后端数据动态交互要求较低的前端开发工程师 测试开发工程师 ......

layui产生背景

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

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

layui使用入门

首先我们来认识一下layui

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

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

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

 

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

 

layui经典模块化前端UI框架初识
从展示页面来看主要提及到如下功能:

 

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

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

layui经典模块化前端UI框架初识
特别需要注意的是layui的后台模板是需要收费的,当然我也支持大家付费进行使用,只是但凡成人总有富贵贫穷之分,这里如果不是非常富裕的建议使用基于layui开发的后台模板xadmin,直达地址:

官方给我们提供的layui在线,这个功能对于前端开发来说起到了很大的辅助作用。直达地址:页面展示效果

 

layui经典模块化前端UI框架初识
layui官网中提供了很多的组件比较出名的就是layer、laydate、layim.

 

layui经典模块化前端UI框架初识
其实layui还有一个引以为豪的地方,只是这个功能由大家进行维护,这就是layui社区直达地址,在社区里面有很多在开发过程中遇到的疑难问题解决方案。

 

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