1.什么是layui：
Layui是一个简单、易用且功能强大的前端UI框架，专注于提升开发者的开发效率。它基于HTML、CSS和JavaScript，并提供了一套丰富的UI组件、动态模块加载、模板引擎、弹窗组件、表单验证等等功能，可以帮助开发者快速构建漂亮、响应式的Web界面。
Layui的设计理念是"经典易用，显而易见"，具有简洁、直观的API，可以很容易地理解和使用。它提供了灵活的扩展机制和丰富的文档，能够满足各种项目的需求，并且可以与主流的JavaScript库和框架（如jQuery、AngularJS等）无缝集成。
通过使用Layui，开发者可以快速搭建出结构清晰、交互友好、美观大方的Web界面，提高开发效率，节省开发时间。无论是个人项目还是企业级应用，Layui都是一个不错的选择。
官方网站：https://www.layui.com/（已下线）
参考地址：http://layui.org.cn/demo/index.html（已下线，非官网）
由国人开发（作者贤心），16年出厂的框架，其主要提供了很多好看、方便的样式，并且基本拿来即用，和Bootstrap有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本。
2.lay入门
搭建环境：
1.导依赖:
2.导工具类:
3.配置文件:mvc.xml
<?xml version="1.0" encoding="UTF-8"?> <config> <action path="/blog" type="com.zking.web.BlogAction"> <forward name="list" path="/blogList.jsp" redirect="false" /> <forward name="toList" path="/blog.action?methodName=list" redirect="true" /> <forward name="toEdit" path="/blogEdit.jsp" redirect="false" /> </action> <!-- <action path="/meetingInfo" type="com.zking.web.MeetingInfoAction"> --> <!-- <forward name="list" path="/meetingInfoList.jsp" redirect="false" /> --> <!-- <forward name="toList" path="/meetingInfo.action?methodName=list" --> <!-- redirect="true" /> --> <!-- <forward name="toEdit" path="/meetingInfoEdit.jsp" redirect="false" /> --> <!-- </action> --> <!-- <action path="/solrBlog" type="com.test.web.SolrBlogAction"> --> <!-- <forward name="list" path="/solrBlogList.jsp" redirect="false" /> --> <!-- <forward name="toList" path="/solrBlog.action?methodName=list" --> <!-- redirect="true" /> --> <!-- <forward name="toEdit" path="/solrBlogEdit.jsp" redirect="false" /> --> <!-- </action> --> <action path="/studentBlog" type="com.test.web.StudentBlogAction"> <forward name="list" path="/studentBlogList.jsp" redirect="false" /> <forward name="toList" path="/studentBlog.action?methodName=list" redirect="true" /> <forward name="toEdit" path="/studentBlogEdit.jsp" redirect="false" /> </action> <action path="/solrBlog" type="com.xiaoli.web.SolrBlogAction"> <forward name="list" path="/solrBlogList.jsp" redirect="false" /> <forward name="toList" path="/solrBlog.action?methodName=list" redirect="true" /> <forward name="toEdit" path="/solrBlogEdit.jsp" redirect="false" /> </action> </config>
实例：
选中然后CTRL加shift加r跳到文件的根源
输出结果：
3.json回顾：
layui和easyui都是一样的要用json
package dome; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import com.fasterxml.jackson.databind.ObjectMapper; /*** * json数据 * @author bing人 * @dome * @Dome */ public class Dome { public static void main(String[] args) throws Exception { ObjectMapper om=new ObjectMapper(); List<Map>list=new ArrayList<Map>(); Map<String, Object>map=new HashMap<String, Object>(); map.put("name", "zs"); map.put("age", 10); Map<String, Object>map1=new HashMap<String, Object>(); map.put("name", "zs"); map.put("age", 10); list.add(map); list.add(map1); System.out.println(om.writeValueAsString(list)); List<User>l =new ArrayList<>(); User u=new User("zs",10); User u1=new User("ls",12); l.add(u); l.add(u1); System.out.println(om.writeValueAsString(l)); } } class User{ private String name; private int age; public String getName() { return name; } public void setName(String name) { this.name = name; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } public User(String name, int age) { super(); this.name = name; this.age = age; } public User() { super(); } @Override public String toString() { return "User [name=" + name + ", age=" + age + "]"; } @Override public int hashCode() { final int prime = 31; int result = 1; result = prime * result + age; result = prime * result + ((name == null) ? 0 : name.hashCode()); return result; } @Override public boolean equals(Object obj) { if (this == obj) return true; if (obj == null) return false; if (getClass() != obj.getClass()) return false; User other = (User) obj; if (age != other.age) return false; if (name == null) { if (other.name != null) return false; } else if (!name.equals(other.name)) return false; return true; } }
输出结果：
4.layUi登录功能:
前台：
login：
<%@ 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>Insert title here</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('恭喜'+data.name+'登录成功', {icon: 6}); }else{ layer.alert('抱歉登录失败', {icon: 5}); } } }); }); }); </script> </body> </html>
header用来储存依赖：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <!-- 引入 layui.css --> <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> </head> </head> <body> </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类继承BaseDo：
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> l = super.executeQuery(sql, User.class, null); if(l!=null && l.size()==1) { return l.get(0); } return null; } }
UserAction类：继承ActionSupport，实现ModelDriver<User>
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 userDao=new UserDao(); public void login(HttpServletRequest req, HttpServletResponse resp) { try { User u = userDao.login(user); ResponseUtil.writeJson(resp, u); } catch (Exception e) { e.printStackTrace(); } } @Override public User getModel() { return null; } }
