前端常用页面：
login：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后台管理-登陆</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<!-- <link rel="stylesheet" href="https://unpkg.com/browse/layui@2.7.6/dist/css/layui.css" media="all">-->
<style>
.main-body {top:50%;left:50%;position:absolute;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);overflow:hidden;}
.login-main .login-bottom .center .item input {display:inline-block;width:227px;height:22px;padding:0;position:absolute;border:0;outline:0;font-size:14px;letter-spacing:0;}
.login-main .login-bottom .tip .icon-nocheck {display:inline-block;width:10px;height:10px;border-radius:2px;border:solid 1px #9abcda;position:relative;top:2px;margin:1px 8px 1px 1px;cursor:pointer;}
.login-main .login-bottom .center .item .icon {display:inline-block;width:33px;height:22px;}
.login-main .login-bottom .center .item {width:288px;height:35px;border-bottom:1px solid #dae1e6;margin-bottom:35px;}
.login-main {width:428px;position:relative;float:left;}
.login-main .login-top {height:117px;background-color:#148be4;border-radius:12px 12px 0 0;font-family:SourceHanSansCN-Regular;font-size:30px;font-weight:400;font-stretch:normal;letter-spacing:0;color:#fff;line-height:117px;text-align:center;overflow:hidden;-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);}
.login-main .login-top .bg1 {display:inline-block;width:74px;height:74px;background:#fff;opacity:.1;border-radius:0 74px 0 0;position:absolute;left:0;top:43px;}
.login-main .login-top .bg2 {display:inline-block;width:94px;height:94px;background:#fff;opacity:.1;border-radius:50%;position:absolute;right:-16px;top:-16px;}
.login-main .login-bottom {width:428px;background:#fff;border-radius:0 0 12px 12px;padding-bottom:53px;}
.login-main .login-bottom .center {width:288px;margin:0 auto;padding-top:40px;padding-bottom:15px;position:relative;}
.login-main .login-bottom .tip {clear:both;height:16px;line-height:16px;width:288px;margin:0 auto;}
body {background:url(https://img.alicdn.com/imgextra/i4/O1CN01j9KnlR216HXTxshTN_!!6000000006935-0-tps-6001-2230.jpg) 0% 0% / cover no-repeat;position:static;font-size:12px;}
input::-webkit-input-placeholder {color:#a6aebf;}
input::-moz-placeholder {/* Mozilla Firefox 19+ */ color:#a6aebf;}
input:-moz-placeholder {/* Mozilla Firefox 4 to 18 */ color:#a6aebf;}
input:-ms-input-placeholder {/* Internet Explorer 10-11 */ color:#a6aebf;}
input:-webkit-autofill {/* 取消Chrome记住密码的背景颜色 */ -webkit-box-shadow:0 0 0 1000px white inset !important;}
html {height:100%;}
.login-main .login-bottom .tip {clear:both;height:16px;line-height:16px;width:288px;margin:0 auto;}
.login-main .login-bottom .tip .login-tip {font-family:MicrosoftYaHei;font-size:12px;font-weight:400;font-stretch:normal;letter-spacing:0;color:#9abcda;cursor:pointer;}
.login-main .login-bottom .tip .forget-password {font-stretch:normal;letter-spacing:0;color:#1391ff;text-decoration:none;position:absolute;right:62px;}
.login-main .login-bottom .login-btn {width:288px;height:40px;background-color:#1E9FFF;border-radius:16px;margin:24px auto 0;text-align:center;line-height:40px;color:#fff;font-size:14px;letter-spacing:0;cursor:pointer;border:none;}
.login-main .login-bottom .center .item .validateImg {position:absolute;right:1px;cursor:pointer;height:36px;border:1px solid #e6e6e6;}
.footer {left:0;bottom:0;color:#fff;width:100%;position:absolute;text-align:center;line-height:30px;padding-bottom:10px;text-shadow:#000 0.1em 0.1em 0.1em;font-size:14px;}
.padding-5 {padding:5px !important;}
.footer a,.footer span {color:#fff;}
@media screen and (max-width:428px) {.login-main {width:360px !important;}
.login-main .login-top {width:360px !important;}
.login-main .login-bottom {width:360px !important;}
}
</style>
</head>
<body>
<div class="main-body">
<div class="login-main">
<div class="login-top">
<span>企业管理后台登录</span>
<span class="bg1"></span>
<span class="bg2"></span>
</div>
<form class="layui-form login-bottom">
<div class="center">
<div class="item">
<span class="icon icon-2"></span>
<input type="text" name="username" lay-verify="required" placeholder="请输入登录账号" maxlength="24"/>
</div>
<div class="item">
<span class="icon icon-3"></span>
<input type="password" name="password" lay-verify="required" placeholder="请输入密码" maxlength="20">
<span class="bind-password icon icon-4"></span>
</div>
</div>
<div class="layui-form-item" style="text-align:center; width:100%;height:100%;margin:0px;">
<button class="login-btn" lay-submit lay-filter="login">立即登录</button>
</div>
</form>
</div>
</div>
<script src="./layui/layui.js" charset="utf-8"></script>
<script>
layui.use(['form','jquery'], function () {
var $ = layui.jquery,
form = layui.form,
layer = layui.layer;
// 登录过期的时候，跳出ifram框架
// if (top.location != self.location) top.location = self.location;
$('.bind-password').on('click', function () {
if ($(this).hasClass('icon-5')) {
$(this).removeClass('icon-5');
$("input[name='password']").attr('type', 'password');
} else {
$(this).addClass('icon-5');
$("input[name='password']").attr('type', 'text');
}
});
$('.icon-nocheck').on('click', function () {
if ($(this).hasClass('icon-check')) {
$(this).removeClass('icon-check');
} else {
$(this).addClass('icon-check');
}
});
// 进行登录操作
form.on('submit(login)', function (data) {
data = data.field;
if (data.username == '') {
layer.msg('用户名不能为空');
return false;
}
if (data.password == '') {
layer.msg('密码不能为空');
return false;
}
$.ajax({
type:"POST",
url:"/form",
data:data,
success:function (result) {
console.log(result);
if(result.respcode="0000"){
console.log("成功");
location.href="/index";
}else{
console.log("失败");
layer.msg('用户名或密码错误', {icon: 5});
}
},
error:function () {
layer.msg('服务器错误',{icon:5});
}
})
return false;
});
});
</script>
</body>
</html>index:
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>后台管理系统</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">后台管理系统</div>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
<li class="layui-nav-item">
<a href="javascript:;">nav groups</a>
<dl class="layui-nav-child">
<dd><a href="">menu 11</a></dd>
<dd><a href="">menu 22</a></dd>
<dd><a href="">menu 33</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide layui-show-md-inline-block">
<a href="javascript:;">
<img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
admin
</a>
<dl class="layui-nav-child">
<!-- <dd><a href="">Your Profile</a></dd>-->
<!-- <dd><a href="">Settings</a></dd>-->
<dd><a href="/signout">Sign out</a></dd>
</dl>
</li>
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
<a href="javascript:;">
<i class="layui-icon layui-icon-more-vertical"></i>
</a>
</li>
</ul>
</div>
<!-- <div class="layui-side layui-bg-black">-->
<!-- <div class="layui-side-scroll">-->
<!-- <!– 左侧导航区域（可配合layui已有的垂直导航） –>-->
<!-- <ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu">-->
<!-- </ul>-->
<!-- </div>-->
<!-- </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:;">menu group 1</a>-->
<!-- <dl class="layui-nav-child">-->
<!-- <dd><a href="javascript:;">menu 1</a></dd>-->
<!-- <dd><a href="javascript:;">menu 2</a></dd>-->
<!-- <dd><a href="javascript:;">menu 3</a></dd>-->
<!-- <dd><a href="">the links</a></dd>-->
<!-- </dl>-->
<!-- </li>-->
<!-- <li class="layui-nav-item">-->
<!-- <a href="javascript:;">menu group 2</a>-->
<!-- <dl class="layui-nav-child">-->
<!-- <dd><a href="javascript:;">list 1</a></dd>-->
<!-- <dd><a href="javascript:;">list 2</a></dd>-->
<!-- <dd><a href="">超链接</a></dd>-->
<!-- </dl>-->
<!-- </li>-->
<!-- <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>-->
<!-- <li class="layui-nav-item"><a href="">the links</a></li>-->
<!-- </ul>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="layui-body">-->
<!-- <div class="layui-tab-content">-->
<!-- <div class="layui-tab-item layui-show" style="background: #f5f5f5;">-->
<!-- <!–1–>-->
<!-- frameLabelStart--frameLabelEnd -->
<!-- <!–1end–>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<div class="layui-side custom-admin layui-bg-black">
<div class="layui-side-scroll">
<ul class="layui-nav layui-nav-tree" lay-filter="demo"></ul>
</div>
</div>
<!--页面选项卡-->
<div class="layui-body">
<div class="layui-tab-content">
<div class="layui-tab-item layui-show" style="background: #f5f5f5;">
<ifr id="mainPage" src="/main" style="width: 100%;height: 700px" name="iframe" scrolling="auto" class="iframe" framborder="0" border="0"></ifr>
</div>
</div>
<div class="layui-tab app-container" lay-allowClose="true" lay-filter="tabs">
<ul id="appTabs" class="layui-tab-title custom-tab"></ul>
<div id="appTabPage" class="layui-tab-content" style="height: 700px" ></div>
</div>
<div class="layui-footer">
全国职业技能大赛
</div>
</div>
<script src="./layui/layui.js"></script>
<script>
//JS
layui.use(['element', 'layer', 'util'], function(){
var element = layui.element,
layer = layui.layer,
util = layui.util,
$ = layui.$;
var ids = [];
element.on('nav(demo)', function () {
var id = $(this).attr("data-id");
var title = $(this).attr("data-title");
var url = $(this).attr("data-url");
var app1 = document.getElementById('mainPage');
app1.style.display = 'none';
//判断是否为以及菜单，如果不是一级菜单则创建tab
if (typeof(id) != "undefined") {
//判断选项卡是否已经被打开 下标为-1则未打开
if (ids.indexOf(id) == -1) {
element.tabAdd('tabs', {
title: title,
// ,content: 'frameLabelStart--frameLabelEnd '
content: createIframe(url),
id: id
});
ids.push(id);
//console.log(ids.indexOf(id));
}
//已经打开的tab直接切换
element.tabChange('tabs', id);
//删除tab时，从ids中将该tab的id删除，如果不删除会打不开该tab
element.on('tabDelete(tabs)', function (elem) {
var index = elem.index;
ids.splice(index, 1);
});
}
});
//创建iframe
function createIframe(url) {
return '<ifr src="' + url + '" style="width: 100%;height: 700px" name="iframe" scrolling="auto" frameborder="0" border="0" class="larry-iframe"></ifr>'
}
//获取所有的菜单
$.ajax({
type: "GET",
url: "/user/menus",
dataType: "json",
success: function (data) {
//先添加所有的主材单
console.log(data)
$.each(data.data, function (i, obj) {
var content = '<li class="layui-nav-item">';
content += '<a href="javascript:;">' + obj.title + "</a>";
//这里是添加所有的子菜单
content += loadchild(obj);
content += "</li>";
$(".layui-nav-tree").append(content);
});
element.init();
// var app1 = document.getElementById('main');
// app1.style.display = '';
// app1.getAttributeNode("href").value='/main';
},
error: function (jqXHR) {
aler("发生错误：" + jqXHR.status);
}
});
//组装子菜单的方法
function loadchild(obj) {
if (obj == null) {
return;
}
var content = "";
if (obj.children != null && obj.children.length > 0) {
content += '<dl class="layui-nav-child">';
} else {
content += '<dl>';
}
if (obj.children != null && obj.children.length > 0) {
$.each(obj.children, function (i, note) {
//console.log(note.title);
content += '<dd>';
content += "<a href=\"javascript:;\" data-id=\"" + note.id + "\" data-title=\"" + note.title + "\" data-url=\"" + note.href + "\">" + note.title + "</a>";
//subStr += "<a href=\"javascript:;\" data-src=\"" + note.url + "\" data-menuid=\"" + subMenu.menuId + "\" data-title=\"" + subMenu.name + "\">" + subMenu.name + "</a>";
if (note.children == null) {
return;
}
content += loadchild(note);
content += '</dd>';
});
content += '</dl>';
}
console.log(content);
return content;
}
});
</script>
</div>
</body>
</html>
