Layui入门

明思齐

已于 2022-07-03 22:46:42 修改

阅读量2k

点赞数

文章标签：大数据

于 2022-07-03 22:46:14 首次发布

本文链接：https://blog.csdn.net/m0_61911999/article/details/125536925

版权

大纲：

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>

效果图：

登录成功后，进入到主页面。

好啦，今天的文章就分享到这了！

明思齐

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Layui入门

1、什么是layui? 2、为什么使用layui? 3、layui的优缺点 4、如何获得 layui 1. 官网首页下载（但是下载地址已经关闭，必须到开源地址下载【GitHub】） GitHub是一个面向开源及私有软件项目的托管平台，因为只支持Git作为唯一的版本库格式进行托管，故名GitHub。 2. Git 仓库下载你也可以通过 GitHub 或码云得到 layui 的完整开发包。 3. npm 安装（一般
复制链接

扫一扫