ASP.NET Core CMS管理后台


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

 

項目結構

image

image

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操作數據庫

image

二、登錄

登錄的 用戶名、密碼、驗證碼 都正確才能登錄成功,登錄成功跳轉到后台首頁

默認的用戶名: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 對應的菜單來判斷

image

image

三、登錄信息和修改密碼

登錄信息 主要顯示當前登錄IP和登錄時間

image

修改密碼  可以通過舊密碼來修改密碼,密碼要求 至少6位,且必須是字母與(數字或特殊符號)組合

image

右上角,包括退出按鈕,用於退出后台

image

四、后台設置

后台設置包括 管理員管理,管理員管理包括 賬號管理、菜單管理、角色管理

image

1、賬號管理 主要包括 賬號列表,添加,修改,刪除,禁/啟用,解鎖等操作

image

2、菜單管理 主要包括 菜單列表,添加,修改,刪除,禁/啟用等操作

image

3、角色管理 主要包括 角色列表,添加,修改,刪除,禁/啟用,分配權限等操作

image

分配權限 除了登錄和退出,其他頁面和操作都需要權限

image

 

開發時的一些注意

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

 
 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM