LayUI之入门篇-阿里云开发者社区

1.LayUI简介

LayUI（或称为LayUI前端框架）是一个基于JavaScript的UI框架，旨在简化Web界面开发的过程。它由贤心（诚意出品）开发，提供了丰富的CSS组件和JavaScript交互插件，使开发者能够快速构建出美观、灵活的网页界面。

LayUI具有以下特点：

简洁易用：LayUI提供了简单明了的API文档和丰富的示例，使开发者能够快速上手使用。

响应式设计：LayUI的组件都经过精心设计，能够自动适应不同屏幕大小和设备。

模块化开发：LayUI采用了模块化的开发思想，开发者可以按需加载需要的模块，减少资源浪费。

多种主题风格：LayUI提供了多种主题风格可供选择，开发者可以根据需要自由切换风格。

支持扩展：LayUI还提供了丰富的扩展组件和插件，开发者可以根据需要灵活扩展功能。

总体来说，LayUI是一款功能丰富、易用性高的前端框架，广泛应用于各种Web界面开发中。

1.1LayUI官方文档

LayUI的官方开发文档网站：Layui - 经典开源模块化前端 UI 组件库(官方开发文档)

主界面如下：

官方文档里也有上手入门的步骤，下载引用等......

其中还有各种各样的开发所需组件，例如表单，图标，弹幕等。如下：

1.2为什么要用LayUI

使用LayUI的理由有以下几点：

快速搭建界面：LayUI提供了丰富的CSS组件和JavaScript交互插件，使界面开发变得更加简单和高效。你可以通过简单的HTML结构和CSS类名便能实现复杂的页面布局和交互效果，大大节省了开发时间。

简单易学：LayUI的设计理念注重简洁易用，它提供了清晰的API文档和丰富的示例代码，使开发者能够快速上手。即使是对于初学者，也可以迅速掌握主要功能和使用方法。

响应式设计：在移动设备使用越来越普及的今天，响应式设计变得尤为重要。LayUI的组件都经过精心设计，能够自动适应不同屏幕大小和设备，使你的网页在不同的设备上都能有良好的用户体验。

模块化开发：LayUI采用了模块化的开发思想，你可以按需加载需要的模块，减少资源浪费。这种模块化设计使得代码结构清晰，便于维护和扩展。

多种主题风格：LayUI提供了多种主题风格可供选择，你可以根据需要自由切换风格，实现与你的网站或应用的整体风格一致。

社区支持和资源丰富：LayUI拥有活跃的社区论坛，你可以在论坛上获取更多的资源、交流经验和寻求帮助。此外，LayUI凭借其流行度，还有许多社区贡献的插件、模板等可供使用，扩展和定制能力较强。

综上所述，LayUI作为一个功能丰富、易用性高的前端框架，可以帮助开发者快速实现美观、灵活的网页界面，节省开发时间和精力。

1.3LayUI的好处

使用LayUI带来以下好处：

提高开发效率：LayUI提供了丰富的组件和插件，能够快速构建网页界面。通过使用预定义的CSS类名和简单的HTML结构，你可以快速创建出需要的布局和交互效果，节省了开发时间。

简化代码编写：LayUI提供了一致而易于理解的API，使开发者能够以简洁的方式编写代码。你不需要深入了解复杂的CSS和JavaScript原理，只需按照文档提供的指南来使用所需的组件和功能。

响应式设计：LayUI的组件经过优化，能够在不同设备和屏幕尺寸下自适应布局，提供良好的用户体验。你无需为不同的设备编写额外的CSS或JavaScript代码，减少了开发的复杂性。

定制性强：LayUI提供了多种主题风格和可定制选项，你可以根据项目需求或个人喜好进行风格切换或自定义样式。这样能够使你的网页界面与整体风格保持一致，提升用户体验。

社区支持与资源丰富：LayUI拥有庞大的开发者社区，你可以在社区中分享经验、寻求帮助，获取各类插件、模板等资源。社区的活跃度为使用者提供了更多参考和学习的机会。

总的来说，使用LayUI可以加快网页开发速度，降低开发复杂性，提供灵活的定制性，同时也能够得到社区的支持和丰富的资源，帮助开发者更好地实现他们的前端开发需求。

2.LayUI入门

2.1入门实现模板功能

<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">



<script src="//unpkg.com/layui@2.6.8/dist/layui.js">

接下来我们做以下准备工作：

我们要用LayUI首先需要引入，在demo.jsp页面中引入官方css、js路径，如下：

