ASP.NET Core 一步步搭建我的網站（4）_主頁和登陸驗證

時間 2019-11-08

標籤 asp.net asp core 步步搭建我的網站主頁登陸驗證欄目 ASP 简体版

原文原文鏈接

上章節咱們已經定製好動態配置的菜單，用戶登陸網站的第一步就是進入首頁內容，那咱們先搭建一下咱們的首頁內容。想着本身的網站內容主要是我的博客類型，因此，首頁就展現博主本人的一些基本信息吧，哈哈。固然，作成靜態的界面很簡單，直接將信息填進html中就好了，基本沒有什麼技術含量，那咱們這裏要作成可配置的：將我的信息配置在json文件中（也能夠存儲在數據庫，考慮信息內容結構的不可預期性和易變性，這裏不採用數據庫保存）。這樣，之後咱們要更新主頁上的信息時，就不用編譯發佈網站，只要修改對應的json配置文件便可。html

.NET Core 配置機制介紹

提到「配置」二字，咱們腦海中會立馬浮現出兩個特殊文件，那就是咱們再熟悉不過的app.config和web.config，一直以來咱們已經習慣了將結構化的配置信息定義在這兩個文件之中。到了.NET Core的時候，不少咱們習覺得常的東西都發生了改變，其中也包括定義配置的方式。有興趣的同窗能夠移步官方文檔介紹：.net core 配置前端

.NET Core不只支持以鍵-值對的形式、結構化的形式讀取相關的配置信息（這裏本身去研究，不在祥述），更重要的是，現在能夠將定義的結構化配置綁定爲對象。以前咱們必須逐條的讀取配置信息，若是配置項太多的話，讀取配置項實際上是一項很是繁瑣的工做。如今只用再定義對應結構的Option對象，框架自動幫咱們綁定配置信息到這個對象，咱們直接訪問對象中的屬性便可。除此以外，.NET Core採用依賴注入的方式來使用Option模型，這樣咱們就和方便的在須要的地方使用配置信息了。jquery

接下來看具體怎麼使用，首先，在項目中增長json配置文件，這裏結構以下：web

咱們按照Json的格式，定義一個接收配置信息的類（結構徹底等同json中的定義）ajax

 1 /// <summary>
 2 /// 我的資料
 3 /// </summary>
 4 public class MyProfile
 5 {
 6     public IEnumerable<Project> Projects { set; get; }
 7 }
 8 
 9 /// <summary>
10 /// 項目經歷
11 /// </summary>
12 public class Project
13 {
14     /// <summary>
15     /// 持續至日期
16     /// </summary>
17     public string LastToDate { set; get; }
18     /// <summary>
19     /// 項目名稱
20     /// </summary>
21     public string Name { set; get; }
22     /// <summary>
23     /// 持續時間
24     /// </summary>
25     public int Lasting { set; get; }
26     /// <summary>
27     /// 所在公司
28     /// </summary>
29     public string Company { set; get; }
30     /// <summary>
31     /// 項目職務
32     /// </summary>
33     public string MyTitle { set; get; }
34     /// <summary>
35     /// 項目職責
36     /// </summary>
37     public string MyDuty { set; get; }
38     /// <summary>
39     /// 項目技術
40     /// </summary>
41     public string Technology { set; get; }
42     /// <summary>
43     /// 項目規格
44     /// </summary>
45     public int NumOfPeople { set; get; }
46     /// <summary>
47     /// 項目描述
48     /// </summary>
49     public IEnumerable<string> ProjectDescs { set; get; }
50     /// <summary>
51     /// 項目圖片
52     /// </summary>
53     public IEnumerable<string> ProjectImgs { set; get; }
54 }

那怎麼創建json數據和對象之間的映射呢，見證奇蹟的時候到了，在Startup.cs文件中ConfigureServices方法中，增長如下代碼：數據庫

