ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安裝前端庫

前端庫使用npm進行安裝,須要先創建webpack.json文件


由於咱們沒有使用npm安裝任何庫,因此npm的文件夾是空的

這裏是用於開發時構建時引用的庫寫在這裏

這裏用到bootStrap 開發時和發佈時都要用的因此要放到這裏

本身寫上,BootStrap的版本號是本身去官網看的

點擊保存後npm 就會自動在左下角進行安裝了

會依賴的庫都安裝好了

存放包的模塊司機是跟目錄的node_modules文件夾下。VS會把這個文件夾排除,由於是不須要加入到源碼庫的

bootStrap安裝到這裏,怎麼引用呢,早asp.core裏面 視圖文件應該是是放在wwwroot裏面的

爲了簡單就把node_modules文件件當作一個相似於wwwroot同樣。當作靜態的視圖文件夾
StartUp裏面設置的app.UseStaticFiles()可讓wwwroot文件夾內的文件對外可見,讓裏面的東西能夠對外視圖

修改,這個中間件只會對路徑包含/node_modules爲路徑進行處理。若是不包含就直接跳到下一個中間件

其實還有一個OverLoad方法能夠直接寫path路徑就能夠。可是這麼寫不知道到哪去找靜態文件

因此仍是用第一種寫法,若是找到物理文件呢?須要用到FileProvier
參數裏面須要傳遞一個物理路徑

這裏面參數要求是一個絕對路徑

這樣就能夠找到node_modules文件夾

找到對應的文件,直接拖過來

這是拖進來以後的效果

使用一些bootstrap的組件,代表bootstrap起做用了,使用一下Navbar直接把代碼copy過去


運行頁面測試,報錯,這裏前面多寫了一個斜線

效果出來了

能夠看到bootstrap已經加載進來了css

前端的驗證

表單提交的時候,如何作前端的驗證,不提交到後端,在前端驗證。
這時候須要用到另外幾個前端的庫

把三個文件拖進來放在最下面,body結束標籤的上面

引入三個組件後,form的前端驗證自動就行了。
沒有任何網絡請求的狀況 驗證出

可使用cdm把經常使用的庫放在裏面進行引用



使用tagHelper
表示開發環境下要把代碼加進去

表示開發的時候本地的這幾個js。

exclude非開發環境

cdn若是掛了。這時候有個回落機制,一旦cdn沒法訪問,就使用本地的這個路徑
經過判斷window.jQuery這個對象存不存在,來表示cdn是否能夠正常訪問

其餘的兩個js須要判斷的狀況

css的判斷


 前端

相關文章
相關標籤/搜索