layui框架教程

目录
  • LayUI
    • LayUI的特点
  • LayUI
    • 基本使用
    • 页面元素
      • 布局
    • 栅格系统
  • 响应式规则
  • 列边距：
  • 列偏移
  • 列嵌套
  • 基本元素
    • 按钮
    • 主题
      • 中间是空心：
      • 尺寸：
      • 流体自适应
      • 圆角
    • 图标
    • 导航
    • 垂直样式+侧边
    • 背景颜色
    • 徽章
    • 面包屑
    • 选项卡
    • 风格
    • 带删除
    • 表格
    • 风格
    • 表单
    • 输入框
    • 下拉框
    • 复选框
    • 开关
    • 单选框
    • 文本域
    • 组装行内表单
    • 忽略美化渲染
    • 方框效果
    • 弹出层

LayUI

layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，常适合网页界面的快速开发。layui 区别于那些基于MVVM 底层的前端框架，它更多是面向后端开发者，无需涉足前端各种工具，只需面对浏览器本身，让一切所需要的元素与交互。

LayUI的特点

1：layui属于轻量级框架，简单美观，适用于后端开发模式，它在服务端页面上有非常好的效果

2：layuu是提供给后端开发人员的ui框架，基于DOM驱动

LayUI

基本使用

1.下载layui

官网：https://layuion.com/

2.安装、引入依赖

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
		<script src="layui/layui.js" type="application/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<script>
		layui.use(['layer', 'form'], function(){
		  var layer = layui.layer
		  ,form = layui.form;

		  layer.msg('Hello World');
		});
		</script>
	</body>
</html>

需要声明使用的模块和回调函数，参照官方文档，选择自己想要的效果即可。

比如：

<script>
		layui.use(['element'], function(){
			var element = layui.element;
            //...
		});
	</script>

页面元素

布局

1.固定宽度--两边有空白常用

<div class="layui-container" style="background-color:navajowhite ;height: 300px;">
			固定宽度
		</div>

2.完整宽度--占据宽度的100%

<div class="layui-fluid" style="background-color:navajowhite ;height: 300px;">
			完整宽度
		</div>

栅格系统

采用layui-row来定义行

<div class="layui-row">
		</div>
  • 采用layui-col-md*这样的预设类来定义一组列（column）且放在行（row）内，其中

    • 变量md代表的是不同屏幕下的标记
    • 边浪*代表的是该列所占用的12等分（如6/12）可选值为1-12
    • 如果多个列的“等分数值”总和数等于12，刚好满行排布。如果大于12，若雨的列将自动另起一行
  • 列可以同时出现最多四中不同的组合，分别是xs（超小屏幕，如手机），sm（小屏幕，平板），md（桌面中等屏幕），lg（桌面大型屏幕）
  • 可对列追加类似的layui-col-space5，layui-col-md-offerset3这样的预设类来定义列的间距和偏移
  • 可以在类（column）元素中放入你自己的任意元素来填充内容
<div class="layui-container">
			<div class="layui-row">
				<div class="layui-col-md5" style="background-color: deepskyblue;">
					内容的5/12
				</div>
				<div class="layui-col-md7" style="background-color: bisque;">
					内容的7/12
				</div>
			</div>
			<div class="layui-row">
				<div class="layui-col-md4" style="background-color: powderblue;">
					内容的4/12
				</div>
				<div class="layui-col-md4" style="background-color: mediumaquamarine;">
					内容的4/12
				</div>
			</div>
		</div>

响应式规则

css媒体查询（Media Queries）的强力支持，从而针对不同尺寸的屏幕进行相应的适配处理。

类型 超小屏幕手机（<768px) 小屏幕手机（平板>=768px) 中等屏幕（桌面>=992px) 大型屏幕（桌面>=1200px
.layui-container的值 auto 750px 970px 1170px
标记 xs sm md lg
列对应类*为1-12的等分数值 layui-col-xs* layui-col-sm* layui-col-md* layui-col-lg*
总列数 12 12 12 12
相应行为 始终an设定的比例水平排列 在当前屏幕下水平排列，如果屏幕的大小低于临界值则堆叠排列 在当前屏幕下水平排列，如果屏幕的代销低于临界值则堆叠排列 在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列 
<div class="layui-row">
    <div class="layui-col-md5 layui-col-sm6">
        响应式规则
    </div>