引入之后我们需要对其做出一定的调整，因为引入进来的并不是我们的layUI.css路径名。所以我们需要修改以下路径名。修改后的代码如下：

<!-- 引入 layui.css -->
<link href="${pageContext.request.contextPath }/static/js/layui/css/layui.css" rel="stylesheet">
<!-- 引入 layui.js -->
<script src="${pageContext.request.contextPath }/static/js/layui/layui.js"></script>

然后我们就可以测试是否引入成功了，在官网copy一份测试代码粘贴在demo中：

demo.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 href="${pageContext.request.contextPath }/static/js/layui/css/layui.css" rel="stylesheet">
<!-- 引入 layui.js -->
<script src="${pageContext.request.contextPath }/static/js/layui/layui.js"></script>
</head>
<body>
弹屏：<input id="inputId" value="高启强他妹">
<button id="btnId">就你有本事炼狱小镇只拿电击枪</button>
<script>
layui.use(['layer', 'form', 'jquery'], function(){
  var layer = layui.layer
  ,form = layui.form;
  ,$ = layui.jquery;
  $("btnId").click(function(){
    layer.msg($("#inputId").val());
  });
});
</script> 
</body>
</html>

输出效果如下：

2.2JSON

因为LauUI跟easyUI一样，数据交互都用JSON(后续我们需要实现其功能)。所以这里我们适当提一下，也算是当作复习了。

现在给我们一组数据，如下：

{name:"翻斗花园牛爷爷" age:"58"}

{name:"翻斗花园壮壮妈" age:"32"}

{name:"翻斗花园胡图图" age:"10"}

{name:"翻斗花园张小丽" age:"30"}

我们造出这组数据有两种方式， Map集合跟实体类。我们用两种方法分别输出以下四条数据看看，代码如下：

package com.Kissship.demo;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.fasterxml.jackson.databind.ObjectMapper;
/**
 * json数据
 * @author jj
 *
 */
public class Demo1 {
  public static void main(String[] args) throws Exception {
//第一种方式--->Map集合
    ObjectMapper om = new ObjectMapper();
    List<Map> list = new ArrayList<Map>();
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("name", "翻斗花园牛爷爷");
    map.put("age", 58);
//    System.out.println(om.writeValueAsString(map));
    Map<String, Object> map1 = new HashMap<String, Object>();
    map1.put("name", "翻斗花园胡图图");
    map1.put("age", 10);
    list.add(map);
    list.add(map1);
    System.out.println(om.writeValueAsString(list));//输出数组1
    List<User> list1 = new ArrayList<User>();
    User u1 = new User("翻斗花园壮壮妈",32);
    User u2 = new User("翻斗花园张小丽",30);
    list1.add(u1);
    list1.add(u2);
    System.out.println(om.writeValueAsString(list1));//输出数组2
  }
}
//第二张方式--->实体类
class User{
  private String name;
  private int age;
  public String getName() {
    return name;
  }
  public void setName(String name) {
    this.name = name;
  }
  public int getAge() {
    return age;
  }
  public void setAge(int age) {
    this.age = age;
  }
  public User(String name, int age) {
    super();
    this.name = name;
    this.age = age;
  }
  public User() {
    super();
  }
  @Override
  public String toString() {
    return "User [name=" + name + ", age=" + age + "]";
  }
}

效果图如下：

可以看到两种方法输出的效果跟格式都一样。但是我们需要注意的是：

实体类对应的只有一张表，如果我们需要查询的数据对应多张表时，这时候我们就得用到Map集合。

3.LayUI登录案例

准备：

首先我们需要创建一个注册的jsp页面然后在WebContent目录下建立一个header.jsp，因为在企业里面做项目，我们需要反复引入LayUI.css,所以为了避免冗余代码，我们得新建一个公用界面——header.jsp。

然后我们接下来就是搭建页面了。这里我们可以直接去官网copy界面的组成部分(很方便)，操作展示如下：

这里因为演示所需(删代码也挺麻烦)，博主就用自己找的代码copy上去了，界面代码(不含功能)如下：

<%@ 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>注册界面</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>
    </body>
</html>

界面展示：接下来就是功能的实现了(接收参数)，功能实现的代码如下：

<%@ 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>登录界面</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>
layui.use(['layer','jquery'], function(){
  var layer = layui.layer
  ,$ = 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: 6});
        }else{
          layer.alert('登录失败咯',{icon: 5});
        }
      }
    });
  });
});
</script>
</body>
</html>

