详解layui后台框架的搭建

layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。

layui 首个版本发布于2016年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。

一、从官网下载layui(可保存至任意盘符)

下载完成后,可以看到如下架构

├─css //css目录
│ │─modules //模块css目录(一般如果模块相对较大,我们会单独提取,比如下面三个:)
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css //核心样式文件
├─font //字体图标目录
├─images //图片资源目录(目前只有layim和编辑器用到的GIF表情)
│─lay //模块核心目录
│ └─modules //各模块组件
│─layui.js //基础核心库
└─layui.all.js //包含layui.js和所有模块的合并文件

二、从Git仓库下载layui 的完整开发包,以便于进行二次开发

下载地址:https://github.com/sentsin/layui/

三、 npm 安装(前提是要先安装node.js-----此操作见下节node.js的安装)

1.png

一般用于 WebPack 管理

四、完成以上操作后,新建一个项目(这里以MVC为案例)

然后将下载好的layui(完整移动,不要更改文件名以及其他信息)移至项目

2.png

3.png

五、现在已经部署好了layui,可以新建页面查看效果

在MVC中新建布局页(框架中有一部分内容是一样的,所以可以重复使用,故新建布局页,在其他项目中也可以新建母版页,用户控件等等)

地址:http://www.layui.com/demo/admin.html 将后台布局写好

4.png

选择获取布局代码,将代码贴至布局页中。

新建布局页和视图页,在布局页中内容主体区域要加@RenderBody()方法,其他项目不如此,如下

5.png

添加视图--

6.png

运行视图,可得到如下效果

7.png

在布局页中给列表一加上跳转链接--

8.png

新建FormTable视图(注意要添加布局页),加入其他元素,此处添加的表单元素,地址:http://www.layui.com/demo/form.html,选择查看代码将所要的代码贴至页面--

运行index.cshtml页面后,点击列表一,出现如下效果:

9.png

Image placeholder
前端答疑
未设置
  86人点赞

没有讨论,发表一下自己的看法吧

推荐文章
详解layui.layer独立组件

layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护、不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力。目前,laye

详解layui模块化与非模块化的不同引用方式

layui模块化与非模块化的不同引用方式:1、模块化与非模块化的区别layui中有许多不同的内置模块,如弹出层、日期与时间选择器、分页等不同模块。模块化:使用时加载相应的模块。非模块化:一次性加载所有

基于 Laravel 5.5 + H+UI 框架的权限管理后台

laravel玩的比较少,就自己写了管理系统来熟悉该框架,再次特地记录一下!目前功能只写了权限管理功能,如有不足之处,还请大拿们多多指教!介绍PHP框架:Laravel5.5 前端框架:H+后台主题U

js框架与css框架的区别?

js框架与css框架的区别?一、JavaScript框架●Javascript框架是指以Javascript语言为基础搭建的编程框架。●Javascript框架就是将常用的方法进行封装,方便调取使用。

jquery easyui和layui的区别是什么?

jqueryeasyuijQueryEasyUI是一组基于jQuery的UI插件集合体,而jQueryEasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复

layui是啥框架?

课程推荐:前端开发工程师--学习猿地精品课程 layui(谐音:类UI)是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不

一个很简单的PHP框架lyue

课程推荐:PHP开发工程师--学习猿地精品课程 项目空闲了两天就写了一下,目前只粗略写了一半,很多功能还确实后续慢慢完善。github地址lyue lyue,一个轻量级的phprestfulapi开发

搭建 Spring+SpringMVC+MyBatis 框架

SSM框架整合 pom中添加依赖 添加编辑Spring配置文件 添加编辑SpringMVC配置文件 添加编辑Mybatis配置文件 配置web.xml 1、pom中添加依赖 junit ju

Composer包管理工具精讲及搭建自己的PHP开发框架笔记

https://www.lmonkey.com/chapters/dvy9p2EKN/tasksComposer包管理工具精讲及搭建自己的PHP开发框架

jquery ui和easyui区别?

jqueryui和easyui区别?●jqueryui是jQuery插件,是由jQuery官方维护的UI方向的插件●easyui也是jQuery插件,是第三方维护的插件●jqueryui是免费的界面库

jquery easyui乱码怎么办?

jqueryeasyui乱码怎么办?之所以出现乱码是因为,我们在引入easyui以后,它里面的汉化包并没产生作用而汉化包没有发生作用的原因有:1.汉化包引入路径有问题,文件找不到404,这个很简单,只

layui封装模块基础教程

layui是国人开发的一款非常简洁的UI框架,使用了模块化加载方式,因此在使用过程中我们难免需要添加自己的模块,本教程就教大家封装一个简单的模块。平常使用中,ajax可以说使用广泛,所以这里我们添加一

layui table组件常见用法总结

table是layui最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右,支持拖拽改变列宽度,支持排序,支持多级表头

jquery easyui是什么?

jQueryEasyUI是基于JQuery的一个前台ui界面的插件,功能相对没extjs强大,但页面也是相当好看的,同时页面支持各种themes以满足使用者对于页面不同风格的喜好。一些功能也足够开发者

如何让layui支持es5?写法介绍

写js的时候会写一些es5的代码,但是打包到dist时,发现不支持语法,怎么办呢。两步添加es5支持:一、使用npm下载安装babel,进入gulpfile.js所在目录。$npminstall--s

jquery easyui和bootstrap的区别是什么?

JQueryEasyUIJQueryEasyUI是一组基于jQuery的UI插件集合体,而jQueryEasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复

layui 开源吗?

课程推荐:前端开发工程师--学习猿地精品课程 layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体

03.4. Go 的 http 包详解

前面小节介绍了Go怎么样实现了Web工作模式的一个流程,这一小节,我们将详细地解剖一下http包,看它到底是怎样实现整个过程的。 Go的http有两个核心功能:Conn、ServeMux Conn的g

详解 PHP 中的三大经典模式

单例模式 单例模式的含义:作为对象的创建模式,单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统全局地提供这个实例。它不会创建实例副本,而是会向单例类内部存储的实例返回一个引用。单例模式的三

详解 PHP 中的三大经典模式

单例模式 单例模式的含义:作为对象的创建模式,单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统全局地提供这个实例。它不会创建实例副本,而是会向单例类内部存储的实例返回一个引用。单例模式的三

详解 PHP 反射的基本使用

PHP反射 今天我要给大家讲解的是PHP当中使用非常普遍的高级操作:反射。反射在当今几乎所有的PHP框架或者工具中都占用非常重要的角色,就比如Laravel的容器,容器对于Laravel架构来说极其重

Redis为什么是单线程、及高并发快的3大原因详解

Redis的高并发和快速原因 1.redis是基于内存的,内存的读写速度非常快; 2.redis是单线程的,省去了很多上下文切换线程的时间; 3.redis使用多路复用技术,可以处理并发的连接。非阻塞

Swoft2 配置详解

Swoft2配置详解更多资料请关注swoft系列教程、小白系列教程定期连载基本功能介绍 配置项是只读的,不能动态修改.所以不要尝试着动态修改配置 Swoft2的配置分为两类,环境配置和应用配置。 en