天天看點

ASP.NET Core 一步步搭建個人網站(4)_首頁和登入驗證

上章節我們已經定制好動态配置的菜單,使用者登入網站的第一步就是進入首頁内容,那我們先搭建一下我們的首頁内容。想着自己的網站内容主要是個人部落格類型,是以,首頁就展示部落客本人的一些基本資訊吧,哈哈。當然,做成靜态的界面很簡單,直接将資訊填進html中就行了,基本沒有什麼技術含量,那我們這裡要做成可配置的:将個人資訊配置在json檔案中(也可以存儲在資料庫,考慮資訊内容結構的不可預期性和易變性,這裡不采用資料庫儲存)。這樣,以後我們要更新首頁上的資訊時,就不用編譯釋出網站,隻要修改對應的json配置檔案即可。

提到“配置”二字,我們腦海中會立馬浮現出兩個特殊檔案,那就是我們再熟悉不過的app.config和web.config,一直以來我們已經習慣了将結構化的配置資訊定義在這兩個檔案之中。到了.NET Core的時候,很多我們習以為常的東西都發生了改變,其中也包括定義配置的方式。有興趣的同學可以移步官方文檔介紹:.net core 配置

.NET Core不僅支援以鍵-值對的形式、結構化的形式讀取相關的配置資訊(這裡自己去研究,不在祥述),更重要的是,如今可以将定義的結構化配置綁定為對象。之前我們必須逐條的讀取配置資訊,如果配置項太多的話,讀取配置項其實是一項非常繁瑣的工作。現在隻用再定義對應結構的Option對象,架構自動幫我們綁定配置資訊到這個對象,我們直接通路對象中的屬性即可。除此之外,.NET Core采用依賴注入的方式來使用Option模型,這樣我們就和友善的在需要的地方使用配置資訊了。

接下來看具體怎麼使用,首先,在項目中增加json配置檔案,這裡結構如下:

ASP.NET Core 一步步搭建個人網站(4)_首頁和登入驗證

我們按照Json的格式,定義一個接收配置資訊的類(結構完全等同json中的定義)

那怎麼建立json資料和對象之間的映射呢,見證奇迹的時候到了,在Startup.cs檔案中ConfigureServices方法中,增加以下代碼:

在需要使用配置資訊地方通過構造器注冊,可以看到相關資訊完整的加載到對象中,是不是新的配置系統顯得更加輕量級,具有更好的擴充性,并且支援多樣化的資料源。

ASP.NET Core 一步步搭建個人網站(4)_首頁和登入驗證

有了可配置的個人資訊資料,我們隻需要在首頁上将之展示出來即可,背景管理--菜單管理,添加一個首頁菜單,排序最前,設定通路路徑/Home/Index,圖示樣式,儲存後左側導航便出現新增的首頁菜單項。在HomeController控制器的Index方法中,已經讀取到個人資訊資料,傳回前端渲染,效果如下:

ASP.NET Core 一步步搭建個人網站(4)_首頁和登入驗證

目前圖檔是用壓縮後的縮略圖顯示的(為了網頁快速加載),可能使用者想要展開看原始圖,所有我們這塊可以優化一下,點選縮略圖,彈出模态框,展示原始尺寸圖檔。ok,首頁部分大功告成,背景修改json檔案配置,我們的首頁内容也和友善的更新了。

還記得第2章内容嗎,我們已經實作了使用者的注冊和登入,但是目前沒有做相關的登入驗證和權限管理(權限管理以後等後面完成使用者角色單獨開一章說,本章主要說一下登入驗證)。比如我們登出使用者時,再次通過浏覽器連結,輸入http://localhost:16546/Configuration/Menu/Index,就可以跳過登入,直接通路菜單界面。這塊我們要自己實作的話,不外乎2種方案:

第1種:定義一個公共的控制器,其他所有的控制器繼承它,公共的控制器實作重寫如下方法:

第2種:定義認證特性,繼承ActionFilterAttribute,在需要驗證的地方,增加屬性認證:

那我們采用哪種方法呢?都不用,哈哈,因為Indentity幫我們已經完成了所有的認證工作,直接在需要驗證的控制器或方法上,增加屬性過濾器[Authorize]即可。

ASP.NET Core 一步步搭建個人網站(4)_首頁和登入驗證

我們再試驗下,登出登入後,我們浏覽器中輸入菜單界面位址連結,網站判斷此時尚未登入,就會跳轉到登入界面。使用者輸入登入資訊無誤後,跳轉到需要通路的菜單界面。

ASP.NET Core 一步步搭建個人網站(4)_首頁和登入驗證

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

之前實作的菜單管理,存在一個小問題,比如使用者在儲存的時候,網速慢或伺服器反應延遲的情況,使用者等不急再次點選form表單中的送出按鈕,就會造成重複送出的場景,一般會導緻異常。雖然說在背景增加邏輯判斷也可以解決,但是重複送出造成的異常各種各樣,要就增加各種驗證,得不償失。我的想法是在前端送出後,伺服器未傳回結果之前,将送出按鈕置為不可用狀态,這樣使用者無法再次點選,進而避免伺服器端異常。但是還有個問題,必須在jquery前端驗證之後,才能開始置為不可用,否則前端驗證失效。是以我們修改下jquery前端驗證的預設的submitHandler。每當使用者點選送出按鈕時,會首先觸發前端驗證,驗證不通過,直接顯示錯誤提示;驗證通過後,将按鈕置不可用,直到伺服器傳回結果。

之前我們建了一些菜單項,因為沒有指定通路路徑,點選後會有404錯誤;另外,一些伺服器異常,網頁抛出500錯誤。這些需要捕獲一下,并提供友好的頁面顯示給使用者。在Startup.cs檔案Configure方法中,配置如下:

對應的控制器代碼更新如下:

對應視圖代碼也需要更新一下:

  以上,這期關于網站的調整已介紹完畢,最後,背景管理--菜單管理,添加對應部落格連結的菜單項,為了友善使用者通過連結通路我的部落格,看下示範效果吧:

ASP.NET Core 一步步搭建個人網站(4)_首頁和登入驗證
ASP.NET Core 一步步搭建個人網站(4)_首頁和登入驗證
文章作者:原子蛋 文章出處:https://www.cnblogs.com/lizzie-xhu/ 個人網站:https://www.lancelot.tech/ 微信公衆号:原子蛋Live+ 掃一掃左側的二維碼(或者長按識别二維碼),關注本人微信公共号,擷取更多資源。 本文版權歸作者和部落格園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接配接,否則保留追究法律責任的權利。