</div>

列边距：

通过“列边距”的预设类，来设定之间的间距。且一行中最左的列不会出现左边距，最右边的列不会出现右边距。列边距在保证排版美观的同时，还可以进一步保持分列的宽度精细程度。我们结合网页常用的边距，预设了12中不同的尺寸的边距。

/* 支持列之间为1px-30px的区间的所有双数间距，以及1px，5px，15px，25px的单数间隔 */
layui-col-space1
layui-col-space2
layui-col-space4
layui-col-space5
layui-col-space6
.....
<div class="layui-row layui-col-space10">
		<div class="layui-col-md4" style="background-color: ghostwhite;"><div style="background-color: white;">4</div></div>
		<div class="layui-col-md4" style="background-color: powderblue;">4</div>
		<div class="layui-col-md4" style="background-color: mediumaquamarine;">4</div>
	</div>

注：

1.layui-col-space，设置后起不到作用因为设置的是padding也就是说向内缩，所以设置背景色padding也是会填上颜色，看起来好像没有间距一样，可以再里面在加一个div，来达到目的。

2.间距一般不高于30px，如果超过30，建议使用列偏移

列偏移

​对列最佳类似layui-col-md-offset* 的预设类，从而让列向右偏移。其中*代表的是偏移占据的列数，可选中为1-12

如：layui-col-md-offset3，即和代表在“中型桌面屏幕下，让该列向右偏移3个列表宽度

<div class="layui-row ">
		<div class="layui-col-md4" style="background-color: ghostwhite;"><div style="background-color: white;">4</div></div>
		<div class="layui-col-md4 layui-col-md-offset2" style="background-color: powderblue;">4</div>
	</div>

注：

​列偏移可针对不同屏幕的标准进行设定，在当前设定屏幕下最有效，当低于桌面屏幕的规定的临界值，就会堆叠排列。

列嵌套

可以对栅格进行无穷层次的嵌套。在列元素(layui-col-md*)中插入行元素（layui-row），即可完成嵌套。

<div class="layui-container">
			<div class="layui-row">
				<div class="layui-col-md6">
					<div style="background-color: darkturquoise;">
						<div class="layui-row">
							<div class="layui-col-md5" style="background-color: seashell;">内部5</div>
							<div class="layui-col-md5" style="background-color: mistyrose;">内部5</div>
							<div class="layui-col-md2" style="background-color: aqua;">内部5</div>
						</div>
					</div>
				</div>
			</div>
		</div>

基本元素

按钮

​向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其他按钮风格。

主题

名称 组合
原始 class="layui-btn layui-btn-primary"
默认 class="layui-btn"
百搭 class="layui-btn layui-btn-normal"
暖色 class="layui-btn layui-btn-warm"
警告 class="layui-btn layui-btn-danger"
禁用 class="layui-btn layui-btn-disabled"

中间是空心：

名称 组合
主色 class="layui-btn layui-btn-primary layui-border-green"
百搭 class="layui-btn layui-btn-primary layui-border-blue"
暖色 class="layui-btn layui-btn-primary layui-border-orange"
警告 class="layui-btn layui-btn-primary layui-border-red"
深色 class="layui-btn layui-btn-primary layui-border-black"

尺寸：

尺寸 组合
大型 class="layui-btn layui-btn-lg"
默认 class="layui-btn"
小型 class="layui-btn layui-btn-sm"
迷你 class="layui-btn layui-btn-xs"
尺寸 组合
大型百搭 class="layui-btn layui-btn-lg layui-btn-normal"
正常暖色 class="layui-btn layui-btn-warm"
小型警告 class="layui-btn layui-btn-sm layui-btn-danger"
迷你禁用 class="layui-btn layui-btn-xs layui-btn-disabled"

流体自适应

<button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>

圆角