1 var builder = new ConfigurationBuilder()
2                 .SetBasePath(Directory.GetCurrentDirectory())
3                 .AddJsonFile("Datas/Config/MyProfile.json");
4 
5 var config = builder.Build();
6 
7 services.Configure<MyProfile>(config.GetSection("MyProfile"));

在須要使用配置信息地方經過構造器註冊，能夠看到相關信息完整的加載到對象中，是否是新的配置系統顯得更加輕量級，具備更好的擴展性，而且支持多樣化的數據源。json

我的信息展現

有了可配置的我的信息數據，咱們只須要在主頁上將之展現出來便可，後臺管理--菜單管理，添加一個主頁菜單，排序最前，設置訪問路徑/Home/Index，圖標樣式，保存後左側導航便出現新增的主頁菜單項。在HomeController控制器的Index方法中，已經讀取到我的信息數據，返回前端渲染，效果以下：瀏覽器

 1 <div class="tab-pane active" id="timeline">
 2     <ul class="timeline timeline-inverse">
 3 
 4         @foreach (var project in Model.Projects.Reverse())
 5         {
 6             <li class="time-label">
 7                 <span class="bg-light-blue">@project.LastToDate</span>
 8             </li>
 9             <li>
10                 <i class="fa fa-tags bg-blue"></i>
11                 <div class="timeline-item">
12                     <span class="time">持續時間:@(project.Lasting)個月 <i class="fa fa-clock-o"></i></span>
13                     <h3 class="timeline-header">
14                         <a>項目名稱</a> @project.Name
15                     </h3>
16                     <div class="timeline-body">
17                         <p class="text-muted">所在公司: @project.Company</p>
18                         <p class="text-muted">項目職務: @project.MyTitle</p>
19                         <p class="text-muted">項目職責: @project.MyDuty</p>
20                         <p class="text-muted">項目技術: @project.Technology</p>
21                     </div>
22                     <div class="timeline-footer">
23                         <a class="btn btn-primary btn-xs">更多 >></a>
24                     </div>
25                 </div>
26             </li>
27             <li>
28                 <i class="fa fa-thumb-tack bg-aqua"></i>
29                 <div class="timeline-item">
30                     <span class="time">規模:@(project.NumOfPeople)我的 <i class="fa fa-cube"></i></span>
31                     <h3 class="timeline-header no-border">
32                         <a>項目描述</a>
33                     </h3>
34                     <div class="timeline-body">
35                         @if (project.ProjectDescs != null)
36                         {
37 
38                             var descIndex = 0;
39 
40                             foreach (var projectDesc in project.ProjectDescs)
41                             {
42                                 <p class="text-muted">@(++descIndex). @projectDesc.</p>
43                             }
44                         }
45                     </div>
46                 </div>
47             </li>
48             if (project.ProjectImgs != null)
49             {
50                 <li>
51                     <i class="fa fa-camera bg-purple"></i>
52                     <div class="timeline-item">
53                         <span class="time"><i class="fa fa-photo"></i></span>
54                         <h3 class="timeline-header">
55                             <a>效果預覽</a>
56                         </h3>
57                         <div class="timeline-body">
58                             <div class="row">
59                                 @foreach (var projectImg in project.ProjectImgs)
60                                 {
61                                     <div class="col-sm-6 col-md-4">
62                                         <img style="cursor: pointer; height: 150px;" src="@projectImg"
63                                              alt="..." class="img-responsive thumbnail center-block img-more">
64                                     </div>
65                                 }
66                             </div>
67                         </div>
68                     </div>
69                 </li>
70             }
71 
72         }
73 
74         <!-- start -->
75         <li class="time-label">
76             <span class="bg-green">2009.02</span>
77         </li>
78         <li>
79             <i class="fa fa-clock-o bg-gray"></i>
80         </li>
81     </ul>
82 </div>

