一、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提供的后台布局。
大家有问题可以留言。
2439
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