主题 组合
原始 class="layui-btn layui-btn-radius layui-btn-primary"
默认 class="layui-btn layui-btn-radius"
百搭 class="layui-btn layui-btn-radius layui-btn-normal"
暖色 class="layui-btn layui-btn-radius layui-btn-warm"
警告 class="layui-btn layui-btn-radius layui-btn-danger"
禁用 class="layui-btn layui-btn-radius layui-btn-disabled"
尺寸 组合
大型百搭 class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal"
小型警告 class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger"
迷你禁用 class="layui-btn layui-btn-xs layui-btn-radius layui-btn-disabled"

图标

<button type="button" class="layui-btn">  <i class="layui-icon layui-icon-down layui-font-12"></i> 按钮</button> <button type="button" class="layui-btn layui-btn-sm layui-btn-primary">  <i class="layui-icon layui-icon-left"></i></button>

默认按钮 样式 大小 圆角 流动自适应

**i 图标 样式 **

导航

​导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，面包屑结构简单、支持自定义分隔符

​依赖加载的模块：element

实现的步骤：

引入的资源：

<link rel="stylesheet" href="layui/css/layui.css"/>
		<script type="application/javascript" src="layui/layui.js"></script>
  • class=“layui-nav”
  • class=“layui-nav-item”--class=“layui-nav-item layui-this”选中
    • class="layui-nav-child" 二级菜单

例子：

<ul class="layui-nav" lay-filter="">
		  <li class="layui-nav-item"><a href="">最新活动</a></li>
		  <li class="layui-nav-item layui-this"><a href="">产品</a></li>
		  <li class="layui-nav-item"><a href="">大数据</a></li>
		  <li class="layui-nav-item">
		    <a href="javascript:;">解决方案</a>
		    <dl class="layui-nav-child"> <!-- 二级菜单 -->
		      <dd><a href="">移动模块</a></dd>
		      <dd><a href="">后台模版</a></dd>
		      <dd><a href="">电商平台</a></dd>
		    </dl>
		  </li>
		  <li class="layui-nav-item"><a href="">社区</a></li>
	</ul>

垂直样式+侧边

class="layui-nav layui-nav-tree layui-nav-side"

背景颜色

样式往后加：layui-bg-orange

徽章

直接对应往后加

面包屑

<span class="layui-breadcrumb">
    <a href="">首页</a>
    <a href="">国际新闻</a>
    <a href="">亚太地区</a>
    <a><cite>正文</cite></a>
</span>
  • 选中
  • 通过设置属性 lay-separator="-" 来自定义分隔符

选项卡

引入资源:

<link rel="stylesheet" href="layui/css/layui.css"/>
		<script type="application/javascript" src="layui/layui.js"></script>
  • class="layui-tab"
<div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理</li>
    <li>权限分配</li>
    <li>商品管理</li>
    <li>订单管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容1</div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item">内容3</div>
    <div class="layui-tab-item">内容4</div>
    <div class="layui-tab-item">内容5</div>
  </div>
</div>

风格

默认风格：

  • layui-tab

简洁风格追加样式：

  • layui-tab-brief

卡片风格追加样式：

  • layui-tab-card

带删除

对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除

表格

<table class="layui-table" lay-even>
	  <colgroup>
	    <col width="150">
	    <col width="200">
	    <col>
	  </colgroup>
	  <thead>
	    <tr>
	      <th>昵称</th>
	      <th>加入时间</th>
	      <th>签名</th>
	    </tr>
	  </thead>
	  <tbody>
	    <tr>
	      <td>贤心</td>
	      <td>2016-11-29</td>
	      <td>人生就像是一场修行</td>
	    </tr>
	    <tr>
	      <td>许闲心</td>
	      <td>2016-11-28</td>
	      <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
	    </tr>
	  </tbody>
</table>
  • 添加属性 lay-even 隔行换色

风格

静态表格支持以下基础属性，可定义不同风格/尺寸的表格样式：

属性名 属性值 备注
lay-even 无 用于开启 隔行 背景，可与其它属性一起使用
lay-skin="属性值" line （行边框风格） row （列边框风格） nob （无边框风格） 若使用默认风格不设置该属性即可
lay-size="属性值" sm （小尺寸） lg （大尺寸） 若使用默认尺寸不设置该属性即可

表单

常用属性

  • equired 浏览器固定的必填字段
  • lay-verify="required" 需要验证的类型（required 表示为必填字段）
  • class=“layui-input” 提供的通用样式

