.NET Core實戰項目之CMS 第十三章 開發篇-在MVC項目結構介紹及應用第三方UI

作為后端開發的我來說，前端表示真心玩不轉，你如果讓我微調一個位置的樣式的話還行，但是讓我寫一個很漂亮的后台的話，真心做不到，所以我一般會選擇套用一些開源UI模板來進行系統UI的設計。那如何套用呢？今天就以我們系列實戰教程中的CMS系統為例來應用第三方的后台模板LayuiCMS2.0為例來進行實戰演練吧！

本文已收錄至《.NET Core實戰項目之CMS 第一章 入門篇-開篇及總體規划》
作者：依樂祝
首發地址 “DotNetCore實戰”公眾號
原文地址：https://www.cnblogs.com/yilezhu/p/10210732.html

寫在前面

這里先對從一開始就開始追這個ASP.NET Core實戰項目之CMS系列教程的讀者朋友說聲抱歉。說因為太忙很久沒更新了，這都是托詞！其實我是想趁着元旦假期把后台功能全部寫完以后再來一點點的再分享出來的，奈何前端知識的軟肋徹底爆發，再加上周末陪小孩因此只完成了百分五十左右的開發工作，再者群里很多小伙伴也已經在崔更了，所以摒棄之前的策略，改成邊分享邊開發的策略。接下來還是盡量保持一星期三篇左右的進度來分享，寫文章真的比寫代碼要更費神，希望大家能夠多多支持，多多推薦！你的推薦也是我繼續分享的動力！當然祝福大家“元旦后第一天正式上班開開心心，快快樂樂”。

實戰

ASP.NET Core MVC項目結構介紹

在開始之前先讓我們大致了解下一個新創建的ASP.NET Core MVC的項目結構，只有了解了項目結構后，我們才能得心應手的進行相關的操作！同時由於Czar.Cms.Admin項目中我已經應用過了模板，因此我們以Czar.Cms.Site這個還沒有動過手術的前端項目為例來進行講解。

1. 新創建的一個空的ASP.NET Core MVC的項目結構如下所示，我們只介紹圈起來的八個部分：

   

2. wwwroot部分放的內容都是前端的內容，如css，js，image等等。如下圖所示：

   

   ASP.NET Core MVC項目為我們生成了一套默認的樣式，如上圖紅圈圈起來的部分就是這套默認的樣式（下面再一步一步的替換它），我們按如下圖所示的操作選擇這個項目，然后右鍵-》查看-》在瀏覽器中查看，

   

   看到如下的默認界面（別急，我們接下來再替換它）

   

3. 依賴項：顧名思義就是項目所需要以來的第三方組件，比如我們的Czar.Cms.Site項目需要依賴倉儲層的項目，比如我們用到了第三方的Autofac組件等等，如下圖所示：

   

4. Controllers：MVC架構中的C層即控制器層，用到Asp.Net MVC的對這個控制器應該不陌生吧！這個 文件夾下包含負責處理用戶輸入和響應的控制器類。另外要求所有控制器的名稱必須以 "Controller" 結尾。如下圖所示：

   

5. Models：MVC架構中的M層即實體層，這個大伙應該都熟悉吧就是實體對象，這里如果我再截圖的話感覺就是在侮辱大伙的智商，所以~~~~

6. Views：MVC架構中的V層即視圖層，用來在瀏覽器中顯示的具體界面。如下圖所示，這里跟Controller層進行對應，如上圖標注的HomeController中的Index就對應Views文件夾下Home文件夾下面的Index.cshtml文件：

   

   我們嘗試把Index.cshtml中的內容改為Welcome 依樂祝！，然后再瀏覽器中打開查看一下，可以看到頁面的內容已經發生了變化

   

7. appsettings.json：這個文件是系統配置文件，不知道大家還記得《.NET Core實戰項目之CMS 第三章 入門篇-源碼解析配置文件及依賴注入》這篇文章中的內容嗎？里面詳細介紹了這個文件的加載過程。

8. Program.cs：及系統的啟動入口，熟悉C#的童鞋是不是感覺似曾相識，沒錯，就是一個控制台程序的入口嘛！你是否在想，里面會不會有Main方法呢？哈哈，自己打開看下吧！

9. Startup.cs：啟動配置文件，第三篇也說過了，其實這個文件會被轉換成IStartUp 然后再進行注入的！不清楚的可以去看第三篇，有提到！

