Layui入门
大纲：
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 后，将其完整地部署到你的项目目录（或静态资源服务器），并在页面中分别引入:
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"%>
<%@include file="/common/head.jsp" %>
效果图：
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 {
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文件
]>
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中设置
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/common/head.jsp" %>
效果图：
登录成功后，进入到主页面 。
