ASP.NET Core+LayUI+MySql CMS管理后台,主要功能包括 登錄、修改密碼,賬號管理,菜單管理,角色權限管理等
由於工作之外,抽時間寫的,用於學習交流,請慎重用於生產環境
項目概要
CMS管理后台包含的功能有 登錄、修改密碼、賬號管理(賬號列表,添加,修改,刪除,禁/啟用,解鎖)、菜單管理(菜單列表,添加,修改,刪除,禁/啟用)、角色權限管理(角色列表,添加,修改,刪除,禁/啟用,分配權限)等后台最基礎的功能。
CMS管理后台使用的ASP.NET Core MVC模式,LayUI做的前端頁面,Mysql做的數據存儲,Razor頁面引擎
登錄加入圖片驗證碼,驗證碼保存在Session中,Cookie+AES加密保存用戶登錄狀態,密碼使用MD5加密保存在數據庫
使用 AuthorizationFilter 過濾器判斷用戶的登錄狀態和操作權限,權限判斷基於Controller和Action
表單數據提交采用ajax提交,頁面的展示與數據提交一般共用同一個 Action,
1. 像添加、修改、分配權限等通過 if (!Request.Method.ToUpper().Equals("POST", StringComparison.OrdinalIgnoreCase) || !Request.HasFormContentType) 來區分是顯示頁面還是提交請求
2. 像賬號列表、菜單列表、權限列表等通過 if (id == null || !id.ToUpper().Equals("DATA", StringComparison.OrdinalIgnoreCase)) 來區分是顯示頁面還是返回數據列表
使用依賴注入,面向切面來實現業務,減少藕爾,使代碼也易於管理
軟件版本
ASP.NET Core:2.1
MySql:5.6
LayUI:2.4.5
jquery:3.3.1
項目結構
Database:數據庫腳本,包括建庫、建表、數據初始化等腳本
Snai.CMS:代碼目錄
wwwroot:js,css,image等靜態文件
Business:業務實現,登錄,賬號管理,角色管理,菜單管理等實現
Common:公共基礎的方法類庫,加解密,AuthorizationFilter過濾器,驗證碼實現,時間戳,隨機數,密碼復雜度檢查,系統一些常量等
Controllers:控制器,加入了ControllerBase繼承Controller,其他控制器繼承ControllerBase,主要是 抽出GetLayoutModel(),再通過泛型 ToT<T>(ref T t) 方法,得到子類頁面Model,簡化控制器取 LayoutModel Model值
DataAccess:數據庫操作
Entities:實體對象
Models:模型
Views:視圖
項目介紹
一、CMS數據庫 snai_cms
數據表 管理員表(admins),菜單表(modules),角色表(roles),權限表(role_right)
時間以utc時間戳保存,ORM使用EFCore操作數據庫
二、登錄
登錄的 用戶名、密碼、驗證碼 都正確才能登錄成功,登錄成功跳轉到后台首頁
默認的用戶名:snai,密碼:snai2019
如果在30分鍾內,密碼錯誤3次,將鎖定賬號30分鍾,這里的時間和錯誤次數可以在appsettings.json配置
"LogonSettings": {
"ErrorCount": 3, //錯誤次數
"ErrorTime": 30, //單位時間內錯誤的時間
"LockMinute": 30 //鎖定時間
}
每次登錄不管成功還是失敗都會刷新驗證碼,驗證碼保存在 Session,有效時間15分鍾
登錄成功后,登錄用戶 Token(用戶名,密碼,隨機碼)通過 AES 加密保存在 Cookie 中,登錄 Cookie 的有效期為關掉瀏覽器過期,AES加密密鑰在appsettings.json配置
"WebSettings": {
"CipherKey": "wEd5cxs0xUZe6WBCTUFIMJIDRnLZYWG9", //AES加密密鑰
"WebTitle": "CMS管理后台" //管理后台名稱
}
通過 AuthorizationFilter 過濾器判斷登錄和權限,除了登錄和退出,其他頁面和操作都需要登錄和相應權限,權限判斷是通過用戶角色,Controller和Action 對應的菜單來判斷
三、登錄信息和修改密碼
登錄信息 主要顯示當前登錄IP和登錄時間
修改密碼 可以通過舊密碼來修改密碼,密碼要求 至少6位,且必須是字母與(數字或特殊符號)組合
右上角,包括退出按鈕,用於退出后台
四、后台設置
后台設置包括 管理員管理,管理員管理包括 賬號管理、菜單管理、角色管理
1、賬號管理 主要包括 賬號列表,添加,修改,刪除,禁/啟用,解鎖等操作
2、菜單管理 主要包括 菜單列表,添加,修改,刪除,禁/啟用等操作
3、角色管理 主要包括 角色列表,添加,修改,刪除,禁/啟用,分配權限等操作
分配權限 除了登錄和退出,其他頁面和操作都需要權限
開發時的一些注意
1. 注冊HttpContext,用於在Controller之外的地方使用
services.AddHttpContextAccessor();
2. appsettings.json 中文亂碼,如配置文件里有中文,保存時默認GB2312格式,改為UTF-8
3. View 文件不編譯 <MvcRazorCompileOnPublish>false</MvcRazorCompileOnPublish>
4. View 使用Model
@{
ViewData.Model = new NoUserRoleModel()
{
PageTitle = "沒有權限訪問",
WebTitle = "CMS管理后台"
};
}
5. Razor里的代碼塊html標簽跨了代碼段時,視圖會報錯
如:下面這種寫法就會報錯
@if(...){
<li class='layui-nav-item'>
}
</li>
正確寫法
@if(...){
<li class='layui-nav-item'></li>
}
或
@if(...){
@Html.Raw("<li class='layui-nav-item'>")
}
@Html.Raw("</li>")
6. 加基類控制器 ControllerBase : Controller,抽出GetLayoutModel(),再通過泛型 ToT<T>(ref T t) 方法,得到子類頁面Model, 簡化控制器取 LayoutModel Model值
7. layui重新渲染后的單選按鈕,選擇后直接用 $("input[name='state']:checked").val() 是取不值的(用layui的表單取值不確定是否
能取到)后面用layui監聽事件,監聽按鈕選擇修改原單選按鈕選中狀態,然后再用 $("input[name='state']:checked").val() 取值
MA.layui.form.on('radio(state)', function (data) {
if (data.value == 1) {
MA.Form.state1.attr("checked", true);
MA.Form.state2.attr("checked", false);
} else {
MA.Form.state1.attr("checked", false);
MA.Form.state2.attr("checked", true);
}
});
8. 對於checkbox提交,用 jquery 組合成數組提交
var moduleIDs =[];
$("input[name='moduleIDs']:checked").each(function(){
moduleIDs.push($(this).val());
});
//請求參數
var params = {
roleID: MRR.Form.roleID.val(),
moduleIDs: moduleIDs
};
9. 對於分配權限時checkbox選擇與聯動選擇,也用的是layui監聽事件MRR.layui.form.on('checkbox(moduleIDs)', function (data) {}); 來設置原checkbox的值
對於聯動后重新渲染checkbox用MRR.layui.form.render('checkbox'),要注意用prop而不用attr,$(this).prop("checked", false),否則已經做過選擇復選框聯動無效
菜單層級
后台配置
--------管理員管理
-----------------賬號管理
--------------------------添/刪/改等賬號
Github源碼地址:https://github.com/Liu-Alan/Snai.CMS