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>

页面效果

注册成功效果

结束语

希望能给大家带来帮助。

LayUI入门简介（详解）

前言

1. LayUI简介

1.1 什么是LayUI

1.2 LayUI、Bootstrap、easyUI三者的区别

1.3 LayUI的优点

2. LayUI入门

2.1 配置搭建LayUI框架环境

2.2 测试LayUI是否导入成功

Demo1测试jsp文件代码

页面效果

3. 登陆界面及功能实现

3.1 实体类User

3.2 Dao方法类（UserDao）

3.3 UserAction类

3.4 配置web.xml文件

3.5 jsp界面代码

页面显示

登陆成功的效果

登陆失败的效果

4. 注册界面及功能实现

4.1 Dao方法类

4.2 UserAction类

4.3 jsp代码及页面效果

页面效果

注册成功效果

结束语

热门文章

最新文章

相关课程

相关电子书

相关实验场景