目前圖片是用壓縮後的縮略圖顯示的（爲了網頁快速加載），可能用戶想要展開看原始圖，全部咱們這塊能夠優化一下，點擊縮略圖，彈出模態框，展現原始尺寸圖片。ok，主頁部分大功告成，後臺修改json文件配置，咱們的主頁內容也和方便的更新了。服務器

 1 <script>
 2     $('.img-more').click(function () {
 3         var file = $(this).attr('src')
 4         var fileNames = file.split('.')
 5         $("#myModal").find("#img_show").html("<image src='" +
 6             fileNames[0] + '-lg.' + fileNames[1] +
 7             "' class='carousel-inner img-responsive img-rounded' />")
 8         $("#myModal").modal();
 9     })
10 </script>

登陸驗證功能

還記得第2章內容嗎，咱們已經實現了用戶的註冊和登陸，可是目前沒有作相關的登陸驗證和權限管理（權限管理之後等後面完成用戶角色單獨開一章說，本章主要說一下登陸驗證）。好比咱們註銷用戶時，再次經過瀏覽器連接，輸入http://localhost:16546/Configuration/Menu/Index，就能夠跳過登陸，直接訪問菜單界面。這塊咱們要本身實現的話，不外乎2種方案：app

第1種：定義一個公共的控制器，其餘全部的控制器繼承它，公共的控制器實現重寫以下方法：

 1 public class AuthenticationControllor : Controller
 2 {
 3     protected override void OnActionExecuting(ActionExecutingContext filterContext)
 4     {
 5         if (filterContext.HttpContext.Session["username"] == null)
 6             filterContext.Result = new RedirectToRouteResult("Login", new RouteValueDictionary { { "from", Request.Url.ToString() } });
 7             
 8         base.OnActionExecuting(filterContext);
 9     }
10 }

第2種：定義認證特性，繼承ActionFilterAttribute，在須要驗證的地方，增長屬性認證：

 1 // 登陸認證特性
 2 public class AuthenticationAttribute : ActionFilterAttribute
 3 {
 4     public override void OnActionExecuting(ActionExecutingContext filterContext)
 5     {
 6         if (filterContext.HttpContext.Session["username"] == null)
 7             filterContext.Result = new RedirectToRouteResult("Login", new RouteValueDictionary { { "from", Request.Url.ToString() } });
 8             
 9         base.OnActionExecuting(filterContext);
10     }
11 }

那咱們採用哪一種方法呢？都不用，哈哈，由於Indentity幫咱們已經完成了全部的認證工做，直接在須要驗證的控制器或方法上，增長屬性過濾器[Authorize]便可。

咱們再試驗下，註銷登陸後，咱們瀏覽器中輸入菜單界面地址連接，網站判斷此時還沒有登陸，就會跳轉到登陸界面。用戶輸入登陸信息無誤後，跳轉到須要訪問的菜單界面。

加載Loading效果和form表單重複提交防禦

上圖咱們能夠看到，每次頁面加載的時候頁面頭部會出現一條進度條和一個轉動的loading，這樣給用戶的體驗會很好，這是怎麼實現的呢。其實AdminLTE已經提供了很方便的使用：首先咱們在母版頁Layout.cshtml引入<script src="~/lib/AdminLTE/plugins/pace/pace.js"></script>，而後加入如下腳本，就實現上述的效果，很簡單吧：

1 //ajax請求Pace效果
2 $(document).ajaxStart(function () {
3     Pace.restart()
4 })

以前實現的菜單管理，存在一個小問題，好比用戶在保存的時候，網速慢或服務器反應延遲的狀況，用戶等不急再次點擊form表單中的提交按鈕，就會形成重複提交的場景，通常會致使異常。雖說在後臺增長邏輯判斷也能夠解決，可是重複提交形成的異常各類各樣，要就增長各類驗證，得不償失。個人想法是在前端提交後，服務器未返回結果以前，將提交按鈕置爲不可用狀態，這樣用戶沒法再次點擊，從而避免服務器端異常。可是還有個問題，必須在jquery前端驗證以後，才能開始置爲不可用，不然前端驗證失效。因此咱們修改下jquery前端驗證的默認的submitHandler。每當用戶點擊提交按鈕時，會首先觸發前端驗證，驗證不經過，直接顯示錯誤提示；驗證經過後，將按鈕置不可用，直到服務器返回結果。

