解讀ASP.NET 5 & MVC6系列（2）：初識項目

時間 2019-11-20

標籤解讀 asp.net asp mvc6 mvc 系列項目欄目 ASP 简体版

原文原文鏈接

解讀ASP.NET 5 & MVC6系列（2）：初識項目

2015-05-14 09:08 by 湯姆大叔, 16131 閱讀, 26 評論, 收藏, 編輯javascript

初識項目

打開VS2015，建立Web項目，選擇ASP.NET Web Application，在彈出的窗口裏選擇ASP.NET 5 Website模板建立項目，圖示以下：css

咱們能夠看到，此時Web Forms\MVC\Web API複選框都選擇不了，原有是由於在ASP.NET 5中作了大量更改，移除了Web Forms功能，將MVC、Web API、Web Pages這些功能合在了一塊兒，因此天然就不須要這些複選框了。另外因爲是CTP版，因此目前尚未提供單元測試項目的建立。html

新建立的項目在VS的解決方案目錄結構和實際文件夾的目錄結構分別以下：前端

注意：上圖是在VS 預覽版中的截圖，在新版的RC版本中，默認的客戶端構建工具變成了gulp（即配置文件是gulpfile.js），而非原來的grunt了。java

兩個圖的差別很是大，咱們來一一分析一下這些差別。node

項目結構差別

經過圖示，咱們能夠看到，在根目錄中，不只項目文件從從csproj變成了xproj，還少了不少以前的文件（如web.config），但也多了不少不一樣的文件以及文件夾，咱們先列出這些不一樣的文件盒文件夾，再來一一講解這些內容。jquery

文件/文件夾	功能描述
config.json	程序的配置文件，相似於web.config。
project.json	該項目的主要配置，主要是負責程序集、項目部署等方面。部分功能相似於以前的package.config。
package.json	npm的配置文件，npm是基於Nodejs的包管理器。
bower.json	Bower管理器的配置文件，Bower是專門用於管理前端項目的包管理器。
gulpfile.js	是gulp的配置文件，gulp是基於Nodejs的Javascript任務管理器，在ASP.NET5中主要是用於管理NPM和Bower中的內容。
Stratup.cs	程序啓動入口，相似於Global.asax。
Project_Readme.html	項目說明文件，沒啥用。
wwwroot	靜態資源文件（如css、圖片、js）的存放目錄。
Dependencies	Bower和NPM的依賴管理包。
References	程序集引用，和之前的相似，但如今有了版本之分（如ASP.NET 5.0和ASP.NET Core 5.0）。

project.json

project.json是項目的核心配置文件，示例以下：web

{ "webroot": "wwwroot", "version": "1.0.0-*", "dependencies": { "Microsoft.AspNet.Diagnostics": "1.0.0-beta4", "Microsoft.AspNet.Mvc": "6.0.0-beta4", "Microsoft.AspNet.Mvc.TagHelpers": "6.0.0-beta4", "Microsoft.AspNet.Server.IIS": "1.0.0-beta4", "Microsoft.AspNet.Server.WebListener": "1.0.0-beta4", "Microsoft.AspNet.StaticFiles": "1.0.0-beta4", "Microsoft.AspNet.Tooling.Razor": "1.0.0-beta4", "Microsoft.Framework.ConfigurationModel.Json": "1.0.0-beta4", "Microsoft.Framework.CodeGenerators.Mvc": "1.0.0-beta4", "Microsoft.Framework.Logging": "1.0.0-beta4", "Microsoft.Framework.Logging.Console": "1.0.0-beta4", "Microsoft.VisualStudio.Web.BrowserLink.Loader": "14.0.0-beta4", "Microsoft.Framework.ConfigurationModel.UserSecrets": "1.0.0-beta4" }, "commands": { "web": "Microsoft.AspNet.Hosting --server Microsoft.AspNet.Server.WebListener --server.urls http://localhost:5000", "gen": "Microsoft.Framework.CodeGeneration" }, "frameworks": { "dnx451": { }, "dnxcore50": { } }, "exclude": [ "wwwroot", "node_modules", "bower_components" ], "publishExclude": [ "node_modules", "bower_components", "**.xproj", "**.user", "**.vspscc" ], "scripts": { "postrestore": [ "npm install", "bower install" ], "prepare": [ "gulp copy" ] } }

