layui入门

layui入门

  • 一.ayui简介
    • 1.简单易用
    • 2.组件丰富
    • 3.高度定制化
    • 4.响应式布局
    • 5.轻量灵活
  • 2.layui的入门基础操作
  • 3.登录实例
  • 4.注册实例

一.ayui简介

Layui（流行音 “layui”，来自“领域的模块化”）是一款前端UI框架，专注于提升 Web
开发效率。它基于流行的Web开发技术（HTML、CSS、JavaScript）构建，具有简洁、易用的特点，广泛应用于各种网站和Web应用的开发中。

以下是 Layui 的一些主要特点和功能：

1.简单易用

Layui 的设计理念是“零学习成本”，它提供了简洁清晰的API接口，使得开发者能够快速上手使用，无需花费大量时间去学习。

2.组件丰富

Layui 提供了丰富的常用组件，如表单、表格、导航、按钮、弹窗等，覆盖了大部分常见的页面元素，可以快速构建出美观、实用的界面。

3.高度定制化

Layui 允许开发者按需引入所需的模块和组件，避免了不必要的代码冗余，同时也方便进行个性化的定制和扩展。

4.响应式布局

Layui 基于响应式设计，可以自动适应不同屏幕尺寸的设备，保证页面在手机、平板和PC等多种设备上的良好显示效果。

5.轻量灵活

Layui 的整体体积非常小，压缩后仅约 20KB 左右，加载速度快，对网页性能影响较小。同时，Layui 的模块化设计也使得它非常灵活，可以根据项目需求选择性地使用和定制各个组件。

总的来说，Layui
是一个简单、易用、高效的前端UI框架，适用于各类Web开发项目，特别是中小型项目。它的目标是提供一种便捷、快速的前端开发方案，让开发者能够更加专注于业务逻辑的实现，而不需要过多关注细节和繁琐的前端技术。
Layui 提供了一些基本的操作和使用方法，下面是 layui 的入门基础操作：

2.layui的入门基础操作

引入 layui：在 HTML 文件中引入 layui 的 CSS 和 JS 文件，可以直接使用官方的 CDN 地址，也可以下载并本地引入。

html
<!DOCTYPE html>
<html><head><link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.min.css">
</head><body><!-- HTML 内容 --><script src="https://cdn.staticfile.org/layui/2.5.7/layui.min.js"></script>
</body></html>```使用组件：Layui 提供了丰富的组件，可以根据需要选择使用。
例如，使用 Layui 的按钮组件和弹窗组件：```html
html
<button class="layui-btn">普通按钮</button><button class="layui-btn layui-btn-primary">主要按钮</button><button class="layui-btn layui-btn-normal">正常按钮</button><button class="layui-btn layui-btn-warm">警告按钮</button><button class="layui-btn layui-btn-danger">危险按钮</button><script>layui.use('layer', function () {var layer = layui.layer;layer.msg('Hello World');});
</script>
表单验证：使用 Layui 的表单验证功能可以对用户输入进行验证。
html
<form class="layui-form" action=""><div class="layui-form-item"><label class="layui-form-label">用户名</label><div class="layui-input-block"><input type="text" name="username" lay-verify="required|username" placeholder="请输入用户名" autocomplete="off"class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">密码</label><div class="layui-input-block"><input type="password" name="password" lay-verify="required|password" placeholder="请输入密码" autocomplete="off"class="layui-input"></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="login">登录</button></div></div>
</form><script>layui.use('form', function () {var form = layui.form;form.verify({username: [/^[a-zA-Z0-9_]{4,16}$/, '用户名必须是4到16位的字母、数字或下划线'],password: [/^[\S]{6,12}$/, '密码必须是6到12位，且不能出现空格']});});
</script>

以上是 Layui 的一些基本操作示例，你可以根据自己的需求和具体情况进行使用和定制。Layui
官方文档提供了更详细的说明和示例，推荐你在开发过程中参考官方文档以获得更全面的了解和指导。

3.登录实例

1.实体

/*** */
package com.niyin.entity;/*** @author 匿瘾** @date:2023年7月10日 下午8:19:39* */
public class Regist {private long id ;private String name;private String loginName;//账号private String pwd;//密码private long rid;/*** */public Regist() {// TODO Auto-generated constructor stub}public Regist(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;}@Overridepublic String toString() {return "Regist [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", rid=" + rid+ "]";}}

2.dao方法

package com.niyin.dao;import java.util.List;import com.niyin.entity.User;
import com.niyin.util.BaseDao;
import com.niyin.util.PageBean;public class UserDao extends BaseDao<User> {public List<User> executeQuery(Class<User> clz, 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;
}public int registered(User user) throws Exception {String sql = "insert into t_oa_user(name,loginName,pwd,rid) values(?,?,?,?)";		return executeUpdate(sql, user,new String[] {"name","loginName","pwd","rid"});}public static void main(String[] args) {try {System.out.println(new UserDao().login(new User(0, "", "zhangsan", "1234",0)));} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}
}
}

