大纲:
1、layui简介
2、案例
一、layui简介
1、什么是layui?
layui 是一套开源的 Web UI 解决方案,采用自身经典的模块化规范,并遵循原生 HTML/CSS/JS 的开发方式,极易上手,拿来即用。其风格简约轻盈,而组件优雅丰盈,从源代码到使用方法的每一处细节都经过精心雕琢,非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,它更多是面向后端开发者,你无需涉足前端各种工具,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。
2、为什么使用layui?
layui更多是面向于后端开发者,所以在组织形式上毅然采用了几年前的以浏览器为宿主的类 AMD 模块管理方式,却又并非受限于 CommonJS 的那些条条框框,它拥有自己的模式,更加轻量和简单。
3、layui的优缺点
优点:
1、layui属于轻量级框架,简单美观。适用于开发后端模式,它在服务端页面上有非常好的效果。
2、layui是提供给后端开发人员最好的ui框架,基于DOM驱动,只要不涉及到交互layui还是很不错的。缺点:
1、layui出现较迟,想必其他前端框架来说还是不太成熟。现在已更新到2.X版本了
2、在实现前端交互上比较麻烦,因为页面的增删改查都需要查询DOM元素
官方网站:https://www.layui.com/(已下线)
参考地址:http://layui.org.cn/demo/index.html(非官网)
4、如何获得 layui
1. 官网首页下载(但是下载地址已经关闭,必须到开源地址下载【GitHub】)
GitHub是一个面向开源及私有软件项目的托管平台,因为只支持Git作为唯一的版本库格式进行托管,故名GitHub。
├─css //css目录 │ │─modules //模块css目录(一般如果模块相对较大,我们会单独提取,比如下面三个:) │ │ ├─laydate │ │ ├─layer │ │ └─layim │ └─layui.css //核心样式文件 ├─font //字体图标目录 ├─images //图片资源目录(目前只有layim和编辑器用到的GIF表情) │─lay //模块核心目录 │ └─modules //各模块组件 │─layui.js //基础核心库 └─layui.all.js //包含layui.js和所有模块的合并文件
2. Git 仓库下载
你也可以通过 GitHub 或 码云 得到 layui 的完整开发包。
3. npm 安装( 一般用于 WebPack 管理)
npm install layui-src
5、获得 layui 后,将其完整地部署到你的项目目录(或静态资源服务器),并在页面中分别引入:
<!-- 引入 layui.css -->
<link rel="stylesheet" href="xxx/layui.css">
<!-- 引入 layui.js -->
<script src="xxx/layui.js">
二、案例
环境搭建:
1)创建layuiproject项目
2) 导入jar包(jackson jar:进行数据交互,所有数据都以json方式传递)
3)将mvc.xml核心配置文件引入src的根路径下
4)在 util 中引入第三方工具类
中文乱码处理:EncodingFilter
MD5算法对字符串进行加密:MD5
5) 在web.xml中配置中文乱码过滤器和自定义MVC核心控制器ActionServlet
6)启动项目,测试是否正常
Question:如何扩展一个layui(自定义模块)
1)确认模块名,假设为:test.js文件放入项目任意目录下(注意:不用放入layui目录)
2)编写test.js
3)设定扩展模块所在的目录,然后就可以在别的JS文件中使用
2.1)弹出hello方法 2.2)日期格式转换
首先,在 WebContent 下创建一个common文件夹(存放公共资源[文件])若有多个重复在写的代码就可创建成一个公共文件,当要使用时直接调用就可以了,同时也能减少代码量。
创建一个 引入文件head.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<base href="${pageContext.request.contextPath}/" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>会议OA后台管理系统</title>
<!-- 引入layui的核心css文件 -->
<link href="js/layui/css/layui.css" rel="stylesheet" type="text/css"/>
<!-- 引入layui的核心js文件 -->
<script type="text/javascript" src="js/layui/layui.js"></script>
<!-- 引入自定义layui全局配置模块 -->
<script type="text/javascript" src="js/layui/config.js"></script>
1、编写test.js
//提示:模块也可以依赖其它模块,如:layui.define('layer', callback);
layui.define(function(exports){
var obj = {
hello: function(str){
alert('Hello '+ (str||'test'));
},
toDate:function(date,pattern){
return fmtDate(date, pattern);
}
};
//输出test接口
exports('test', obj);
});
//给Date类添加了一个新的实例方法format
Date.prototype.format = function (fmt) {
//debugger;
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
};
//date:需要转换的日期
//pattern:转换日期所需要对应的格式
function fmtDate(date, pattern) {
var ts = date.getTime();
var d = new Date(ts).format("yyyy-MM-dd hh:mm:ss");
if (pattern) {
d = new Date(ts).format(pattern);
}
return d.toLocaleString();
};
2、在demo.jsp中使用test
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
<%@include file="/common/head.jsp" %>
<script type="text/javascript">
//1.面试题:let和var的区别?
//let:局部变量
//var:全局变量,容易造成数据干扰或者是污染
//设置局部变量
let layer,form,$,test;
//使用
layui.use(['layer','form','jquery','test'],function(){
layer=layui.layer,
form=layui.form,
$=layui.jquery,
test=layui.test;
//调用 和 传参
//test.hello("xy");//弹出Hello World!
//输出
console.log(new Date());//转换前
console.log(test.toDate(new Date(),'yyyy年MM月dd日 hh时mm分ss秒'));//转换后
//点击事件
$('#test').click(function(){
layer.msg("Hello,layui!",{icon:6},function(){});
});
});
</script>
</head>
<body>
<button id="test" style="background: pink;">点击有奖</button>
</body>
</html>
效果图:
2.3)构建登录页面(使用MD5对用户密码进行加密处理)
1、创建实体类User
2、创建数据操作类UserDao
package com.zking.layuipro.dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import com.zking.layuipro.entity.User;
import com.zking.layuipro.util.DBHelper;
public class UserDao{
//登录
public User userlogin(String loginName) {
//声明对象
User u = null;
Connection conn = null;
PreparedStatement stmt = null;
ResultSet rs = null;
try {
//连接数据库
conn = DBHelper.getConnection();
String sql = "select * from t_a_user where loginName=?";
//获取PreparedStatement对象,执行sql语句
stmt = conn.prepareStatement(sql);
//占位符赋值
stmt.setString(1, loginName);
//执行sql语句
rs = stmt.executeQuery();
//处理结果
if(rs.next()) {
//实例化一个用户对象
u = new User(rs.getInt("uid"), rs.getString("username"), rs.getString("loginName"), rs.getString("password"),rs.getInt("rid"));
}
} catch (Exception e) {
e.printStackTrace();
}finally {
DBHelper.close(conn, stmt, rs);
}
return u;
}
}
3、创建UserAction
package com.zking.layuipro.action;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.zking.layuipro.dao.UserDao;
import com.zking.layuipro.entity.User;
import com.zking.layuipro.util.MD5;
import com.zking.mvc.framework.DriverModel;
public class UserAction extends DispatcherAction implements DriverModel<User> {
private User user = new User();
private UserDao ud = new UserDao();
@Override
public User getModel() {
return user;
}
//继承DispatcherAction,将提供一组与execute方法相同的参数和方法值,只有方法名不同!
/**
* 用户登录
* @param req
* @param resp
* @return
* @throws ServletException
* @throws IOException
*/
public String userLogin(HttpServletRequest req,
HttpServletResponse resp) throws ServletException,IOException{
//1.判断前端输入的账号和密码是否为空
if(StringUtils.isNullOrEmpty(user.getLoginName())||
StringUtils.isNullOrEmpty(user.getPassword())) {
//传递方式为JSON,不需要跳转页面
CommonUtils.toJson(false, "账号和密码不能为空!", resp);
}
//获取数据库用户账号
User u= ud.userlogin(user.getLoginName());
if(u!=null) {
//获取数据库的密码
String spwd = u.getPassword();
//获取前端页面的密码(来自于前端页面输入的明文密码加密)
String qpwd = new MD5().getMD5ofStr(user.getPassword());
if(user.getLoginName().equals(u.getLoginName())&&qpwd.equals(spwd)) {
CommonUtils.toJson(true, "登录成功", resp);
}else {
CommonUtils.toJson(false, "账号或密码错误!", resp);
}
}else {
CommonUtils.toJson(false, "账号不存在!", resp);
}
return null;
}
//json格式:
//1)对象:{'name':'a','upwd':'1234'}
//2)数组:[1,2,3,...]
//3)混合:[{'bname':'红楼梦','bprice':56},{'bname':'雷雨','bprice':89},...]
//{'total':72,rows:[{'bname':'红楼梦','bprice':56},{'bname':'雷雨','bprice':89}]}
}
4、配置mvc.xml文件
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE config[
<!ELEMENT config (action*)>
<!ELEMENT action (forward*)>
<!ELEMENT forward EMPTY>
<!ATTLIST action
path CDATA #REQUIRED
type CDATA #REQUIRED
>
<!ATTLIST forward
name CDATA #REQUIRED
path CDATA #REQUIRED
redirect (true|false) "false"
>
]>
<config>
<action type="com.zking.layuipro.action.UserAction" path="/userAction"></action>
</config>
5、编写login.js
//设置局部变量
let layer,form,$;
//使用layui
layui.use(['layer','form','jquery'],function(){
layer=layui.layer,
form=layui.form,
$=layui.jquery;
$('#login').click(function(){
$('#login').attr('disabled','disabled').css({'background':'#cccccc'});
//获取账号
let username = $('#username').val();
//获取密码
let password = $('#password').val();
//输出
console.log('username=%s,password=%s',username,password);
$.post('userAction.action',{
'methodName':'userLogin',
'loginName':username,
'password':password
},function(rs){
console.log(rs);
if(rs.success){
layer.msg('登录成功',{icon:6},function(){});
location.href='index.jsp';
}else{
layer.msg(rs.msg,{icon:5},function(){});
$('#login').removeAttr('disabled').css({'background':'#green'});
}
},'json');
});
});
6、在login.jsp中设置 <script type="text/javascript" src="js/login.js"></script>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<%@include file="/common/head.jsp" %>
<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">
<meta http-equiv="Content-Language" content="zh-CN">
<link rel="stylesheet" rev="stylesheet" href="css/iconfont.css" type="text/css" media="all">
<link rel="stylesheet" rev="stylesheet" href="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(images/bg.jpg) no-repeat 0 0;}</style>
<script type="text/javascript" src="js/login.js"></script>
</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>
</div>
</body>
</html>
效果图:
登录成功后,进入到主页面 。