一、LayUi介绍

1.什么是LayUi?

layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

官方网站：https://www.layui.com/（已下线）
参考地址：http://layui.org.cn/demo/index.html（已下线，非官网）

如下图：

下载可点击码云去下载：

当然了，除了使用码云下载（国内），我们也可以用另外一个，它是属于外国的开源平台：

而两者相比，我们国内的响应速度相对较快。

由国人开发（作者贤心），16年出厂的框架，其主要提供了很多好看、方便的样式，并且基本拿来即用，和Bootstrap有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本。

2.layui、easyui与bootstrap的对比

有趣的对比方式，嘿嘿嘿....
easyui=jquery+html4（用来做后台的管理界面）半老徐娘
bootstrap=jquery+html5 美女拜金
layui 清纯少女

2.1 layui和bootstrap对比（这两个都属于UI渲染框架）

1.layui是国人开发的一套框架，2016年出来的，现在已更新到2.X版本了。比较新，轻量级，样式简单好看（目前官网已下架，开源了）
2.bootstrap 相对来说是比较成熟的一个框架，现在已经更新到4.X版本。是一个很成熟的框架，这个大部分人一般都用过

1）适用范围不一样

1.layui 其实更偏向与后端开发人员使用，在服务端页面上有非常好的效果。

           2.适合做后台框架

3.layui是提供给后端开发人员最好的ui框架，基于DOM驱动，在实现前端交互上比较麻烦，页面的增删改查都需要查询DOM元素。所以在不需要交互的时候，用layui还是不错的（说这句话的人，只能说明你对layui不了解）

           4.bootstrap 在前端响应式方面做得很好，PC端和移动端表现都不错。

           5.适合做网站

           6.如果是类似官网，且需要同时满足PC端和移动端效果，bootstrap 表现很好，但是如果是要交互的网站，比如商城之类，layui显然更好，前后端分离

2）大小不一样
1.layui 轻量级
2.bootsrap 因为成熟，所以使用方便，但是同时也是因为成熟，就显得有些冗余

2.2 layui和easyui对比

       1.easyui 是非开源的，有需要解决的问题的话，就只能等官方更新了
       2.layui是开源的，社区比较活跃，解决问题还是比较快的
       3.easyui诞生的早些，所以功能相对完善一些，很多功能都能是比较健全的
       4.layui就相对来说少一些了，不过，功能都是像官网说的，精雕细琢
       5.layui更符合现在的审美

3.layui入门

将layui下载到了本地，那么可将其完整地放置到你的项目目录（或静态资源服务器），并在页面中分别引入：

<link rel="stylesheet" href="xxx/layui.css">

<script src="xxx/layui.js"></script>

3.1 路径问题

1）相对路径/绝对路径
2） base标签

入门案例：点击弹出框

接下来我们做一下准备工作，新建一个项目，把LayUi依赖都提前准备好：

新建了一个jsp页面：demo1，

然后引入：

接着对demo1页面做出一些调整:

demo1.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>
<!-- 引入 layui.css -->
<!-- ctrl+c拷贝文件全名
ctrl+shift+r按照全名查找文件 -->
<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>

回到官网：

把它复制到我们的demo1.jsp的body内：

<body>
<script>
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World');
});
</script>
</body>

运行效果如下：

我们进一步做点击按钮弹出框：

<body>
请输入：<input type="text" value="默认值" id="layui_demo1_input">
<button id="layui_demo1_btn">点我有惊喜</button>
<script>
//导入js相对应的模块  jquery.js
//将模块赋值给变量
layui.use(['layer', 'form', 'jquery'], function(){
  var layer = layui.layer
  ,form = layui.form
  ,$ = layui.jquery;
  $("#layui_demo1_btn").click(function(){
  var layui_demo1_input=$("#layui_demo1_input").val();
	  layer.msg(layui_demo1_input);
  })
  layer.msg('Hello World');
});
</script>
</body>

运行效果：

二、自定义模块

1、如何扩展一个layui(自定义模块) 参考模块规范

建一个文件mymodule：

再次打开官网，找到模块规范：

根据官网步骤一步一步操作：

新建一个demo2.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>
<!-- 引入 layui.css -->
<!-- ctrl+c拷贝文件全名
ctrl+shift+r按照全名查找文件 -->
<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>
<script src="${pageContext.request.contextPath }/static/js/layui/mymodule/js/mymod.js"></script>
<script src="${pageContext.request.contextPath }/static/js/layui/mymodule/mymodule_config.js"></script>

</head>
<body>
请输入：<input type="text" value="默认值" id="layui_demo1_input">
<button id="layui_demo1_btn">点我有惊喜</button>
请输入相关文字：<input type="text" value="默认值" id="layui_demo2_input">
<button id="layui_demo2_btn">自定义模块</button>
<script>
//导入js相对应的模块  jquery.js
//将模块赋值给变量
layui.use(['layer', 'form', 'jquery', 'mymod'], function(){
  var layer = layui.layer
  ,form = layui.form
  ,mymod = layui.mymod
  ,$ = layui.jquery;
  $("#layui_demo1_btn").click(function(){
  var layui_demo1_input=$("#layui_demo1_input").val();
	  layer.msg(layui_demo1_input);
  })
//给自定义模块按钮添加点击事件
	$("#layui_demo2_btn").click(function(){
	 var layui_demo2_input=$("#layui_demo2_input").val();
		mymod.say(layui_demo2_input);
		mymod.hello(layui_demo2_input);
	  })
	  layer.msg('Hello World');
	});
