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

LayUI入门简介（详解）

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

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

1.3 LayUI的优点

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

注册成功效果

结束语

希望能给大家带来帮助。

文章标签：
前端开发
Java
开发者
JavaScript
UED
君易--鑨
目录
相关文章
〔Lisa〕
|
JSON 前端开发 JavaScript
layui介绍及入门基础（看我这篇就会了！！！）
layui介绍及入门基础（看我这篇就会了！！！）
〔Lisa〕
268 0
孤留光乩
|
前端开发 JavaScript Java
Layui之入门
Layui之入门
孤留光乩
101 0
ChatYU.
|
XML 前端开发 程序员
Layui入门及案例演示2
Layui入门及案例演示2
ChatYU.
83 0
ChatYU.
|
前端开发 JavaScript
Layui之组件的基本使用及案例演示2
Layui之组件的基本使用及案例演示2
ChatYU.
89 0
ChatYU.
|
前端开发 JavaScript
Layui之组件的基本使用及案例演示1
Layui之组件的基本使用及案例演示1
ChatYU.
109 0
匿瘾
|
前端开发 JavaScript 搜索推荐
layui入门
layui入门
匿瘾
71 0
流烟默
|
7月前
|
JavaScript 前端开发
layui使用实践总结
layui使用实践总结
流烟默
124 0
快乐阿超
layui模块入门
layui模块入门
快乐阿超
73 0
默不会开发
|
XML 前端开发 Java
LayUI入门，以及介绍
LayUI入门，以及介绍
默不会开发
231 0
讓丄帝愛伱
|
前端开发 JavaScript
LayUI基本介绍
LayUI基本介绍
讓丄帝愛伱
96 0

热门文章

最新文章

  • 1
    四大触点，教你从“用户视角”构建数据分析体系
  • 2
    Spring-boot+Dubbo应用启停源码分析
  • 3
    《Stata统计分析与应用（第2版）》一3.4 图形的保存、合并及修改
  • 4
    RocketMq-Request-Reply消息
  • 5
    Confluence 6 手动添加用户
  • 6
    2013年4月20日 通用权限管理系统组件V3.8功能改进说明
  • 7
    Configuring EIGRP Unequal-Cost Paths
  • 8
    PowerShell 指定关键词遍历文件内容
  • 9
    Windows时间服务出现故障 向用户发送错误的时间
  • 10
    三种dedecms调用相关文章的方法
  • 1
    《鸿蒙HarmonyOS应用开发从入门到精通（第2版）》简介
    54
  • 2
    《Python 助力：人工智能模型的“瘦身”与“加速”之旅》
    111
  • 3
    《非计算机专业者：Python 开启人工智能职业新航道》
    40
  • 4
    《Python赋能：智绘智慧城市新蓝图》
    43
  • 5
    《智育新篇：点亮学生人工智能伦理与社会责任之光》
    47
  • 6
    《数据主权：人工智能时代的核心基石与挑战》
    33
  • 7
    鸿蒙HarmonyOS应用开发 | 探索 HarmonyOS Next-从开发到实战掌握 HarmonyOS Next 的分布式能力
    110
  • 8
    鸿蒙原生开发环境的创新与性能优化：从工具到跨平台支持的全方位提升
    272
  • 9
    鸿蒙HarmonyOS应用开发 | 「鸿蒙技术分享」HarmonyOS NEXT元服务卡片实战体验
    161
  • 10
    Qwen-Coder：通过Qwen 2.5模型实现智能代码生成的技术实践
    41

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • 现代Javascript高级教程
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    DataWorks售前咨询