因爲該文件的詳細參數很是多，具體詳細內容請參考http://go.microsoft.com/fwlink/?LinkID=517074 ，在這裏咱們主要講解以下3個類型的內容。express

webroot

webroot是指定該web項目的靜態文件存放地址，目前是用於在發佈的時候講該目錄中的內部發布的正確的位置（詳細內容能夠在部署發佈章節中找到）。注意BookStore解決方案中帶有地球圖標的wwwroot目錄是真實的文件夾路徑，咱們能夠對其進行修改，好比將其修改成wwwroot1，那麼相應的webroot的值也應該修改成wwwroot1，由於gulpfile.js裏代碼要經過project.webroot來使用該目錄，以便可以將bower管理的前端庫都複製到正確的目錄。npm

程序集管理

在解決方案的References節點點，咱們看到有兩個分類，分別是：DNX 4.5.1和DNX Core 5.0，其中DNX Core 5.0就是咱們所說的雲優化版（便可以在其它操做系統下部署的跨平臺版），而DNX 4.5.1則是和以前版本同樣的全功能版，這兩個版本的程序集是經過dependencies節點進行管理的。

在一級dependencies節點，主要是定義該項目的通用程序集引用以及版本，而不一樣的版本的程序集則在framworks下的各版本下的dependencies節點進行維護，好比：

"frameworks": { "dnx451": { "dependencies": {"log4net": "2.0.3"} /* 只在全功能版中引入log4net程序集*/ }, "dnxcore50": { } }

上述兩種類型的程序集在維護的時候，都有智能提示（包括程序集名稱以及版本號），在當定義完本身要用的程序集並保持以後，系統會自動從Nuget上下載所須要的程序集，你也能夠經過右鍵References選擇Restore Packages來更新全部的程序集引用。同時你依然能夠經過右鍵References的形式經過Nuget來管理這些程序集。

腳本事件

新版的VS2015容許咱們在build解決方案以前、以後、過程；下載程序集以前、以後；更新程序集以前、以後自定義一些基於Nodejs的自定義事件來執行。該事件在project.json中的定義節點是scripts，示例以下：

