LayUI入门，以及介绍

作者：小蓝xlanll | 2024-04-18 15:17:51

踩

layui

一.LayUI基本情况

1.LayUI介绍

Layui（流行于 layui.com）是一款轻量级的前端UI框架，专注于提供简洁、易用、灵活的界面组件和交互体验。它基于HTML5和CSS3技术，采用模块化开发的思想，提供了丰富的UI组件、常用的工具函数和灵活的扩展机制。

Layui的设计理念是“经典与创新的全面结合”，它提供了一套简洁、直观、易于上手的API，使得开发者能够快速搭建出美观、功能完善的前端界面。Layui的代码精简，文件体积小，加载速度快，非常适合开发响应式的Web应用程序。

Layui提供了丰富的组件，包括按钮、表单、表格、导航、选项卡、弹窗、富文本编辑器等等，这些组件具有一致的风格和交互体验，可以有效提高开发效率。同时，Layui还提供了丰富的工具函数和插件，如日期选择器、分页、上传组件等，方便开发者进行常见的操作和功能扩展。

除了提供基础的UI组件和工具函数，Layui还支持自定义主题和模块扩展。开发者可以根据自己的需求，自定义界面样式和交互效果。同时，Layui还支持模块化开发，开发者可以将自己的组件封装成模块，方便复用和扩展。

总之，Layui是一个功能强大、简单易用的前端UI框架，适用于各种类型的Web应用程序开发。它具有良好的兼容性和性能优势，可以帮助开发者快速构建出优秀的前端界面。

2. LayUI发展历史

Layui框架的诞生可以追溯到2016年。在这一年，一位名叫贤心的前端开发者提出了一种构想：希望能够通过一个简单、易用、高性能的前端框架来简化开发过程并提升开发效率。于是，他开始了Layui框架的开发。

贤心是一个热衷于前端开发的工程师，他在开发过程中积累了大量的经验和技巧。他希望通过将自己的经验整理归纳成一个前端框架，来帮助其他开发者快速开发出优秀的前端界面。

Layui在设计之初就坚持了一些原则，比如简洁易用、高效精简、模块化开发等。贤心精心设计了Layui的API和组件结构，使其能够提供一致的界面风格和交互效果，同时又具备灵活的扩展性。

Layui在发布后迅速获得了广泛的关注和认可。开发者们纷纷尝试使用Layui来开发自己的项目，并提供了大量的反馈和建议。贤心积极听取用户的意见，不断改进和完善框架，使其更加符合开发者的需求。

随着时间的推移，Layui逐渐成为了国内最受欢迎的前端框架之一。越来越多的开发者选择Layui来构建自己的项目，而Layui社区也迅速壮大起来。在社区的帮助下，Layui不断更新版本，提供越来越丰富和强大的功能。

至今，Layui已经发布了多个版本，每个版本都带来了新的特性和改进。Layui的成功离不开贤心的辛勤付出和广大开发者的支持。它不仅简化了前端开发的流程，还促进了前端开发者之间的交流和分享，成为了国内前端界的重要组成部分。（遗憾的是由于是开源的，在2021.10.13就停止更新了没有资金维护）

二.将Layui加入web项目中

1.搜索网址

官方网站：https://www.layui.com/（已下线）
参考地址：http://layui.org.cn/demo/index.html（已下线，非官网）

2.下载文件，解压

点击下载即可，不需要登陆账号

解压的文件就是这几个文件，我们需要的layui文件在layui包里

3.加入web项目

3.1导入layui包

建立一个静态资源包，将我们的资源导入

3.2.在jsp中导入资源


link rel="stylesheet" href="${pageContext.request.contextPath }/static/js/layui/css/layui.css">
<!-- 引入 layui.js -->
<script src="${pageContext.request.contextPath}/static/js/layui/layui.js"></script>

在其中pageContext.request.contextPath作用是适用于任何的js，css，img等等导入

3.3效果图


<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@ include  file="common/header.jsp" %>
</head>
<body>
 
<!-- 你的 HTML 代码 -->
<script>
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World');
});
</script> 
</body>
</html>

三.利用LayUi实现登录注册

1.实现登录：

1.1首先编写jsp


<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="common/header.jsp"%>
<html>
<head>
<meta name="viewport"
	content="width=device-width,initial-scale=1.33,minimum-scale=1.0,maximum-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<title>会员登录-演示网站</title>
<meta http-equiv="Content-Language" content="zh-CN">
<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(${pageContext.request.contextPath}/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', 'jqurey' ], function() {
			var layer = layui.layer, $ = layui.jqurey;
 
			$("#login").click(function() {
			$.ajax({
			url:'${pageContext.request.contextPath}/user.action?methodName=login',
			dataType:'json',
			data:{
				loginName:$("#username").val(),
				password:$("#password").val()
			},
			method:'post',
			sucess:function (data){
				if (data) {
					layer.alert('恭喜'+data.name+'登录成功',{icon:6});	
				}else {
					layer.alert('密码错误',{icon:6});
				}
			}
			});	
			
			})
		});
	</script>
</body>
</html>

1.2编写实体，dao方法、

1.2.1实体


package com.lz.entity;
 
public class User {
	private long id;
	private String name;
	private String loginName;
	private String pwd;
	private long rid;
	/* (non-Javadoc)
	 * @see java.lang.Object#toString()
	 */
	@Override
	public String toString() {
		return "User [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", rid=" + rid + "]";
	}
	/**
	 * @return the id
	 */
	public long getId() {
		return id;
	}
	/**
	 * @param id the id to set
	 */
	public void setId(long id) {
		this.id = id;
	}
	/**
	 * @return the name
	 */
	public String getName() {
		return name;
	}
	/**
	 * @param name the name to set
	 */
	public void setName(String name) {
		this.name = name;
	}
	/**
	 * @return the loginName
	 */
	public String getLoginName() {
		return loginName;
	}
	/**
	 * @param loginName the loginName to set
	 */
	public void setLoginName(String loginName) {
		this.loginName = loginName;
	}
	/**
	 * @return the pwd
	 */
	public String getPwd() {
		return pwd;
	}
	/**
	 * @param pwd the pwd to set
	 */
	public void setPwd(String pwd) {
		this.pwd = pwd;
	}
	/**
	 * @return the rid
	 */
	public long getRid() {
		return rid;
	}
	/**
	 * @param rid the rid to set
	 */
	public void setRid(long rid) {
		this.rid = rid;
	}
	public User() {
		super();
	}
	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;
	}
}

1.2.2登录dao方法


/**
	 * 登录
	 * @param user
	 * @return
	 * @throws Exception
	 */
	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;
	}

1.3实现登录，增加action


package com.lz.web;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import com.lz.dao.UserDao;
import com.lz.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 userdao = new UserDao();
 
	public void login(HttpServletRequest req, HttpServletResponse resp) {
		try {
			User u = userdao.login(user);
			ResponseUtil.writeJson(resp, u);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
 
	}
	// 增加 重定向 book.action
		public String add(HttpServletRequest req, HttpServletResponse resp)  {
			try {
				int add = userdao.add(user);
				
			} catch (Exception e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
			return "toList";
		}
 
	@Override
	public User getModel() {
		// TODO Auto-generated method stub
		return user;
	}
 
}

1.4配置xml


	
	<action  path="/user"  type="UserAction">
	<forward name="toList" path="/user.action?methodName=list"
			redirect="true" />
	</action

2.注册

2.1编写jsp


<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="common/header.jsp"%>
<html>
<head>
<meta name="viewport"
	content="width=device-width,initial-scale=1.33,minimum-scale=1.0,maximum-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<title>会员注册-演示网站</title>
<meta http-equiv="Content-Language" content="zh-CN">
<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(${pageContext.request.contextPath}/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="password" id="name" placeholder="注册用户"
						class="tx-input">
				</p></li>
			<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>
					<input type="password" id="rid" placeholder="注册rid"
						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>
		</ul>
	</div>
	<script>
		layui.use([ 'layer', 'jqurey' ], function() {
			var layer = layui.layer, $ = layui.jqurey;
 
			$("#login").click(function() {
			$.ajax({
			url:'${pageContext.request.contextPath}/user.action?methodName=login',
			dataType:'json',
			data:{
				name:$("#name").val(),
				loginName:$("#username").val(),
				password:$("#password").val(),
				rid:$("#rid").val()
			},
			method:'post',
			sucess:function (data){
				if (data) {
					layer.alert('恭喜'+data.name+'注册成功',{icon:6});	
				}else {
					layer.alert('密码错误',{icon:6});
				}
			}
			});	
			
			})
		});
	</script>
</body>
</html>

2.2编写dao


public int add(User  user) throws Exception {
		String sql = "insert  into   t_oa_user values(?,?,?,?,?)";
		return super.executeUpdate(sql, user, new  String[] {"id","name","loginName","pwd","rid"});
	}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/446709