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

layui介绍及入门基础（看我这篇就会了！！！）

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

前言：我们在学习layui的时候，首先要了解它的

1.什么是layui？

layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

官方网站：https://www.layui.com/（已下线）

参考地址：（已下线，非官网）

 

由国人开发（作者贤心），16年出厂的框架，其主要提供了很多好看、方便的样式，并且基本拿来即用，和Bootstrap有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本。

2.layui、easyui与bootstrap的对比

有趣的对比方式，嘿嘿嘿....

easyui=jquery+html4（用来做后台的管理界面） 半老徐娘

bootstrap=jquery+html5 美女 拜金

layui 清纯少女

 2.1 layui和bootstrap对比（这两个都属于UI渲染框架）


     1.layui是国人开发的一套框架，2016年出来的，现在已更新到2.X版本了。比较新，轻量级，样式简单好看（目前官网已下架，开源了）

     2.bootstrap 相对来说是比较成熟的一个框架，现在已经更新到4.X版本。是一个很成熟的框架，这个大部分人一般都用过


 

       1）适用范围不一样

       1.layui 其实更偏向与后端开发人员使用，在服务端页面上有非常好的效果。

       2.适合做后台框架

       3.layui是提供给后端开发人员最好的ui框架，基于DOM驱动，在实现前端交互上比较麻烦，页面的增删改查都需要查询DOM元素。所以在不需要交互的时候，用layui还是不错的（说这句话的人，只能说明你对layui不了解）

       4.bootstrap 在前端响应式方面做得很好，PC端和移动端表现都不错。

       5.适合做网站

       6.如果是类似官网，且需要同时满足PC端和移动端效果，bootstrap 表现很好，但是如果是要交互的网站，比如商城之类，layui显然更好，前后端分离


       2）大小不一样

        1.layui 轻量级

        2.bootsrap 因为成熟，所以使用方便，但是同时也是因为成熟，就显得有些冗余


 2.2 layui和easyui对比


     1.easyui 是非开源的，有需要解决的问题的话，就只能等官方更新了

     2.layui是开源的，社区比较活跃，解决问题还是比较快的

     3.easyui诞生的早些，所以功能相对完善一些，很多功能都能是比较健全的

     4.layui就相对来说少一些了，不过，功能都是像官网说的，精雕细琢

     5.layui更符合现在的审美

3.layui入门

1.在项目中创建static（静态资源文件夹）

 

2.将layui下载到了本地，那么可将其完整地放置到你的项目目录（或静态资源服务器），并在页面中分别引入：

<!-- 引入 layui.css --> <link rel="stylesheet" href="xxx/layui.css">

<!-- 引入 layui.js --><script src="xxx/layui.js"></script>

 

注：迅速找到名称对应的资源方法：

 

3.1入门案例：点击弹出框

思路 ：通过点击一个按钮能够弹出一个自定义的窗口。先是导入layui的css，js到eclipse，这里我们没有 导入jQuery的库，以为layui有一个强大的功能，就是可以通过标记，就可以使用jQuery。利用jQuery语法实现点击。

步骤：

1.在页面中分别引入：

<!-- 引入 layui.css --> <link rel="stylesheet" href="xxx/layui.css">

<!-- 引入 layui.js --><script src="xxx/layui.js"></script>

2.导入layui指定的代码块：

<script>
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
  layer.msg('Hello World');
});
</script>

具体代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!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>
<script type="text/javascript">
</script>
<!-- 引入 layui.css -->
<link rel="stylesheet"
  href="${pageContext.request.contextPath }/static/layui/css/layui.css">
<!-- 引入 layui.js -->
<script src="${pageContext.request.contextPath }/static/layui/layui.js"></script>
</head>
<body>
  指定内容的弹窗：
  <input id="inputt" value="🐖某良好cai 谁信呐">
  <button id="but">点我嘿嘿嘿 </button>
  <script>//概念模态化
    layui.use([ 'layer', 'form','jquery' ], function() {
      var layer = layui.layer, form = layui.form, $ = layui.jquery;
      $("#but").click(function() {
        let t = $("#inputt").val();
        layer.msg(t);
      })
    });
  </script>
</body>
</html>

 

3.2经典案例：（一）实现登录功能

思路 ：通过点击登录的按钮能够对数据库进行判断，利用ajax实现，如果有返回成功，如果没有返回失败。通过创建实体类，dao类，Action类，mvc.xml配置文件

ajax的格式：

$.ajax({

                   url:'${pageContext.request.contextPath }/useraction?methodName=login',

                           dataType:'json',

                       data:{

                        传递的参数

                       },

                       method: 请求的方式,

                       success:function(data){

                           

                       }

               })

1.创建实体类

/**
 * 
 */
package com.zking.entity;
/**
 * @author 李永安
 *
 * @date:2023年7月10日 下午4:43:39
 * 
 */
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 + "]";
  }
}

2.dao类

/**
 * 
 */
package com.zking.dao;
import java.util.List;
import com.zking.entity.User;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
/**
 * @author 李永安
 *
 * @date:2023年7月10日 下午5:39:48
 * 
 */
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 User login(User user ) throws Exception {
    String sql = "select * from t_oa_user where loginName='"+user.getLoginName()+"' and pwd ='"+user.getPwd()+"' ";
    List<User> lis= super.executeQuery(sql, User.class, null);//账号密码只有1条
    if(lis!=null && lis.size()!=0) {
      return lis.get(0);//当前账号密码
    }
    return null;
  }
}

3.Action类

/**
 * 
 */
package com.zking.web;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.zking.dao.UserDao;
import com.zking.entity.User;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.ResponseUtil;
/**
 * @author 李永安
 *
 * @date:2023年7月10日 下午6:04:14
 * 
 */
public class UserAction extends ActionSupport implements ModelDriver<User>{
  private User user  = new User();
  private UserDao ud = new UserDao();
  //ActionSupport方法
  public void login(HttpServletRequest req, HttpServletResponse resp) throws Exception {
    User u = ud.login(user);
    ResponseUtil.writeJson(resp, u);//向前端发送数据  
  }
  @Override
  public User getModel() {
    // TODO Auto-generated method stub
    return user;
  }
}

4.mvc.xml配置文件

<action path="/user" type="com.zking.web.UserAction">
  </action>

演示效果：

 

3.3经典案例：（二）实现注册功能

思路 ：通过点击注册的按钮能够对数据库进行判断，利用ajax实现，如果有返回成功，如果没有返回失败。通过创建实体类，dao类，Action类，mvc.xml配置文件

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 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 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;
  }
  @Override
  public String toString() {
    return "User [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", rid=" + rid + "]";
  }
}

2.dao类

（这里我们先获取数据库中已有的数据，当我们添加的账号，姓名，密码重合时，进行阻止！！！）

/**
 * 
 */
package com.zking.dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.List;
import com.zking.entity.Regist;
import com.zking.entity.User;
import com.zking.util.BaseDao;
import com.zking.util.DBAccess;
import com.zking.util.PageBean;
/**
 * @author 李永安
 *
 * @date:2023年7月10日 下午5:39:48
 * 
 */