"scripts": { "postrestore": [ "npm install" ], // 在更新全部的程序集以前執行npm install事件 "prepare": [ "gulp copy" ] // 在打開解決方案以前，執行gulp任務，調用bower的install方法。 }

具體的事件名稱以下：

時機	描述
prebuild	構建以前執行
postbuild	構建以後執行
prepack	packing以前執行
postpack	packing以後執行
prerestore	restoring packages以前執行
postrestore	restoring packages以後執行

package.json

package.json是NPM管理器的配置文件，因爲在VS2015默認就深度集成了Nodejs，而NPM又是Nodejs的默認包管理器，因此全部基於Nodejs的包都要在這裏進行配置。該配置文件的默認配置以下：

{ "name": "ASP.NET", "version": "0.0.0", "devDependencies": { "gulp": "3.8.11",//gulp任務管理器 "rimraf": "2.2.8" // 遞歸刪除文件的nodejs包 } }

上述代碼中的rimraf是一個遞歸刪除文件的nodejs包，咱們也能夠引用其餘插件，像project.json文件中管理程序集同樣，在package.json文件中來管理前端程序的各類包，例如jquery，bootstrap等等，好比咱們要安裝一個express包，只須要在json文件中添加一個express字符串鍵，並選擇器版本就能夠了，系統會自動下載該NPM包並顯示在解決方案的Dependencies->NPM節點下。

注意：已經安裝的包不能自動移除（即不能經過在JSON中移除配置），須要右鍵執行該包，並手工卸載。

bower.json

全部的前端包都配置子bower.json文件中，好比你須要的jquery、bootstrap、angular等等，其管理方式與project.json裏的程序集和package.json裏的npm包同樣，都是經過在dependencies節點下聲明包的名稱和版原本實現的。

咱們能夠在此聲明一個angular包，保存之後就能夠看到在解決方案Dependencie->Bower節點下該angular已經自動下載好了，編譯項目，就能夠看到在wwroot/lib也能夠看到angular文件夾以及相應的文件了。

在bower.json還有一個exportsOverride節點很是重要，他擴展了原來bower的前端文件copy機制，默認狀況下bower只會複製main節點定義的文件。但有時候咱們要複製的文件可能不止這些，因此grunt-bower-task插件就擴展了該功能，定義了這個exportsOverride節點，其使用規則以下：

若是Bower包定義了main文件節點，就將其複製到wwwroot/lib下。
若是Bower包定義了的main節點爲空，則將整個包的目錄都複製到wwwroot/lib下。
若是定義了exportsOverride節點，則只會把該節點指定的文件複製到wwwroot/lib下。

注意，exportsOverride節點中定義的key/value，其中key表示要文件複製目標（即wwwroot/lib下）對應包名下的子目錄，value表示源文件目錄或文件。例如:

"bootstrap": { "js": "dist/js/*.*", //將dist/js/下的全部文件，複製到wwwroot/lib/bootstrap/js目錄下 "css": "dist/css/*.*", "fonts": "dist/fonts/*.*" }, "jquery": { "": "jquery.{js,min.js,min.map}" // 將jquery.js，jquery.min.js，jquery.min.map文件複製到wwwroot/lib/jquery目錄下 },

注意：和NPM相似，bower.json裏的配置的包，不能自動移除，須要從Bower裏卸載該包，並將相關的文件從wwwroot/lib中移除。

gulpfile.js

gulpfile.js是gulp任務管理器的配置文件，默認狀況下，該配置文件會把wwwroot/lib目錄下的全部文件清除（clean任務），而後從新從bower_components目錄中複製一份（copy任務）。

該文件配置的修改會影響到VS裏的Task Runner Explorer的顯示，以下圖所示：

以默認配置爲例，該配置文件在Task目錄下注冊了兩個任務，分別是clean和copy，並默認在VS解決方案清除編譯之後從新執行clean任務，但咱們也能夠給該任務綁定任何一個執行時間點，咱們能夠右鍵該任務->綁定->在構建以前，而後在點擊面板左邊的刷新按鈕，這時候該綁定內容就會同步保存在gulpfile.js的第一行，代碼以下：

/// <binding BeforeBuild='copy' Clean='clean' />

此時，刪除wwwroot/lib目錄下全部的文件，而後從新編譯BookStore項目，就會自動在wwwroot/lib目錄下生成全部須要的文件，即將Bower.json裏定義的各類包按照配置需求複製到該目錄下。

clean任務

clean任務的主要做用，是在編譯以前或清理解決方案是，將lib目錄下的前端文件所有刪除，以便從新copy新的文件。具體分析以下：

var gulp = require("gulp"), // 引用gulp rimraf = require("rimraf"),// 引用rimraf fs = require("fs"); //引用文件系統 eval("var project = " + fs.readFileSync("./project.json")); //讀取project.json配置文件 var paths = { bower: "./bower_components/", lib: "./" + project.webroot + "/lib/" }; gulp.task("clean", function (cb) { //註冊clean任務 rimraf(paths.lib, cb); // 遞歸刪除lib目錄下的全部文件 });

copy任務

copy任務則很簡單，將bower_components目錄下符合條件的文件複製lib目錄下，分析以下：

gulp.task("copy", ["clean"], function () { // 註冊copy任務 var bower = { // 目錄對應關係 "bootstrap": "bootstrap/dist/**/*.{js,map,css,ttf,svg,woff,eot}", "bootstrap-touch-carousel": "bootstrap-touch-carousel/dist/**/*.{js,css}", "hammer.js": "hammer.js/hammer*.{js,map}", "jquery": "jquery/jquery*.{js,map}", "jquery-validation": "jquery-validation/jquery.validate.js", "jquery-validation-unobtrusive": "jquery-validation-unobtrusive/jquery.validate.unobtrusive.js" } for (var destinationDir in bower) { gulp.src(paths.bower + bower[destinationDir]) // 讀取源目錄 .pipe(gulp.dest(paths.lib + destinationDir)); //複製到目標文件夾 } });

Grunt任務

VS2015中，雖然默認支持的是Gulp構建工具，但其實還支持Grunt構建工具，使用方式和Gulp相似，要使用Grunt，也須要引用相似的依賴包，示例以下：

{ "version": "0.0.0", "name": "", "devDependencies": { "grunt": "0.4.5", //grunt任務管理器 "grunt-bower-task": "0.4.0" // 基於grunt的bower管理插件 } }

上述代碼中的grunt-bower-task是一個基於grunt的bower管理插件，用於自動執行bower的install命令來安裝Bower包。

注意：已經安裝的包不能自動移除（即不能經過在JSON中移除配置），須要右鍵執行該包，並手工卸載。

gruntfile.js是grunt任務管理器的配置文件，要使用grunt，就須要建立gruntfile.js文件，默認狀況下，該配置文件只配置了grunt-bower-task插件的任務執行，該插件會讀取bower.json配置信息，將相關的包經過bower:install命令都安裝到指定的目錄下（默認是經過targetDir設置的wwwroot/lib目錄。

該文件配置的修改會影響到VS裏的Task Runner Explorer的顯示，以下圖所示：

以默認配置爲例，該配置文件註冊了一個名爲default的任務在該面板裏（Alias Tasks列表中）顯示，該任務也是Grunt的默認任務名稱，但並無定義該任務在何時執行，因此這時候咱們能夠給該任務綁定一個執行時間點，咱們能夠右鍵該任務->綁定->在構建以前，而後在點擊面板左邊的刷新按鈕，這時候該綁定內容就會同步保存在gruntfile.js的第一行，代碼以下：

/// <binding BeforeBuild='default' />

此時，刪除wwwroot/lib目錄下全部的文件，而後從新編譯BookStore項目，就會自動在wwwroot/lib目錄下生成全部須要的文件，即將Bower.json裏定義的各類包按照配置需求複製到該目錄下。而Tasks中的任務，則是從grunt.loadNpmTasks里加載的包裏分析出來的任務，如bower。
咱們再來練習一個例子，假設咱們編譯以前要對wwwroot/css/目錄下的site.css文件進行壓縮（壓縮成site.min.css），咱們則能夠安裝以下方式進行操做：

首先，在package.json裏定義一個能夠壓縮CSS代碼的grunt插件：

{ "version": "0.0.0", "name": "", "devDependencies": { "grunt": "0.4.5", "grunt-bower-task": "0.4.0", "grunt-contrib-cssmin": "0.12.2" /*新的插件*/ } }

而後在grunt.initConfig下的bower同級節點下面，添加以下內容：

/*壓縮css*/ cssmin: { target: { options: { sourceMap: true, }, files: { /*輸出文件路徑：原始文件路徑*/ 'wwwroot/css/site.min.css': 'wwwroot/css/site.css' } } }

最後再註冊此插件，代碼以下：

grunt.loadNpmTasks('grunt-contrib-cssmin'); /*壓縮css*/

這樣，你就能夠在Task Runner Explorer面板中看到cssmin任務，而後運行它了，固然你也能夠將該任務和default任務一塊兒添加到編譯構建以前進行執行。代碼以下：

/// <binding BeforeBuild='default, cssmin' />

另外，在給一些例子，一個是用於js壓縮，一個是用於less編譯，代碼以下：

/*package.json*/ "grunt-contrib-uglify": "0.9.1", "grunt-contrib-less": "1.0.1" /*gruntfile.js*/ /*壓縮js*/ uglify: { target: { options: { sourceMap: true, }, files: { 'wwwroot/Scripts/site.min.js': 'wwwroot/Scripts/site.js' } } }, /*編譯less*/ less: { //開發版（無壓縮） development: { options: { sourceMap: true }, files: { 'wwwroot/Styles/site.css': 'wwwroot/Lesses/site.less' } }, //生產版（壓縮） production: { options: { compress: true }, files: { 'wwwroot/Styles/site.min.css': 'wwwroot/Lesses/site.less' } } } /*...*/ grunt.loadNpmTasks('grunt-contrib-uglify'); /*壓縮js*/ grunt.loadNpmTasks('grunt-contrib-less'); /*編譯less*/

建議：不要在多個時期都綁定同一種任務。
推薦：grunt還有一個插件用於監控文件的修改，好比兼容css文件的修改，一旦修改了就調用css的壓縮命令，詳情請參考grunt-contrib-watch插件。

config.json

config.json就是之前的web.config，可是沒有web.config擁有各類類型的配置那麼強大，其中各類功能的配置都以代碼的形式轉移到Startup.cs文件中了；另一部分信息配置內容，則放在config.json文件中以json的格式進行保存。

注意，該文件的信息默認並無自動加載，而是須要本身手工加載該配置信息，代碼以下：

//Startup.cs類的構造函數中 Configuration = new Configuration() .AddJsonFile("config.json") .AddEnvironmentVariables();

經過Configuration實例加載該配置文件，保存在Configuration屬性中，以即可以在其它地方進行使用，而使用時候的key值，則是按照層級來定義的，以以下默認內容來講：

{
    "AppSettings": { "SiteTitle": "WebDemo01" } }

要獲取連接字符串，則須要使用以下key值：

var connString = Configuration.Get("AppSettings:SiteTitle");

使用起來，沒有web.config方便了，可是爲了兼容其它操做系統，只能這樣了。

注意：在ASP.NET5中，配置信息不只支持json格式，還支持ini、xml等格式，具體詳細請參考後續的配置信息管理章節。

Startup.cs

Startup.cs是整個程序的啓動入口，相似於Global.asax，和Global.asax文件同樣，起到全局配置信息的做用。咱們來分析一下該文件的幾個重要做用。

首先在構造函數中初始化基礎配置信息（關於詳細的配置信息內容請參考配置信息管理章節），注意這裏的初始化後的配置信息綁定到一個Configuration屬性上了，以便另外兩個方法在後期進行使用，若是你要在其它類中進行使用，則須要將該實例保存到其它地方（如靜態變量）。

ConfigureServices方法是依賴注入的核心，在方法的傳入參數services中，首先保存了默認依賴注入裏定義的類型定義，而後咱們在這個方法裏，能夠繼續註冊依賴注入的類型定義，關於依賴注入的詳細內容，能夠閱讀依賴注入章節。

同時一些重要的功能須要開啓的話，也須要在這裏開啓，好比添加Mvc模塊，就須要使用以下調用語句：

services.AddMvc();

緣由是由於，在新版的ASP.NET 5中，除了最基礎的模塊之外，絕大部分模塊都是純組件化的，這裏稱爲Middleware，而組件在使用的時候首先須要先添加該模塊才能使用。再好比，添加EF模塊的話，須要調用

services.AddEntityFramework()方法。

而另一個Configure方法，顧名思義是對各類Middleware組件進行配置的地方，通常來講，配置模塊的方法都是調用相似app.UseXXX()這樣的方法，如使用靜態文件處理流程，則調用以下語句便可：

app.UseStaticFiles();

若是要使用Mvc的功能，則須要使用app.UseMvc方法，在調用這些方法時，能夠配置並傳入響應的參數。

注意，ConfigureServices裏用到的services.AddXXX()類型的方法和Configure方法裏用到的app.UseXXX()類型的方法都是擴展方法，AddXXX()方法是在IServiceCollection接口上進行擴展的，而UseXXX()方法則是在IApplicationBuilder接口上擴展的。