LayUI的使用-阿里云开发者社区

1、介绍

1.1 是什么

LayUI是一个基于JavaScript的前端开发框架，旨在简化Web界面的设计和开发。它使用了简洁友好的API，并提供了丰富的组件和样式，使开发者可以快速构建美观、响应式的网页界面。

下面是LayUI的一些特点和组成部分的详细介绍：

✌️简洁易用的API**：LayUI提供了简单、直观的API，使开发者可以使用少量的代码来实现复杂的界面效果。开发者只需简单地引入LayUI的库文件，即可开始使用LayUI。

✌️模块化开发**：LayUI使用了模块化的设计理念，将各个组件拆分成独立的模块，开发者可以根据需求选择性地引入和使用这些模块。这样可以提高代码的重用性和维护性。

✌️丰富的组件**：LayUI提供了一系列丰富的界面组件，例如表单、表格、弹窗、导航、菜单等，这些组件可以满足常见的前端需求，并且可以自由组合在一起，构建符合实际需求的界面。

✌️响应式设计**：LayUI支持响应式布局，可以根据不同屏幕尺寸自适应地调整界面布局。这使得开发的网页界面在不同的设备上都能够有良好的显示效果，提升用户体验。

✌️丰富的主题和样式**：LayUI提供了多种主题和样式，开发者可以根据实际需求选择合适的主题，轻松地改变网页的风格和外观。

✌️开放的扩展性**：LayUI提供了一套开放的扩展机制，开发者可以根据需要进行二次开发，定制满足自己需求的组件或样式。

总的来说，LayUI是一个简单、易用、灵活的前端开发框架，它可以帮助开发者快速搭建优雅、高效的网页界面。无论是初学者还是有经验的开发者，都可以通过LayUI来简化开发流程，实现出色的前端效果。

2、使用

2.1 功能介绍

其中官方网站已经下线，可以访问该网站地址进行使用: 在线示例 - Layui

2.2 功能对比

下面是LayUI、EasyUI和Bootstrap的优点体现的更具体描述：

LayUI的优点体现：

- 简单易用：LayUI的API设计简单、直观，易于上手和使用，尤其适合前端开发的初学者。

- 响应式布局支持：LayUI提供了响应式布局的支持，能够根据不同设备的屏幕尺寸自适应布局，使页面在不同设备上都能良好展示。

- 丰富的组件：LayUI提供了丰富的组件库，包括表单、表格、导航等常用界面组件，使开发者能够快速构建功能完备、美观的网页界面。

- 可定制性：LayUI提供了开放的扩展机制，允许开发者根据自己的需求进行定制和扩展，能满足不同项目的个性化需求。

EasyUI的优点体现：

- 组件丰富：EasyUI拥有丰富的可视化组件库，包括表格、树型控件、弹窗等常用组件，易于使用和定制。

- 强大的数据处理能力：EasyUI内置了数据网格和表单控件，支持数据的增删改查以及各种数据操作，方便开发者处理复杂的数据交互和操作需要。

- 可扩展性：EasyUI支持自定义扩展和插件，使开发者能够根据项目的特定需求进行准确的扩展和定制。

Bootstrap的优点体现：

- 响应式布局支持：Bootstrap是一个流行的响应式框架，能够根据不同设备的尺寸自适应布局，确保页面在不同设备上呈现出良好的显示效果。

- 组件丰富：Bootstrap提供了大量的组件和样式，如网格系统、按钮、导航、表单等，使开发者能够快速搭建现代化、美观的网页界面。

- 社区支持和生态圈：Bootstrap拥有庞大的用户社区和活跃的生态圈，有大量的开源模板和插件可供使用，易于扩展和集成到项目中。

总而言之，LayUI、EasyUI和Bootstrap都有自己的优点和特点。LayUI注重简洁易用和定制性，EasyUI注重数据处理和组件库，Bootstrap注重响应式布局和社区支持。根据具体的项目需求和个人喜好，选择合适的框架能够提高开发效率，快速构建出功能完备、美观的前端界面。

2.3 主要功能

LayUI具有以下主要功能和特点：

1. 界面元素：LayUI提供了丰富的界面元素，如按钮、表单、表格、导航、面包屑、进度条等，可以快速构建各种样式美观的界面。

2. 布局系统：LayUI采用了响应式布局方式，可以根据设备的不同自适应地调整页面布局，以确保在各种屏幕尺寸下都有良好的显示效果。

3. 数据表格：LayUI提供了强大且易于使用的数据表格组件，支持表头固定、排序、分页、数据加载等功能，并提供了丰富的自定义配置选项。

4. 表单验证：LayUI内置了表单验证模块，可以轻松实现对表单数据的验证，包括必填字段、长度限制、格式验证等，提高了表单的可靠性和用户友好性。

5. 弹层组件：LayUI提供了弹层组件，包括提示框、确认框、加载框、普通弹层等，在页面中展示消息、警告、询问等交互式弹窗。

6. 菜单导航：LayUI提供了便捷的菜单导航组件，可以构建水平导航、垂直导航，支持多级菜单和动态加载数据。

7. 工具函数：LayUI内置了一些常用的工具函数，如日期处理、字符编码转换、模板引擎等，方便开发者快速处理常见的数据操作。

8. 模块化开发：LayUI采用了模块化的开发方式，组件之间相互独立，可以按需引入和使用，避免了冗余代码，提高了代码的可维护性和可扩展性。

9. 皮肤定制：LayUI支持自定义皮肤，开发者可以根据项目需求轻松切换或定制界面的样式，满足不同风格的设计需求。

总的来说，LayUI提供了丰富的界面元素和交互组件，同时支持响应式布局和模块化开发，使得开发者能够快速构建美观、功能完备的前端界面，并提供良好的用户体验。

2.4 使用流程

LayUI的使用流程可以分为以下几个步骤：

1. 引入LayUI库：在你的HTML文件中，引入LayUI库的相关文件，包括`layui.js`和`layui.css`。你可以从LayUI官方网站下载最新版本的LayUI库，然后将这些文件复制到你的项目中。

<link rel="stylesheet" href="path/to/layui.css">
<script src="path/to/layui.js"></script>

2. **初始化LayUI**：在你的JavaScript代码中，使用`layui.use()`方法来初始化LayUI并加载需要使用的模块。

<script>
  layui.use(['element', 'form'], function(){
    var element = layui.element;
    var form = layui.form;
    // 在这里编写你的代码
  });
</script>

上面的代码中，我们通过`layui.use()`方法引入了`element`和`form`两个模块。你可以根据你的需求引入其他需要使用的模块。

3. **使用LayUI组件**：在`layui.use()`方法的回调函数中，你可以使用LayUI提供的各种组件来构建你的界面和功能。

<script>
  layui.use(['element', 'form'], function(){
    var element = layui.element;
    var form = layui.form;
    // 菜单导航
    element.init(); // 初始化菜单
    element.on('nav(menu)', function(elem){
      // 处理菜单点击事件
      console.log(elem); // 输出点击的菜单信息
    });
    // 表单验证
    form.on('submit(formDemo)', function(data){
      // 表单提交的逻辑代码
      return false; // 阻止表单提交
    });
  });
</script>

在上面的示例中，我们使用`element.init()`初始化菜单导航，并监听菜单的点击事件。另外，我们使用`form.on('submit')`监听表单的提交事件，并编写了相应的逻辑代码。

4. **编写HTML结构**：根据你的需求，编写相应的HTML结构，可以使用LayUI提供的HTML标签和CSS类来构建界面。

<ul class="layui-nav" lay-filter="menu">
  <li class="layui-nav-item"><a href="">首页</a></li>
  <li class="layui-nav-item"><a href="">产品</a></li>
  <li class="layui-nav-item"><a href="">关于</a></li>
</ul>
<form class="layui-form" action="">
  <!-- 表单元素 -->
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-inline">
      <input type="text" name="username" lay-verify="required" 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="formDemo">立即提交</button>
    </div>
  </div>
</form>

上面的代码展示了一个简单的菜单导航和一个表单，使用了LayUI的相应标签和CSS类。

