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

 

項目結構

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：視圖

 

項目介紹

1、CMS數據庫 snai_cms

數據表 管理員表（admins），菜單表（modules），角色表（roles），權限表（role_right）

時間以utc時間戳保存，ORM使用EFCore操做數據庫

2、登陸

登陸的 用戶名、密碼、驗證碼 都正確才能登陸成功，登陸成功跳轉到後臺首頁

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

3、登陸信息和修改密碼

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

修改密碼  能夠經過舊密碼來修改密碼，密碼要求 至少6位，且必須是字母與(數字或特殊符號)組合

右上角，包括退出按鈕，用於退出後臺

4、後臺設置

後臺設置包括 管理員管理，管理員管理包括 帳號管理、菜單管理、角色管理

一、帳號管理 主要包括 帳號列表，添加，修改，刪除，禁/啓用，解鎖等操做

二、菜單管理 主要包括 菜單列表，添加，修改，刪除，禁/啓用等操做

三、角色管理 主要包括 角色列表，添加，修改，刪除，禁/啓用，分配權限等操做

分配權限 除了登陸和退出，其餘頁面和操做都須要權限

 

開發時的一些注意

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)，不然已經作過選擇複選框聯動無效

 

菜單層級

後臺配置

--------管理員管理

-----------------帳號管理

--------------------------添/刪/改等帳號

 

源碼訪問地址：https://github.com/Liu-Alan/Snai.CMS