3.子实现类

package com.niyin.web;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.niyin.dao.UserDao;
import com.niyin.entity.User;
import com.niyin.framework.ActionSupport;
import com.niyin.framework.ModelDriver;
import com.niyin.util.ResponseUtil;public class Useraction extends ActionSupport implements ModelDriver<User> {
private User user=new User();
private UserDao userdao=new UserDao();public String login(HttpServletRequest req, HttpServletResponse resp) {try {User u = userdao.login(user);ResponseUtil.writeJson(resp, u);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}return super.execute(req, resp);}public void registered(HttpServletRequest req, HttpServletResponse resp) {try {int n = userdao.registered(user);if(n>0) {ResponseUtil.writeJson(resp, n);}ResponseUtil.writeJson(resp, null);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}@Overridepublic User getModel() {// TODO Auto-generated method stubreturn user;}}

4.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>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(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>
//一般直接写在一个js文件中
layui.use(['layer','jquery'], function(){var layer = layui.layer,form = layui.form,$=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: 1});} else {layer.alert('失败了', {icon: 5});} }});})
});
</script> </body>
</html>

运行结果
在这里插入图片描述

4.注册实例

1.实体类

/*** */
package com.zking.entity;/*** @author 匿瘾** @date:2023年7月10日 下午8:19:39* */
public class Regist {private long id ;private String name;private String loginName;//账号private String pwd;//密码private long rid;/*** */public Regist() {// TODO Auto-generated constructor stub}public Regist(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;}@Overridepublic String toString() {return "Regist [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", rid=" + rid+ "]";}}

2.dao方法

package com.niyin.dao;import java.util.List;import com.niyin.entity.User;
import com.niyin.util.BaseDao;
import com.niyin.util.PageBean;public class UserDao extends BaseDao<User> {public List<User> executeQuery(Class<User> clz, 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;
}public int registered(User user) throws Exception {String sql = "insert into t_oa_user(name,loginName,pwd,rid) values(?,?,?,?)";		return executeUpdate(sql, user,new String[] {"name","loginName","pwd","rid"});}public static void main(String[] args) {try {System.out.println(new UserDao().login(new User(0, "", "zhangsan", "1234",0)));} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}
}
}

3.子实现类

