layui快速搭建一个后台管理系统
这几天要忙着做一个新项目的后台管理系统,不想用之前用过的框架，所以网上找了下，看了不少最后选择了layui。
1.优点
免费开源
界面色彩搭配很醒目,比其它框架的色调搭配都好看
平滑设计
比之前用的框架更简单
2.缺点
网上说它和vue的兼容不是很好,所以我没用vue和他搭配直接用jq js代替,还有一个很火的给大家推荐叫element网上说他和vue兼容性很好。
首先一点不管什么前端框架，你要完全用他的东西中途你总会遇到些解决起麻烦的问题，所以你也得写css/js/jquery。
3.创建路由
layui.define([], function(exports) { var layrouter = { // 路由表 routes: [], // 当前 hash currentHash: \'\', // 注册路由 register: function(hash, callback) { var that = this; // 给不同的 hash 设置不同的回调函数 that.routes[hash] = callback || function() {}; }, // 刷新 refresh: function() { var that = this; // 获取相应的 hash 值 console.log(location.hash); console.log(location.hash.slice(1)); // 如果存在 hash 则获取, 否则为 / that.currentHash = location.hash.slice(1) || \'/\'; if (that.currentHash && this.currentHash != \'/\') { // 根据当前 hash 调用对应的回调函数 that.routes[that.currentHash](); } }, // 初始化 init: function() { var that = this; window.addEventListener(\'load\', that.refresh.bind(that), false); window.addEventListener(\'hashchange\', that.refresh.bind(that), false); }, // Removes the current page from the session history and navigates to the given URL. replace: function(url) { window.location.replace(url); }, // Navigate to the given URL. href: function(url) { window.location.href = url; }, // Reloads the current page. reload: function() { window.location.reload(); } }; exports(\'layrouter\', layrouter); });
4.搭建主体框架
框架共用部分 就是 在lay的 layui-body 标签中间加一个 iframe框架标签,引入的js css库都直接通过官方链接。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String basePath = request.getContextPath(); %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="utf-8"> <title>layrouter</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" media="all"> </head> <body class="layui-layout-body"> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <div class="layui-logo">云步CPL</div> <ul class="layui-nav layui-layout-left"> <li class="layui-nav-item"> <a href="javascript:;">开发文档</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">子系统1</a></dd> <dd><a href="javascript:;">子系统2</a></dd> <dd><a href="javascript:;">子系统3</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"> 云步 <i class="layui-icon layui-icon-down layui-nav-more"></i></a> <dl class="layui-nav-child"> <dd><a href="">跳转</a></dd> <dd><a href="">设置</a></dd> <dd><a href="">退出系统</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"> <ul class="layui-nav layui-nav-tree"> <li class="layui-nav-item layui-nav-itemed"> <a href="#income">收益明细</a> </li> <li class="layui-nav-item"> <a href="#task">领奖记录</a> </li> <li class="layui-nav-item"> <a >款项申请</a> <dl class="layui-nav-child"> <dd><a href=#withdraw>提现记录</a></dd> <dd><a href="#withdrawpower">提现申请</a></dd> </dl> </li> <li class="layui-nav-item"> <a >账号设置</a> <dl class="layui-nav-child"> <dd><a href=#personal>账户信息</a></dd> <dd><a href="#appSet">应用信息</a></dd> <dd><a href="#callbackurlSet">回调配置</a></dd> </dl> </li> </ul> </div> </div> <div class="layui-body"> <div style="padding: 15px;" id="LAY_APP"> <iframe id="iframeMain" src="<%=basePath%>/Aincome/income.jsp" frameborder="0" height="1000px" width="100%"></iframe> </div> </div> <div class="layui-footer"> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script> <script type="text/javascript"> layui.config({ base: \'resources/\', version: new Date().valueOf() }).extend({ layrouter: \'layui/layrouter\' }).use([\'layrouter\', \'layer\', \'element\'], function() { var layrouter = layui.layrouter; var layer = layui.layer; var element = layui.element; var layApp = document.getElementById(\'LAY_APP\'); // #income #task #withdraw #personal // 注册一些路由 layrouter.register(\'income\', function() { // layApp.innerHTML = \'<i class="layui-icon layui-icon-face-smile"> 控制面板 </i>\' $("#iframeMain").attr("src",\'<%=basePath%>/Aincome/income.jsp\'); }); layrouter.register(\'task\', function() { // layApp.innerText = \'用户管理aaaaa\'; //$("#iframeMain").attr("src",$(this).attr("href")); // $("#iframeMain").attr("src",\'https://www.baidu.com\'); $("#iframeMain").attr("src",\'<%=basePath%>/Atask/task.jsp\'); }); //提现记录 layrouter.register(\'withdraw\', function() { // layApp.innerText = \'角色管理aaaaa\'; //$("#iframeMain").attr("src",$(this).attr("href")); //$("#iframeMain").attr("src",\'https://www.taobao.com\'); $("#iframeMain").attr("src",\'<%=basePath%>/Awithdraw/withdraw.jsp\'); }); //提现申请 layrouter.register(\'withdrawpower\', function() { $("#iframeMain").attr("src",\'<%=basePath%>/Awithdraw/withdrawpower.jsp\'); }); layrouter.register(\'personal\', function() { // layApp.innerText = \'layrouter: 举个栗子, 为自己带盐.\'; //$("#iframeMain").attr("src",$(this).attr("href")); $("#iframeMain").attr("src",\'<%=basePath%>/Apersonal/personal.jsp\'); }); //应用配置 layrouter.register(\'appSet\', function() { // layApp.innerText = \'layrouter: 举个栗子, 为自己带盐.\'; //$("#iframeMain").attr("src",$(this).attr("href")); $("#iframeMain").attr("src",\'<%=basePath%>/Apersonal/appsetting.jsp\'); }); // 初始化 // 监听 hash 事件 layrouter.init(); }); </script> </body> </html>
框架所有代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String basePath = request.getContextPath(); %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="utf-8"> <title>layrouter</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" media="all"> </head> <body class="layui-layout-body"> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <div class="layui-logo">云步CPL</div> <ul class="layui-nav layui-layout-left"> <li class="layui-nav-item"> <a href="javascript:;">开发文档</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">子系统1</a></dd> <dd><a href="javascript:;">子系统2</a></dd> <dd><a href="javascript:;">子系统3</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"> 云步 <i class="layui-icon layui-icon-down layui-nav-more"></i></a> <dl class="layui-nav-child"> <dd><a href="">跳转</a></dd> <dd><a href="">设置</a></dd> <dd><a href="">退出系统</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"> <ul class="layui-nav layui-nav-tree"> <li class="layui-nav-item layui-nav-itemed"> <a href="#income">收益明细</a> </li> <li class="layui-nav-item"> <a href="#task">领奖记录</a> </li> <li class="layui-nav-item"> <a >款项申请</a> <dl class="layui-nav-child"> <dd><a href=#withdraw>提现记录</a></dd> <dd><a href="#withdrawpower">提现申请</a></dd> </dl> </li> <li class="layui-nav-item"> <a >账号设置</a> <dl class="layui-nav-child"> <dd><a href=#personal>账户信息</a></dd> <dd><a href="#appSet">应用信息</a></dd> <dd><a href="#callbackurlSet">回调配置</a></dd> </dl> </li> </ul> </div> </div> <div class="layui-body"> <div style="padding: 15px;" id="LAY_APP"> <iframe id="iframeMain" src="<%=basePath%>/Aincome/income.jsp" frameborder="0" height="1000px" width="100%"></iframe> </div> </div> <div class="layui-footer"> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script> <script type="text/javascript"> layui.config({ base: \'resources/\', version: new Date().valueOf() }).extend({ layrouter: \'layui/layrouter\' }).use([\'layrouter\', \'layer\', \'element\'], function() { var layrouter = layui.layrouter; var layer = layui.layer; var element = layui.element; var layApp = document.getElementById(\'LAY_APP\'); // #income #task #withdraw #personal // 注册一些路由 layrouter.register(\'income\', function() { // layApp.innerHTML = \'<i class="layui-icon layui-icon-face-smile"> 控制面板 </i>\' $("#iframeMain").attr("src",\'<%=basePath%>/Aincome/income.jsp\'); }); layrouter.register(\'task\', function() { // layApp.innerText = \'用户管理aaaaa\'; //$("#iframeMain").attr("src",$(this).attr("href")); // $("#iframeMain").attr("src",\'https://www.baidu.com\'); $("#iframeMain").attr("src",\'<%=basePath%>/Atask/task.jsp\'); }); //提现记录 layrouter.register(\'withdraw\', function() { // layApp.innerText = \'角色管理aaaaa\'; //$("#iframeMain").attr("src",$(this).attr("href")); //$("#iframeMain").attr("src",\'https://www.taobao.com\'); $("#iframeMain").attr("src",\'<%=basePath%>/Awithdraw/withdraw.jsp\'); }); //提现申请 layrouter.register(\'withdrawpower\', function() { $("#iframeMain").attr("src",\'<%=basePath%>/Awithdraw/withdrawpower.jsp\'); }); layrouter.register(\'personal\', function() { // layApp.innerText = \'layrouter: 举个栗子, 为自己带盐.\'; //$("#iframeMain").attr("src",$(this).attr("href")); $("#iframeMain").attr("src",\'<%=basePath%>/Apersonal/personal.jsp\'); }); //应用配置 layrouter.register(\'appSet\', function() { // layApp.innerText = \'layrouter: 举个栗子, 为自己带盐.\'; //$("#iframeMain").attr("src",$(this).attr("href")); $("#iframeMain").attr("src",\'<%=basePath%>/Apersonal/appsetting.jsp\'); }); // 初始化 // 监听 hash 事件 layrouter.init(); }); </script> </body> </html>
4.登陆页面
登陆页面没用lay,自己写的,js事件动态控制布局不管怎么拖动登陆窗口都会在居中
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String basePath = request.getContextPath(); %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="utf-8"> <title>登陆页面</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" media="all"> <link rel="stylesheet" href="<%=basePath%>/resources/layui/css/public.css"> <script type="text/javascript" src="<%=basePath%>/resources/layui/public.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script> <style type="text/css"> body{ width:100%; height:100%;background:#009688;} #log { width:60px; margin-left:120px; height:60px; background-image: url(resources/layui/image/log.png); } </style> <script type="text/javascript"> function loginShare(data) { var requestParameter=data; var maskLayer = document.getElementById("maskLayer-layer"); maskLayer.style.display = "block"; $.ajax({ type:"POST", url:\'<%=basePath%>/ALoginServlet\', data:requestParameter, dataType: "json", success:function(json){ var checkSign=json.status; var token=json.token; if(checkSign==\'success\') { //发布视频教程 localStorage.setItem("registerdate", json.registerdate); localStorage.setItem("monery", json.monery); localStorage.setItem("account", json.account); localStorage.setItem("token", token); localStorage.setItem("id", json.id); localStorage.setItem("todayInvate", json.todayInvate); localStorage.setItem("xiaJiCount", json.xiaJiCount); localStorage.setItem("checkaccount", json.account); localStorage.setItem("password", json.password); localStorage.setItem("sanjiShop", json.sanjiShop); localStorage.setItem("sanjiPeople", json.sanjiPeople); localStorage.setItem("hongbaoUser", json.hongbaoUser); localStorage.setItem("hongbaoShop", json.hongbaoShop); localStorage.setItem("recordRefresh", 0); window.location.href="manager.jsp"; } else { $("#login-alertiinfo").innerHtml="账号或密码错误！" $("#login-alertiinfo").css({\'display\':\'block\'}); maskLayer.style.display = "none" } }, error:function(e) { maskLayer.style.display = "none" } }); } $(document).ready(function(){ var account; var password; $("#loginbutton").click(function(){ $("#login-alertiinfo").css({\'display\':\'none\'}); account = document.getElementById("account").value; password= document.getElementById("password").value; if(account == "" ){ $("#login-alertiinfo").css({\'display\':\'block\'}); $("#login-alertiinfo").innerHtml="账号不能为空！" return; } else if(password == "" ){ $("#login-alertiinfo").css({\'display\':\'block\'}); $("#login-alertiinfo").innerHtml="密码不能为空！" return ; }else{ var data= "account="+account+"&password="+password; loginShare(data); } }); }); window.onload = function(){ var contentWidth= (document.documentElement.clientWidth-300)/2; var contentHeight = (document.documentElement.clientHeight-400)/2; $("#login-div").css({\'display\':\'block\',\'margin-left\': contentWidth + \'px\',\'margin-top\': contentHeight + \'px\'}); var beiandivtop=contentHeight-30; $("#beiandiv").css({\'display\':\'block\',\'margin-top\': beiandivtop + \'px\'}); } window.onresize = function(){ var contentWidth= (document.documentElement.clientWidth-300)/2; var contentHeight = (document.documentElement.clientHeight-400)/2; $("#login-div").css({\'margin-left\': contentWidth + \'px\',\'margin-top\': contentHeight + \'px\'}); var beiandivtop= contentHeight-30; $("#beiandiv").css({\'margin-top\': beiandivtop + \'px\'}); } </script> </head> <body> <div id="maskLayer-layer"></div> <div id="login-div" style=\'width:300px;height:400px;background:#393D49;display:none\'> <div style=\'height:80px;\'> </div> <div id=\'log\' ></div> <input id="account" style=\'width:210px;height:30px;margin-top:20px;margin-left:45px;font-size:13px;\' type="text" placeholder="请输入注册帐号!" /> <input style=\'width:210px;height:30px;margin-top:10px;margin-left:45px;font-size:13px;\' id="password" type="password" placeholder="请输入注册密码!" /> <button type="button" class="layui-btn layui-btn-lg" id=\'loginbutton\' style=\'width:200px;height:35px;margin-top:30px; margin-left:50px;line-height:35px;\'>登 陆</button> <div id=\'login-alertiinfo\' style=\'margin-top:30px;color:white;text-align:center;font-size:13px;display:none\'> 账号或密码错误！ </div> </div> <div id=\'beiandiv\' style=\'display:none;text-align:center;color:white;font-size:13px;\'>Copyright © 2019 All rights reserved by baiydu <a id=\'beian\' href="http://www.beian.miit.gov.cn" style=\'text-align:center;color:white;font-size:13px;\'>渝ICP备17009937号-2</a> <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? "https://" : "http://");document.write(unescape("%3Cspan id=\'cnzz_stat_icon_1278192026\'%3E%3C/span%3E%3Cscript src=\'" + cnzz_protocol + "v1.cnzz.com/z_stat.php%3Fid%3D1278192026%26show%3Dpic1\' type=\'text/javascript\'%3E%3C/script%3E"));</script> </div> </body> </html>
5.java部分代码
临时的数据返回
response.setContentType( "text/html"); response.setCharacterEncoding("utf-8"); request.setCharacterEncoding("utf-8"); PrintWriter writer=response.getWriter(); String page= request.getParameter("page"); String limit= request.getParameter("limit"); String date=""; try { date = request.getParameter("date"); } catch(Exception e) { } JSONArray shareArray=new JSONArray(); for(int i=0;i<10;i++) {JSONObject singleObject=new JSONObject(); singleObject.put("id", String.valueOf(i)); singleObject.put("username", "日魂月魄"+String.valueOf(i)); singleObject.put("sex", "女"); singleObject.put("city", "重庆"); singleObject.put("sign", "只求更好"); singleObject.put("experience", "2000多年"); singleObject.put("score", "9999999"); singleObject.put("classify", "印钞机"); singleObject.put("wealth", "安逸"); shareArray.put(singleObject);} JSONObject returnObject=new JSONObject(); returnObject.put("code", "0"); returnObject.put("msg", "成功"); returnObject.put("count", "160"); returnObject.put("data", shareArray); writer.println(returnObject); writer.flush(); writer.close(); writer=null; shareArray=null; }
5.界面截图
