LayUI入门

Ar.小白

已于 2023-07-11 11:38:14 修改

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： layui 前端 javascript

于 2023-07-11 11:36:42 首次发布

本文链接：https://blog.youkuaiyun.com/liaozhixiangjava/article/details/131655558

LayUI是一个开源的前端框架，提供简单、高效、模块化的开发方案。它包括丰富的UI组件，如表格、表单、导航等，支持响应式布局和主题定制。文章介绍了LayUI的用途，如界面构建、提高开发效率，以及如何使用LayUI进行快速开发，包括下载、引入和使用组件。此外，还对比了LayUI与其他框架如EasyUI和Bootstrap的特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

LayUi和easyUI,Bootstrap对比

LayUi实现登录

LayUI介绍

Layui是一个开源的前端框架，它致力于提供简单、易用、高效的前端开发解决方案。它基于HTML5和CSS3技术，采用模块化的设计理念，提供了丰富的组件和工具，可以帮助开发者快速构建美观、功能强大的Web界面。

Layui的特点包括：

1. 简单易用：Layui提供了简洁明了的API接口和文档，开发者可以快速上手并轻松构建页面。

2. 模块化设计：Layui采用了模块化的开发方式，将功能划分为多个独立的模块，开发者可以按需引入和使用，提高了代码的复用性和可维护性。

3. 丰富的组件：Layui提供了大量常用的UI组件，如表格、表单、分页、导航等，开发者可以直接使用这些组件，无需自己编写大量的样式和代码。

4. 响应式布局：Layui支持响应式布局，可以根据不同设备的屏幕大小和分辨率自动调整页面的布局和样式，确保在不同设备上都能有良好的显示效果。

5. 主题定制：Layui提供了多样化的主题选择和定制功能，可以根据自己的需求定制页面的样式和配色，使页面更加符合项目的风格。

总体而言，Layui是一个简洁、灵活且功能强大的前端框架，它能够帮助开发者快速构建出美观、高效的Web界面。

LayUI是什么？

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于 2016 年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

LayUI的作用

Layui作为一款前端UI框架，具有以下作用：

1. 界面构建：Layui提供了大量的UI组件，如表格、表单、导航、弹层、轮播等，开发者可以通过调用这些组件来快速构建出美观、功能完善的界面。这些组件经过了精心设计和优化，具有良好的交互体验和美观的样式。

2. 提高开发效率：Layui采用了模块化的开发方式，将功能划分为多个独立的模块，开发者可以按需引入和使用。这样设计可以提高代码的可复用性和可维护性，同时减少了冗余代码的加载，提高了开发效率。

3. 响应式布局：Layui支持响应式布局，可以根据不同设备的屏幕大小和分辨率自动调整页面的布局和样式，以适应不同的终端设备，包括电脑、平板和手机等。这样可以提供更好的用户体验，使网站在不同设备上都有良好的显示效果。

4. 主题定制：Layui提供了多样化的主题选择和定制功能，开发者可以根据项目需求调整页面的配色和风格，使界面更符合项目的需求。这样可以让开发者快速定制出自己所需的风格，减少开发时间和工作量。

总而言之，Layui的作用是帮助开发者快速构建出美观、功能完善的前端界面，同时提高开发效率和用户体验。它简化了前端开发的流程，使开发者能够更加专注于业务逻辑的实现，而不必花费过多精力在UI的设计和实现上。

怎么使用LayUI

要使用Layui，您可以按照以下步骤进行：