通过以上流程和示例，你可以开始使用LayUI来构建你的界面和实现功能。可以根据具体的需求引入相应的模块，使用LayUI提供的组件和样式来开发各种界面元素和交互功能。你可以查阅LayUI官方文档，了解更多关于各个模块和组件的详细使用方法和示例代码。

3、注册案例

3.1 创建表

创建一个属性字段为如图所示中的 User 表

3.2 数据库连接及导包

config.properties 文件

#mysql8
driver=com.mysql.cj.jdbc.Driver
url=jdbc:mysql://127.0.0.1:3306/mybatis_ssm?useUnicode=true&characterEncoding=utf8&serverTimezone=GMT&useSSL=true
user=root
pwd=123456

其中mybatis_ssm是数据库名称，root是账号，123456是密码，每人的都不一样可以根据自己的进行修改编辑。

DBAccess 连接类

package com.sy.utils;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Properties;
/**
 *数据库连接类
 */
public class DBAccess {
  private static String driver;
  private static String url;
  private static String user;
  private static String password;
  static {// 静态块执行一次，加载 驱动一次
    try {
      InputStream is = DBAccess.class
          .getResourceAsStream("config.properties");
      Properties properties = new Properties();
      properties.load(is);
      driver = properties.getProperty("driver");
      url = properties.getProperty("url");
      user = properties.getProperty("user");
      password = properties.getProperty("pwd");
      Class.forName(driver);
    } catch (Exception e) {
      e.printStackTrace();
      throw new RuntimeException(e);
    }
  }
  /**
   * 获得数据连接对象
   * 
   * @return
   */
  public static Connection getConnection() {
    try {
      Connection conn = DriverManager.getConnection(url, user, password);
      return conn;
    } catch (SQLException e) {
      e.printStackTrace();
      throw new RuntimeException(e);
    }
  }
  public static void close(ResultSet rs) {
    if (null != rs) {
      try {
        rs.close();
      } catch (SQLException e) {
        e.printStackTrace();
        throw new RuntimeException(e);
      }
    }
  }
  public static void close(Statement stmt) {
    if (null != stmt) {
      try {
        stmt.close();
      } catch (SQLException e) {
        e.printStackTrace();
        throw new RuntimeException(e);
      }
    }
  }
  public static void close(Connection conn) {
    if (null != conn) {
      try {
        conn.close();
      } catch (SQLException e) {
        e.printStackTrace();
        throw new RuntimeException(e);
      }
    }
  }
  public static void close(Connection conn, Statement stmt, ResultSet rs) {
    close(rs);
    close(stmt);
    close(conn);
  }
  public static boolean isOracle() {
    return "oracle.jdbc.driver.OracleDriver".equals(driver);
  }
  public static boolean isSQLServer() {
    return "com.microsoft.sqlserver.jdbc.SQLServerDriver".equals(driver);
  }
  public static boolean isMysql() {
    return "com.mysql.cj.jdbc.Driver".equals(driver);
  }
  public static void main(String[] args) {
    Connection conn = DBAccess.getConnection();
    System.out.println(conn);
    DBAccess.close(conn);
    System.out.println("isOracle：" + isOracle());
    System.out.println("isSQLServer：" + isSQLServer());
    System.out.println("isMysql：" + isMysql());
    System.out.println("数据库连接(关闭)成功");
  }
}

3.3 实体类(模型)

User 实体类

package com.sy.entity;
public class User {
  private long id;
  private String name;
  private String loginname;
  private String pwd;
  private long rid;
  public User() {
    // TODO Auto-generated constructor stub
  }
  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(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 + "]";
  }
}

UserDao 实体方法类

package com.sy.Dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import com.CloudJun.entity.User;
import com.CloudJun.utils.DBAccess;
/**
 *实体方法类(User的Dao层)
 */
