1. 程式人生 > >.NET Core實戰專案之CMS 第十五章 各層聯動工作實現增刪改查業務

.NET Core實戰專案之CMS 第十五章 各層聯動工作實現增刪改查業務

原文: .NET Core實戰專案之CMS 第十五章 各層聯動工作實現增刪改查業務

連著兩天更新敘述性的文章大家可別以為我轉行了!哈哈!今天就繼續講講我們的.NET Core實戰專案之CMS系統的教程吧!這個系列教程拖得太久了,所以今天我就以選單部分的增刪改查為例來講述下我的專案分層之間的協同工作吧!如果你覺得文中有任何不妥的地方還請留言或者加入DotNetCore實戰千人交流群637326624跟大夥進行交流討論吧!

本文已收錄至《.NET Core實戰專案之CMS 第一章 入門篇-開篇及總體規劃

作者:依樂祝

原文地址:https://www.cnblogs.com/yilezhu/p/10263714.html

寫在前面

前面的章節中我們基本的增刪改查都有了,甚至後臺模板我們也找到並整合到了我們的CMS系統中了!那麼剩下的就是對功能的開發了。對於功能的開發部分,我不會全部都拿出來講,只會以一個選單的例子來進行講解!話不多說,開是吧!

各層之間的協作

先來講講我的分層協作的設計思路。雖然藉助了DDDLite的部分思想,但是又與其不通,因為小專案嚴格按照DDD的思想來進行開發完全是找虐。如果有需要我後期會對結構進行調整來向DDD層次遷移。先上一張圖吧:

1547195769549

這裡所有的底層方法都是在Repository層進行的,加入倉儲介面層的原因是為了解耦,一路跟著教程走來的朋友一定知道我目前我的倉儲層是按照SQLServer資料庫進行開發的,後期我會對MySQL,甚至PgSql的支援!這樣的話對應用層絲毫不會有影響。

為什麼這裡用了應用層的服務?因為如果不實用應用層的話,設計到一些邏輯判斷等等的話會把控制器搞的很龐大,程式碼量太多!為了使控制器簡潔所以我加入了服務層的概念,這樣服務層處理業務邏輯,把結果返回給控制器即可!當然如果涉及到多個事件的處理的話可能還需要藉助MediatR來進行實現!什麼你不知道MediatR是什麼?那你可以看看我的這篇《ASP.NET Core中使用MediatR實現命令和中介者模式》文章的講述。

實體層充當資料庫實體對映以及DTO及ViewModel的角色!對於實體物件模型我更喜歡貧血模式的整潔乾淨的實體物件!不喜歡充斥各種程式碼的充血物件。所以裡面都是POCO的簡單生成。而ViewModel這個層可能我對這個層的概念設計有點模糊,所以DTO跟ViewModel的都混在一起了!這裡你不用太過驚訝,因為你完全可以按照自己的理解來進行整理!自由發揮吧!

選單的增刪改查實現

這一節我們就開始寫選單的增刪改查的程式碼實現吧!

