layui介绍以及登录功能的实现-Toy模板网

这篇具有很好参考价值的文章主要介绍了layui介绍以及登录功能的实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一. layui简介

1.1 layui介绍

Layui 是一套开源免费的 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，非常适合网页界面的快速构建。Layui 区别于一众主流的前端框架，它更多是面向于后端开发者，即无需涉足各类构建工具，只需面向浏览器本身，便可将页面所需呈现的元素与交互信手拈来。

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

1.2 主要构成

元素
layui 的元素由以下组成：
布局（栅格、后台布局）、颜色、字体图标、动画、按钮、表单、导航条、面包屑、选项卡、进度条、面板、静态表格、徽章、时间线、辅助元素等。
模块
layui 提供了丰富的内置模块，他们皆可通过模块化的方式按需加载，其中包括：layer、layDate、layPage、laytpl、table、form、upload、element、tree、layeditor、rate、carousel、flow、util、code等。

1.3 迭代历程

2016年10月14日，Layui 发布了 1.0.0 首版，此后多年被广泛应用在众多 Web 平台。
2021年10月13日，Layui 发布了原官网下线的公告，并将文档站点切换到了 Gitee Pages，社区及日常维护亦全面转移到了 Gitee 和 Github 平台，以此呼吁大家拥抱其他更好的主流框架，导致大家误以为 Layui 停更了。事实上，自那以后，Layui 仍然在 Github 和 Gitee 保持活跃，并不存在所谓的停止更新，从当时的 2.6.8 一直连续迭代到如今的最新版本。
2023年4月24日，Layui 发布了 2.8.0 正式版 [8] ，并上线了新的文档站点，Layui声称这是一次朴实的回归，更是情怀的延续。但仍然坚持两年前那则公告中的观点，即仍然推荐大家去拥抱主流，始终保持对前沿技术的无限热爱，是开发者们都应具备的思维属性。而 Layui 所做的，是为填补主流之外的那些略显狭小的空隙。Layui 虽不是前端主流，但也早已不是作者个人的 Layui，而是所有仍在坚持使用它的人的 Layui，它仍然支撑着许多项目，也代表着许多人的工作。作为开源创作者，应该要为这些坚持者而守望。
未来，Layui 会持续陪伴着所有为之热爱的人们，共同去论证 Layui 开发模式的可行性。

1.4 layui，easyui和bootstrap对比

1.4.1 layui与bootstrap对比（这两个都属于ui渲染框架）

layui是国人开发的一套框架，2016年出来的，现在已更新到2.X版本了。比较新，轻量级，样式简单好看（目前官网已下架，开源了）
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 因为成熟，所以使用方便，但是同时也是因为成熟，就显得有些冗余

1.4.2 layui与easyui对比

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

二. layui入门案例【弹出框】

将layui下载到本地，将其完整的放置到项目目录下

layui介绍以及登录功能的实现,layui,前端,javascript

在页面中引入

   <!-- 引入 layui.css -->
   <link rel="stylesheet" href="xxx/layui.css">
   <!-- 引入 layui.js -->
   <script src="xxx/layui.js"></script>

实现弹出框

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

运行效果如下：
layui介绍以及登录功能的实现,layui,前端,javascript

三. 登录功能实现

将jar架包，配置文件导入，再配置xml

【具体可以参考http://t.csdn.cn/VHsGW】

实体类，dao层的编写

实体类【User】

package com.zking.entity;

public class User {
	
	private long id;
	private String name;
	private String loginName;
	private String pwd;
	private long rid;
	
	public User() {
		// TODO Auto-generated constructor stub
	}

	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;
	}

	public long getId() {
		return id;
	}

	public void setId(long id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getLoginName() {
		return loginName;
	}

	public void setLoginName(String loginName) {
		this.loginName = loginName;
	}

	public String getPwd() {
		return pwd;
	}

	public void setPwd(String pwd) {
		this.pwd = pwd;
	}

	public long getRid() {
		return rid;
	}

	public void setRid(long rid) {
		this.rid = rid;
	}

	@Override
	public String toString() {
		return "User [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", rid=" + rid + "]";
	}

	public User(String name, String loginName, String pwd) {
		super();
		this.name = name;
		this.loginName = loginName;
		this.pwd = pwd;
	}
}

dao层【UserDao】

package com.zking.dao;

import java.util.List;

import com.zking.entity.User;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;

public class UserDao extends BaseDao<User> {
	

	public List<User> list(User user, PageBean pageBean) throws Exception {
		String sql = "select *from t_oa_user where 1=1";
		return super.executeQuery(sql, User.class, pageBean);
	}


	
	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;
				
	}
	
}

Action的编写【UserAction】

package com.zking.web;

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

import com.zking.dao.UserDao;
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();
	private UserDao ud = new UserDao();
	
	
	public void login(HttpServletRequest req, HttpServletResponse resp) {
		try {
			User u = ud.login(user);
			ResponseUtil.writeJson(resp, u);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
	}
	
	@Override
	public User getModel() {
		// TODO Auto-generated method stub
		return user;
	}

	

}

jsp界面【User.jsp】

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="common/header.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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>
<title>Insert title here</title>
</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 src="./layui/layui.js"></script>
	<script>
		layui.use([ 'layer', 'jquery' ], function() {
			var layer = layui.layer
			, $=layui.jquery;

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

界面效果如下：
layui介绍以及登录功能的实现,layui,前端,javascript