AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

layui入门

2023-10-23 72
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： layui入门

一.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;
  }
  @Override
  public 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 block
    e.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 block
      e.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 block
      e.printStackTrace();
    }
  }
  @Override
  public User getModel() {
    // TODO Auto-generated method stub
    return 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;
  }
  @Override
  public 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 block
    e.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 block
      e.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 block
      e.printStackTrace();
    }
  }
  @Override
  public User getModel() {
    // TODO Auto-generated method stub
    return 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>

实现就这样了

文章标签：
前端开发
开发者
JavaScript
搜索推荐
API
匿瘾
目录
相关文章
孤留光乩
|
前端开发 JavaScript Java
Layui之入门
Layui之入门
孤留光乩
101 0
君临沂
|
前端开发 JavaScript API
Layui的入门
Layui的入门
君临沂
123 0
流烟默
|
7月前
|
JavaScript 前端开发
layui使用实践总结
layui使用实践总结
流烟默
124 0
懒大王o
|
前端开发 JavaScript 开发者
Layui(入门)
Layui(入门)
懒大王o
94 0
姿势不太差
|
前端开发 JavaScript 开发者
Layui 简单介绍及入门
Layui 简单介绍及入门
姿势不太差
99 0
默不会开发
|
XML 前端开发 Java
LayUI入门，以及介绍
LayUI入门，以及介绍
默不会开发
235 0
朱琳均
|
前端开发 JavaScript 开发者
layui01
layui01
朱琳均
55 0
快乐阿超
layui模块入门
layui模块入门
快乐阿超
74 0
君易--鑨
|
前端开发 JavaScript Java
LayUI入门简介（详解）
LayUI入门简介（详解）
君易--鑨
800 0
Ar.小白
|
编解码 前端开发 API
LayUI入门
LayUI入门
Ar.小白
87 0

热门文章

最新文章

  • 1
    基于区块链的机器学习模型创建方案
  • 2
    性能的极致,Rust的加持,Zed-Dev编辑器快速搭建Python3.10开发环境
  • 3
    首届Global VR Hackathon完结 全球前三甲诞生
  • 4
    我的博客即将入驻“云栖社区”，诚邀技术同仁一同入驻。
  • 5
    iptables
  • 6
    DevExpress 10.2.4系列-ASPxListBox根据列值不同设置不同图标
  • 7
    jquery的load加载js页面到指定div中
  • 8
    分享平时工作中那些给力的shell命令（更新版）
  • 9
    如何在ubuntu下用SVN commit
  • 10
    hdu 1800 Flying to the Mars
  • 1
    HelloMeme：开源的面部表情与姿态迁移框架，将视频中的人物表情迁移到静态图像中生成动态视频
    98
  • 2
    VSI-Bench：李飞飞谢赛宁团队推出视觉空间智能基准测试集，旨在评估多模态大语言模型在空间认知和理解方面的能力
    30
  • 3
    CLEAR：新加坡国立大学推出线性注意力机制，使8K图像的生成速度提升6.3倍，显著减少了计算量和时间延迟
    30
  • 4
    Kheish：开源的多智能体开发框架，通过 YAML 配置工作流和多个 Agent 共同协作解决复杂任务
    38
  • 5
    Bamba-9B：基于 Mamba2 架构的仅解码语言模型，旨在提高大型语言模型在推理时的效率
    32
  • 6
    DisPose：清华北大等多所高校联合推出基于人物图像增强视频生成技术，实现对人物动画的准确控制和一致性
    29
  • 7
    InvSR：开源图像超分辨率生成模型，提升分辨率，修复老旧照片为超清图像
    27
  • 8
    Univer：开源全栈 AI 办公工具，支持 Word、Excel、PPT 等文档处理和多人实时协作
    24
  • 9
    《人工智能：驱散新材料数据噪声与填补缺失值的曙光》
    20
  • 10
    《人工智能：解锁新材料最佳掺杂元素及比例的密码》
    14

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    【案例实战】SpringBoot整合阿里云文件上传OSS