一. layui简介

1.1 layui介绍

Layui 是一套开源免费的 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，非常适合网页界面的快速构建。Layui 区别于一众主流的前端框架，它更多是面向于后端开发者，即无需涉足各类构建工具，只需面向浏览器本身，便可将页面所需呈现的元素与交互信手拈来。

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

1.2 主要构成

元素
layui 的元素由以下组成：
布局（栅格、后台布局）、颜色、字体图标、动画、按钮、表单、导航条、面包屑、选项卡、进度条、面板、静态表格、徽章、时间线、辅助元素等。
模块
layui 提供了丰富的内置模块，他们皆可通过模块化的方式按需加载，其中包括：layer、layDate、layPage、laytpl、table、form、upload、element、tree、layeditor、rate、carousel、flow、util、code等。

1.3 迭代历程

2016年10月14日，Layui 发布了 1.0.0 首版，此后多年被广泛应用在众多 Web 平台。
2021年10月13日，Layui 发布了原官网下线的公告，并将文档站点切换到了 Gitee Pages，社区及日常维护亦全面转移到了 Gitee 和 Github 平台，以此呼吁大家拥抱其他更好的主流框架，导致大家误以为 Layui 停更了。事实上，自那以后，Layui 仍然在 Github 和 Gitee 保持活跃，并不存在所谓的停止更新，从当时的 2.6.8 一直连续迭代到如今的最新版本。
2023年4月24日，Layui 发布了 2.8.0 正式版 [8] ，并上线了新的文档站点，Layui声称这是一次朴实的回归，更是情怀的延续。但仍然坚持两年前那则公告中的观点，即仍然推荐大家去拥抱主流，始终保持对前沿技术的无限热爱，是开发者们都应具备的思维属性。而 Layui 所做的，是为填补主流之外的那些略显狭小的空隙。Layui 虽不是前端主流，但也早已不是作者个人的 Layui，而是所有仍在坚持使用它的人的 Layui，它仍然支撑着许多项目，也代表着许多人的工作。作为开源创作者，应该要为这些坚持者而守望。
未来，Layui 会持续陪伴着所有为之热爱的人们，共同去论证 Layui 开发模式的可行性。

1.4 layui，easyui和bootstrap对比

1.4.1 layui与bootstrap对比（这两个都属于ui渲染框架）

layui是国人开发的一套框架，2016年出来的，现在已更新到2.X版本了。比较新，轻量级，样式简单好看（目前官网已下架，开源了）
bootstrap 相对来说是比较成熟的一个框架，现在已经更新到4.X版本。是一个很成熟的框架，这个大部分人一般都用过

1）适用范围不一样
1.layui 其实更偏向与后端开发人员使用，在服务端页面上有非常好的效果。
2.适合做后台框架
3.layui是提供给后端开发人员最好的ui框架，基于DOM驱动，在实现前端交互上比较麻烦，页面的增删改查都需要查询DOM元素。所以在不需要交互的时候，用layui还是不错的（说这句话的人，只能说明你对layui不了解）
4.bootstrap 在前端响应式方面做得很好，PC端和移动端表现都不错。
5.适合做网站
6.如果是类似官网，且需要同时满足PC端和移动端效果，bootstrap 表现很好，但是如果是要交互的网站，比如商城之类，layui显然更好，前后端分离
2）大小不一样
1.layui 轻量级
2.bootsrap 因为成熟，所以使用方便，但是同时也是因为成熟，就显得有些冗余

1.4.2 layui与easyui对比

1.easyui 是非开源的，有需要解决的问题的话，就只能等官方更新了
2.layui是开源的，社区比较活跃，解决问题还是比较快的
3.easyui诞生的早些，所以功能相对完善一些，很多功能都能是比较健全的
4.layui就相对来说少一些了，不过，功能都是像官网说的，精雕细琢
5.layui更符合现在的审美

二. layui入门案例【弹出框】

将layui下载到本地，将其完整的放置到项目目录下

在这里插入图片描述

在页面中引入

   <!-- 引入 layui.css --><link rel="stylesheet" href="xxx/layui.css"><!-- 引入 layui.js --><script src="xxx/layui.js"></script>

实现弹出框

<script src="./layui/layui.js"></script>
<script>
layui.use(['layer', 'form'], function(){var layer = layui.layer,form = layui.form;layer.msg('Hello World');
});
</script>

运行效果如下：
在这里插入图片描述

三. 登录功能实现

将jar架包，配置文件导入，再配置xml

【具体可以参考http://t.csdn.cn/VHsGW】

实体类，dao层的编写

实体类【User】

package com.zking.entity;public class User {private long id;private String name;private String loginName;private String pwd;private long rid;public User() {// TODO Auto-generated constructor stub}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 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;}@Overridepublic String toString() {return "User [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", rid=" + rid + "]";}public User(String name, String loginName, String pwd) {super();this.name = name;this.loginName = loginName;this.pwd = pwd;}
}

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;}}

Action的编写【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 blocke.printStackTrace();}}@Overridepublic User getModel() {// TODO Auto-generated method stubreturn user;}}

jsp界面【User.jsp】

<%@ 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">
<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>
<title>Insert title here</title>
</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 src="./layui/layui.js"></script><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>

界面效果如下：
在这里插入图片描述