package com.niyin.web;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.niyin.dao.UserDao;
import com.niyin.entity.User;
import com.niyin.framework.ActionSupport;
import com.niyin.framework.ModelDriver;
import com.niyin.util.ResponseUtil;public class Useraction extends ActionSupport implements ModelDriver<User> {
private User user=new User();
private UserDao userdao=new UserDao();public String login(HttpServletRequest req, HttpServletResponse resp) {try {User u = userdao.login(user);ResponseUtil.writeJson(resp, u);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}return super.execute(req, resp);}public void registered(HttpServletRequest req, HttpServletResponse resp) {try {int n = userdao.registered(user);if(n>0) {ResponseUtil.writeJson(resp, n);}ResponseUtil.writeJson(resp, null);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}@Overridepublic User getModel() {// TODO Auto-generated method stubreturn user;}}```4.jsp代码
```html
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ include file = "common/header.jsp" %>
<!DOCTYPE html PUBLIC >
<html>
<head><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(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="rid" placeholder="职位选择" class="tx-input"></p></li><li class="col-24 col-m-24"><p><input type="text" id="loginName" 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>	//一般直接写在一个js文件中layui.use(['layer', 'jquery'], function(){var layer = layui.layer,$ = layui.jquery;$("#login").click(function(){$.ajax({url:"${pageContext.request.contextPath }/user.action?methodName=registered",dataType:'json',data:{name:$("#name").val(),loginName:$("#loginName").val(),pwd:$("#password").val() ,rid:$("#rid").val() },method:'post',success:function(data){if(data){layer.alert("注册成功",{icon:6});}else{layer.alert("注册失败",{icon:5});}}})})});</script></body>
</html>

在这里插入图片描述
实现就这样了

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/20816.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

解决microsoft windows 恶意软件删除工具 占用内存高

解决microsoft windows 恶意软件删除工具 占用内存高

1、winR快捷键&#xff0c;输入regedit&#xff0c;按回车键进入注册表编辑器 2、定位到 \HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\ 并创建新项MRT 3、 新建DWORD(32)值&#xff0c;命名为DontOffer ThroughWUAU,数值数据为1; 4、以管理员身份运行命令提示符&#x…
阅读更多...
论文（1）——大家说SCI的一区二区和CCF中A类B类是什么意思？

论文（1）——大家说SCI的一区二区和CCF中A类B类是什么意思？

文章目录 引言问题描述问题解决CCF 和A、B、C类CCF注意事项 SCI和一区、二区如何判定你找的论文所属的会议或期刊是几区或者几类&#xff1f;使用特定的网站查询使用浏览器插件 一年之内的应该投什么刊物&#xff1f; 总结参考 引言 已经研一暑假了&#xff0c;周围很多人已经…
阅读更多...
【测试开发】Junit 框架

【测试开发】Junit 框架

目录 一. 认识 Junit 二. Junit 的常用注解 1. Test 2. Disabled 3. BeforeAll 4. AfterAll 5. BeforeEach 6. AfterEach 7. 执行测试 三. 参数化 1. 引入依赖 2. 单参数 3. 多参数 3.1 通过CSV实现 3.2 通过方法实现 4. 测试用例的执行顺序 四. 断言 五…
阅读更多...
系统架构设计师-项目管理

系统架构设计师-项目管理

目录 一、盈亏平衡分析 二、进度管理 1、WBS工作分解结构 2、进度管理流程 &#xff08;1&#xff09;活动定义 &#xff08;2&#xff09;活动排序 &#xff08;3&#xff09;活动资源估算&#xff1a; &#xff08;4&#xff09;活动历时估算&#xff1a; &#xff08;5&…
阅读更多...
ASP.NET版本泄露【原理扫描】

ASP.NET版本泄露【原理扫描】

如果想屏蔽 Server&#xff0c;X-AspNet-Version&#xff0c;X-AspNetMvc-Version 和 X-Powered-By&#xff0c;需要增加&#xff1a; <httpProtocol><customerHeaders><remove name"Server" /><remove name"X-AspNet-Version" />…
阅读更多...
volatile原理剖析和实例讲解

volatile原理剖析和实例讲解

一、是什么 volatile是Java的一个关键字&#xff0c;是Java提供的一种轻量级的同步机制&#xff0c; 二、能做什么 保证了不同线程对这个变量进行操作时的可见性&#xff0c;有序性。 三、可见性 可见性主要是指一个线程修改了共享变量的值&#xff0c;另一个线程可以看见…
阅读更多...
PLC远程控制模块的通讯方式有哪些？工业网关ZP4000的功能与特点

PLC远程控制模块的通讯方式有哪些？工业网关ZP4000的功能与特点

在工业场景中&#xff0c;我们PLC通常采用有线的方式进行数据通讯&#xff0c;这种通讯方式距离受到局限&#xff0c;随着科技进步发展&#xff0c;人们更依赖于远程控制&#xff0c;以无线通讯的方式能够以更低成本的方式实现PLC远程控制管理。 在不同区域的PLC场景中&#x…
阅读更多...
Django_POST请求的CSRF验证

Django_POST请求的CSRF验证

目录 正常验证CSRF form表单 ajax的POST请求 关闭CSRF验证 源码等资料获取方法 django的POST接口发起请求默认清空下需要进行CSRF验证 正常验证CSRF form表单 如果form表单直接在标签之间添加{{ csrf_token }}就可以完成验证 ajax的POST请求 ajax的post需要在请求的he…
阅读更多...
【监控系统】Prometheus监控组件Node-Exporter配置实战

【监控系统】Prometheus监控组件Node-Exporter配置实战

这一节&#xff0c;我们来配置一下Node-Exporter&#xff0c;那么我们先来了解一下什么是Prometheus的Exporter&#xff1f; 任何向Prometheus提供监控样本数据的程序都可以被称为一个Exporter&#xff0c;它是一种用于将不同数据源的指标提供给Prometheus进行收集和监控的工具…
阅读更多...
ITIL 4—监控和事态管理实践

ITIL 4—监控和事态管理实践

1 关于本文 本文为监控和事态管理实践提供了实用指南。它分为五个主要部分&#xff0c;内容包括&#xff1a; 有关实践的一般信息监控和事态管理的流程和活动及其在服务价值链中的角色监控和事态管理中涉及的组织和人员支持监控和事态管理的信息和技术合作伙伴和供应商对监控…
阅读更多...
Linux进度条小程序

Linux进度条小程序

文章目录 &#x1fa85;1. 回车换行♥1.1 回车♥1.2 换行 &#x1fa86;2. 缓冲区现象&#x1f9f8;3. 进度条实现♟3.1 逻辑♟3.2 进度条样式♟3.3 代码实现 &#x1f0cf;4. 场景使用 &#x1fa85;1. 回车换行 在学习C语言的时候&#xff0c;我们输出的时候&#xff0c;通常…
阅读更多...
【Redis】高可用之二：哨兵（sentinel）

【Redis】高可用之二：哨兵（sentinel）

本文是Redis系列第5篇&#xff0c;前4篇欢迎移步 【Redis】不卡壳的 Redis 学习之路&#xff1a;从十大数据类型开始入手_AQin1012的博客-CSDN博客关于Redis的数据类型&#xff0c;各个文章总有些小不同&#xff0c;我们这里讨论的是Redis 7.0&#xff0c;为确保准确&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023