public class RegistDao extends BaseDao<Regist>{
  public List<Regist> list(Regist regist, PageBean pageBean) throws Exception {
    String sql = "select * from t_oa_user where 1=1";
    return super.executeQuery(sql, Regist.class, pageBean);
  }
  /**
   * 传账号密码，判断
   * @param user 
   * @return
   * @throws Exception
   */
  public Regist regist(Regist regist ) throws Exception {
    String sql = "select * from t_oa_user where loginName='"+regist.getLoginName()+"' and pwd ='"+regist.getPwd()+"' ";
    List<Regist> lis= super.executeQuery(sql, Regist.class, null);//注册账号密码数据库有1条
    System.out.println("Asf");
    if(lis!=null && lis.size()!=0) {
      return null;//失败
    }
    return lis.get(0);//成功
  }
  //获取最大id
    public int getMaxId() throws Exception {
      //创建连接
      Connection conn = DBAccess.getConnection();
      int id = 0;
      String sql = "select MAX(id) from t_oa_user";
      PreparedStatement ps = conn.prepareStatement(sql);
      ResultSet rs = ps.executeQuery();
      if(rs.next()) {
        id = rs.getInt(1);
      }
      return id;
    }
    //注册
    public int register(Regist regist ) throws Exception {
      //创建连接
      String sql2 = "select * from t_oa_user where loginName='"+regist.getLoginName()+"' and pwd ='"+regist.getPwd()+"' ";
      List<Regist> lis= super.executeQuery(sql2, Regist.class, null);//注册账号密码数据库有1条
      System.out.println("Asf");
      if(lis!=null && lis.size()!=0) {
        return 0;//失败
      }else {
      Connection conn = DBAccess.getConnection();
      String sql = "insert into t_oa_user(id,name,loginName,pwd,rid) values(?,?,?,?,?)";
      PreparedStatement ps = conn.prepareStatement(sql);
      ps.setLong(1, regist.getId());
      ps.setString(2, regist.getName());
      ps.setString(3, regist.getLoginName());
      ps.setString(4, regist.getPwd());
      ps.setLong(5, regist.getRid());
      int n = ps.executeUpdate();
      return n; 
    }
    }
}

3.Action类

/**
 * 
 */
package com.zking.web;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.zking.dao.RegistDao;
import com.zking.dao.UserDao;
import com.zking.entity.Regist;
import com.zking.entity.User;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.ResponseUtil;
/**
 * @author 李永安
 *
 * @date:2023年7月10日 下午9:04:14
 * 
 */
public class RegistAction extends ActionSupport implements ModelDriver<Regist>{
  private Regist regist  = new Regist();
  private RegistDao rd = new RegistDao();
  //ActionSupport方法
  public void regist(HttpServletRequest req, HttpServletResponse resp) throws Exception {
    int rs = rd.register(regist);
    ResponseUtil.writeJson(resp, rs);//向前端发送数据  
  }
  @Override
  public Regist getModel() {
    // TODO Auto-generated method stub
    return regist;
  }
}

4.mvc.xml配置文件

<action path="/regist" type="com.zking.web.RegistAction">
  </action>
3.4.如何扩展一个layui(自定义模块)

分析：我们使用了官方的模块不足以支撑我们实现功能我们就需要进行自定义layui，那么我们根据官方文档来实现我们的自定义模块

1）创建一个自定义的js文件以及对应的配置文件

2）编写js

layui.define(function(exports){ //提示：模块也可以依赖其它模块，如：layui.define('layer', callback); var obj = { hello: function(str){ alert('Hello '+ (str||'test')); } };

 //输出test接口

 exports('test', obj);

});

代码：

layui.define(function(exports){
  var obj = {
    hello: function(str){
      alert('Hello '+ (str||'mymod'));
    },say:function(str){
      alert('Hello '+ (str||'mymod'));
    }
  };
  //输出 mymod 接口
  exports('mymod', obj);
});

3）设定扩展模块所在的目录，然后就可以在别的JS文件中使用

layui.config({ base: '/res/js/' //假设这是test.js所在的目录 }).extend({ //设定模块别名 test: 'test' //如果test.js是在根目录，也可以不用设定别名 });

//使用test layui.use('test', function(){ var test = layui.test;

 test.hello('World!'); //弹出Hello World!

});

3.5json的使用：

1.什么是json？

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它以易于阅读和编写的文本格式表示结构化数据，常用于在不同应用程序之间传输和存储数据。JSON数据由键值对组成，键和值之间使用冒号分隔，键值对之间使用逗号分隔。键必须是字符串，值可以是字符串、数字、布尔值、数组、对象或null。

例如：

{ "name": "John", "age": 30, "isStudent": true, "skills": ["JavaScript", "HTML", "CSS"], "address": { "street": "123 Main St", "city": "Exampleville", "country": "USA" } }

其中：skills"的值是一个包含多个字符串的数组，address"的值是一个嵌套的对象

2.json数据的重要性

JSON数据易于解析和生成，几乎所有主流的编程语言都提供了对JSON的支持。

3.用于的场景有：

json被广泛应用于Web开发、API通信、配置文件等。

