bootstrap加载mysql数据库_bootstrap后台管理系统前后台实现(含数据库)
撰寫本文檔目的是讓后續開發者在理解該系統架構的基礎上遵循一定規范保持系統架構的合理性；同時也能夠達到允許沒有開發經驗僅有web基礎的入門開發者能夠通過復制粘貼的方式仿照demo示例進行開發的目的。
目? 錄
1? ? ? ?案例調研與選取... 2
1.1? ? ? 案例調研... 2
1.2? ? ? UI選取... 3
2? ? ? ?系統實現... 3
2.1? ? ? 實現效果... 3
2.2? ? ? 開發規范... 6
3? ? ? ?詳細設計... 7
3.1? ? ? 框架介紹... 7
3.2? ? ? 數據庫設計... 8
3.3? ? ? 菜單管理... 8
3.4? ? ? 權限管理/角色管理... 11
3.5? ? ? 權限管理/權限分配... 13
3.6? ? ? 權限管理/用戶管理... 14
4? ? ? ?延伸思考... 14
5? ? ? ?致謝! 14
6? ? ? ?文檔說明... 15
7? ? ? ?參考文獻... 15
案例調研與選取
案例調研
1)easyUI(No1)
圖片
2)easyUI(No2)
圖片
3)Bootstrap
圖片
4)vue/iview
圖片
以上四套UI框架對比分析，可以得出如下結論
結論：
easyUI功能完善，界面簡潔友好，非常方便后端開發人員開發，是優秀的前端開源框架，尤其適合后臺管理，但是非響應式，頁面不會隨屏幕大小而變化，美觀方面(仁者見仁)；
bootstrap是響應式開源框架，支持插件廣泛，界面相對酷炫，美觀方面(有目共睹)，同樣也非常適合管理平臺的開發；
至于Vue和其它一些前端人員自己寫的UI框架，必須要承認Vue是不錯的開源框架，但是個人感覺對管理平臺來說Vue增加了開發人員的學習成本、兼容性、美觀等方面的調試成本，開發周期偏長，至于是否適合管理品臺開發就……；
綜上分析，對于管理平臺開發建議選用easyUI或基于bootstrap搭建好的管理平臺，本文選擇基于bootstrap的管理平臺進行說明。
UI選取
經過調研，選取了一套業內好評率較高的UI(ace-master)，
Ace是一個基于Twitter bootstrap3開發的后臺模板。
GitHub Ace地址：https://github.com/bopoda/ace
Ace演示：http://ace.jeka.by/
主體界面如下：
此框架功能多多，詳細功能請看演示。
系統實現
實現效果
登錄
2)首頁
3)以下是權限管理的具體模塊
開發規范
下圖為框架的三個區域，其中主面板區域采用為一個div(沒有采用iframe設計)，每個菜單的內容均會更新主面板區域，故在主面板區域內容需要遵循一定的規范：
建議每個一級菜單在一個包中，每個包中的二級菜單均為一個單獨的控制器。建議頁面也需按同樣方式設計。每個頁面中的字段必須全局唯一(very import)
每個頁面中的字段可采用駝峰式也可用下劃線式，但必須確保每個頁面以及下面多級頁面中的每個字段名必須不同(即使業務上為同一張表的同一個字段)，不可在模態框與主面板區用同一個頁面。(如此設計的原因是：由于主頁面采用div設計，故為防止js檢測異常)
(important)由于主面板區域采用div設計，父頁面(main.jsp)中已經有了
故子頁面面不要引入這個js了(也無需引入)，否則會引起密碼修改的模態框無法彈出；
如果想要引入的話，請修改密碼修改的模態框彈出效果。
命名規范示例：
每個頁面中字段命名(包括方法名、表單字段、div等元素的id等)：? 模塊名+頁面名+數據庫字段名
示例：userManageListAccountName
或者? ? user_manage_list_account_name
這樣組成了全局唯一字段，防止瀏覽器緩存導致的頁面插件功能異常和表單提交異常等問題；
詳細設計
框架介紹
1)頁面布局
頁面布局見開發規范中截圖，三個主要區域。
2)功能
功能上主要為權限管理和其它的項目相關的開發人員自定義的菜單模塊。前后端交互采用ajax技術，頁面核心的公共區域的交互在
；該文件中封裝了菜單url調用和菜單效果切花、主面板區域更新的ajax、菜單樹的動態加載、解析、拼裝等功能。
3)權限
權限管理中包括用戶管理、菜單管理、角色管理、權限分配和密碼修改。
4)菜單加載
用戶狀態為啟用時可登錄到系統，進入到主板面后根據用戶對應角色查找相應的菜單加載到菜單區域，從而實現不同角色的用戶能夠看到不同的菜單權限。
5)插件
框架中整合的插件主要如下(部分)：
Bootstrap-table、bootstrap-datetimepicker、jquery.gritter(右上角彈框插件)、bootstrap-treeview、bootstrap-switch、jQuery.ui(確認框)。
其中datetimepicker樣式似乎并沒有想象中的好，需要進一步確認原因還是切換其它插件，如果對樣式要求不高可臨時使用，但考慮到后續擴展，故而建議盡快確認(修復or更換)。
數據庫設計
數據庫中權限管理模塊設計了用戶表、角色表、菜單表、用戶角色關聯表、角色菜單關聯表，共計5張表，sql代碼詳見數據庫文件。
用戶表：
角色表：
菜單表：
用戶角色關聯表：
角色菜單關聯表：
菜單管理
菜單包括主頁面菜單區域的菜單也包含“權限管理à菜單管理”中的菜單。
1)主頁菜單封裝：
菜單表設計，見數據庫設計。
菜單最大設計四級菜單，拼裝的json格式(下文為大致示例，以實際為準)；
讀取庫中菜單信息，拼接采用何種算法？
方案一：循環遍歷，多重循環遍歷
方案二：遞歸
此處選擇遞歸，原因一是效率高(內存需要或許也高，完全可容忍)，二是不受限于菜單級別，
遞歸核心代碼如下(詳見源碼)
/**
* 遞歸查找子菜單
* @param id
* @param rootMenu
* @return
*/
private List getChilds(Long id, List rootMenu){
// 子菜單
List childList = new ArrayList();
Iterator it = rootMenu.iterator();
while(it.hasNext()) {
SysMenu menu = it.next();
// 遍歷所有節點，將父菜單id與傳過來的id比較
if (String.valueOf(menu.getLong("menu_pa_id")).equals(String.valueOf(id))){
Map mapcc = new HashMap();
mapcc.put("id", menu.getLong("id"));
mapcc.put("menu_name", menu.getStr("menu_name"));
mapcc.put("menu_url", menu.getStr("menu_url"));
childList.add(mapcc);
it.remove();
}
}
// 把子菜單的子菜單再循環一遍
for (Map map : childList) {
//遞歸
map.put("childMenus", getChilds(Long.parseLong(map.get("id").toString()), rootMenu));
}
//遞歸退出條件
if (childList.size() == 0) {
return null;
}
return childList;
}
拼接得到json菜單格式為(如下為二級菜單示例，其它詳見源碼、界面操作)：
{
"status":"200",
"data":[
{
"id":1,
"childMenus":null,
"menu_url":"/manage/systemInfo.do",
"menu_name":"系統信息"
},
{
"id":2,
"childMenus":[
{
"id":5,
"childMenus":null,
"menu_url":"/redis/main.do",
"menu_name":"查詢redis"
},
{
"id":6,
"childMenus":null,
"menu_url":"/redis/writeRdisPage.do",
"menu_name":"寫redis"
}
],
"menu_url":null,
"menu_name":"redis管理"
},
{
"id":3,
"childMenus":[
{
"id":7,
"childMenus":null,
"menu_url":null,
"menu_name":"榴蓮短視頻"
},
{
"id":8,
"childMenus":null,
"menu_url":"/haohuolab/haohuoPage.do",
"menu_name":"東龍實驗室"
}
],
"menu_url":null,
"menu_name":"東龍實驗室"
},
{
"id":4,
"childMenus":[
{
"id":9,
"childMenus":null,
"menu_url":"/system/users/userPages.do",
"menu_name":"用戶管理"
},
{
"id":10,
"childMenus":null,
"menu_url":null,
"menu_name":"角色管理"
},
{
"id":11,
"childMenus":null,
"menu_url":null,
"menu_name":"權限分配"
},
{
"id":12,
"childMenus":null,
"menu_url":null,
"menu_name":"菜單管理"
},
{
"id":13,
"childMenus":null,
"menu_url":"/manage/updatePwdPages.do",
"menu_name":"密碼修改"
}
],
"menu_url":null,
"menu_name":"權限管理"
}
],
"msg":"success"
}
2)菜單解析
上面是拼接菜單代碼，下面是解析菜單代碼：
解析菜單的時候踩了一個坑，就是二級菜單在瀏覽器端始終無法打開，反復調試到晚上十一二點始終不知道什么原因，第二天來了之后繼續調試，最終發現是a標簽上缺少了一個屬性(class='dropdown-toggle')，有時可能就是很小的一個問題讓你耽誤很長很長的時間還弄的自己焦頭爛額，深感有時阻礙你前進的可能不是那萬里征程(搭建整套完善框架)，卻可能是腳下的一粒沙子。
廢話少說，直接上遞歸核心代碼(實際略有改動，詳見源碼)：
/**
* 遞歸遍歷子樹
* @param list
*/
function mainPageRecurSubTree(ctx,list){
if(null==list || ""==list || "null"==list){
return "";
}
var mainPageRecurSubTreeStr = "";
mainPageRecurSubTreeStr +=
"
for(var m=0;m
var menuSub = list[m];
mainPageRecurSubTreeStr +=
"
"+""+
""+
menuSub.menu_name;
if(null!=menuSub.childMenus && ""!=menuSub.childMenus && "null"!=menuSub.childMenus){
mainPageRecurSubTreeStr +=
"";
}
mainPageRecurSubTreeStr +=
""+
""+
mainPageRecurSubTree(ctx,menuSub.childMenus)+
"";
}
mainPageRecurSubTreeStr +=
"
";return mainPageRecurSubTreeStr;
}
3)權限管理/菜單管理
菜單插件采用bootstrap-treeview插件，
開關按鈕采用bootstrap-switch插件；注意：將所需的開關插件放入到main.jsp中，開關樣式方可正常引用，否則如果放到每個功能模塊的子頁面中會導致插件無法完全加載而導致的樣式顯示的問題。
菜單管理頁面中添加根菜單，也可添加子菜單，選擇/修改菜單的上級菜單，修改菜單信息等功能。
權限管理/角色管理
權限管理à角色管理：
角色管理中的菜單權限修改(修改角色對應的菜單信息)：
也采用了bootstrap-TreeView插件，但是此原生的樹菜單沒有級聯選項，故添加級聯選擇的js，核心代碼如下：
//級聯選擇：選中
$("#roleManageUpdateRoleMenuAllTreeMes").on('nodeChecked',function(event,node){
roleManageUpdateRoleMenuNodeChecked(event, node);;
});
//級聯選擇：取消選中
$("#roleManageUpdateRoleMenuAllTreeMes").on('nodeUnchecked',function(event,node){
roleManageUpdateRoleMenuNodeUnchecked(event, node);;
});
//如下是響應菜單選中和取消選中的操作
var roleManageUpdateRoleMenuNodeCheckedSilent = false;
function roleManageUpdateRoleMenuNodeChecked(event, node){
if(roleManageUpdateRoleMenuNodeCheckedSilent){
return;
}
roleManageUpdateRoleMenuNodeCheckedSilent = true;
roleManageUpdateRoleMenuCheckAllParent(node);
roleManageUdpateRoleMenuCheckAllSon(node);
roleManageUpdateRoleMenuNodeCheckedSilent = false;
}
var roleManageUpdateRoleMenuNodeUncheckedSilent = false;
function roleManageUpdateRoleMenuNodeUnchecked(event, node){
if(roleManageUpdateRoleMenuNodeUncheckedSilent){
return;
}
roleManageUpdateRoleMenuNodeUncheckedSilent = true;
roleManageUpdateRoleMenuUncheckAllParent(node);
roleManageUpdateRoleMenuUncheckAllSon(node);
roleManageUpdateRoleMenuNodeUncheckedSilent = false;
}
//選中全部父節點
function roleManageUpdateRoleMenuCheckAllParent(node){
$("#roleManageUpdateRoleMenuAllTreeMes").treeview('checkNode',node.nodeId,{silent:true});
var parentNode = $("#roleManageUpdateRoleMenuAllTreeMes").treeview('getParent',node.nodeId);
if(!("nodeId" in parentNode)){
return;
}else{
roleManageUpdateRoleMenuCheckAllParent(parentNode);
}
}
//取消全部父節點
function roleManageUpdateRoleMenuUncheckAllParent(node){
$("#roleManageUpdateRoleMenuAllTreeMes").treeview('uncheckNode',node.nodeId,{silent:true});
var siblings = $("#roleManageUpdateRoleMenuAllTreeMes").treeview('getSiblings', node.nodeId);
var parentNode = $("#roleManageUpdateRoleMenuAllTreeMes").treeview('getParent',node.nodeId);
if(!("nodeId" in parentNode)) {
return;
}
var isAllUnchecked = true;? //是否全部沒選中
for(var i in siblings){
if(siblings[i].state.checked){
isAllUnchecked=false;
break;
}
}
if(isAllUnchecked){
roleManageUpdateRoleMenuUncheckAllParent(parentNode);
}
}
//級聯選中所有子節點
function roleManageUdpateRoleMenuCheckAllSon(node){
$("#roleManageUpdateRoleMenuAllTreeMes").treeview('checkNode',node.nodeId,{silent:true});
if(node.nodes!=null&&node.nodes.length>0){
for(var i in node.nodes){
roleManageUdpateRoleMenuCheckAllSon(node.nodes[i]);
}
}
}
//級聯取消所有子節點
function roleManageUpdateRoleMenuUncheckAllSon(node){
$("#roleManageUpdateRoleMenuAllTreeMes").treeview('uncheckNode',node.nodeId,{silent:true});
if(node.nodes!=null&&node.nodes.length>0){
for(var i in node.nodes){
roleManageUpdateRoleMenuUncheckAllSon(node.nodes[i]);
}
}
}
權限管理/權限分配
權限管理à權限分配：為不同用戶分配不同角色。
在權限分配è角色分配? 頁面中，使用了一個多選框的插件(用于選擇多個角色)，如下圖：
在使用中發現這個選擇框第一次打開時正常，之后再打開始終不正常，調試發現是因為select中動態添加了一個div并且這個div的style=“width：0px”；導致select的展示出現問題。試了各種方式，網上搜了各種方案均失敗。最終萬般無奈之下猜想可能是引用的js文件中生成這個內部div時導致寬度獲取的問題，于是便修改引用的js源碼，修改如下：
至此問題解決。
問：如何知道要修改這個寬度(如何定位到是要修改這個寬度的)？
答：在瀏覽器中調試時發現在select中生成的div的id是在select的id的基礎之上添加了“_chosen”，于是搜索“_chosen”發現整個js源碼中只有一個“_chosen”，于是在此附近尋找width相關的代碼，終于發現了并嘗試修改成功。
權限管理/用戶管理
權限管理à用戶管理：功能為對能夠登錄到系統的管理用戶的增、查、修改、停用操作。
此頁面中的table采用bootstrap原生表格，增改查的邏輯完全為自己實現。沒有使用bootstrap-table插件。
本系統設計者建議使用bootstrap-table插件(why? 我也不知道，就是感覺成熟開源的業內小有名氣的東東一定比自己寫的好)，插件demo見系統demo示例。
此模塊中的用戶為系統的管理人員。
延伸思考
Iframe為子頁面，可不受父頁面干擾，但是究竟用還是不用好，有待深思的問題；bootstrap-switch boostrap的開關按鈕插件并未能初始化開或者關狀態，此功能關乎開關的美觀，需探究如何修改或選用其它插件待進一步深思。
3)系統待優化之處：
權限訪問控制該如何優化(內存？redis？)
Mybatis整合
嚴格的mvc設計模式
致謝!
初級入門：澤宇、老申、昊總
問題修復：金鳳
問題修復：系統參與的全體java同仁
開發者：戰神，彭玉，ylz，東龍；
零碎不重要的整理工作(高大上的名字：秘書)：本人。
向以上四位開發者致敬!
文檔說明
本文檔由四位開發者在開發過程中心得記錄，由秘書整理匯總而成。最終解釋權歸四位開發者所有。
參考文獻
https://blog.csdn.net/weixin_41981080/article/details/81912941
文末福利：
想要與大家一起交流，可進企鵝群：589847567
群共享文件中有源碼下載。
說明：該系統由以上四位開發者在工作之余抽時間分工開發完成，因工作較忙，時間有限等原因，系統中難免有瑕疵不足之處需進一步完善，望大家諒解，在后續版本中我們會不斷完善。同時誠邀大才雄心的有志之士加入我們共同開發。
總結
以上是生活随笔為你收集整理的bootstrap加载mysql数据库_bootstrap后台管理系统前后台实现(含数据库)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux环境下安装多个任意版本的pyt
- 下一篇： 删除一个无头单链表的非尾节点（C语言）