</script>
</body>
</html>

两个方法效果如下：

三、JSON回顾

1、如果我们想得到：{"name":"杨总","age":"18"} 这样一个格式的对象：

①map

package com.ycx.demo;

import java.util.HashMap;
import java.util.Map;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

public class Demo1 {
	public static void main(String[] args) throws Exception {
		Map<String, Object> map1=new HashMap<String, Object>();
		map1.put("name", "杨总");
		map1.put("age", "18");
		ObjectMapper om=new ObjectMapper();
//		writeValueAsString将对象/数组转成json字符串
		System.out.println(om.writeValueAsString(map1));
	}
}

打印结果如下：

②对象

package com.ycx.demo;

import java.util.HashMap;
import java.util.Map;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

public class Demo1 {
	public static void main(String[] args) throws Exception {
		
		User user = new User("杨总", 18);
		System.out.println(om.writeValueAsString(user));
	}
}

class User{
	private String name;
	private int age;
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	public User(String name, int age) {
		super();
		this.name = name;
		this.age = age;
	}
	public User() {
		// TODO Auto-generated constructor stub
	}
}

打印结果如下：

同样的JSON字符串，得到的方式有两种，一个是map，另一个是对象

2、如果我们想得到：

[{"name":"杨总","age":18},{"name":"小颜","age":19}] 这样一个格式的数组：

package com.ycx.demo;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

public class Demo1 {
	public static void main(String[] args) throws Exception {
		ArrayList<Object> list1 = new ArrayList<Object>();
		ArrayList<Object> list2 = new ArrayList<Object>();
		
		Map<String, Object> map1=new HashMap<String, Object>();
		map1.put("name", "杨总");
		map1.put("age", 18);
		ObjectMapper om=new ObjectMapper();
//		writeValueAsString将对象/数组转成json字符串
		System.out.println(om.writeValueAsString(map1));
		
		Map<String, Object> map2=new HashMap<String, Object>();
		map2.put("name", "小颜");
		map2.put("age", 19);
		list1.add(map1);
		list1.add(map2);
		
		
		User user = new User("杨总", 18);
		User user2 = new User("小颜", 19);
		list2.add(user);
		list2.add(user2);
		System.out.println(om.writeValueAsString(user));
		
		System.out.println(om.writeValueAsString(list1));
		System.out.println(om.writeValueAsString(list2));
	}
}
class User{
	private String name;
	private int age;
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	public User(String name, int age) {
		super();
		this.name = name;
		this.age = age;
	}
	public User() {
		// TODO Auto-generated constructor stub
	}
}

可发现使用两种方法得到的结果是一样的。

综上总结：

1）JSON对象字符串来源有两个 —— ①map;②对象，如User对象

2）JSON数组字符串来源有两个 —— ①List<Map>;②List<对象>，如List<User>

四、LayUi登录基本功能

1、构建登录页面

我们回到官网，找到做表单的代码：

把body部分的源代码复制到我们的login.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>登录</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>
    </body>
</html>

界面效果图如下：

界面搭建好了之后，接下来实现我们的登录功能：

接收参数

login.jsp:

  <script type="text/javascript">
            	layui.use(['jquery','layer'],function(){
            		let $=layui.jquery
            			,layer=layui.layer;
            		$("#login").click(function(){
            			$.ajax({
            				url:"${pageContext.request.contextPath }/user.action?methodName=login"
            						,dataType:'json'
            						,data:{
            								username:$("#username").val(),
            								password:$("#password").val()
            							}
            						,success:function(data){
            						//		console.log(data);	
            						if(data.code==200){
            							layer.alert(data.msg,{icon:1});
            						}else{
            							layer.alert(data.msg,{icon:2});
            						}
            						}
            			})
            		})
            	})
            </script>

建立一个User实体类:

package com.zking.entity;
/**
 * 实体类：用户类
 * @author 杨总
 *
 */
public class User {
	private String username;
	private String password;
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	public User(String username, String password) {
		super();
		this.username = username;
		this.password = password;
	}
	public User() {
		// TODO Auto-generated constructor stub
	}
	@Override
	public String toString() {
		return "User [username=" + username + ", password=" + password + "]";
	}
	
}

新建一个UserAction:

package com.zking.web;

import java.util.HashMap;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

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();
	
//	写一个方法处理前台的请求
	
	public String login(HttpServletRequest req, HttpServletResponse resp) {
		Map<String, Object> map=new HashMap<String, Object>();
		if("yangzong".equals(user.getUsername())&&"123456".equals(user.getPassword())) {
//		登录成功	
			map.put("code", 200);
			map.put("msg", "成功");
		}else {
//		登录失败	
			map.put("code", 0);
			map.put("msg", "账户密码错误");	
		}
		try {
			ResponseUtil.writeJson(resp, map);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}
	
	
	@Override
	public User getModel() {
		return user;
	}
	
}