1 //防止重複提交
2 $.validator.setDefaults({
3     submitHandler: function (form) {
4         $(form).find('[type="submit"]').attr('disabled', true);
5         form.submit();
6     }
7 });

404,500等錯誤頁面提示

以前咱們建了一些菜單項，由於沒有指定訪問路徑，點擊後會有404錯誤；另外，一些服務器異常，網頁拋出500錯誤。這些須要捕獲一下，並提供友好的頁面顯示給用戶。在Startup.cs文件Configure方法中，配置以下：

 1 if (env.IsDevelopment())
 2 {
 3     app.UseExceptionHandler("/Home/Error/500");
 4     app.UseStatusCodePagesWithReExecute("/Home/Error/{0}");
 5 
 6     app.UseDeveloperExceptionPage();
 7     app.UseBrowserLink();
 8     app.UseDatabaseErrorPage();
 9 }
10 else
11 {
12     app.UseExceptionHandler("/Home/Error/500");
13     app.UseStatusCodePagesWithReExecute("/Home/Error/{0}");
14 }

對應的控制器代碼更新以下：

1 [Route("Home/Error/{statusCode}")]
2 public IActionResult Error(int statusCode)
3 {
4     return View(new ErrorViewModel
5     {
6         StatusCode = statusCode,
7         RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier
8     });
9 }

對應視圖代碼也須要更新一下：

 1 @model MyWebSite.ViewModels.ErrorViewModel
 2 @{
 3     ViewData["Title"] = "錯誤";
 4 }
 5 <div class="error-page" style="margin-top: 100px;">
 6     @if (Model.StatusCode == 500)
 7     {
 8         <!-- 500類型錯誤 -->
 9         <h2 class="headline text-red"> @Model.StatusCode</h2>
10 
11         <div class="error-content">
12             <h3>
13                 <i class="fa fa-warning text-red"></i> Oops! Something went wrong.
14             </h3>
15             <div>
16                 StatusCode:<code>@Model.StatusCode</code>
17             </div>
18             <div>
19                 Request ID: <code>@Model.RequestId</code>
20             </div>
21             <p>
22                 We will work on fixing that right away.
23                 Meanwhile, you may <a asp-area="" asp-controller="Home" asp-action="Index">return to index</a> or try using the search form.
24             </p>
25             <form class="search-form">
26                 <div class="input-group">
27                     <input type="text" name="search" class="form-control" placeholder="Search">
28                     <div class="input-group-btn">
29                         <button type="submit" name="submit" class="btn btn-danger btn-flat">
30                             <i class="fa fa-search"></i>
31                         </button>
32                     </div>
33                 </div>
34             </form>
35         </div>
36     }
37     else
38     {
39         <!-- 其餘類型錯誤 -->
40         <h2 class="headline text-yellow"> @Model.StatusCode</h2>
41 
42         <div class="error-content">
43             <h3>
44                 <i class="fa fa-warning text-yellow"></i> Oops! Page not found.
45             </h3>
46             <div>
47                 StatusCode:<code>@Model.StatusCode</code>
48             </div>
49             <div>
50                 Request ID: <code>@Model.RequestId</code>
51             </div>
52             <p>
53                 We could not find the page you were looking for.
54                 Meanwhile, you may <a asp-area="" asp-controller="Home" asp-action="Index">return to index</a> or try using the search form.
55             </p>
56             <form class="search-form">
57                 <div class="input-group">
58                     <input type="text" name="search" class="form-control" placeholder="Search">
59                     <div class="input-group-btn">
60                         <button type="submit" name="submit" class="btn btn-warning btn-flat">
61                             <i class="fa fa-search"></i>
62                         </button>
63                     </div>
64                 </div>
65             </form>
66         </div>
67     }
68 </div>