選單的列表頁面功能實現

  1. 首選在我們的Czar.Cms.Admin 專案的Controllers控制器下建立MenuController控制器!如圖所示:

    1547197228635

    裡面的程式碼如下:

    public class MenuController : BaseController
        {
            private readonly IMenuService _service;
    
            public MenuController(IMenuService service)
            {
                _service = service;
            }
    
            public IActionResult Index()
            {
                return View();
            }
    
        }

    我們這裡先列出首頁(也就是列表頁的程式碼)然後建立對應的Index.cshtml檢視

  2. Index.cshtml檢視的程式碼如下:

    @{
        ViewData["Title"] = "後臺選單管理";
    }
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form">
            @Html.AntiForgeryToken()
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" class="layui-input searchVal" placeholder="請輸入選單名稱" />
                </div>
                <a class="layui-btn search_btn" data-type="reload">搜尋</a>
            </div>
            <div class="layui-inline">
                <a class="layui-btn layui-btn-normal addMenu_btn"><i class="layui-icon">&#xe61f;</i>新增選單</a>
            </div>
            <div class="layui-inline">
                <a class="layui-btn layui-btn-danger layui-btn-normal delAll_btn"><i class="layui-icon layui-icon-delete"></i>批量刪除</a>
            </div>
        </form>
    </blockquote>
    <table id="menuList" lay-filter="menuList"></table>
    <!--操作-->
    <script type="text/html" id="menuListBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">刪除</a>
    </script>
    <script type="text/html" id="IsDisplay">
        {{#  if(d.IsDisplay ===true){ }}
        <input type="checkbox" name="IsDisplay" value="{{d.Id}}" lay-filter="IsDisplay" lay-skin="switch" lay-text="是|否" checked>
        {{#  } else{ }}
        <input type="checkbox" name="IsDisplay" value="{{d.Id}}" lay-filter="IsDisplay" lay-skin="switch" lay-text="是|否">
        {{#  }}}
    </script>
    @section Scripts{
        <script type="text/javascript" src="~/layui/layui.js"></script>
        <script type="text/javascript" src="~/js/menu/[email protected]("yyyyMMddHHmmss")"></script>
    }

    可能對於大多數人來說看到這個檢視很懵逼,怎麼沒有列表的資訊啊,語法什麼的也都看不懂啊?別急,這裡用到的是Layui的一些語法!我們拆分下來看:

    <form class="layui-form">這個部分就是搜尋功能部分

    <table id="menuList" lay-filter="menuList"></table>就是表格

    <script type="text/html" id="IsDisplay">這個是layui模板部分

  3. wwwroot\js\menu\下面建立一個menuList.js的js檔案,來對頁面的列表進行下初始化。並對一些操作進行控制。由於程式碼太長,所以只貼上載入表格的部分程式碼如下所示:

    1547198173155

    對應的LoadData裡面的程式碼如下:

    1547198145587

    是不是很簡潔,那是因為所有的業務程式碼都在服務層實現了,不信?我把程式碼粘貼出來給你看:

    1547198201852

    這時候體會到服務層的好處了吧!

  4. 執行起來看下效果吧:

    1547198251998

選單增加修改功能實現

  1. 首先還是要寫控制器方法來顯示檢視,程式碼如下:

    1547198381483

  2. 由於修改編輯頁面選單有層級關係,所以我們需要載入頂層的選單(畫外音:只支援兩級選單)所以我們載入編輯頁面的時候需要把頂層的選單給加載出來,方法如下:

    1547198494483

  3. 列表頁彈出編輯或者新增的功能是在menu.js中實現的,程式碼如下:

    1547198579342

  4. 新增或者編輯的時候需要判斷選單的別名是否重複,這裡是通過layui的驗證模組然後使用ajax實現的,檢視程式碼如下:

    1547198653419

    js程式碼如下:

    1547198676317

    先判斷是否符合規則,然後判斷是否存在,這個需要對新增或者編輯分別進行處理!新增的時候需要判斷是否存在即可,編輯的時候需要判斷除自己外有沒有重複的,程式碼如下:

    1547198800139

    可能你更喜歡看服務層及倉儲層的程式碼,當然我也會毫不吝嗇的貼出來,只是可能會消耗你些許流量來檢視圖片。

    服務層:

    1547347299803

    倉儲層程式碼(由於本人比較懶,所以只實現同步方法,非同步獲取的方法後期再補上吧,相信參照其他的寫法你有何能自行實現):

    1547347389722

    這裡需要注意,我在抽象接口裡面都加了註釋,所以實現裡面就沒加了,相信你也能看懂。換句話說,我懶~~~~

  5. 結果提交,這裡需要注意只要涉及到結果提交的我都會用到ValidateAntiForgeryToken 還有就是我的結果提交全部是通過ajax進行的,並且把防偽Token放在Token裡面的,程式碼如下:

    1547347613595

    至於為什麼這裡的Headers設定為X-CSRF-TOKEN-yilezhu這個你可以看我的上一節課程《.NET Core實戰專案之CMS 第十四章 開發篇-防止跨站請求偽造(XSRF/CSRF)攻擊處理

    裡面有講述,所以這裡就不做過多的講述了。我們直接上結果提交的程式碼吧。

    1547348249807

    很簡潔對不對?寥寥幾行程式碼,可是實現真的這麼簡單嗎?看看服務層你就知道了。

    public BaseResult AddOrModify(MenuAddOrModifyModel item)
            {
                var result = new BaseResult();
                Menu model;
                if (item.Id == 0)
                {
                    //TODO ADD
                    model = _mapper.Map<Menu>(item);
                    model.AddManagerId = 1;
                    model.IsDelete = false;
                    model.AddTime = DateTime.Now;
                    if (_repository.Insert(model) > 0)
                    {
                        result.ResultCode = ResultCodeAddMsgKeys.CommonObjectSuccessCode;
                        result.ResultMsg = ResultCodeAddMsgKeys.CommonObjectSuccessMsg;
                    }
                    else
                    {
                        result.ResultCode = ResultCodeAddMsgKeys.CommonExceptionCode;
                        result.ResultMsg = ResultCodeAddMsgKeys.CommonExceptionMsg;
                    }
                }
                else
                {
                    //TODO Modify
                    model = _repository.Get(item.Id);
                    if (model != null)
                    {
                        _mapper.Map(item, model);
                        model.ModifyManagerId = 1;
                        model.ModifyTime = DateTime.Now;
                        if (_repository.Update(model) > 0)
                        {
                            result.ResultCode = ResultCodeAddMsgKeys.CommonObjectSuccessCode;
                            result.ResultMsg = ResultCodeAddMsgKeys.CommonObjectSuccessMsg;
                        }
                        else
                        {
                            result.ResultCode = ResultCodeAddMsgKeys.CommonExceptionCode;
                            result.ResultMsg = ResultCodeAddMsgKeys.CommonExceptionMsg;
                        }
                    }
                    else
                    {
                        result.ResultCode = ResultCodeAddMsgKeys.CommonFailNoDataCode;
                        result.ResultMsg = ResultCodeAddMsgKeys.CommonFailNoDataMsg;
                    }
                }
                return result;
            }
    

    是不是業務還蠻複雜的,如果都放在控制器處理想想控制器是不是很恐怖,所以說引入服務層很有必要,把一些邏輯移到服務層讓控制器只用來顯示資料多好!

刪除功能實現

你以為刪除功能很簡單嗎?沒錯,是很簡單,可是我們在設計資料庫的時候加入了IsDeleted,看到這個相信你已經猜到了,我們所有的刪除操作都是軟刪除哦!至於為什麼這樣做?原因就是不想刪錯了後悔!我只能說這麼多了,只有經歷慘痛的經歷可能才會這樣做!還有就是刪除之前我會進行js的彈窗提醒,如下圖所示,提醒您是否真的要刪除!

1547377563781

  1. 好了,按照慣例我們第一步是不是要上js的程式碼啊?那還等什麼?立馬奉上

    1547377653057

  2. 注意這裡刪除的時候也是需要進行防偽驗證的,防止別人進行介面惡意刪除,下面看下控制器中的程式碼,哇真乾淨就一行程式碼啊,有木有!

    1547377792361

  3. 其實我想說服務層的程式碼有超過二十行,不信?我截圖給你看吧!好好數數,加上換行是不是有二十行。

    1547377883804

總結

今天講的內容比較簡單就是我們這個CMS系統設計的各層之前如何聯動工作來實現增刪改查業務的,望對大家瞭解這個系統有所幫助!至於其他的業務功能大家都可以參照這個進行開發!比如角色管理,使用者管理等等!下節我們就來實現使用者登入模組的功能。