public class UserDao {
  public User login(User u) throws Exception {
    User user = null;
    String sql = "select * from  t_oa_user where loginName = '"+u.getLoginName()+"' and  pwd = '"+u.getPwd()+"' ";
    Connection conn = DBAccess.getConnection();
    PreparedStatement pre = conn.prepareStatement(sql);
    ResultSet re = pre.executeQuery();
    if (re.next()) {
      user = new User(re.getLong(1), re.getString(2), re.getString(3), re.getString(4), re.getLong(5));
    }
    return user;
  }
  public Integer Count(String table) throws Exception {
    String sql = "select max(id) from "+table+"";
    Connection conn = DBAccess.getConnection();
    PreparedStatement pre = conn.prepareStatement(sql);
    ResultSet re = pre.executeQuery();
    int a = 0;
    if (re.next()) {
      a+=re.getInt(1);
    }
    return a;
  }
  public int Add(User u) throws Exception {
    String sql = "INSERT INTO t_oa_user VALUES ("+u.getId()+",'"+u.getName()+"','"+u.getLoginName()+"','"+u.getPwd()+"',"+u.getRid()+")";
    Connection conn = DBAccess.getConnection();
    PreparedStatement pre = conn.prepareStatement(sql);
    int a = pre.executeUpdate();
    return a;
  }
  public static void main(String[] args) throws Exception {
//    User u = new User(14,"丘比特","qbt","1234",4);
//    int add = new UserDao().Add(u);
//    System.out.println(add);
    int add = new UserDao().Count("t_oa_user");
    System.out.println(add);
  }
}

3.4 Servlet

enrollServlet 注册

package com.sy.Servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.sy.Dao.UserDao;
import com.sy.entity.User;
@WebServlet("/enroll.do")
public class enrollServlet extends HttpServlet {
  private static final long serialVersionUID = 1L;
  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    doPost(request, response);
  }
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //设置编码
    request.setCharacterEncoding("utf-8");
    response.setCharacterEncoding("utf-8");
    response.setContentType("text/html,charset=utf-8");
    PrintWriter out = response.getWriter();
    //获取jsp页面传递过来的参数
    String name = request.getParameter("name");
    String username = request.getParameter("username");
    String password = request.getParameter("password");
    //实例化Dao
    UserDao ud = new UserDao();
    //实例化user实体
    User user;
    try {
      user = new User(ud.Count("t_oa_user")+1,name,username, password,4);
      int i = ud.Add(user);
      if(i>0) {
        //注册完成传参"OK"
        out.write("ok");
      }else {
        //注册失败传参"NO"
        out.write("no");
      }
    } catch (Exception e1) {
      e1.printStackTrace();
    }
  }
}

3.5 引入LayUI库

将解压的LayUI库进行导入项目的静态文件中，如图所示:

3.6 编写JSP页面

先将公共资源导包封装一个页面

header.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>
</head>
<!-- 引入 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>
<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">
<body>
</body>
</html>

之后在页面中导入资源页面进行使用如:

<%@ include file="common/header.jsp" %>

编辑前端页面 enroll.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="common/header.jsp" %>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户注册</title>
<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>
<script>
layui.use(['jquery','layer'], function() {
    let $ = layui.jquery;
    let layer = layui.layer;
      $("#enroll").click(function() {
    let name= $("#name").val();
    let username= $("#username").val();
    let password= $("#password").val();
    let passwords= $("#passwords").val();
    if(password==passwords){
      $.post("enroll.do",{name:name,username:username,password:password},function(data){
        if(data=="ok"){
          layer.msg("欢迎"+name+",注册成功");
          location.href ="login.jsp";
        }else{
          layer.msg("注册失败");
        }
        });
    }else{
      layer.msg('两次密码必须一致才可', {icon: 5});
    }
  }); 
 });
</script> 
</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="password" id="password" placeholder="密码"
            class="tx-input">
        </p></li>
          <li class="col-24 col-m-24"><p>
          <input type="password" id="passwords" placeholder="确认密码"
            class="tx-input">
        </p></li>
      <li class="col-24 col-m-24"><p class="tx-input-full">
          <button id="enroll" class="tx-btn tx-btn-big bg-black">注册</button>
        </p></li>
      <li class="col-12 col-m-12"><p>
          <a href="login.jsp" 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>
</body>
</html>

LayUI的使用