Getting Started with LayUI and Introduction

                                            1. Basic situation of LayUI

1. Introduction to LayUI

Layui (popular on layui.com) is a lightweight front-end UI framework that focuses on providing simple, easy-to-use, and flexible interface components and interactive experiences . It is based on HTML5 and CSS3 technology, adopts the idea of ​​modular development, and provides rich UI components, commonly used tool functions and flexible extension mechanism.

The design concept of Layui is "a comprehensive combination of classics and innovations". It provides a set of concise, intuitive and easy-to-use APIs, enabling developers to quickly build beautiful and functional front-end interfaces . Layui's code is streamlined, the file size is small, and the loading speed is fast, which is very suitable for developing responsive web applications.

Layui provides a wealth of components, including buttons, forms, tables, navigation, tabs, pop-up windows, rich text editors, etc. These components have a consistent style and interactive experience, which can effectively improve development efficiency. At the same time, Layui also provides a wealth of tool functions and plug-ins, such as date picker, pagination, upload components, etc., which are convenient for developers to perform common operations and function extensions.

In addition to providing basic UI components and utility functions, Layui also supports custom themes and module extensions. Developers can customize the interface style and interaction effects according to their own needs. At the same time, Layui also supports modular development. Developers can package their components into modules for easy reuse and expansion.

In short, Layui is a powerful, easy-to-use front-end UI framework, suitable for various types of web application development. It has good compatibility and performance advantages, and can help developers quickly build excellent front-end interfaces.

2. LayUI development history

The birth of the Layui framework can be traced back to 2016 . In this year, a front-end developer named Xianxin put forward an idea: hoping to simplify the development process and improve development efficiency through a simple, easy-to-use, high-performance front-end framework . So, he started the development of the Layui framework.

Xianxin is an engineer who is keen on front-end development, and he has accumulated a lot of experience and skills in the development process. He hopes to help other developers quickly develop excellent front-end interfaces by organizing his experience into a front-end framework.

Layui adhered to some principles at the beginning of the design, such as simplicity and ease of use, efficient and streamlined, modular development, etc. Xianxin has carefully designed Layui's API and component structure so that it can provide a consistent interface style and interactive effects, and at the same time have flexible scalability.

Layui quickly gained widespread attention and recognition after its release. Developers have tried to use Layui to develop their own projects, and provided a lot of feedback and suggestions. Xianxin actively listens to users' opinions, and constantly improves and perfects the framework to make it more in line with the needs of developers.

Over time, Layui has gradually become one of the most popular front-end frameworks in China. More and more developers choose Layui to build their projects, and the Layui community is growing rapidly. With the help of the community, Layui is constantly updating the version to provide more and more rich and powerful functions.

So far, Layui has released several versions, each version brings new features and improvements. The success of Layui is inseparable from the hard work of Xianxin and the support of developers. It not only simplifies the process of front-end development, but also promotes communication and sharing among front-end developers, and has become an important part of the domestic front-end industry. ( Unfortunately, because it is open source, it will stop updating on 2021.10.13 and there will be no funds for maintenance)

---

                       2. Add Layui to the web project

1. Search URL

    Official website: https://www.layui.com/ (offline)
   Reference address: http://layui.org.cn/demo/index.html (offline, unofficial website)

 2. Download the file and unzip it

 Click to download, no login account required

The decompressed files are these files, the layui files we need are in the layui package

3. Join the web project

3.1 Import layui package

 Create a static resource package and import our resources

3.2. Import resources in jsp

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>

The role of pageContext.request.contextPath is applicable to any import of js, css, img, etc.

 3.3 Renderings

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@ include  file="common/header.jsp" %>
</head>
<body>
 
<!-- 你的 HTML 代码 -->
<script>
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World');
});
</script> 
</body>
</html>

                                    3. Use LayUi to realize login and registration

1. Realize login:

1.1 First write jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="common/header.jsp"%>
<html>
<head>
<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">
<title>会员登录-演示网站</title>
<meta http-equiv="Content-Language" content="zh-CN">
<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(${pageContext.request.contextPath}/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>
	<script>
		layui.use([ 'layer', 'jqurey' ], function() {
			var layer = layui.layer, $ = layui.jqurey;

			$("#login").click(function() {
			$.ajax({
			url:'${pageContext.request.contextPath}/user.action?methodName=login',
			dataType:'json',
			data:{
				loginName:$("#username").val(),
				password:$("#password").val()
			},
			method:'post',
			sucess:function (data){
				if (data) {
					layer.alert('恭喜'+data.name+'登录成功',{icon:6});	
				}else {
					layer.alert('密码错误',{icon:6});
				}
			}
			});	
			
			})
		});
	</script>
</body>
</html>

 1.2 Write entity, dao method,

1.2.1 Entity

package com.lz.entity;

public class User {
	private long id;
	private String name;
	private String loginName;
	private String pwd;
	private long rid;
	/* (non-Javadoc)
	 * @see java.lang.Object#toString()
	 */
	@Override
	public String toString() {
		return "User [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", rid=" + rid + "]";
	}
	/**
	 * @return the id
	 */
	public long getId() {
		return id;
	}
	/**
	 * @param id the id to set
	 */
	public void setId(long id) {
		this.id = id;
	}
	/**
	 * @return the name
	 */
	public String getName() {
		return name;
	}
	/**
	 * @param name the name to set
	 */
	public void setName(String name) {
		this.name = name;
	}
	/**
	 * @return the loginName
	 */
	public String getLoginName() {
		return loginName;
	}
	/**
	 * @param loginName the loginName to set
	 */
	public void setLoginName(String loginName) {
		this.loginName = loginName;
	}
	/**
	 * @return the pwd
	 */
	public String getPwd() {
		return pwd;
	}
	/**
	 * @param pwd the pwd to set
	 */
	public void setPwd(String pwd) {
		this.pwd = pwd;
	}
	/**
	 * @return the rid
	 */
	public long getRid() {
		return rid;
	}
	/**
	 * @param rid the rid to set
	 */
	public void setRid(long rid) {
		this.rid = rid;
	}
	public User() {
		super();
	}
	public User(long id, String name, String loginName, String pwd, long rid) {
		super();
		this.id = id;
		this.name = name;
		this.loginName = loginName;
		this.pwd = pwd;
		this.rid = rid;
	}
}

1.2.2 Login dao method

/**
	 * 登录
	 * @param user
	 * @return
	 * @throws Exception
	 */
	public  User   login(User  user ) throws Exception {
		String  sql="select *from  t_oa_user  where loginName="+user.getLoginName()+"' and   pwd='"+user.getPwd()+"'  ";
		List<User> list = super.executeQuery(sql, User.class,null);
		if (list!=null&&list.size()==1) {
			return  list.get(0);
		}
		return   null;
	}

1.3 Realize login and add action

package com.lz.web;

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

import com.lz.dao.UserDao;
import com.lz.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);
			ResponseUtil.writeJson(resp, u);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

	}
	// 增加 重定向 book.action
		public String add(HttpServletRequest req, HttpServletResponse resp)  {
			try {
				int add = userdao.add(user);
				
			} catch (Exception e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
			return "toList";
		}

	@Override
	public User getModel() {
		// TODO Auto-generated method stub
		return user;
	}

}

 1.4 configuration xml

	
	<action  path="/user"  type="UserAction">
	<forward name="toList" path="/user.action?methodName=list"
			redirect="true" />
	</action

2. Register

2.1 Write jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="common/header.jsp"%>
<html>
<head>
<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">
<title>会员注册-演示网站</title>
<meta http-equiv="Content-Language" content="zh-CN">
<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(${pageContext.request.contextPath}/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="password" id="name" 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>
					<input type="password" id="rid" placeholder="注册rid"
						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>
		</ul>
	</div>
	<script>
		layui.use([ 'layer', 'jqurey' ], function() {
			var layer = layui.layer, $ = layui.jqurey;

			$("#login").click(function() {
			$.ajax({
			url:'${pageContext.request.contextPath}/user.action?methodName=login',
			dataType:'json',
			data:{
				name:$("#name").val(),
				loginName:$("#username").val(),
				password:$("#password").val(),
				rid:$("#rid").val()
			},
			method:'post',
			sucess:function (data){
				if (data) {
					layer.alert('恭喜'+data.name+'注册成功',{icon:6});	
				}else {
					layer.alert('密码错误',{icon:6});
				}
			}
			});	
			
			})
		});
	</script>
</body>
</html>

2.2 Write dao

public int add(User  user) throws Exception {
		String sql = "insert  into   t_oa_user values(?,?,?,?,?)";
		return super.executeUpdate(sql, user, new  String[] {"id","name","loginName","pwd","rid"});
	}

3.