layui经典模块化前端UI框架初识
layui产生背景
layui相对于vue来说确实稍有逊色,但是官网提供的入门文档以及完善的框架结构,使的很多人开始用layui来开发前端页面,那么什么人会去使用layui呢?
- 针对后端开发人员,在对前端知之甚少的情况下需要自行开发前端页面
- 前后端数据动态交互要求较低的前端开发工程师
- 测试开发工程师
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的精髓内容:
从展示页面来看主要提及到如下功能:
- layui文档
- 后台模板
- layui在线
- layui插件
- layui教程
- 网页聊天
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框架初识的更多相关文章
- Layui 是一款采用自身模块规范编写的国产前端UI框架(5600个Star)
采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写形式,极低门槛,拿来即用. http://www.layui.com Layui 是一款采用自身模块规范编写的国产前端UI框架, ...
- 前端UI框架小汇总
前言: 近期,小弟根据GitHub.前端社区.掘金等平台对当前流行的前端UI框架的进行了小小的整理和汇总(ps:前端UI框架的应用是通过GitHub star数,社区热度和使用范围等进行的粗略的汇总[ ...
- 前端UI框架选择区别对比推荐
UI选择务必慎重,货比三家. 弱水三千只取一瓢:弱水三千只取一瓢,源起佛经中的一则故事,警醒人们在一生中可能会遇到很多美好的东西,但只要用心好好把握住其中的一样就足够了 老牌构建于jQuery框架之上 ...
- 常见前端UI框架
祈澈姑娘 程序员一枚 本文作者祈澈姑娘,转载请声明 前端的技术日渐更新,最近得空,将前端常见的框架总结了一下,在开发的过程之中,有了这些,不断能够提高自己的工作效率,还可以在工作之余了解更多. 1.L ...
- 推荐几个精致的web UI框架及常用前端UI框架
1.Aliceui Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS 的更好方式. git ...
- 前端UI框架搜集
网址:https://blog.csdn.net/will5451/article/details/80652429?utm_source=blogxgwz6 网址:https://www.cnblo ...
- 前端UI框架和JS类库
一.前端框架库: 1.Zepto.js 地址:http://www.css88.com/doc/zeptojs/ 描述:Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jqu ...
- 2015年最全的移动WEB前端UI框架
目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了.在移动WEB开发的过程中,使用合适的移动WEB UI框架可以大大提升我们的开发效率.下面P ...
- web前端UI框架
分类:WEB前端 时间:2016年1月13日 目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了.在移动WEB开发的过程中,使用合适的移动WE ...
随机推荐
- Flink消费Kafka到HDFS实现及详解
1.概述 最近有同学留言咨询,Flink消费Kafka的一些问题,今天笔者将用一个小案例来为大家介绍如何将Kafka中的数据,通过Flink任务来消费并存储到HDFS上. 2.内容 这里举个消费Kaf ...
- 4000字干货长文!从校招和社招的角度说说如何准备Java后端大厂面试?
插个题外话,为了写好这篇文章内容,我自己前前后后花了一周的时间来总结完善,文章内容应该适用于每一个学习 Java 的朋友!我觉得这篇文章的很多东西也是我自己写给自己的,比如从大厂招聘要求中我们能看到哪 ...
- 【分布式锁】01-使用Redisson实现可重入分布式锁原理
前言 主流的分布式锁一般有三种实现方式: 数据库乐观锁 基于Redis的分布式锁 基于ZooKeeper的分布式锁 之前我在博客上写过关于mysql和redis实现分布式锁的具体方案:https:// ...
- java输入输出流操作同一资源实现覆盖引发冲突的解析
一.问题发生的场景 题目:把s.txt中大写转成小写,小写转成大写,空格转成下划线,在输入到文件中覆盖之前的 前面的没有问题,问题出现在后面的覆盖文件上,输入流.输出流要操作同一个文件的问题 二.小白 ...
- 建议8:恰当选用if和switch
相对来说下面几种情况更适合switch结构 枚举表达式的值.这种枚举是可以期望的,平行逻辑关系的 表达式的值具有离散性,不具有线性的非连续的区间值 表达式的值是固定的,不是动态变化的 表达式的值是有限 ...
- token iviewAdmin + php 登录验证解决方案
思路: php 开启 Session 登录时 生成token,前端存下,然后每次走接口 验证下Session里的token和前端发过来的token是否一样. 遇到问题:后端 每次PHP Session ...
- WordCount程序(Java)
Github项目地址:https://github.com/softwareCQT/web_camp/tree/master/wordCount 一.题目描述 实现一个简单而完整的软件工具(源程序特征 ...
- Natas33 Writeup(Phar反序列化漏洞)
Natas33: 又是一个上传文件的页面,源码如下: // graz XeR, the first to solve it! thanks for the feedback! // ~morla cl ...
- Multi-batch TMT reveals false positives, batch effects and missing values(解读人:胡丹丹)
文献名:Multi-batch TMT reveals false positives, batch effects and missing values (多批次TMT定量方法中对假阳性率,批次效应 ...
- 《吐血整理》Redis 性能优化的 13 条军规!史上最全
Redis 是基于单线程模型实现的,也就是 Redis 是使用一个线程来处理所有的客户端请求的,尽管 Redis 使用了非阻塞式 IO,并且对各种命令都做了优化(大部分命令操作时间复杂度都是 O(1) ...