Views結構介紹

關於Views的接哦古，感覺還是有必要提一下，不知道大伙有沒有注意到我們上面打開的Index.cshtml文件，這個里面好像沒有html，head,title,body等等標簽啊，但是如果我們再瀏覽器中右鍵查看源文件，可以看到如下所示引入了很多的js以及css樣式文件啊，這究竟是怎么做到的呢？別急，我們這個小節就來闡述。

1. Views文件夾下面有一個特殊的文件夾即Shared文件夾以及特殊的文件，以_開頭的文件。如下圖所示紅色圈圈圈起來的，

   

2. Shared文件夾下面就是定義一些公共部分的模板，就以MVC默認模板為例，如定義公共的頭部菜單部分，或者公共的底部部分，我們以Shared\_Layout.cshtml為例進行講解,如下圖所示：

   

   這個文件定義了一個標准的html5的模板，包含頭部，導航部分，正文有差異的不放呢，底部，甚至可以根據環境變量加載不同的內容。這里留個問題，那我們前面看的Home/Index.cshtml用的是哪個樣式呢？

3. 再看看跟Shared文件夾平級的文件_ViewStart.cshtml 可以看到如下內容：

   

   這個文件就是用來定義全局的模板引用規則的，如上圖，這里給所有的視圖默認應用了_Layout的模板，也就是2中流的思考題的答案，即應用了Shared/_Layout.cshtml這個模板的樣式。

應用第三方UI模板

了解了上面的結構后，我們知道，如果想應用第三方的UI，那么我們得把默認生成的wwwroot中的內容替換成我們使用的第三方模板，然后按照第三方UI模板的格式，在Shared\_Layout.cshtml中拷貝公共的模板，然后再把變化的部分放到對應的頁面即可。明白了原理，在開始動手覆蓋是不是感覺得心應手了呢？還不趕緊開始吧！畢竟是實戰，如果不實戰一番感覺對不起這個名字，So,我就以LayuiCms2.0為例來給大伙實戰一番。剛好我們的CMS后台就是用的這個模板。

1. 想引用第三方模板之前是不是得先把模板下下來呢？如果你也想用LayuiCms2.0，可以點這里下載

2. 解壓后把里面的css,images,js等文件拷貝到wwwroot目錄里面，當前拷貝之前還是建議你先把這個目錄下面的所有文件都清理掉。由於這個Layuicms依賴Layui,所以還需要把layui文件夾拷貝過去。這個每個UI模板不一樣需要拷貝的內容不盡相同。

   

   拷貝后的目錄結構如下所示：這里我把json文件也拷貝過去了，后期再把對應的json文件替換掉！先用靜態數據演示。

   

3. 替換Shared對應的模板，把整個文件簡單粗暴的拷貝過去，然后做相應的替換即可，對於變化的部分應用@RenderBody() ,替換后的內容如下所示：

   

4. 把變化的內容放到具體的頁面中吧，這里我只展示一個main里面的內容：

   

5. 到此結束，其他的模板替換方案類似。

效果展示

這里話不多說，給大家展示下效果吧：

主頁

角色管理：

角色編輯：

用戶管理：

用戶管理編輯：

用戶管理列表頁，鎖定用戶：

鎖定界面：

目前只實現了這些功能其他后續再展示。

開源地址

這個系列教程的源碼我會開放在GitHub以及碼雲上，有興趣的朋友可以下載查看！覺得不錯的歡迎Star

GitHub：https://github.com/yilezhu/Czar.Cms

碼雲：https://gitee.com/yilezhu/Czar.Cms

如果你覺得這個系列對您有所幫助的話，歡迎以各種方式進行贊助，當然給個Star支持下也是可以滴！另外一種最簡單粗暴的方式就是下面這種直接關注我們的公眾號了： 

總結

今天我給大家講解了ASP.NET Core MVC項目的結構，並詳細闡述了View層的模板嵌套原理。接着帶着大家一步一步的操作了一遍如何應用第三方UI模板。當然源碼也已經同步更新到GitHub上了，有興趣的小伙伴可以下載參考！下一篇我會帶着大家結合這個模板，來講解如何實現角色的增刪改查！以及項目各個結構之間的協調工作！敬請期待吧！放心，下篇周內就會趕出來！另外如果你有任何問題可以下方留言或者加群637326624跟大伙進行溝通。