LayUI入门简介（详解）

最新推荐文章于 2024-03-29 11:00:08 发布

君易--鑨

最新推荐文章于 2024-03-29 11:00:08 发布

阅读量299

点赞数 2

分类专栏：前端文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/weixin_74352229/article/details/131651472

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

LayUI之入门简介（详解）

前言

想必大家在做项目中少不了使用框架的，像大家都知道的框架Bootstrap、easyui、layui等等，今天我给大家带来的是layui框架知识的分享，接下来然我们跟着思维导图一起来学习一下吧。

在这里插入图片描述

1. LayUI简介

1.1 什么是LayUI

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

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

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

1.2 LayUI、Bootstrap、easyUI三者的区别

设计哲学和风格：LayUi和easyUI都是基于国人的设计哲学，力求简洁、易用，尤其适合国内用户。而Bootstrap则是国际上较为流行的前端框架，注重现代和响应式设计。
功能和组件：三者都提供了大量的组件和功能，例如表单元素、按钮、导航栏等。LayUi和easyUI的组件更多，更符合国内市场需求，而Bootstrap则提供了较为通用的组件。
文档和社区支持：Bootstrap是最早流行的前端框架之一，拥有庞大的文档和活跃的社区支持，很容易找到解决问题的方法。而LayUi和easyUI在国内也有广泛的用户和社区，但相对于Bootstrap来说，文档和社区支持可能相对较少。
插件拓展：Bootstrap拥有丰富的第三方插件生态系统，可以方便地扩展和定制功能。而LayUi和easyUI的插件相对较少，但可以根据需求自行开发或集成其他插件。
兼容性和性能：LayUi和easyUI相对较轻量，加载速度较快，适合需要快速构建页面的项目。而Bootstrap相对较重，但在兼容性和浏览器支持方面更好。

1.3 LayUI的优点

轻量简洁：LayUI是一个轻量级框架，文件体积小，加载速度快。它采用模块化的设计理念，只包含必要的核心功能和组件，使得开发过程更加简洁高效。
易上手：LayUI提供了详细的文档和丰富的示例，使初学者能够迅速理解和上手。它使用简单的HTML结构和CSS类，使得开发者能够快速搭建页面和添加交互。
模块化开发：LayUI支持模块化开发，可以按需引入和使用各个组件。这样可以降低代码的耦合性，提高代码的可维护性和重用性，同时减小了整体文件的大小。
响应式设计：LayUI提供了响应式布局的支持，可以根据设备的屏幕大小自动调整页面布局。这样使得开发出的网站在不同的设备上都能够有良好的显示效果，提升用户体验。
丰富的组件：LayUI提供了大量的UI组件，包括表单元素、按钮、导航菜单、弹框等等。这些组件都经过了设计和优化，具有一致的风格和交互效果，可以大大缩短开发时间。
国内用户支持：作为国内的前端框架，LayUI广受国内开发者的喜爱和认可。它拥有庞大的用户群体和活跃的社区支持，可以轻松获取帮助和解决问题。

2. LayUI入门

2.1 配置搭建LayUI框架环境

导入相关文件

在这里插入图片描述

在相关的jsp文件中引入layui的css和js文件

在这里插入图片描述

2.2 测试LayUI是否导入成功

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 -->
<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>
<script src="./layui/layui.js"></script>
<script>
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World');
});
</script> 
</body>
</html>

页面效果

在这里插入图片描述

页面出现该效果则说明导入成功

3. 登陆界面及功能实现

3.1 实体类User

package com.YX.entity;

/**实体类：用户类
 * @author 君易--鑨
 * 2023年7月10日下午10:33:56
 * 
 */
public class User {
//    定义属性
	private long id;
	private String name;
	private String loginName;
	private String pwd;
	private long rid;
	
//	获取set/get方法
	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;
	}
	
	/**
	 * 无参构造
	 */
	public User() {
		// TODO Auto-generated constructor stub
	}
	
	/**
	 * 有参构造
	 * @param id
	 * @param name
	 * @param loginName
	 * @param pwd
	 * @param rid
	 */
	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;
	}
	
	@Override
	public String toString() {
		return "User [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", rid=" + rid + "]";
	}
}

3.2 Dao方法类（UserDao）

package com.YX.dao;

import java.util.List;

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

public class UserDao extends BaseDao<User> {
    
