layui简介
layui入门
layui登录

layui简介

1.什么是layui？

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

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

layui入门（需要搭配的环境）（查询时记得导入数据）

<?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>

<%@ 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>
<body>
</body>
</html>

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>T269_mvc_blog</display-name>
  <servlet>
    <servlet-name>mvc</servlet-name>
    <servlet-class>com.zking.framework.DispatchServlet</servlet-class>
    <init-param>
      <param-name>configurationLocation</param-name>
      <param-value>/mvc.xml</param-value>
    </init-param>
  </servlet>
  <servlet-mapping>
    <servlet-name>mvc</servlet-name>
    <url-pattern>*.action</url-pattern>
  </servlet-mapping>
</web-app>

<?xml version="1.0" encoding="UTF-8" ?>
<taglib xmlns="http://java.sun.com/xml/ns/j2ee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_0.xsd"
    version="2.0">
  <description>zking 1.1 core library</description>
  <display-name>zking core</display-name>
  <tlib-version>1.1</tlib-version>
  <short-name>zking</short-name>
  <uri>http://jsp.veryedu.cn</uri>
  <tag>
    <name>page</name>
    <tag-class>com.zking.tag.PageTag</tag-class>
    <body-content>JSP</body-content>
    <attribute>
        <name>pageBean</name>
        <required>true</required>
        <rtexprvalue>true</rtexprvalue>
    </attribute>
  </tag>
</taglib>

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<%@ taglib uri="http://jsp.veryedu.cn" prefix="z"%> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 
<!DOCTYPE html">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link
  href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css"
  rel="stylesheet">
<script
  src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.js"></script>
<title>博客列表</title>
<style type="text/css">
.page-item input {
  padding: 0;
  width: 40px;
  height: 100%;
  text-align: center;
  margin: 0 6px;
}
.page-item input, .page-item b {
  line-height: 38px;
  float: left;
  font-weight: 400;
}
.page-item.go-input {
  margin: 0 10px;
}
</style>
</head>
<body>
  <form class="form-inline"
    action="${pageContext.request.contextPath }/book.action?methodName=list" method="post">
    <div class="form-group mb-2">
      <input type="text" class="form-control-plaintext" name="bname"
        placeholder="请输入书籍名称">
<!--      <input name="rows" value="20" type="hidden"> -->
<!-- 不想分页 -->
        <input name="pagination" value="false" type="hidden">
    </div>
    <button type="submit" class="btn btn-primary mb-2">查询</button>
    <a class="btn btn-primary mb-2" href="${pageContext.request.contextPath }/blog.action?methodName=toEdit">新增</a>
  </form>
  <table class="table table-striped bg-success">
    <thead>
      <tr>
        <th scope="col">博客ID</th>
        <th scope="col">标题</th>
        <th scope="col">关键字</th>
        <th scope="col">操作</th>
      </tr>
    </thead>
    <tbody>
      <c:forEach  var="b" items="${blogs }">
      <tr>
        <td>${b.id }</td>
        <td>${b.title }</td>
        <td>${b.keyWord }</td>
        <td>
          <a href="${pageContext.request.contextPath }/blog.action?methodName=toEdit&id=${b.id}">修改</a>
          <a href="${pageContext.request.contextPath }/blog.action?methodName=delete&id=${b.id}">删除</a>
        </td>
      </tr>
      </c:forEach>
    </tbody>
  </table>
  <!-- 这一行代码就相当于前面分页需求前端的几十行了 -->
  <z:page pageBean="${pageBean }"></z:page>
</body>
</html>

layui登录（util包，有些写类就不展示了）

package com.zhulinjun.web;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.zhulinjun.dao.UserDao;
import com.zhulinjun.entity.User;
import com.zhulinjun.util.ResponseUtil;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
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) {
      // TODO Auto-generated catch block
      e.printStackTrace();
    }
      }
  @Override
  public User getModel() {
    // TODO Auto-generated method stub
    return user;
  }
}

package com.zhulinjun.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;
}
@Override
public String toString() {
  return "User [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", 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();
  // TODO Auto-generated constructor stub
}
}

package com.zhulinjun.dao;
import java.util.List;
import com.zhulinjun.entity.User;
import com.zhulinjun.util.BaseDao;
import com.zhulinjun.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;
}
}

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@include file="common/header.jsp" %>
<!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>
 <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;
  let  $ =  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>

layui01

layui简介

layui入门（需要搭配的环境）（查询时记得导入数据）

layui登录（util包，有些写类就不展示了）

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

layui01

layui简介

layui入门（需要搭配的环境）（查询时记得导入数据）

layui登录（util包，有些写类就不展示了）

热门文章

最新文章

相关电子书