详解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


推荐文章
layui有什么功能?

layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到API的每一处细

layuiadmin是什么呀?

layuiAdmin是一种采用layui自建的纯前端MVC架构而成的后台模板系统开发框架,而不仅限于模板。layuiAdmin全面接管视图和路由,并自主完成数据渲染,服务端只负责数据接口,因此这赋予了

浅谈layui文件上传、预览及修改

单文件上传1、HTML 上传客服二维码 * 开始上传 温馨提示:每次最多上传一张图片,单张图片的大小不超过2MB 2、js部分varform=layui.for

layui同页面如何显示多种时间样式?

Layui时间模块同页面显示多种时间样式layui时间模块主要以:年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器等五种类型的选择方式为基本核心,并且均支持范围选择(即双控件)。代码如下:

浅谈layui中iframe跳转链接和页面按钮跳转相关问题

一、导航跳转iframe页面问题:关于layui的iframe嵌套页面的导航跳转页面问题,如下图所示可以看到效果:在模板页的导航代码: 所有商品 商品列表 商品属性 商品分类 添加 解决方案

layui怎么设置时间选择框?

Layui中时间格式的输入框:html代码: 选择日期: -- - js代码:layui.use(['layer','form','table','laydate'],function()

前端layui框架快速上手

一、介绍在使用layui之前,我们先要了解一下layui是什么?我觉得用作者贤心的一句话来概括就好了:为后端程序员设计的前端框架。更加详细的描述是:这是一个封装了各种css和js、Ajax等等的前端框

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

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

怎么将layui引入开发框架中?

将layui导入开发框架的方法:1、下载框架包(http://www.layui.com/)2、将layui文件夹拷入项目位置3、页面中导入layui.all.jslayui.css和jquery即可

浅谈layui中table的sort排序

今天来谈谈tablesort的那点事。预告一下,目的是做到前台排序还有服务器排序区分开,目前的table的分页实际是比较“乱”的,相信很多用的有一段时间的特别是做server排序的同学都会多多少少遇到

layui算是前端框架吗?

layui首个版本发布于2016年秋,她区别于那些基于MVVM底层的UI框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对

layui中的layer怎么进行宽高设置?

layui中的layer模块可以使用area设置宽高。类型:String/Array,默认:'auto'在默认状态下,layer是宽高都自适应的,但当你只想定义宽度时,你可以area:'500px',

layui是什么时候开发的?

layui(谐音:类UI)是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到

layui如何实现表格反转?简单实现方式介绍

表格反转,或者叫行列转换,估计都不陌生,先看效果图:测试页面:https://sun_zoro.gitee.io/layuitableplug/testTableCheckboxDisabled相对标

layui如何获取table某一行的值?

layui中可以使用table.checkStatus('ID')方法获取table某一行的值,其中ID为基础参数。【自动化渲染】……【方法渲染】table.render({//其它参数省略 id:'

浅谈Layui如何实现input输入和选择

Layui实现input输入和选择的方法:HTML代码: 移交单位* 111 222 333 444 555 其中input的几个style样式简单说一下。position:absolu

layui之弹出form表单以及提交

第一步:引用两个文件第二步:点击删除按钮弹出提示框/*删除开始*/ $(".del").click(function(){ varid=$(this).attr("id"); layer.alert(

浅谈layui数据表格的基础使用

表格展示神器之一:layui表格前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstraptable、layuitable、ea

浅谈layui中使用函数layui.define的方法

前言:1、如果你深刻理解并合理运用layui.define,那么本篇对你来说有点浪费时间了。2、如果你对于“Javascript模块化开发”听都没听过,更别说还要理解它。那么建议可以先在网络上找找什么

layui表格数据变更的一种处理方式

表格数据变更,一般包括几个内容:新增、修改、删除、移动,开发中经常会面临的一个问题就是变更之后如何将数据同步到节点上,一直以来个人的建议还是利用表格重载,不管是url模式的还是data模式的实际都是需