0 Asp.Net Core 項目實戰之權限管理系統（0） 無中生有
1 Asp.Net Core 項目實戰之權限管理系統（1） 使用AdminLTE搭建前端
2 Asp.Net Core 項目實戰之權限管理系統（2） 功能及實體設計
3 Asp.Net Core 項目實戰之權限管理系統（3） 通過EntityFramework Core使用PostgreSQL
4 Asp.Net Core 項目實戰之權限管理系統（4） 依賴注入、倉儲、服務的多項目分層實現
5 Asp.Net Core 項目實戰之權限管理系統（5） 用戶登錄
6 Asp.Net Core 項目實戰之權限管理系統（6） 功能管理
7 Asp.Net Core 項目實戰之權限管理系統（7） 組織機構、角色、用戶權限
8 Asp.Net Core 項目實戰之權限管理系統（8） 功能菜單的動態加載
0 布局頁、起始頁及錯誤頁
0.0 布局頁
使用布局頁相當於一個母版頁，可以將各個頁面公用部分，如上方標題區、左側導航菜單區、下方版權聲明及狀態顯示區以及通用的js及css引用等，集中放到布局頁管理，具體功能頁面只需關注自己獨有的界面元素系布局即可。
創建布局頁
在Views文件夾下新建一個Shared文件夾，文件夾下新建一個名稱為“_Layout.cshtml”的MVC視圖布局頁。
將_Layout.cshtml布局頁的內容修改如下：
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> </head> <body> <h1>這里是布局頁面的內容，一般是統一的樣式、菜單等各個頁面共性部分</h1> <div> <!--當創建基於_Layout.cshtml布局頁面的視圖時，視圖的內容會和布局頁面合並，視圖的內容會渲染呈現在@RenderBody()處--> @RenderBody() </div> </body> </html>
布局頁的使用
使用布局頁，只需要指定頁面的Layout即可，我們以上節創建的Home下的Index.cshtml為例，只需在頁面上添加如下代碼即可。
@{ //布局頁使用 Layout = "~/Views/Shared/_Layout.cshtml"; } <h1>Hello,Asp.Net Core MVC</h1>
此時，我們運行程序，已經成功使用了布局頁
0.1 起始頁
為了避免每個頁面都要指定Layout這種重復繁瑣的操作，MVC為我們提供了MVC視圖起始頁，我們只需添加一個視圖起始頁，並在視圖起始頁里面添加對布局頁的引用，即可達到所有頁面都使用布局頁的目的。
創建起始頁
右鍵Views文件夾，通過“添加->新建項”菜單添加一個名稱為“_ViewStart.cshtml”的MVC視圖起始頁。
起始頁的使用
在起始頁添加對布局頁的引用，修改_ViewStart.cshtml起始頁的內容如下：
@{ Layout = "_Layout"; }
現在將Home/Index.cshtml頁面頭部中對布局頁的引用部分代碼去掉，運行程序，已經可以成功的使用布局頁。
布局頁的禁用
對於個別不需要使用統一布局頁的界面，如登錄界面、注冊界面，我們可以通過在頁面頭部添加以下代碼，禁止使用布局頁面。
@{ Layout = null; }
0.2 錯誤頁
開發環境錯誤頁
Asp.net Core為我們提供了統一的錯誤處理機制，在Startup.cs中的Configure方法中，已經默認添加了以下開發環境的錯誤處理代碼。
if (env.IsDevelopment()) { //開發環境異常處理 app.UseDeveloperExceptionPage(); }
我們將HomeController中的Index方法修改為直接拋出異常，進行測試。
public IActionResult Index() { throw new Exception("異常"); //return View(); }
直接開發環境調試運行，得到如下結果頁面，錯誤頁面上會提示詳細的錯誤信息，這有助於我們快速定位並解決異常信息。
生產環境錯誤頁
在生產環境我們一般不會將上述頁面直接呈現給我們的客戶，而是選擇制作一個提示友好的錯誤頁。我們首先修改Startup.cs中Configure方法，添加對生產環境的錯誤處理。
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) { loggerFactory.AddConsole(); if (env.IsDevelopment()) { //開發環境異常處理 app.UseDeveloperExceptionPage(); } else { //生產環境異常處理 app.UseExceptionHandler("/Shared/Error"); } //使用靜態文件 app.UseStaticFiles(); //使用Mvc，設置默認路由 app.UseMvc(routes => { routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}"); }); }
在Controllers文件夾下創建一個包含如下內容，名稱為SharedController的控制器。
public class SharedController : Controller { // GET: /<controller>/ public IActionResult Error() { return View(); } }
在Shared文件下創建一個名稱為Error.cshtml的錯誤頁面，將Error.cshtml的內容修改為如下代碼：
<p>我是一個界面灰常友好漂亮的錯誤頁。</p>
模擬生產環境運行程序（具體方法參看上一篇使用Kestrel服務運行程序的第二種方法，或直接發布部署到IIS上），結果如下：
1 使用Bower管理器管理前端包
使用Bower管理器管理前端包，類似於使用NuGet管理我們的各種依賴類庫，他的好處是，我們可以根據需要很方便的對我們引用的各種前端插件進行實時更新，Visual Studio 也會根據Bower的配置文件自動還原相關前端包的依賴。
使用Bower管理器
右鍵我們的項目，添加一個Bower配置文件。
Bower管理器添加項目可以通過直接修改Bower.json文件，或者使用可視化的管理器界面兩種方式。以添加我們后續必不可少的bootstrap、font-awesome、icheck前端程序包引用為例。
1 直接修改Bower.json
右鍵Bower管理器，選擇打開Bower.json，添加相關的依賴項。
{ "name": "asp.net", "private": true, "dependencies": { "bootstrap": "3.3.6", "font-awesome": "4.6.1" } }
2 使用Bower可視化管理器
右鍵Bower管理器，選擇“管理Bower程序包”。搜索我們需要的包，單擊安裝即可。
通過Bower管理器添加的前端程序包，會自動放在wwwroot下的lib文件夾下。
2 靜態文件
前面說過Asp.net Core所有的請求管道配置都是在Startup.cs的Configure中，上面我們已經添加了bootstrap、font-awesome、icheck等前端包的引用，如果我們不對靜態文件配置進行處理，當頁面中引用相關css/js/images時，瀏覽器會告訴你找不到資源，我們需要在http請求管道中開啟靜態文件配置。
在project.json中添加Microsoft.AspNetCore.StaticFiles的依賴，默認已經有了，如果沒有自己添加即可
"dependencies": { "Microsoft.NETCore.App": { "version": "1.0.0", "type": "platform" }, "Microsoft.AspNetCore.Diagnostics": "1.0.0", "Microsoft.AspNetCore.Server.IISIntegration": "1.0.0", "Microsoft.AspNetCore.Server.Kestrel": "1.0.0", "Microsoft.Extensions.Logging.Console": "1.0.0", "Microsoft.AspNetCore.Mvc": "1.0.0", "Microsoft.AspNetCore.StaticFiles": "1.0.0" },
在Startup.cs的Configure方法中增加如下代碼即可。
//使用靜態文件 app.UseStaticFiles();
3 使用AdminLTE
AdminLTE是一個完全響應管理模板。基於Bootstrap3框架，易定制模板。適合多種屏幕分辨率，從小型移動設備到大型台式機。內置了多個頁面，包括儀表盤、郵箱、日歷、鎖屏、登錄及注冊、404錯誤、500錯誤等頁面。最重要的是它是開源免費的，我們可以盡情的使用它。目前的最新版本是2.3.6，可以自行去搜索AdminLTE，官網下載使用。
3.0 將AdminLTE相關核心文件添加至項目
在wwwroot下添加js、css、images三個文件夾。
1 將/AdminLTE-2.3.6/dist/js下的app.js及app.min.js兩個文件拷貝至wwwroot/js文件夾下。
2 將/AdminLTE-2.3.6/dist/css下的所有文件拷貝至wwwroot/css文件夾下。
3 將/AdminLTE-2.3.6/dist/img下的所有文件拷貝至wwwroot/images文件夾下。
3.1 _Layout.cshtml布局頁面修改
添加AdminLTE相關css及js引用
<head> <title>權限管理系統</title> <!-- Tell the browser to be responsive to screen width --> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css"> <link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.css"> <link rel="stylesheet" href="~/css/AdminLTE.css"> <!--皮膚--> <link rel="stylesheet" href="~/css/skins/skin-blue.css"> </head>
<script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script> <script src="~/js/app.js"></script>
修改菜單部門代碼
<ul class="sidebar-menu"> <li class="header">權限管理</li> <!-- Optionally, you can add icons to the links --> <li class="active"><a href="#"><i class="fa fa-link"></i> <span>組織機構</span></a></li> <li><a href="#"><i class="fa fa-link"></i> <span>角色管理</span></a></li> <li><a href="#"><i class="fa fa-link"></i> <span>用戶管理</span></a></li> <li><a href="#"><i class="fa fa-link"></i> <span>功能管理</span></a></li> <li><a href="#"><i class="fa fa-link"></i> <span>權限管理</span></a></li> @*<li class="treeview"> <a href="#"> <i class="fa fa-link"></i> <span>Multilevel</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li><a href="#">Link in level 2</a></li> <li><a href="#">Link in level 2</a></li> </ul> </li>*@ </ul>
完整代碼請從github獲取。
此時運行我們的程序，主頁面已經變得比較漂亮了。
3.2 登錄界面
1 創建控制器
在Contrllers文件夾下添加LoginController控制器
2 創建登錄界面視圖
在Views文件夾下新建Login文件夾，在Login文件夾下新增登錄界面Index.cshtml，修改為不使用布局頁，整體界面代碼如下：
@{ Layout = null; } <!DOCTYPE html> <html> <head> <title>系統登錄</title> <!-- Tell the browser to be responsive to screen width --> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css"> <link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.css"> <link rel="stylesheet" href="~/css/AdminLTE.css"> <link rel="stylesheet" href="~/lib/iCheck/skins/square/blue.css"> </head> <body class="hold-transition login-page"> <div class="login-box"> <div class="login-logo"> <a href="http://fonour.cnblogs.com" target="_blank"><b>Fonour</b></a> </div> <!-- /.login-logo --> <div class="login-box-body"> <p class="login-box-msg">權限管理系統</p> <form action="/Home/Index" method="post"> <div class="form-group has-feedback"> <input type="text" class="form-control" placeholder="用戶名"> <span class="glyphicon glyphicon-user form-control-feedback"></span> </div> <div class="form-group has-feedback"> <input type="password" class="form-control" placeholder="密碼"> <span class="glyphicon glyphicon-lock form-control-feedback"></span> </div> <div class="row"> <div class="col-xs-8"> <div class="checkbox icheck"> <label> <input type="checkbox"> 記住我 </label> </div> </div> <!-- /.col --> <div class="col-xs-4"> <button type="submit" class="btn btn-primary btn-block btn-flat">登錄</button> </div> <!-- /.col --> </div> </form> </div> <!-- /.login-box-body --> </div> <!-- /.login-box --> <script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script> <script src="~/lib/iCheck/icheck.js"></script> <script> $(function () { $('input').iCheck({ checkboxClass: 'icheckbox_square-blue', radioClass: 'iradio_square-blue', increaseArea: '20%' // optional }); }); </script> </body> </html>
3 將登陸頁面修改為默認頁面
修改Startup.cs的Configure方法，設置默認路由為系統登錄。
//使用Mvc，設置默認路由為系統登錄 app.UseMvc(routes => { routes.MapRoute( name: "default", template: "{controller=Login}/{action=Index}/{id?}"); });
運行系統，默認進入登錄界面。
單擊登錄按鈕，已經可以跳轉進入系統首頁。
4 總結
本次我們主要創建了系統通用的布局頁、起始頁及錯誤頁，然后使用Bower管理器對系統前端依賴程序包進行了添加，配置啟用靜態文件，最后使用AdminLTE實現了系統登錄頁及主界面的布局。