ResponseUtil 工具类:

package com.zking.util;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;

public class ResponseUtil {

	public static void write(HttpServletResponse response,Object o)throws Exception{
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out=response.getWriter();
		out.println(o.toString());
		out.flush();
		out.close();
	}
	
	public static void writeJson(HttpServletResponse response,Object o)throws Exception{
		ObjectMapper om = new ObjectMapper();
//		om.writeValueAsString(o)代表了json串
		write(response, om.writeValueAsString(o));
	}
}

配置文件 mvc.xml：

<?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>

</config>

运行login.jsp登录界面：

如果输入错误，即：

如果输入正确，即：

接下来还要进行改造优化：

UserAction:

public String login(HttpServletRequest req, HttpServletResponse resp) {
		try {
			if("yangzong".equals(user.getUsername())&&"123456".equals(user.getPassword())) {
//		登录成功	
				ResponseUtil.writeJson(resp, new R()
						.data("code", 200)
						.data("msg", "登录成功"));
			
			}else {
//		登录失败	
				ResponseUtil.writeJson(resp, new R()
						.data("code", 0)
						.data("msg", "账户密码错误"));
			}	
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}

代码更加简洁了，运行效果是一样的。

2、主页搭建

如若登录成功，那么就要跳转到另一个界面，我们在login.jsp的script内：

添加跳转页面的代码，

再新建一个main.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>
</head>
<body>
欢迎主人~~~~
</body>
</html>

当我们再次输入正确的账户和密码时，

登陆成功后，就跳转到main.jsp页面来了~

LayUi之入门

一、LayUi介绍

1.什么是LayUi?

2.layui、easyui与bootstrap的对比

2）大小不一样
1.layui 轻量级
2.bootsrap 因为成熟，所以使用方便，但是同时也是因为成熟，就显得有些冗余

2.2 layui和easyui对比

3.layui入门

3.1 路径问题

接下来我们做一下准备工作，新建一个项目，把LayUi依赖都提前准备好：

新建了一个jsp页面：demo1，

二、自定义模块

1、如何扩展一个layui(自定义模块) 参考模块规范

三、JSON回顾

1、如果我们想得到：{"name":"杨总","age":"18"} 这样一个格式的对象：

同样的JSON字符串，得到的方式有两种，一个是map，另一个是对象

2、如果我们想得到：

[{"name":"杨总","age":18},{"name":"小颜","age":19}] 这样一个格式的数组：

综上总结：

1）JSON对象字符串来源有两个 —— ①map;②对象，如User对象

2）JSON数组字符串来源有两个 —— ①List<Map>;②List<对象>，如List<User>

四、LayUi登录基本功能

1、构建登录页面

界面搭建好了之后，接下来实现我们的登录功能：

login.jsp:

建立一个User实体类:

新建一个UserAction:

配置文件 mvc.xml：

运行login.jsp登录界面：

接下来还要进行改造优化：

UserAction:

2、主页搭建

今日分享就到这里啦！再会~

猜你喜欢

LayUi之入门

一、LayUi介绍

1.什么是LayUi?

2.layui、easyui与bootstrap的对比

2）大小不一样 1.layui 轻量级 2.bootsrap 因为成熟，所以使用方便，但是同时也是因为成熟，就显得有些冗余

2.2 layui和easyui对比

3.layui入门

3.1 路径问题

接下来我们做一下准备工作，新建一个项目，把LayUi依赖都提前准备好：

新建了一个jsp页面：demo1，

二、自定义模块

1、如何扩展一个layui(自定义模块) 参考 模块规范

三、JSON回顾

1、如果我们想得到 ：{"name":"杨总","age":"18"} 这样一个格式的对象：

同样的JSON字符串，得到的方式有两种，一个是map，另一个是对象

2、如果我们想得到 ：

[{"name":"杨总","age":18},{"name":"小颜","age":19}] 这样一个格式的数组：

综上总结：

1）JSON对象字符串来源有两个 —— ①map;②对象，如User对象

2）JSON数组字符串来源有两个 —— ①List<Map>;②List<对象>，如List<User>

四、LayUi登录基本功能

1、构建登录页面

界面搭建好了之后，接下来实现我们的登录功能：

login.jsp:

建立一个User实体类:

新建一个UserAction:

配置文件 mvc.xml：

运行login.jsp登录界面：

接下来还要进行改造优化：

UserAction:

2、主页搭建

今日分享就到这里啦！再会~

猜你喜欢

2）大小不一样
1.layui 轻量级
2.bootsrap 因为成熟，所以使用方便，但是同时也是因为成熟，就显得有些冗余

1、如何扩展一个layui(自定义模块) 参考模块规范

1、如果我们想得到：{"name":"杨总","age":"18"} 这样一个格式的对象：

2、如果我们想得到：