文本框：

  • placeholder 当文本框为空时默认显示的文本信息
  • autocomplete 表单元素是否自动填充，当浏览器中缓存有相同name值是会自动填充

引入依赖

<link rel="stylesheet" href="layui/css/layui.css"/>
<script type="application/javascript" src="layui/layui.js"></script>
  • form 模块

1.给定form容器

class=“layui-form”

<form class="layui-form" action="">
</form>

2.基本的行区块结构，它提供了相应是的支持，可以换成其他结构，但必学要在外层容器中定义class=“layui-form”，form模块才能正常工作

<form class="layui-form">
			<div class="layui-form-item">
			    <label class="layui-form-label">标签区域</label>
			    <div class="layui-input-block">
			        <input type="text" name="tite" class="layui-input"/>
			    </div>
			</div>
		</form>
  • class="layui-input-block" 一整行
  • class="layui-input-inline" 行内

输入框

<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
  • required：注册浏览器所规定的必填字段
  • lay-verify：注册form模块需要验证的类型
  • class="layui-input"：layui.css提供的通用CSS类

下拉框

<select name="city" lay-verify="required">
  <option value="">请选择一个城市</option>
  <option value="010">北京</option>
  <option value="021">上海</option>
  <option value="0571">杭州</option>
</select>
  • 通过selected=“selected”设置默认选项
  • disabled属性设置禁用
  • 通过option设置分组
  • 设置lay-search属性开启搜索功能
<select name="quiz">
	 <option value="">请选择</option>
	<optgroup label="城市记忆">
	 <option value="你工作的第一个城市">你工作的第一个城市？</option>
	</optgroup>
	<optgroup label="学生时代">
	 <option value="你的工号">你的工号？</option>
	<option value="你最喜欢的老师">你最喜欢的老师？</option>
	 </optgroup>
</select>

复选框

默认风格：
<input type="checkbox" name="" title="写作" checked>
<input type="checkbox" name="" title="发呆">
<input type="checkbox" name="" title="禁用" disabled> 

原始风格：
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
<input type="checkbox" name="" title="发呆" lay-skin="primary">
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
  • 属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）
  • 属性checked可设定默认选中
  • 属性lay-skin可设置复选框的风格
  • 设置value="1"可自定义值，否则选中时返回的就是默认的on

开关

其实就是checkbox复选框的“变种”，通过设定 lay-skin="switch" 形成了开关风格

<input type="checkbox" name="xxx" lay-skin="switch">
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
<input type="checkbox" name="aaa" lay-skin="switch" disabled>
  • 属性checked可设定默认开
  • 属性disabled开启禁用
  • 属性lay-text可自定义开关两种状态的文本 （打开的值|关闭的值）
  • 设置value="1"可自定义值，否则选中时返回的就是默认的on

单选框

<input type="radio" name="sex" value="nan" title="男">
<input type="radio" name="sex" value="nv" title="女" checked>
<input type="radio" name="sex" value="" title="中性" disabled>
  • 属性title可自定义文本
  • 属性disabled开启禁用
  • 设置value="xxx"可自定义值，否则选中时返回的就是默认的on

文本域

<textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>

组装行内表单

div class="layui-form-item">

  <div class="layui-inline">
    <label class="layui-form-label">范围</label>
    <div class="layui-input-inline" style="width: 100px;">
      <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid">-</div>
    <div class="layui-input-inline" style="width: 100px;">
      <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
    </div>
  </div>

  <div class="layui-inline">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-inline" style="width: 100px;">
      <input type="password" name="" autocomplete="off" class="layui-input">
    </div>
  </div>

</div>
  • class="layui-inline"：定义外层行内
  • class="layui-input-inline"：定义内层行内

忽略美化渲染

<select lay-ignore>
  <option>…</option>
</select>
  • lay-ignore

方框效果

通过追加 layui-form-pane 的class，来设定表单的方框风格。内部结构不变。

<form class="layui-form layui-form-pane" action="">
  内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性（否则会看起来比较别扭），如：
  <div class="layui-form-item" pane>
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男">
      <input type="radio" name="sex" value="女" title="女" checked>
    </div>
  </div>
</form>

弹出层