4.转换成json格式的数据

方法一：使用Map集合去创建,使用json封装的方法去创建

方法二：创建类的方式

 

方法三：创建对象数组(存放map，存放实体)

 

具体的代码：

/**
 * 
 */
package com.zking.dao;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
/**
 * @author 李永安
 *
 * @date:2023年7月10日 下午4:27:52
 * 
 */
public class Demo1 {
  public static void main(String[] args) throws JsonProcessingException {
    //方法一：使用Map集合去创建,使用json封装的方法去创建
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("name", "zhujuliang");  
    map.put("sex", "boy");
    map.put("age", "20");
    Map<String, Object> map2 = new HashMap<String, Object>();
    map2.put("name", "zhujuliang"); 
    map2.put("sex", "boy");
    map2.put("age", "20");
    ObjectMapper omp = new ObjectMapper();
    System.out.println("方法一"+omp.writeValueAsString(map));
    //方法二：创建类的方式
    com.zking.entity.User use = new com.zking.entity.User("小biaobiao","母",120);
    com.zking.entity.User use2 = new com.zking.entity.User("小biaobiao","母",120);
    System.out.println("方法二"+omp.writeValueAsString(use));
    //方法三：创建对象数组
    List list = new ArrayList<>();
    list.add(map);
    list.add(map2);
    System.out.println("方法三"+omp.writeValueAsString(list));
    List list2 = new ArrayList<>();
    list2.add(use);
    list2.add(use2);
    System.out.println(omp.writeValueAsString(list2));
  }
  public class User {
    private String name ;
    private String sex;
    private int age;
    /**
     * 
     */
    public User() {
      // TODO Auto-generated constructor stub
    }
    public User(String name, String sex, int age) {
      super();
      this.name = name;
      this.sex = sex;
      this.age = age;
    }
    public String getName() {
      return name;
    }
    public void setName(String name) {
      this.name = name;
    }
    public String getSex() {
      return sex;
    }
    public void setSex(String sex) {
      this.sex = sex;
    }
    public int getAge() {
      return age;
    }
    public void setAge(int age) {
      this.age = age;
    }
    @Override
    public String toString() {
      return "User [name=" + name + ", sex=" + sex + ", age=" + age + "]";
    }
  }
}

希望这篇博客能够帮助到您！！！

文章标签：
前端开发
JavaScript
数据格式
JSON
数据库
〔Lisa〕
目录
相关文章
ChatYU.
|
8月前
|
XML 前端开发 程序员
Layui入门及案例演示2
Layui入门及案例演示2
ChatYU.
48 0
技能实验室
|
9月前
|
前端开发
CSS权威指南阅读笔记第一章01
元素是文档结构的根基
技能实验室
61 1
技能实验室
|
9月前
|
Web App开发 前端开发 iOS开发
CSS权威指南阅读笔记第一章03
CSS权威指南阅读笔记第一章03 样式表内容
技能实验室
39 0
贰零壹玖.
|
4天前
|
前端开发 容器
前端知识笔记（三）———CSS核心功能手册：从熟悉到精通
前端知识笔记（三）———CSS核心功能手册：从熟悉到精通
贰零壹玖.
27 0
许潜行
|
5月前
|
前端开发 JavaScript Java
一篇万字博客带你入门layUI
一篇万字博客带你入门layUI
许潜行
51 0
君易--鑨
|
6月前
|
前端开发 JavaScript Java
LayUI入门简介（详解）
LayUI入门简介（详解）
君易--鑨
542 0
瑶大头*^_^*
|
7月前
|
前端开发 JavaScript 开发者
LayUi介绍&前言
LayUi介绍&前言
瑶大头*^_^*
51 0
技能实验室
|
8月前
|
前端开发
CSS权威指南阅读笔记第二章06
伪类选择符
技能实验室
36 0
ChatYU.
|
8月前
|
开发框架 前端开发 开发者
Layui入门及案例演示1
Layui入门及案例演示1
ChatYU.
68 0
技能实验室
|
9月前
|
前端开发
CSS权威指南阅读笔记第二章05
后代选择符
技能实验室
54 0