一、前言
最近有時間研究了一下做背景管理系統的模闆界面，開源的比較知名很早之前就用過EasyUI。Vue+ElementUI，Layui，Bootstrap等。
EasyUI個人感覺功能強大，幫助web開發者更輕松的打造出功能豐富的UI界面，通過編寫一些簡單HTML标記，就可以定義使用者界面，隻是呢本人感覺界面沒那麼好看。
Vue是很不錯的開源架構，目前比較火，ElementUI界面也好看，隻是要花多點時間學習，我發現Vue+ElementUI做前後端分離的，前端打包釋出部署後，如果要修改一點樣式又要重新打包部署，不能單個檔案修改釋出上去，這點感覺不友善，如果有知道可以解決這個問題的朋友可以評論區留言告知下。
Layui遵循原生的開發方式。極易上手，開箱即用，非常适合網頁界面的快速開發，更多是面向于後端開發者，做背景管理界面，最近研究過Layui做背景管理，雖然功能做出來了，隻是在使用過程中一些細節上不太順暢。
說回今天的主題，Ace Admin是評價較高的一套UI架構，是一款輕量且功能豐富的管理模闆，幹淨且易于使用，是一個基于Twitter bootstrap3開發的背景模闆。Ace Admin就不過多說明了，這裡主要是使用Ace Admin做背景管理系統界面、使用者權限管理界面設計。當然使用者權限管理功能也已經完全實作。
Ace Admin官網位址：Dashboard - Ace Admin
Ace Admin Git位址： https://github.com/bopoda/ace
二、使用
代碼下載下傳下來是這樣的，将檔案夾assets拷貝到項目中即可，想要什麼樣的界面參考ace提供html頁面如下圖将html頁面内容拿過去修改。這裡需要注意頭部引用的js、css檔案順序，可以抽取出來作為一個單獨的公共檔案，引入到頁面檔案頭部使用即可。
三、使用者權限管理系統界面
首頁
可以看到首頁和Ace Admin官網的首頁一樣。左側菜單資料是根據使用者角色權限動态從背景擷取的，右上角使用者資訊也是動态擷取展示。
登入頁
登入頁也和Ace Admin官網的登入頁面一模一樣。登入會判斷賬号是否存在、密碼是否正确、驗證碼是否正确。三者都正确才能登入成功。
登出
3.1 權限管理（重點）
3.1.1 使用者管理
使用者查詢
說明：使用Ace Admin的jqGrid plugin模闆、Widget Box模闆和Buttons & Icon。Widget Box作為查詢條件框，jqGrid作為展示資料表格，Buttons & Icon 作為操作的按鈕。Ace Admin官方的jqGrid plugin表格的表頭、表中、分頁邊框顔色不一緻，有點違和感，我在外部加了淡藍色邊框。分頁功能已經實作。查詢條件部門是從背景擷取的資料，樹形展示。
添加使用者
修改使用者
要選中記錄，進入修改界面
删除使用者
要選中記錄，進入删除确認界面
修改密碼
配置設定角色（重點）
選中某條使用者記錄進入配置設定角色界面，展示的是角色資料。選中左側角色點選【配置設定】按鈕到右側中，如選擇錯了，可選中右側角色點選【移除】按鈕移除，沒有資料會提示，确定沒問題點選【儲存配置設定的角色】按鈕送出資料。資料儲存成功後也會提示。
3.1.2 角色管理
角色查詢
這裡定義了樣式，使用自定義的樣式如下圖，查詢條件框、表格的 背景為白色面闆。添加角色、修改角色、删除角色和使用者管理的界面一樣，這裡不截圖展示了。
配置設定菜單權限（重點）
選擇某條角色記錄進入配置設定權限界面，界面展示的是資源資料，資源有目錄、菜單、按鈕。選中需要配置設定的菜單、按鈕即可。權限可以控制到按鈕級别。
3.1.3 資源管理
資源查詢
資源有目錄、菜單、按鈕。權限可以控制到按鈕級别。查詢條件上級資源作為樹形展示。資源有自己編号、上級編号、資源名稱、資源位址、資源圖示、資源類别。
資源添加
資源修改
資源删除（略）
3.2 部門管理
3.3 字典管理
靜态字典
系統中都會有一些靜态資料，比如性别、身份證類型、狀态等等。這裡界面是使用bootstrap的面闆，界面提供可選擇行多一些。
字典類型
字典類型還可以自定義sql，如果自定義為空則從靜态字典表中擷取資料，有時候我們需要擷取的資料可能在其他表中，則可以編寫自定義sql擷取，有自定義sql則從sql中擷取資料。
3.4 日志管理
結語
本人使用的是ssm架構(spring+springmvc+mybatis)和mysql資料庫。oracle的版本也有。這裡不介紹Ace Admin的使用方法、不介紹權限管理相關概念、不介紹背景架構。隻是展示用Ace Admin模闆來設計的使用者權限管理系統界面。
項目簡單優秀，可以用來做公司中小型背景管理系統或者畢業設計。如果有需要代碼、資料庫的可以不免費的聯系本人。