一，什么是layui?
layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来
官方网站：https://www.layui.com/（已下线）
参考地址：http://layui.org.cn/demo/index.html （已下线，非官网）
1.2 layui由来
由国人开发（作者贤心），16年出厂的框架，其主要提供了很多好看、方便的样式，并且基本拿来即用，和Bootstrap有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本。
二，layui的入门
1 进入提供的非官网http://layui.org.cn/demo/index.html 左侧开始使用下滑下点击码云下载layui的zip压缩文件
2.新建一个folder文件命名为static，将刚解压的layui文件中下的layui导入该文件static中
3.编写一个jsp页面使用link标签引入layui中的css。使用script标签引入layui中的js
<!-- 引入 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>
4.测试layui的使用，如下代码 layui.use() 方法来配置和使用相应的模块。
<input type="hidden" id="inputid" value="其实没有惊喜"> <button id="btnid">点我有惊喜！</button> <script> layui.use(['layer', 'form','jquery'], function(){ var layer = layui.layer ,form = layui.form ,$ = layui.jquery; $("#btnid").click(function() { layer.msg($("#inputid").val()); }); }); </script>
运行结果点击弹出相关语句：
三，实现登入及注册页面
1，编写登入及注册jsp页面,导入相对应的layui的css及js
登入jsp页面：
<%@ 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="register.jsp" 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:{ //获取需要传值的id 账户密码 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>
注册jsp页面：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <%@include file="common/header.jsp"%> <link rel="stylesheet" role="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> <script type="text/javascript"> layui.use(['jquery','layer','form'], function() { let $ = layui.jquery; let layer = layui.layer; let form =layui.form; $("#register").click(function() { $.ajax({ url:"${pageContext.request.contextPath}/user.action?methodName=register", dataType:'json', data: { name:$("#relname").val(), loginName: $("#username").val(), pwd: $("#password").val() }, method: 'post', success: function(data) { if(data=="OK") { layer.alert('注册成功', {icon: 6}); /* location.href="login.jsp"; */ } else { layer.alert('注册失败', {icon: 5}); } } }) }) }); </script> </head> <body class="tx-login-bg " style="margin-top: 100px;"> <center> <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="relname" 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 class="tx-input-full"> <button id="register" class="tx-btn tx-btn-big bg-black">注册</button> </p></li> <li class="col-12 col-m-12"><p> <a href="login.jsp" class="f-12 f-gray">返回登录</a> </p></li> </ul> </div> </center> </body> </html>
2，编写dao方法，进行相对应操作时调取方法
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 { //编写sql语句 String sql="select * from t_oa_user where 1=1"; return super.executeQuery(sql, User.class, pageBean); } //登入方法 public User login(User user) throws Exception { //编写sql语句 登入时输入账户密码要与数据库中登入的账户和密码一致 String sql="select * from t_oa_user where loginName ='"+user.getLoginName()+"' and pwd ='"+user.getPwd()+"'"; List<User> list = super.executeQuery(sql, User.class, null); //判断返回值 判断不为空或长度大小为1 说明有值 if(list!=null && list.size() ==1) { return list.get(0);//返回该值 } return null;//否则为空 } //注册方法 public int register(User user) throws Exception { // 定义sql语句 String sql = "insert into t_oa_user(name,loginName,pwd,rid) values(?,?,?,0);"; return super.executeUpdate(sql,user,new String[] {"name","loginName","pwd"}); } }
3，编写后端servlet，将后端值相对应的结果值传到前端
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); //继承中ModelDriver已经封装依懒mvc中req接受前端传来的值，当前结果保存到该方法中 ResponseUtil.writeJson(resp, u); } catch (Exception e) { e.printStackTrace(); } } //注册 public void register(HttpServletRequest req, HttpServletResponse resp) { try { int register = userdao.register(user); //判断前端的值大于0 证明有值 if (register > 0) { //回显ok 代表成功 ResponseUtil.writeJson(resp, "OK"); } else { //回显失败 代表失败 ResponseUtil.writeJson(resp, "NO"); } } catch (Exception e) { e.printStackTrace(); } } @Override public User getModel() { return user; } }
4，最后登入注册运行结果：
查看数据库中有无注册该数据即可。如下id为25是刚新增的数据
