LayUI入门，以及介绍

蔚落 2024-03-17 17:46 64阅读 0赞

## 一.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.下载文件，解压 ###

![768dfb61a24f49ae99eca7e7cde9f8f1.png][]

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

![11b4ba93f51947208b4f5bea4fe2f02f.png][]

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

### 3.加入web项目 ###

#### 3.1导入layui包 ####

> ![8ab3fc718c784c938519b1d968212d86.png][]

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

#### 3.2.在jsp中导入资源 ####

link rel="stylesheet" href="${pageContext.request.contextPath }/static/js/layui/css/layui.css">
    
    <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>
     
    
    <script>
    layui.use(['layer', 'form'], function(){
      var layer = layui.layer
      ,form = layui.form;
      
      layer.msg('Hello World');
    });
    </script> 
    </body>
    </html>

![079cfcea7e05462c8b01730d558abb9c.png][]

## 三.利用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>

![43f30f886c744afb829fc4f6926464d6.png][]

#### 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"});
    	}

[768dfb61a24f49ae99eca7e7cde9f8f1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/a91654384fc3425d9bb63af971f1aced.png
[11b4ba93f51947208b4f5bea4fe2f02f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/c6bef8b9fe12477eb62b71c0d41fc696.png
[8ab3fc718c784c938519b1d968212d86.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/d3708a5422604bf58aa2fcf4b097b838.png
[079cfcea7e05462c8b01730d558abb9c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/71c13dcd3a2e42a6a5b79d396c1472cc.png
[43f30f886c744afb829fc4f6926464d6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/e94aee73f19048459d88d3d975a846b2.png