1. 下载和引入Layui：您可以从Layui官方网站 (http://layui.org.cn/index.html) 上下载Layui的压缩包，解压后将其中的layui文件夹拷贝到您的项目目录中。然后，在您的HTML文件中引入Layui的样式和脚本文件，例如：

html
<link rel="stylesheet" href="path/to/layui/css/layui.css">
<script src="path/to/layui/layui.js"></script>

2. 初始化Layui：在引入Layui后，您需要使用`layui.use()`方法来初始化Layui，并指定需要使用的模块。例如，要使用表格组件和表单组件，可以将以下代码放在`<script>`标签中：

html
<script>
layui.use(['table', 'form'], function() {
  var table = layui.table;
  var form = layui.form;
  
  // 这里可以编写使用表格和表单的代码
  // ...
});
</script>

3. 使用Layui组件：通过上述步骤初始化后，您就可以在代码中使用Layui的各个组件了。例如，使用表格组件渲染一个简单的表格：

html
<table id="demo" lay-filter="test"></table>

<script>
layui.use('table', function() {
  var table = layui.table;
  
  table.render({
    elem: '#demo',
    url: 'your/data/url', // 数据接口
    cols: [[
      {field: 'id', title: 'ID', width: 80},
      {field: 'name', title: '姓名'},
      {field: 'age', title: '年龄'},
    ]]
  });
});
</script>

以上是一个简单的示例，您可以根据具体需要，使用Layui提供的各个组件和API来开发您的界面和功能。

官方网站

Layui - 经典开源模块化前端 UI 组件库(官方开发文档)http://layui.org.cn/index.html

官方文档

Layui 开发使用文档 - 入门指南https://layui.org.cn/doc/index.html

LayUi和easyUI,Bootstrap对比

Layui、EasyUI和Bootstrap都是流行的前端UI框架，它们各自有其优点和缺点，下面是它们的对比：

优点:

Layui：
1. 简洁易用：Layui的设计理念是简洁易用，提供了简单明了的API接口和文档，使开发者能够快速上手。

2. 模块化设计：Layui采用了模块化的开发方式，可以按需引入和使用模块，提高代码复用性和可维护性。

3. 响应式布局：Layui支持响应式布局，可以自动适应不同设备的屏幕大小和分辨率，提供更好的用户体验。

4. 主题定制：Layui提供了主题选择和定制功能，可以根据项目需求调整页面的配色和风格。

EasyUI：
1. 丰富的组件：EasyUI提供了非常丰富的UI组件，包括表格、表单、对话框、树形菜单等，涵盖了大部分常用的界面组件。

2. 完善的文档和示例：EasyUI拥有完善的文档和示例，方便开发者学习和参考，减少开发过程中的疑惑和困惑。

3. 兼容性好：EasyUI在兼容性方面表现较好，支持多种浏览器和设备，可以确保在不同平台上一致的显示效果。

Bootstrap：
1. 响应式布局：Bootstrap是一个非常成熟的响应式框架，可以在不同设备上提供一致的界面显示效果。

2. 丰富的组件：Bootstrap提供了大量的组件和样式，包括网格系统、按钮、导航、表单等，开发者可以快速构建出美观的界面。

3. 社区活跃：Bootstrap拥有庞大的开发者社区，有大量的资源、插件和主题可供使用，方便开发者快速获取支持和解决问题。

4. 深受企业认可：Bootstrap被广泛应用于企业级项目中，具有很高的可信度和稳定性。

缺点:

Layui：
1. 组件较少：与EasyUI和Bootstrap相比，Layui的组件较少，可能在某些特定需求下，需要自己编写或使用其他扩展库来补充。

2. 学习曲线：Layui虽然简洁易用，但对于初学者来说，仍然需要花时间学习其文档和API，掌握其使用方式。

EasyUI：
1. 大小较大：EasyUI相对于Layui和Bootstrap来说，文件大小更大，可能会增加网页加载时间。

2. 代码冗余：EasyUI的代码量较大，使用部分组件可能需要引入较多的冗余代码。

3. 需要购买商业版：EasyUI在某些高级功能和主题方面，需要购买商业版才能使用。

Bootstrap：
1. 样式定制相对困难：由于Bootstrap的样式较为统一，如果需要自定义特殊的样式，可能需要覆盖或修改核心样式，有一定的难度。

2. 兼容性处理：尽管Bootstrap在兼容性方面做得很好，但某些老版本的浏览器可能会存在样式显示不正常的问题。

综合来说，Layui更注重简洁、易用和自定义性，EasyUI注重提供丰富的组件和文档支持

LayUi实现登录

登录主界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="common/header.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录界面</title>
<link rel="stylesheet" rev="stylesheet"
	href="${pageContext.request.contextPath }/static/css/iconfont.css"
	type="text/css" media="all">
<link rel="stylesheet" rev="stylesheet"
	href="${pageContext.request.contextPath }/static/css/login.css"
	type="text/css" media="all">
<style>
body {
	color: #;
}

a {
	color: #;
}

a:hover {
	color: #;
}

.bg-black {
	background-color: #;
}

.tx-login-bg {
	background: url(static/images/bg.jpg) no-repeat 0 0;
}
</style>
</head>
<body class="tx-login-bg">
	<div class="tx-login-box">
		<div class="login-avatar bg-black">
			<i class="iconfont icon-wode"></i>
		</div>
		<ul class="tx-form-li row">
			<li class="col-24 col-m-24"><p>
					<input type="text" id="username" placeholder="登录账号"
						class="tx-input">
				</p></li>
			<li class="col-24 col-m-24"><p>
					<input type="password" id="password" placeholder="登录密码"
						class="tx-input">
				</p></li>
			<li class="col-24 col-m-24"><p class="tx-input-full">
					<button id="login" class="tx-btn tx-btn-big bg-black">登录</button>
				</p></li>
			<li class="col-12 col-m-12"><p>
					<a href="#" class="f-12 f-gray">新用户注册</a>
				</p></li>
			<li class="col-12 col-m-12"><p class="ta-r">
					<a href="#" class="f-12 f-gray">忘记密码</a>
				</p></li>
		</ul>
	</div>

	<script>
layui.use(['layer','jquery'], function(){
  var layer = layui.layer
  ,$ = layui.jquery;
  
  $("login").click(function(){
	  $.ajax({
		  url:'${pageContext.request.contextPath }/user.action?methodName=login}',
		  dataType:'json',
		  data:{
			  loginname:$("#username").val(),
			  pwd:$("#password").val()
		  },
		  method:'post',
		  success:function(data){
			  if(data){
				  layer.alert('登录成功',{icon: 6});
			  }else{
				  layer.alert('登录失败',{icon: 5});
			  }
		  }
	  });
  });
});
</script>
</body>
</html>

实体类

package com.zking.entity;



public class User {
	private long id;
	private String name;
	private String loginName;
	private String pwd;
	private long rid;
	public long getId() {
		return id;
	}
	public void setId(long id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getLoginName() {
		return loginName;
	}
	public void setLoginName(String loginName) {
		this.loginName = loginName;
	}
	public String getPwd() {
		return pwd;
	}
	public void setPwd(String pwd) {
		this.pwd = pwd;
	}
	public long getRid() {
		return rid;
	}
	public void setRid(long rid) {
		this.rid = rid;
	}
	public User(long id, String name, String loginName, String pwd, long rid) {
		super();
		this.id = id;
		this.name = name;
		this.loginName = loginName;
		this.pwd = pwd;
		this.rid = rid;
	}
	public User() {
		super();
	}
	@Override
	public String toString() {
		return "User [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", rid=" + rid + "]";
	}
	
}

dao层UserDao

package com.zking.dao;

import java.util.List;

import com.zking.entity.User;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;

public class UserDao extends BaseDao<User> {
	

	public List<User> list(User user, PageBean pageBean) throws Exception {
		String sql = "select *from t_oa_user where 1=1";
		return super.executeQuery(sql, User.class, pageBean);
	}


	
	public User login(User user) throws Exception {
		String sql = "select *from t_oa_user where loginName='"+user.getLoginName()+"' and pwd='"+user.getPwd()+"'";
		List<User> list = super.executeQuery(sql, User.class, null);
		if(list!=null && list.size()==1) {
			return list.get(0);
		}
		return null;
				
	}
	
}

UserAction

package com.zking.web;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.zking.dao.UserDao;
import com.zking.entity.User;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.ResponseUtil;

public class UserAction extends ActionSupport implements ModelDriver<User> {
	
	private User user = new User();
	private UserDao ud = new UserDao();
	
	
	public void login(HttpServletRequest req, HttpServletResponse resp) {
		try {
			User u = ud.login(user);
			ResponseUtil.writeJson(resp, u);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
	}
	
	@Override
	public User getModel() {
		// TODO Auto-generated method stub
		return user;
	}

	

}

效果