Asp.Net Core 項目實戰之權限管理系統（1）使用AdminLTE搭建前端

<!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?}");
 });

運行系統，默認進入登陸界面。

單擊登陸按鈕，已經能夠跳轉進入系統首頁。