ASP.NET Core CMS管理後臺

蝸牛丨發表於2019-04-18
ASP.NET

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)，否則已經做過選擇核取方塊聯動無效

 

選單層級

後臺配置

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

-----------------賬號管理

--------------------------添/刪/改等賬號

 

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

 
 
 

相關文章