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/,在社区里面有很多在开发过程中遇到的疑难问题解决方案。

layui经典模块化前端UI框架初识的更多相关文章

  1. Layui 是一款采用自身模块规范编写的国产前端UI框架(5600个Star)

    采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写形式,极低门槛,拿来即用. http://www.layui.com Layui 是一款采用自身模块规范编写的国产前端UI框架, ...

  2. 前端UI框架小汇总

    前言: 近期,小弟根据GitHub.前端社区.掘金等平台对当前流行的前端UI框架的进行了小小的整理和汇总(ps:前端UI框架的应用是通过GitHub star数,社区热度和使用范围等进行的粗略的汇总[ ...

  3. 前端UI框架选择区别对比推荐

    UI选择务必慎重,货比三家. 弱水三千只取一瓢:弱水三千只取一瓢,源起佛经中的一则故事,警醒人们在一生中可能会遇到很多美好的东西,但只要用心好好把握住其中的一样就足够了 老牌构建于jQuery框架之上 ...

  4. 常见前端UI框架

    祈澈姑娘 程序员一枚 本文作者祈澈姑娘,转载请声明 前端的技术日渐更新,最近得空,将前端常见的框架总结了一下,在开发的过程之中,有了这些,不断能够提高自己的工作效率,还可以在工作之余了解更多. 1.L ...

  5. 推荐几个精致的web UI框架及常用前端UI框架

    1.Aliceui Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS 的更好方式. git ...

  6. 前端UI框架搜集

    网址:https://blog.csdn.net/will5451/article/details/80652429?utm_source=blogxgwz6 网址:https://www.cnblo ...

  7. 前端UI框架和JS类库

    一.前端框架库: 1.Zepto.js 地址:http://www.css88.com/doc/zeptojs/ 描述:Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jqu ...

  8. 2015年最全的移动WEB前端UI框架

    目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了.在移动WEB开发的过程中,使用合适的移动WEB UI框架可以大大提升我们的开发效率.下面P ...

  9. web前端UI框架

    分类:WEB前端 时间:2016年1月13日 目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了.在移动WEB开发的过程中,使用合适的移动WE ...

随机推荐

  1. Flink消费Kafka到HDFS实现及详解

    1.概述 最近有同学留言咨询,Flink消费Kafka的一些问题,今天笔者将用一个小案例来为大家介绍如何将Kafka中的数据,通过Flink任务来消费并存储到HDFS上. 2.内容 这里举个消费Kaf ...

  2. 4000字干货长文!从校招和社招的角度说说如何准备Java后端大厂面试?

    插个题外话,为了写好这篇文章内容,我自己前前后后花了一周的时间来总结完善,文章内容应该适用于每一个学习 Java 的朋友!我觉得这篇文章的很多东西也是我自己写给自己的,比如从大厂招聘要求中我们能看到哪 ...

  3. 【分布式锁】01-使用Redisson实现可重入分布式锁原理

    前言 主流的分布式锁一般有三种实现方式: 数据库乐观锁 基于Redis的分布式锁 基于ZooKeeper的分布式锁 之前我在博客上写过关于mysql和redis实现分布式锁的具体方案:https:// ...

  4. java输入输出流操作同一资源实现覆盖引发冲突的解析

    一.问题发生的场景 题目:把s.txt中大写转成小写,小写转成大写,空格转成下划线,在输入到文件中覆盖之前的 前面的没有问题,问题出现在后面的覆盖文件上,输入流.输出流要操作同一个文件的问题 二.小白 ...

  5. 建议8:恰当选用if和switch

    相对来说下面几种情况更适合switch结构 枚举表达式的值.这种枚举是可以期望的,平行逻辑关系的 表达式的值具有离散性,不具有线性的非连续的区间值 表达式的值是固定的,不是动态变化的 表达式的值是有限 ...

  6. token iviewAdmin + php 登录验证解决方案

    思路: php 开启 Session 登录时 生成token,前端存下,然后每次走接口 验证下Session里的token和前端发过来的token是否一样. 遇到问题:后端 每次PHP Session ...

  7. WordCount程序(Java)

    Github项目地址:https://github.com/softwareCQT/web_camp/tree/master/wordCount 一.题目描述 实现一个简单而完整的软件工具(源程序特征 ...

  8. Natas33 Writeup(Phar反序列化漏洞)

    Natas33: 又是一个上传文件的页面,源码如下: // graz XeR, the first to solve it! thanks for the feedback! // ~morla cl ...

  9. Multi-batch TMT reveals false positives, batch effects and missing values(解读人:胡丹丹)

    文献名:Multi-batch TMT reveals false positives, batch effects and missing values (多批次TMT定量方法中对假阳性率,批次效应 ...

  10. 《吐血整理》Redis 性能优化的 13 条军规!史上最全

    Redis 是基于单线程模型实现的,也就是 Redis 是使用一个线程来处理所有的客户端请求的,尽管 Redis 使用了非阻塞式 IO,并且对各种命令都做了优化(大部分命令操作时间复杂度都是 O(1) ...