    /**
     * 登陆方法
     * @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> lst = super.executeQuery(sql, User.class,null );
    	if (lst != null && lst.size()==1 ) {
    		return lst.get(0);
		}
    	return null;
    }
    //测试方法
    public static void main(String[] args) {
		UserDao ud=new UserDao();
		User u=new User();
		u.setLoginName("zq");
		u.setPwd("1234");
		try {
			User user=ud.login(u);
			System.out.println(user);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
}

3.3 UserAction类

package com.YX.web;

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

import com.YX.dao.UserDao;
import com.YX.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>{
//实例化实体对象和dao方法
	private User user=new User();
	private UserDao userdao=new UserDao();
	@Override
	public User getModel() {
		return user;
	}
	
		public void login(HttpServletRequest req, HttpServletResponse resp) {
			System.out.println("用户信息："+user);
			try {
//				调用登陆方法
				User u = userdao.login(user);
				System.out.println(u);
				ResponseUtil.writeJson(resp, u);
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
	

}

3.4 配置web.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<config>
<action path="/user" type="com.YX.web.UserAction">
	</action>

</config>

3.5 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">
<title>Insert title here</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(${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', 'jquery' ], function() {
			var layer = layui.layer, $ = layui.jquery;

			//设置点击事件
			$("#login").click(function(){
				//发送ajax请求
				$.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('恭喜'+data.name+'登陆成功',{icon:6});
						}else{
							layer.alert('账号密码错误',{icon:5});
						}
					}
				});
				layer.msg($("#inputId").val())
			});
		});
	</script>
</body>
</html>

页面显示

在这里插入图片描述

登陆成功的效果

在这里插入图片描述

登陆失败的效果

在这里插入图片描述

4. 注册界面及功能实现

4.1 Dao方法类

package com.YX.dao;

import java.util.List;

import com.YX.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);
    }
   
    
    /**
     * 注册的方法
     * @param user
     * @return
     * @throws Exception
     */
    public int register(User user) throws Exception {
    	String sql="insert into t_oa_user (name,loginName,pwd,rid)values (?,?,?,?)"; 
    	int lst = super.executeUpdate(sql, user,new String[]{"name","loginName","pwd","rid"} );
    	if (lst>0 ) {
    		return lst;
		}
    	return 0;
    }
    
    
    
    public static void main(String[] args) {
		UserDao ud=new UserDao();
		User u=new User();
		u.setLoginName("yx");
		u.setName("杨鑫");
		u.setPwd("1234");
		u.setId(12);
		u.setRid(4);
		try {
			int register = ud.register(u);
			System.out.println(register);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
}

4.2 UserAction类

package com.YX.web;

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

import com.YX.dao.UserDao;
import com.YX.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>{
//实例化实体对象和dao方法
	private User user=new User();
	private UserDao userdao=new UserDao();
	@Override
	public User getModel() {
		return user;
	}
	
//注册
		public void register(HttpServletRequest req, HttpServletResponse resp) {
			System.out.println("用户信息："+user);
			try {
//				调用登陆方法
				 int register = userdao.register(user);
				System.out.println(register);
				ResponseUtil.writeJson(resp, register);
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
}

4.3 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">
<title>Insert title here</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(${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="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="text" id="password" placeholder="登录密码"
						class="tx-input">
				</p></li>
			<li class="col-24 col-m-24"><p class="tx-input-full">
					<button id="register" 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', 'jquery' ], function() {
			var layer = layui.layer, $ = layui.jquery;

			//设置点击事件
			$("#register").click(function(){
				//发送ajax请求
				$.ajax({
					url:'${pageContext.request.contextPath }/user.action?methodName=register',
					dataType:'json',
					data:{
						name:$("#name").val(),
						loginName:$("#username").val(),
						pwd:$("#password").val(),
						rid:'4',
					},
					method:'post',
					success:function(data){
						if (data) {
							layer.alert('恭喜注册成功',{icon:6});
						}else{
							layer.alert('注册失败',{icon:5});
						}
					}
				});
				layer.msg($("#inputId").val())
			});
		});
	</script>
</body>
</html>

页面效果

在这里插入图片描述

注册成功效果

在这里插入图片描述

结束语

希望能给大家带来帮助。

君易--鑨

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
LayUI入门简介（详解）

想必大家在做项目中少不了使用框架的，像大家都知道的框架Bootstrap、easyui、layui等等，今天我给大家带来的是layui框架知识的分享，接下来然我们跟着思维导图一起来学习一下吧。layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。
复制链接

扫一扫