- layui简介
- layui入门
- layui登录
layui简介
1.什么是layui？
layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。
由国人开发（作者贤心），16年出厂的框架，其主要提供了很多好看、方便的样式，并且基本拿来即用，和Bootstrap有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本。
layui入门（需要搭配的环境）（查询时记得导入数据）
<?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="/user" type="com.zking.web.UserAction"> </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>
<%@ 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> <body> </body> </html>
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1"> <display-name>T269_mvc_blog</display-name> <servlet> <servlet-name>mvc</servlet-name> <servlet-class>com.zking.framework.DispatchServlet</servlet-class> <init-param> <param-name>configurationLocation</param-name> <param-value>/mvc.xml</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>mvc</servlet-name> <url-pattern>*.action</url-pattern> </servlet-mapping> </web-app>
<?xml version="1.0" encoding="UTF-8" ?> <taglib xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_0.xsd" version="2.0"> <description>zking 1.1 core library</description> <display-name>zking core</display-name> <tlib-version>1.1</tlib-version> <short-name>zking</short-name> <uri>http://jsp.veryedu.cn</uri> <tag> <name>page</name> <tag-class>com.zking.tag.PageTag</tag-class> <body-content>JSP</body-content> <attribute> <name>pageBean</name> <required>true</required> <rtexprvalue>true</rtexprvalue> </attribute> </tag> </taglib>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://jsp.veryedu.cn" prefix="z"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css" rel="stylesheet"> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.js"></script> <title>博客列表</title> <style type="text/css"> .page-item input { padding: 0; width: 40px; height: 100%; text-align: center; margin: 0 6px; } .page-item input, .page-item b { line-height: 38px; float: left; font-weight: 400; } .page-item.go-input { margin: 0 10px; } </style> </head> <body> <form class="form-inline" action="${pageContext.request.contextPath }/book.action?methodName=list" method="post"> <div class="form-group mb-2"> <input type="text" class="form-control-plaintext" name="bname" placeholder="请输入书籍名称"> <!-- <input name="rows" value="20" type="hidden"> --> <!-- 不想分页 --> <input name="pagination" value="false" type="hidden"> </div> <button type="submit" class="btn btn-primary mb-2">查询</button> <a class="btn btn-primary mb-2" href="${pageContext.request.contextPath }/blog.action?methodName=toEdit">新增</a> </form> <table class="table table-striped bg-success"> <thead> <tr> <th scope="col">博客ID</th> <th scope="col">标题</th> <th scope="col">关键字</th> <th scope="col">操作</th> </tr> </thead> <tbody> <c:forEach var="b" items="${blogs }"> <tr> <td>${b.id }</td> <td>${b.title }</td> <td>${b.keyWord }</td> <td> <a href="${pageContext.request.contextPath }/blog.action?methodName=toEdit&id=${b.id}">修改</a> <a href="${pageContext.request.contextPath }/blog.action?methodName=delete&id=${b.id}">删除</a> </td> </tr> </c:forEach> </tbody> </table> <!-- 这一行代码就相当于前面分页需求前端的几十行了 --> <z:page pageBean="${pageBean }"></z:page> </body> </html>
layui登录（util包，有些写类就不展示了）
package com.zhulinjun.web; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.zhulinjun.dao.UserDao; import com.zhulinjun.entity.User; import com.zhulinjun.util.ResponseUtil; import com.zking.framework.ActionSupport; import com.zking.framework.ModelDriver; 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(); } } @Override public User getModel() { // TODO Auto-generated method stub return user; } }
package com.zhulinjun.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; } @Override public String toString() { return "User [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", 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(); // TODO Auto-generated constructor stub } }
package com.zhulinjun.dao; import java.util.List; import com.zhulinjun.entity.User; import com.zhulinjun.util.BaseDao; import com.zhulinjun.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> lst=super.executeQuery(sql, User.class, null); if(lst!=null&& lst.size()==1) { return lst.get(0); } return null; } }
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@include file="common/header.jsp" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <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; let $ = 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>
