Layui--01-阿里云开发者社区

1.什么是layui：

Layui是一个简单、易用且功能强大的前端UI框架，专注于提升开发者的开发效率。它基于HTML、CSS和JavaScript，并提供了一套丰富的UI组件、动态模块加载、模板引擎、弹窗组件、表单验证等等功能，可以帮助开发者快速构建漂亮、响应式的Web界面。

Layui的设计理念是"经典易用，显而易见"，具有简洁、直观的API，可以很容易地理解和使用。它提供了灵活的扩展机制和丰富的文档，能够满足各种项目的需求，并且可以与主流的JavaScript库和框架（如jQuery、AngularJS等）无缝集成。

通过使用Layui，开发者可以快速搭建出结构清晰、交互友好、美观大方的Web界面，提高开发效率，节省开发时间。无论是个人项目还是企业级应用，Layui都是一个不错的选择。

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

参考地址：http://layui.org.cn/demo/index.html（已下线，非官网）

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

2.lay入门

搭建环境：

1.导依赖:

2.导工具类:

3.配置文件: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="/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>

实例：

选中然后CTRL加shift加r跳到文件的根源

输出结果：

3.json回顾：

layui和easyui都是一样的要用json

package dome;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.fasterxml.jackson.databind.ObjectMapper;
/***
 * json数据
 * @author bing人
 * @dome
 * @Dome
 */
public class Dome {
  public static void main(String[] args) throws Exception {
    ObjectMapper om=new ObjectMapper();
    List<Map>list=new ArrayList<Map>();
    Map<String, Object>map=new HashMap<String, Object>();
    map.put("name", "zs");
    map.put("age", 10);
    Map<String, Object>map1=new HashMap<String, Object>();
    map.put("name", "zs");
    map.put("age", 10);
    list.add(map);
    list.add(map1);
    System.out.println(om.writeValueAsString(list));
    List<User>l =new ArrayList<>();
    User u=new User("zs",10);
    User u1=new User("ls",12);
    l.add(u);
    l.add(u1);
    System.out.println(om.writeValueAsString(l));
  }
}
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 + "]";
  }
  @Override
  public int hashCode() {
    final int prime = 31;
    int result = 1;
    result = prime * result + age;
    result = prime * result + ((name == null) ? 0 : name.hashCode());
    return result;
  }
  @Override
  public boolean equals(Object obj) {
    if (this == obj)
      return true;
    if (obj == null)
      return false;
    if (getClass() != obj.getClass())
      return false;
    User other = (User) obj;
    if (age != other.age)
      return false;
    if (name == null) {
      if (other.name != null)
        return false;
    } else if (!name.equals(other.name))
      return false;
    return true;
  }
}

输出结果：

4.layUi登录功能:

前台：

<%@ 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(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('恭喜'+data.name+'登录成功', {icon: 6});
           }else{
             layer.alert('抱歉登录失败', {icon: 5});
           }
         }
    });
  });
});
</script> 
    </body>
</html>

header用来储存依赖：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<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>
</head>
<body>
</body>
</html>

实体类：

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类继承BaseDo：

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> l = super.executeQuery(sql, User.class, null);
     if(l!=null && l.size()==1) {
       return l.get(0);
     }
    return null;
  }
}

UserAction类：继承ActionSupport，实现ModelDriver<User>

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 null;
  }
}

Layui--01

1.什么是layui：

2.lay入门

搭建环境：

4.layUi登录功能:

前台：

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Layui--01

1.什么是layui：

2.lay入门

搭建环境：

4.layUi登录功能:

前台：

热门文章

最新文章

相关电子书