1、layui简介

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都通过精心雕琢，很是适合界面的快速开发.javascript

得到layui

你能够在LayUI 官网首页下载到 layui 的最新版，它通过了自动化构建，更适合用于生产环境。目录结构以下：

├─css //css目录
│ │─modules //模块css目录（通常若是模块相对较大，咱们会单独提取，好比下面三个：）
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css //核心样式文件
├─font //字体图标目录
├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
│─lay //模块核心目录
│ └─modules //各模块组件
│─layui.js //基础核心库
└─layui.all.js //包含layui.js和全部模块的合并文件

2、实现登陆

2.1.环境

本文是在eclipse下springboot1.5.15+mybatis+springMVC+LayUI2.4.5实现登陆css

2.2. 起步依赖

2.2.1. 建立一个Maven工程

因为这里主讲layui,springboot如何集成mybatis,springMVChtml

2.2.2 得到 layui 后，将其完整地部署到你的项目目录（或静态资源服务器），你只须要引入下述两个文件：

layui/css/layui.css
layui/layui.js ，此处可换成：./layui/layui.all.js

项目结构以下:前端

引入代码能够这样写:java

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

2.三、前台页面login.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">

<!-- 自适应 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Insert title here</title>
<!--导入这两个文件根据本身的路径进行修改-->
<link rel="stylesheet" href="${path}/js/layui/css/layui.css">
<script src="${path}/js/layui/layui.js"></script>

</head>
<body>
	<form class="layui-form" action="login" ><!--提交给这个controller-->
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-inline">
      <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-inline">
      <input type="password" name="pass" required 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>

<script type="text/javascript">
//layui.user(加载使用的模块),咱们这里只使用了form,还能够加载table,jquery等等
	layui.use('form',function(){
		var form=layui.form;
		//监听form的提交 监听lay-filter
		form.on(submit('formDemo'),function(data){
			console.log();
			//alert(data.field);
		})
			
		
	})
</script>

</body>
</html>

　　这里的form表单拷贝layui的官网form,根据本身需求修改.jquery

2.4 新建Controller类LoginController

package com.jiyun.springboot.controller;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

import com.jiyun.springboot.bean.User;
import com.jiyun.springboot.service.UserService;

@RestController
public class LoginController {
	@Autowired
	private UserService userService;
	@RequestMapping("login")
	public ModelAndView login(User user){
		System.out.println("user=="+user);
		ModelAndView model = new ModelAndView();
		
		User re=userService.selectByNamePass(user);
		System.out.println("re======="+re);
		if(re!=null){
			//登陆成功,返回success.jsp
			model.addObject("username", user.getUsername());
			model.setViewName("success");
		}else{
			//失败,返回登陆页面
		}
		return model;
		
		
		
	}

}

　建立UserService,UserDao,UserMapper.xml,查询数据库,会返回User对象.web

2.6新建success.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">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>主页面</title>
  <link rel="stylesheet" href="${path}/js/layui/css/layui.css">
  
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">layui 后台布局</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <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>
      
      <li class="layui-nav-item">
        <a href="javascript:;">其它系统</a>
        <dl class="layui-nav-child">
          <dd><a href="">邮件管理</a></dd>
          <dd><a href="">消息管理</a></dd>
          <dd><a href="">受权管理</a></dd>
        </dl>
      </li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
         
			${username}
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">基本资料</a></dd>
          <dd><a href="">安全设置</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a href="">退了</a></li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">员工管理</a>
          <dl class="layui-nav-child">
            <dd><a class="site-demo-active"   data-id="员工信息" data-title="员工信息" data-url="/getAllEmp" data-type="tabAdd">员工信息</a></dd>
            <dd><a class="site-demo-active" data-id="新增员工" href="javascript:;">新增员工</a></dd>
            <dd><a class="site-demo-active" data-id="删除清零" href="javascript:;">删除清零</a></dd>
            <!-- <dd><a href="">超连接</a></dd> -->
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">部门管理</a>
          <dl class="layui-nav-child">
            <dd><a class="site-demo-active" data-id="部门信息" href="javascript:;">部门信息</a></dd>
            <dd><a class="site-demo-active" data-id="新增部门" href="javascript:;">新增部门</a></dd>
            <dd><a class="site-demo-active" data-id="部门清零" href="javascript:;">部门清零</a></dd>
          </dl>
        </li>
       
      </ul>
    </div>
  </div>
  
  <!-- 选项卡面板 -->
<div class="layui-tab" lay-filter="demo" lay-allowclose="true"
			style="margin-left: 200px;">
			<ul class="layui-tab-title">
				
			</ul>
			<div class="layui-tab-content"></div>
</div>



  
 <!--  <div class="layui-footer">
    底部固定区域
    © layui.com - 底部固定区域
  </div> -->
</div>
<script src="${path}/js/layui/layui.js"></script>
<script>
//JavaScript代码区域
layui.use('element', function(){
  var element = layui.element;
  var $ = layui.jquery;
  var active = {
          //在这里给active绑定几项事件，后面可经过active调用这些事件
		tabAdd: function(url,id,name) {
			
			alert(url+id+name);
			
              //新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
              //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
			element.tabAdd('demo', {
                  title: name,
                  content: '<iframe data-frameid="'+id+'" scrolling="no" frameborder="0" src="'+url+'" style="width:100%;"></iframe>',
                  id: id //规定好的id
			})
              element.render('tab');

          },
          tabChange: function(id) {
              //切换到指定Tab项
			element.tabChange('demo', id); //根据传入的id传入到指定的tab项
		  },
          tabDelete: function (id) {
              element.tabDelete("demo", id);//删除
          },
          tabDeleteAll: function (ids) {//删除全部
			$.each(ids, function (i,item) {
                  element.tabDelete("demo", item); //ids是一个数组，里面存放了多个id，调用tabDelete方法分别删除
			})
          }
      };


      //当点击有site-demo-active属性的标签时，即左侧菜单栏中内容 ，触发点击事件
$('.site-demo-active').on('click', function() {
			////alert("hello");
          var dataid = $(this);
			//alert(dataid);
			
			//alert($(".layui-tab-title li[lay-id]").length)
          //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
	if ($(".layui-tab-title li[lay-id]").length <= 0) {
              //若是比零小，则直接打开新的tab项
		active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));
     } else {
              //不然判断该tab项是否以及存在

		var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
		$.each($(".layui-tab-title li[lay-id]"), function () {
                  //若是点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性能够找到，则说明该tab项已经打开
			if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                      isData = true;
             }
         })
         if (isData == false) {
                  //标志为false 新增一个tab项
			active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));
          }
     }
          //最后无论是否新增tab，最后都转到要打开的选项页面上
	active.tabChange(dataid.attr("data-id"));
 });

  
  
});
</script>
</body>
</html>

　　这个页面使用的是layUI提供的后台布局。spring

你们有问题能够留言。数据库

layui实现登陆