Layui 简单介绍及入门

简介: Layui 简单介绍及入门

一.Layui   (国产品牌)

       1.1 Layui是什么

      用我的话来说就是  不仅拥有easyui丰富的组件库,还拥有bootstrap 的美观,嘿嘿

       layui是一套开源的 Web UI 解决方案,采用自身经典的模块化规范,并遵循原生 HTML/CSS/JS 的开发方式,极易上手,非常适合网页界面的快速开发。layui 区别于那些基于    MVVM 底层的前端框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,它更多是面向后端开发者,你无需涉足前端各种工具,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。

        由国人开发(作者贤心),16年出厂的框架,该框架有个极大的好处就是定义了很多前后端交互的样式接口,如分页表格,只需在前端配置好接口,后端则按照定义好的接口规则返回数据,即可完成页面的展示,极大减少了后端人员的开发成本

          但很可惜的是,该框架早在2021年就已经宣布下线,毕竟是开源的,所有的组件都是免费的,哈哈哈,但是又田螺好人全部复制了一份,也是有这么一个网站存在,市面上也有一些公司仍在使用中.....

官方网站:https://www.layui.com/(已下线)

参考地址:在线示例 - Layui (非官网)

二.比较layui和easyui,bootstrap的区别

       2.1 layui和bootstrap的对比

      layui是国人开发的一款轻量级的框架,2016年出来,现已更新到2.x版本,样式丰富好看简单。而bootstrap  相对于来说比较成熟,现已更新到4.x版本,而且大部分的人的知道了解。

       (1).两者的适用范围不一样  。

       layui 更偏向与后端开发人员使用,在服务端页面上有很好的效果,而且layui是提供给后端开发人员最好的ui框架,是基于DOM驱动,在实现前端交互上比较麻烦,页面的DOM需要查询DOM元素。

       (2) 大小不一样

       layui 轻量级 ,而bootsrap 因为成熟,所以使用方便,但是同时也是因为成熟,就显得有些冗余

       2.2 layui和easyui对比

     1.easyui 是非开源的,有需要解决的问题的话,就只能等官方更新了

     2.layui是开源的,社区比较活跃,解决问题还是比较快的

     3.easyui诞生的早些,所以功能相对完善一些,很多功能都能是比较健全的

     4.layui就相对来说少一些了,不过,功能都是像官网说的,精雕细琢

     5.layui更符合现在的审美

三.Layui入门

1.点击那个连接进去有很多下载方法

2.下载完后得到压缩包:

3.将js文件和css文件导入,即可使用,在Layui主页面 有尝试代码

如果运行界面能弹出 一个hello world 的按钮即为 Layui没问题就可以开始工作了

四.案例

用Layui做一个注册

其实这是Layui里面都有,我们直接复制过来即可,点击表单,右边会有很多模板,自己任意挑选就行

这是我复制的·界面

代码:用的ajax写的后台就是我运用的是前面我的文章中的自定义mvc写的,主要是前台,运用了ajax传值

 

相关文章
|
5月前
|
JSON 前端开发 JavaScript
惊艳!阿里开源 15.2k Star 企业级低代码引擎揭秘,如何变革前端开发方式?
阿里巴巴开源的 LowCodeEngine 是一款企业级低代码引擎,具备可视化编排、UI 渲染、代码生成等全链路能力。支持 React、Vue、Rax 等框架,提供高扩展性与类型安全,助力高效开发,降低维护成本,适用于后台系统、多端同步等场景。
956 1
|
Web App开发 Windows
【Windows】 chrome 如何下载网站在线预览PDF文件,保存到本地
【Windows】 chrome 如何下载网站在线预览PDF文件,保存到本地
1699 0
|
前端开发 JavaScript Android开发
React-Native优质开源项目
React-Native优质开源项目
|
前端开发 JavaScript
async和await的错误处理
在TypeScript中,`async`和`await`是处理异步操作的语法糖,能够让异步代码看起来像同步代码。`async`函数返回的总是`Promise`对象。当`await`后跟的表达式为`reject`状态的`Promise`时,会抛出错误,需要通过`try/catch`、链式`.catch()`或外部`Promise`包装来处理错误,防止代码崩溃。
529 0
async和await的错误处理
|
存储 Python
提升工作效率:获取任意月份的所有工作日
本文介绍了如何使用 Python 编写一个简单程序,以获取任意月份的所有工作日。通过 `datetime` 和 `calendar` 模块,程序能够准确地识别出每个月的周一至周五,帮助用户高效管理时间和任务。
432 6
|
存储 SQL 大数据
GLM(Generalized Linear Model)大模型-大数据自助查询平台
GLM(Generalized Linear Model)大模型-大数据自助查询平台
483 2
|
Java Maven 开发者
入职必会-开发环境搭建14-IDEA配置Maven
在 IDEA 中配置 Maven 可以帮助开发者更方便地管理项目依赖、构建项目和部署应用程序。要在 IDEA 中配置 Maven,可以按照以下步骤进行。
385 1
入职必会-开发环境搭建14-IDEA配置Maven
|
人工智能 API Apache
推荐3款开源、美观且免费的WinForm UI控件库
推荐3款开源、美观且免费的WinForm UI控件库
2263 6
|
JSON Go 数据库
Golang微服务框架居然可以开发单体应用?—— Kratos单体架构实践
微服务框架也是可以用于开发单体架构(monolith architecture)的应用。并且,单体应用也是最小的、最原始的、最初的项目状态,经过渐进式的开发演进,单体应用能够逐步的演变成微服务架构,并且不断的细分服务粒度。微服务框架开发的单体架构应用,既然是一个最小化的实施,那么它只需要使用到微服务框架最小的技术,也就意味着它只需要用到微服务框架最少的知识点,拿它来学习微服务框架是极佳的。
1497 0
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
363 1