MVC + EFCore 項目實戰 - 數倉管理系統3 - 完成總體樣式風格配置

上次課程咱們新建了管理員的模板頁。

本次咱們就完善這個模板頁，順便加入樣式和一些基本的組件，配置好整個項目的UI風格。

 

1、引入 共用的css和js文件

後端庫用nuget, 前端庫用libman.

右鍵wwwroot文件夾，選擇菜單 Add / Client-Side Library

咱們使用admin-lte做爲前端UI。

輸入admin-lte搜索會自動產生推薦的版本號，以下圖，安裝路徑默認在wwwroot/lib/admin-lte文件夾。

 

安裝完後，能夠看到相應位置已經有了admin-lte相關文件。

而且項目根目錄下會產生 libman.json 配置文件，咱們能夠直接修改這份配置文件來方便的管理客戶端庫（如新增、刪除庫，修改庫版本號等， 並且vs編輯器也是有智能感知的）。

 

2、完善 管理員模板頁

打開 Views/Shared/_LayoutAdmin.cshtml

首先引入相應的css和js文件

css放到head裏面

 

js放到body裏面。

* jquery和bootstrap在vs模板中已有，咱們能夠不須要再用libman來管理。

 

修改整個文檔的結構

咱們把文檔分紅三部分：標題欄、側邊欄、內容塊。

最後咱們用個div把這三個部分都包起來，方便代碼的展開收合。

緊跟着Body後面，結構以下：

 

下面咱們來逐步填充這三部分

官方網站 https://adminlte.io/ 給出了示例代碼，咱們直接從示例代碼中粘貼修改便可快速完成前端展現頁面的樣式。

一、標題欄

因爲Admin-LTE標題欄會用到一些第三方圖標，打開地址https://fontawesome.com/ 下載。

（若是網站打不開，也能夠搜索fontawesome-free從其餘網站下載）

咱們在wwwroot/lib/admin-lte下新建個plugins文件夾，專門用來存放這些組件。

 

添加相關引用

 

咱們加兩個連接，導航到新建項目默認生成的兩個視圖上，最終的標題欄代碼：

 

二、側邊欄

分兩部分，LOGO和側邊欄菜單，以下：

 

代碼：

 

三、內容塊

最後是內容塊。

 

 

 

3、使用管理員模板頁

一、新建View使用模板頁

打開 Controllers/HomeController.cs文件，增長一個action及相應的view

增長action

 

右鍵方法名，增長view，

 

二、運行查看並微調

咱們再來調整兩個小問題：

若是將側邊欄摺疊起來，側邊欄會徹底消失，以下圖：

咱們須要給一個寬度，這樣能夠看到菜單的圖標。作法很簡單，直接在body中應用 class="sidebar-mini"，摺疊起來的效果以下。

另外，咱們再增長一個底部欄，放一些版權信息啥的。最終的代碼結構以下：

 

 

最終效果圖

 

總結

本次教程咱們完成了UI模板的修改。 注意兩點：

一、學會使用libman來管理前端庫。

二、熟悉前端UI框架admin-lte的基本結構，並熟練修改。對前端不熟悉的同窗來講，熟練使用一套成熟的UI框架能節約很多時間。

 

祝你們學習進步 ：）