java springmvc+bui+bootstrap後臺管理系統搭建
阿新 • • 發佈：2017-10-29
store map arr flatui client del overflow onf checkbox 
先來說說bui，這個框架是阿裏巴巴的一個前端團隊研發的，能夠用很少的代碼快速搭建一個後臺管理系統，很適做管理平臺的開發， 之前用過類似這樣的框架extjs，做個比較，這個框架實現功能比extjs的代碼相對少一些，而且它的樣式有扁平化版本，就因為這樣，所以我才選擇了它來做一個管理平臺，運行速度也extjs快(當然這是兩年的extjs框架了，當前的extjs版本我也沒用過)，這個框架的語法簡直和extjs是太像了，不知是誰copy誰...... 這個框架也有不足的地方比如扁平化的彈出框需要自己寫Div,瀏覽器放大，樹形菜單的高度不會自動增加，需要刷新,這也是我暫時發現的兩個覺得不足的地方，我也是今天才找到這個框架，其他地方暫時也沒發現什麽不好的，下面主要貼下代碼。
1.框架頁
引入bui庫，初始化bui框架，json文件配置bui布局
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@page import="helper.*" %> <%@page import="com.spket.*" %> <%@page import="helper.shareReturnDataClass" %> <%@page import="net.sf.json.JSONObject" %> <% String basePath = request.getContextPath(); %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE HTML> <html> <head> <title>娛樂寶後臺管理系統</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="<%=basePath%>/resources/assets/css/dpl-min.css" rel="stylesheet" type="text/css" /> <link href="<%=basePath%>/resources/assets/css/bui-min.css" rel="stylesheet" type="text/css" /> <link href="<%=basePath%>/resources/assets/css/main-min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="<%=basePath%>/resources/assets/js/jquery-1.8.1.min.js"></script> <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel="stylesheet"> <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet"> <script src="http://g.tbcdn.cn/fi/bui/jquery-1.8.1.min.js"></script> <script src="http://g.alicdn.com/bui/bui/1.1.21/bui-min.js"></script> <script src="http://g.alicdn.com/bui/seajs/2.3.0/sea.js"></script> <script src="http://g.alicdn.com/bui/bui/1.1.21/config.js"></script> </head> <body id="Mybody"> <div id="transParentLawyer" style="position: fixed; display:none; top: 0; left: 0; width: 100%; height: 100%; background-color:white; opacity: 0.7; z-index: 2147000002;"> <img id ="loadingImg" style="background-color:white; opacity: 0.7; " src="<%=basePath%>/resources/FlatUI/img/waittingwhite.gif" height="60px" width="60px" alt="x" /> </div> <div class="header"> <div class="dl-title"> </div> <div class="dl-log">歡迎您，<span class="dl-log-user">root</span><a href="/chinapost/index.php?m=Public&a=logout" title="退出系統" class="dl-log-quit">[退出]</a> </div> </div> <div class="content"> <div class="dl-main-nav"> <div class="dl-inform"><div class="dl-inform-title"><s class="dl-inform-icon dl-up"></s></div></div> <ul id="J_Nav" class="nav-list ks-clear"> <li class="nav-item dl-selected"><div class="nav-item-inner nav-home">系統管理</div></li> <li class="nav-item dl-selected"><div class="nav-item-inner nav-order">業務管理</div></li> </ul> </div> <ul id="J_NavContent" class="dl-tab-conten"> </ul> </div> <script type="text/javascript" src="<%=basePath%>/resources/assets/js/jquery-1.8.1.min.js"></script> <script type="text/javascript" src="<%=basePath%>/resources/assets/js/bui-min.js"></script> <script type="text/javascript" src="<%=basePath%>/resources/assets/js/common/main-min.js"></script> <script type="text/javascript" src="<%=basePath%>/resources/assets/js/config-min.js"></script> <script>
<!--框架頁初始化配置-->
BUI.use(‘common/main‘,function(){ var config =[{id:‘1‘,menu:[{text:‘系統管理‘,items:[{id:‘12‘,text:‘機構管理‘,href:‘Node/index.jsp‘},{id:‘3‘,text:‘角色管理‘,href:‘Role/index.jsp‘},{id:‘4‘,text:‘用戶管理‘,href:‘User/index.jsp‘},{id:‘6‘,text:‘菜單管理‘,href:‘Menu/index.jsp‘}]}]},{id:‘7‘,homePage:‘9‘,menu:[{text:‘業務管理‘,items:[{id:‘9‘,text:‘聯盟管理‘,href:‘UnionNode/index.jsp‘},{id:‘10‘,text:‘提現管理‘,href:‘Node/index.jsp‘},{id:‘11‘,text:‘消息管理‘,href:‘Node/index.jsp‘},{id:‘12‘,text:‘電影管理‘,href:‘Node/index.jsp‘}]}]}]; new PageUtil.MainPage({ modulesConfig : config }); }); </script> </body> </html>
二：數據操作
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@page import="helper.*" %> <%@page import="com.spket.*" %> <%@page import="helper.shareReturnDataClass" %> <%@page import="org.json.JSONObject" %> <%@page import="org.json.JSONArray" %> <%@page import="java.io.PrintWriter" %> <% String basePath = request.getContextPath(); String cookieName="Sender"; Cookie cookie=new Cookie(cookieName, "userToken"); cookie.setMaxAge(5*365*24*60*60); //存活期為10秒 response.addCookie(cookie); %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel="stylesheet"> <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet"> <script src="http://g.alicdn.com/bui/bui/1.1.21/bui-min.js"></script> <script src="http://g.alicdn.com/bui/seajs/2.3.0/sea.js"></script> <script src="http://g.alicdn.com/bui/bui/1.1.21/config.js"></script> <script src="http://g.tbcdn.cn/fi/bui/jquery-1.8.1.min.js"></script> <script src="http://g.alicdn.com/bui/bui/1.1.21/seed-min.js"></script> <link href = "http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel = "stylesheet" > <script src = "http://g.tbcdn.cn/fi/bu??i/jquery-1.8.1.min.js"> </script> <script src = "http://g.alicdn.com/bui/seajs/2.3.0/sea.js" > </script> <script src = "http://g.alicdn.com/bui/bui/1.1.21/config.js"> </script> <style type="text/css"> body { padding-bottom: 40px; } .sidebar-nav { padding: 9px 0; } @media (max-width: 980px) { /* Enable use of floated navbar text */ .navbar-text.pull-right { float: none; padding-left: 5px; padding-right: 5px; } } #uninotatable tr td{ overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} </style> <!--加載數據ajax --> <script type="text/javascript"> window.onload = function(){ } </script> </head> <body> <div class ="demo-content" style="margin-top:7px;margin-left:10px;"> <div class = "row" > <div class = "span16" > <div id = "grid" > </div> </div> </div> <div id = "content" class = "hide" > <form class = "form-horizo??ntal" > <div class = "row" > <div class = "control-group span8" > <label class = "control-label" >名稱：</label> <div class = "controls" > <input name = "name" type = "text" data-rules = "{required：true}" class = "input-normal control-text" > </div> </div> <div class = "control-group span8" > <label class = "control-label" > 獎勵：</label> <div class = "controls" > <input name = "share_jiangliscore" type = "text" data-rules = "{required：true，number：true}" class = "input-normal control-text" > </div> </div> </div> <div class = "row" > <div class = "control-group span8" > <label class = "control-label" > 下載次數：</label> <div class = "controls" > <input name = "installtimes" type = "text" data-rules = "{required：true，number：true}" class = "input-normal control-text" > </div> </div> <div class = "control-group span8" > <label class = "control-label" > 是否上架：</label> <div class = "controls" > <select name = "isornoup" class = “input-normal” > <option value = "0" > 請選擇</option> <option value = "1" > 已上架</option> <option value = "2" > 未上架</option> </select> </div> </div> </div> <div class = "row" > <div class = "control-group span8" > <label class = "control-label" > 軟件圖標:</label> <div class = "controls" > <input name = "imageurl" type = "text" data-rules = "{required：true}" class = "input-normal control-text" > </div> </div> <div class = "control-group span8" > <label class = "control-label" > 下載鏈接:</label> <div class = "controls" > <input name = "loadurl" type = "text" data-rules = "{required：true}" class = "input-normal control-text" > </div> </div> </div> <div class = "row" > <div class = "control-group span15" > <label class = "control-label" > 描述：</label> <div class = "controls control-row4" > <textarea name = "description" class ="input-large" type="text" > </textarea> </div> </div> </div> </FORM> </div> </div> <script type="text/javascript"> BUI.use([‘bui/grid‘,‘bui/data‘],function (Grid,Data) { var Grid = Grid, Store = Data.Store, enumObj = {"1" : "選項一","2" : "選項二","3" : "選項三"}, columns = [ { title: ‘id‘, dataIndex: ‘id‘, visible:false, editor: { xtype: ‘text‘, rules: { required: true } } }, { title: ‘軟件名稱‘, dataIndex: ‘name‘, editor: { xtype: ‘text‘, rules: { required: true } } }, { title: ‘獎勵寶幣‘, dataIndex: ‘share_jiangliscore‘, editor: { xtype: ‘text‘, rules: { required: true } }, // renderer: Grid.Format.dateRenderer }, { title: ‘下載次數‘, dataIndex: ‘installtimes‘, editor: { xtype: ‘text‘, rules: { required: true }, }, // renderer: Grid.Format.dateRenderer }, { title: ‘是否上架‘, dataIndex: ‘isornoup‘, editor: { xtype: ‘text‘ } } , { title: ‘描述‘, dataIndex: ‘description‘, width:200, editor: { xtype: ‘text‘ } } , { title: ‘軟件logo‘, dataIndex: ‘imageurl‘, width:300, visible:false, editor: { xtype: ‘text‘ } } , { title: ‘下載鏈接‘, width:300, visible:false, dataIndex: ‘loadurl‘, editor: { xtype: ‘text‘ } }, {title : ‘操作‘,renderer : function(){ return ‘<span class="grid-command btn-edit">編輯</span>‘ }} ]; var editing = new Grid.Plugins.DialogEditing({ contentId : ‘content‘, //設置隱藏的Dialog內容 triggerCls : ‘btn-edit‘, //觸發顯示Dialog的樣式 editor: { title: ‘編輯‘ }, autoSave : true //自動添加和更新 }), store = new Store({ autoLoad:true, url : "<%=basePath%>/softUninoLoad", //autoSync : true, //保存數據後自動調用store.load()方法 proxy : { method : ‘POST‘, //更改為POST save : { addUrl : "<%=basePath%>/softUninoRowAdd", removeUrl: "<%=basePath%>/softUninoRowRemove", updateUrl : "<%=basePath%>/softUninoRowUpdate" } } }), grid = new Grid.Grid({ render:‘#grid‘, loadMask: true, bbar: { // pagingBar:表明包含分頁欄 pagingBar: true }, columns : columns, width : 1100, forceFit : true, tbar:{ //添加、刪除 items : [{ btnCls : ‘button button-small‘, text : ‘<i class="icon-plus"></i>添加‘, listeners : { ‘click‘ : addFunction } }, { btnCls : ‘button button-small‘, text : ‘<i class="icon-remove"></i>刪除‘, listeners : { ‘click‘ : delFunction } }] }, plugins : [editing,Grid.Plugins.CheckSelection], store : store }); grid.render(); //保存成功時的回調函數,其實更好的方式是直接在保存成功後調用store.load()方法，更新所有數據 store.on(‘saved‘,function (ev) { var type = ev.type, //保存類型，add,remove,update saveData = ev.saveData, //保存的數據 data = ev.data; //返回的數據 //TO DO if(type == ‘add‘){ //新增記錄時後臺返回id if(data.status=="success") { saveData.id = data.id; grid.updateItem(saveData); store.update() BUI.Message.Alert(‘添加成功！‘); } else { BUI.Message.Alert(‘添加失敗！‘); } }else if(type == ‘update‘){ if(data.status=="success") { BUI.Message.Alert(‘更新成功！‘); } else { BUI.Message.Alert(‘更新失敗！‘); } }else{ if(data.status=="success") { BUI.Message.Alert(‘刪除成功！‘); } else { BUI.Message.Alert(‘刪除失敗！‘); } } }); //保存或者讀取失敗 store.on(‘exception‘,function (ev) { BUI.Message.Alert(ev.error); }); //添加記錄 function addFunction(){ var newData = {b : 0}; editing.add(newData,‘a‘); //添加記錄後，直接編輯 } //刪除選中的記錄 function delFunction(){ var selections = grid.getSelection(), ids = BUI.Array.map(selections,function (item) { return item.id; }); store.remove(selections); store.save(‘remove‘,{ids : ids.join(‘,‘)}); //save的第三個參數是回調函數 } }); </script> </body> </html>View Code
三:登錄頁
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@page import="helper.*" %> <%@page import="com.spket.*" %> <%@page import="helper.shareReturnDataClass" %> <%@page import="net.sf.json.JSONObject" %> <% String basePath = request.getContextPath(); //String cookieName="Sender"; // Cookie cookie=new Cookie(cookieName, "userTo"); //cookie.setMaxAge(5*365*24*60*60); //存活期為10秒 // response.addCookie(cookie); %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE html> <html> <head> <title>後臺管理系統</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="<%=basePath%>/resources/Css/bootstrap.css" /> <link rel="stylesheet" type="text/css" href="<%=basePath%>/resources/Css/bootstrap-responsive.css" /> <link rel="stylesheet" type="text/css" href="<%=basePath%>/resources/Css/style.css" /> <script type="text/javascript" src="<%=basePath%>/resources/Js/jquery.js"></script> <script type="text/javascript" src="<%=basePath%>/resources/assets/js/jquery-1.8.1.min.js"></script> <script type="text/javascript" src="<%=basePath%>/resources/Js/bootstrap.js"></script> <script type="text/javascript" src="<%=basePath%>/resources/Js/ckform.js"></script> <script type="text/javascript" src="<%=basePath%>/resources/Js/common.js"></script> <link rel="stylesheet" type="text/css" href="<%=basePath%>/resources/Css/bootstrap.min.css" /> <script type="text/javascript" src="<%=basePath%>/resources/Js/bootstrap.min.js"></script> <style type="text/css"> body { padding-top: 40px; padding-bottom: 40px; background-color: #f5f5f5; } .form-signin { max-width: 300px; padding: 19px 29px 29px; margin: 0 auto 20px; background-color: #fff; border: 1px solid #e5e5e5; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .05); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); } .form-signin .form-signin-heading, .form-signin .checkbox { margin-bottom: 10px; } .form-signin input[type="text"], .form-signin input[type="password"] { font-size: 16px; height: auto; margin-bottom: 15px; padding: 7px 9px; } </style> <!-- <link href= "<%=basePath%>/resources/FlatUI/dist/css/flat-ui.min.css" rel="stylesheet"> <link href= "<%=basePath%>/resources/FlatUI/assets/css/docs.css" rel="stylesheet"> <link rel="shortcut icon" href="<%=basePath%>/resources/FlatUI/img/favicon.ico"> --> <script type="text/javascript"> $(document).ready(function(){ $("#close_alert").click(function(){ $(‘#alter_id‘).attr("class","alert alert-warning hide"); }); $("#loginbutton").click(function(){ //隱藏提示框 $(‘#alter_id‘).attr("class","alert alert-warning hide"); $("#transParentLawyer").css({‘display‘: ‘block‘}); var account = document.getElementById("account").value; var password = document.getElementById("password").value; var requestParameter="account="+account+"&password="+password; if(account == "" ){ $(‘#alter_id‘).attr("class","alert alert-warning"); $("#transParentLawyer").css({‘display‘:‘none‘}); return; } else if(password == "" ){ $(‘#alter_id‘).attr("class","alert alert-warning"); $("#transParentLawyer").css({‘display‘:‘none‘}); return ; }else{ $.ajax({ type:"POST", url:‘<%=basePath%>/mainmanagerLogin‘, data:requestParameter, success:function(data){ var translateJson=data.replace(‘?‘,‘‘).replace(‘ ‘,‘‘); var json = eval(‘(‘ + translateJson + ‘)‘); var checkSign=json.status; if(checkSign==‘success‘) { window.location.href="mainmanager"; $("#transParentLawyer").css({‘display‘:‘none‘}); } else { $(‘#alter_id‘).attr("class","alert alert-warning"); $("#transParentLawyer").css({‘display‘:‘none‘}); } }, error:function(e) { $(‘#alter_id‘).attr("class","alert alert-warning"); $("#transParentLawyer").css({‘display‘:‘none‘}); } }); } }); }); window.onload = function(){ var contentWidth= document.body.clientWidth/2-30; var contentHeight = document.body.clientHeight/2-30; $("#loadingImg").css({‘position‘: ‘fixed‘, ‘left‘: contentWidth + ‘px‘,‘top‘: contentHeight + ‘px‘}); } window.onresize = function(){ var contentWidth= document.body.clientWidth/2-30; var contentHeight = document.body.clientHeight/2-30; $("#loadingImg").css({‘position‘: ‘fixed‘, ‘left‘: contentWidth + ‘px‘,‘top‘: contentHeight + ‘px‘}); } </script> </head> <body> <div id="transParentLawyer" style="position: fixed; display:none; top: 0; left: 0; width: 100%; height: 100%; background-color:white; opacity: 0.7; z-index: 2147000002;"> <img id ="loadingImg" style="background-color:white; opacity: 0.7; " src="<%=basePath%>/resources/FlatUI/img/waittingwhite.gif" height="60px" width="60px" alt="x" /> </div> <div style="margin-top:100px" class="container"> <div class="form-signin" > <h5 class="form-signin-heading">管理後臺</h5> <input id="account" type="text" name="username" class="input-block-level" placeholder="賬號"> <input id="password" type="password" name="password" class="input-block-level" placeholder="密碼"> <input type="text" name="verify" class="input-medium" placeholder="驗證碼" > <p><button class="btn btn-large btn-primary" id="loginbutton">登錄</button></p> <div class="alert alert-warning hide" id="alter_id" style="margin-bottom:0px"> <a class="close" id="close_alert" style="margin-bottom:0px"> × </a> <p id=‘alert_content‘ style="height:11px;font-size:13px">請輸入正確的賬號密碼</p> </div> </div> </div> </body> </html>View Code
四:界面
最後還推薦一個與bootstrap組合的扁平化組件框架Flat-UI-master
java springmvc+bui+bootstrap後臺管理系統搭建