实体类User：

package com.zking.entity;
public class User {
  private long id;
  private String name;
  private String loginName;
  private String pwd;
  private long 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;
  }
  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;
  }
  public User() {
    super();
  }
  @Override
  public String toString() {
    return "User [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", rid=" + rid + "]";
  }
}

Dao(继承UserDao)：

package com.zking.dao;
import java.util.List;
import com.zking.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);
  }
  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;
  }
}

head.jsp(公共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 href="${pageContext.request.contextPath }/static/js/layui/css/layui.css" rel="stylesheet">
<!-- 引入 layui.js -->
<script src="${pageContext.request.contextPath }/static/js/layui/layui.js"></script>
</head>
<body>
</body>
</html>

mvc.xml：

<?xml version="1.0" encoding="UTF-8"?>
<config>
  <action path="/blog" type="com.zking.web.BlogAction">
    <forward name="list" path="/blogList.jsp" redirect="false" />
    <forward name="toList" path="/blog.action?methodName=list"
      redirect="true" />
    <forward name="toEdit" path="/blogEdit.jsp" redirect="false" />
  </action>
  <action path="/user" type="com.zking.web.UserAction">
  </action>
<!--  <action path="/meetingInfo" type="com.zking.web.MeetingInfoAction"> -->
<!--    <forward name="list" path="/meetingInfoList.jsp" redirect="false" /> -->
<!--    <forward name="toList" path="/meetingInfo.action?methodName=list" -->
<!--      redirect="true" /> -->
<!--    <forward name="toEdit" path="/meetingInfoEdit.jsp" redirect="false" /> -->
<!--  </action> -->
<!--  <action path="/solrBlog" type="com.test.web.SolrBlogAction"> -->
<!--    <forward name="list" path="/solrBlogList.jsp" redirect="false" /> -->
<!--    <forward name="toList" path="/solrBlog.action?methodName=list" -->
<!--      redirect="true" /> -->
<!--    <forward name="toEdit" path="/solrBlogEdit.jsp" redirect="false" /> -->
<!--  </action> -->
  <action path="/studentBlog" type="com.test.web.StudentBlogAction">
    <forward name="list" path="/studentBlogList.jsp" redirect="false" />
    <forward name="toList" path="/studentBlog.action?methodName=list" redirect="true" />
    <forward name="toEdit" path="/studentBlogEdit.jsp" redirect="false" />
  </action>
  <action path="/solrBlog" type="com.xiaoli.web.SolrBlogAction">
    <forward name="list" path="/solrBlogList.jsp" redirect="false" />
    <forward name="toList" path="/solrBlog.action?methodName=list" redirect="true" />
    <forward name="toEdit" path="/solrBlogEdit.jsp" redirect="false" />
  </action>
</config>

UserAction：

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;
public class UserAction extends ActionSupport implements ModelDriver<User> {
  private User user = new User();
  private UserDao userDao = new UserDao();
  public void login(HttpServletRequest req, HttpServletResponse resp) {
    try {
      User u = userDao.login(user);
      ResponseUtil.writeJson(resp, u);
    } catch (Exception e) {
      e.printStackTrace(); 
    }
  }
  @Override
  public User getModel() {
    return user;
  }
}

ResponseUtil类：

package com.zking.util;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.databind.ObjectMapper;
public class ResponseUtil {
  public static void write(HttpServletResponse response,Object o)throws Exception{
    response.setContentType("text/html;charset=utf-8");
    PrintWriter out=response.getWriter();
    out.println(o.toString());
    out.flush();
    out.close();
  }
  public static void writeJson(HttpServletResponse response,Object o)throws Exception{
    ObjectMapper om = new ObjectMapper();
//    om.writeValueAsString(o)代表了json串
    write(response, om.writeValueAsString(o));
  }
}

最后LayUI之入门篇就到这里，祝大家在敲代码的路上一路通畅!

感谢大家的观看 !

LayUI之入门篇

1.LayUI简介

1.1LayUI官方文档

1.2为什么要用LayUI

1.3LayUI的好处

2.LayUI入门

2.1入门实现模板功能

2.2JSON

3.LayUI登录案例

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

LayUI之入门篇

1.LayUI简介

1.1LayUI官方文档

1.2为什么要用LayUI

1.3LayUI的好处

2.LayUI入门

2.1入门实现模板功能

2.2JSON

3.LayUI登录案例

热门文章

最新文章

相关课程

相关电子书

相关实验场景