一、layui簡介
layui（諧音：類UI) 是一款采用自身模塊規范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細節都經過精心雕琢，非常適合界面的快速開發.
獲得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.1.環境
本文是在eclipse下springboot1.5.15+mybatis+springMVC+LayUI2.4.5實現登錄
2.2. 起步依賴
2.2.1. 創建一個Maven工程
由於這里主講layui,springboot如何集成mybatis,springMVC
2.2.2 獲得 layui 后，將其完整地部署到你的項目目錄（或靜態資源服務器），你只需要引入下述兩個文件：
- layui/css/layui.css
- layui/layui.js ，此處可換成：./layui/layui.all.js
項目結構如下:
引入代碼可以這樣寫:
<link rel="stylesheet" href="${path}/js/layui/css/layui.css">
<script src="${path}/js/layui/layui.js"></script>
2.3、前台頁面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,根據自己需求修改.
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對象.
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提供的后台布局。
大家有問題可以留言。