引入依赖：

<link rel="stylesheet" href="layui/css/layui.css"/>
	<script type="application/javascript" src="layui/layui.js"></script>

模块化：

  • layer

layer 作为 Layui 的代表性组件 ，比 Layui 要出现的早，作为 Layui 最早的源动力，layer 的使用之广泛甚至一度超过了 Layui 本身。 layer 拥有众多的自定义功能，也是许多开发者的网页弹出层的首选交互方案，在各类场景都能发挥重要作用。

场景 用前准备
1. 作为独立组件使用 如果你只是单独想使用 layer，你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8 以上的任意版本，并引入layer.js。
2. 作为 layui 组件使用 如果你使用的是 layui，那么你直接在官网下载 layui 框架即可，无需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js

到此这篇关于layui框架教程的文章就介绍到这了,更多相关layui使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • layui页面级弹出框的实现

    layui页面级弹出框的实现

    home/Index.cshtml @{ ViewData["Title"] = "Home Page"; } <script> layui.use(['layer','form'], function(){ var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句 var form = layui.form; //触发事件 var active = { test: function(){

  • layUI布局使用教程

    目录 layui特点 layui的使用 1.页面元素 1.1布局 1.1.1固定宽度(两侧有留白效果) 1.1.2完整宽度(占据屏幕宽度的100%) 1.2.栅格系统 1.2.1栅格布局规划 1.2.2响应式规则 1.2.3列间距 1.2.4列偏移 1.2.5列嵌套 layui特点 (1)layui属于轻量级框架,简单美化.是用于开发后端模式,它在服务端页面上有非常好的效果. (2)layui是提供给后端开发人员的ui框架,基于DOM驱动. layui的使用 引入layui的核心css文件 <l

  • 基于layui框架响应式布局的一些使用详解

    写在前面的 因为公司的需要,这几天学习了layui框架,稍微有一些心得.介绍就不多说,贴上官网的说明文档,目前是2.0版本,上面有很详细的介绍. 官网地址:https://www.layui.com/doc/element/layout.html 简单的布局 layui的响应式使用十分简单,虽然官网写了很多很详细,但某种意义上增加了新手学习的难度和劝退的可能.但其实总结下来如何使用响应式布局就几个步骤: 第一,在第一个div设置一个布局类 ,通常我只使用两个类,分别是:layui-contain

  • layui中的tab控件点击切换触发事件

    layui中的tab控件点击切换触发事件

    目录 tab控件点击切换触发事件 方法一 方法二 layui选项卡无法切换 解决 tab控件点击切换触发事件 在layui中使用到tab控件,如果不想在页面加载时就加载所有tab的界面,而是点击某个tab再加载对应的数据,可以使用tab 的点击事件. 方法一 这个方法是我最初在网上找的使用方法. 非IE浏览器 //切换tab 调用不同的方法 layui.use('element', function(){ var $ = jQuery = layui.jquery; var element =

  • layui的布局和表格的渲染以及动态生成表格的方法

    整体的效果: 一.首先百度搜索layui的地址,然后下载layui的压缩包,,将压缩包的文件解压缩,然后将解压缩后的文件复制到你的编译器上: 二.建立一个html文件,引入layui.css 和 layui.js两个文件,一定要将地址写对,css和js要一起引用: 三.将整个页面分为三部分body标签中要引用的class为class="layui-layout-body" 3.1.头部部分:用一个大的div包裹,class="layui-layout layui-layout

  • layui框架教程

    目录 LayUI LayUI的特点 LayUI 基本使用 页面元素 布局 栅格系统 响应式规则 列边距: 列偏移 列嵌套 基本元素 按钮 主题 中间是空心: 尺寸: 流体自适应 圆角 图标 导航 垂直样式+侧边 背景颜色 徽章 面包屑 选项卡 风格 带删除 表格 风格 表单 输入框 下拉框 复选框 开关 单选框 文本域 组装行内表单 忽略美化渲染 方框效果 弹出层 LayUI layui(谐音:类 UI) 是一套开源的 Web UI 解决方案,采用自身经典的模块化规范,并遵循原生 HTML/CS

  • layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例

    本文实例讲述了layui框架实现文件上传及TP3.2.3对上传文件进行后台处理操作.分享给大家供大家参考,具体如下: layui框架是1.0.9版本.. 首先html页面代码如下: <div class="layui-form-item" id="upload_file"> <div class="layui-input-block" style="width: 300px;"> <input t

  • YII Framework框架教程之国际化实现方法

    本文讲述了YII Framework框架教程之国际化实现方法.分享给大家供大家参考,具体如下: 一个web应用,发布到互联网,就是面向全球用户.用户在世界的各个角落都可以访问到你的web应用,当然要看你的网站和不和谐,不和谐的web应用在和谐社会是不让你访问的. YII提供了国际化的支持,可以让我们创建的应用适合不同语言的人群. 国际化是一个很花哨的东西,没有哪个大型的网站真正能做到国际化.大多都是针对不懂的语言,不同地区设计不同的网站.如果你的应用相对较小,处理的东西不多,那么国际化起来的东西

  • layui框架中layer父子页面交互的方法分析

    本文实例讲述了layui框架中layer父子页面交互的方法.分享给大家供大家参考,具体如下: layer是一款近年来备受青睐的web弹层组件,官网地址是:http://layer.layui.com/ 可以从官网上下载最新版本. 还可点击此处本站下载. 当layer以iframe层的方式弹出新的窗口(子页面),如何在子页面中访问父页面的元素和函数. 1.访问父页面元素值 var parentId=parent.$("#id").val();//访问父页面元素值 2.访问父页面方法 va

  • 使用eclipse + maven一步步搭建SSM框架教程详解

    使用eclipse + maven一步步搭建SSM框架教程详解

    SSM (SSM 框架集) SSM(Spring+SpringMVC+MyBatis)框架集由Spring.SpringMVC.MyBatis三个开源框架整合而成,常作为数据源较简单的web项目的框架. 其中spring是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架. SpringMVC分离了控制器.模型对象.分派器以及处理程序对象的角色,这种分离让它们更容易进行定制. MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架. 0.系统环境 1)Windows

  • CI框架教程之优化验证码机制详解【验证码辅助函数】

    本文实例讲述了CI框架教程之优化验证码机制.分享给大家供大家参考,具体如下: 验证码机制在CI框架中是通过一个辅助函数captcha()进行实现的--验证码辅助函数文件包含了一些帮助你创建验证码图片的函数.. 那么我们如何使用CI的captcha()辅助函数来完成验证码功能呢?下面我会先讲述如何使用CI的captcha()辅助函数来完成验证码功能,然后在讲述如何具体的对CI框架的验证码机制进行优化. 1.CI框架验证码功能的使用 a)  首先我们要先加载辅助函数 加载辅助函数一共有两种方法: ①

  • 详解如何在vue项目中使用layui框架及采坑

    根据官网的文档,要在一个html文件下使用layui里面的组件库其实很简单,但是在vue项目中使用该ui库却存在着很多坑,下面我们就详细讲解一下如何在vue-cli搭建的项目下使用layui 1.第一个坑:vue项目中使用npm安装引入时报错(目前并没有找到引入的合适的方式,知道的可以留言探讨) 在官网中我们可以看到他提到支持npm安装,但是当我们安装成功后,在main.js中引入时却报并不能找到该模块的错. 所以,我们先下载文件包,然后在html文件中用link和script标签的方式引入 2

  • 浅谈layui框架自带分页和表格重载的接口解析问题

    首先要了解框架分页自带的参数有哪些,特别是注意参数名称要和后台一致! **需要注意的是layui框架的数据解析格式问题,data必须是个数组对象的形式才能正常解析否则会很麻烦(亲测过非正常解析,手写js手动动态添加表格) data 格式例如: { "count": 11, "code": 0, "msg": "", "data": [ { "id": "1", &qu

  • layui框架与SSM前后台交互的方法

    采用layui前台框架实现前后台交互,数据分页显示以及删除操作,具体方式如下: 一.数据分页显示 1.前端 (1)html页面 <!--轮播数据分页显示--> <table class="layui-hide" id="content_lbt" lay-filter="content_lbt_filter"></table> (2)请求渲染数据 $(function() { /*轮播数据分页显示*/ layui

随机推荐