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實現登陸