【移動(dòng)應(yīng)用開發(fā)技術(shù)】ASP.NET5 MVC6項(xiàng)目怎么創(chuàng)建

【移動(dòng)應(yīng)用開發(fā)技術(shù)】ASP.NET5MVC6項(xiàng)目怎么創(chuàng)建

這篇文章主要講解了“ASP.NET5MVC6項(xiàng)目怎么創(chuàng)建”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著在下的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“ASP.NET5MVC6項(xiàng)目怎么創(chuàng)建”吧！初識(shí)項(xiàng)目打開VS2015，創(chuàng)建Web項(xiàng)目，選擇ASP.NETWebApplication，在彈出的窗口里選擇ASP.NET5Website模板創(chuàng)建項(xiàng)目，圖示如下：我們可以看到，此時(shí)WebForms\MVC\WebAPI復(fù)選框都選擇不了，原有是因?yàn)樵贏SP.NET5中做了大量更改，移除了WebForms功能，將MVC、WebAPI、WebPages這些功能合在了一起，所以自然就不需要這些復(fù)選框了。另外由于是CTP版，所以目前還沒有提供單元測(cè)試項(xiàng)目的創(chuàng)建。新創(chuàng)建的項(xiàng)目在VS的解決方案目錄結(jié)構(gòu)和實(shí)際文件夾的目錄結(jié)構(gòu)分別如下：注意：上圖是在VS預(yù)覽版中的截圖，在新版的RC版本中，默認(rèn)的客戶端構(gòu)建工具變成了gulp（即配置文件是gulpfile.js），而非原來(lái)的grunt了。兩個(gè)圖的差異非常大，我們來(lái)一一分析一下這些差異。項(xiàng)目結(jié)構(gòu)差異通過圖示，我們可以看到，在根目錄中，不僅項(xiàng)目文件從從csproj變成了xproj，還少了很多之前的文件（如web.config），但也多了很多不同的文件以及文件夾，我們先列出這些不同的文件盒文件夾，再來(lái)一一講解這些內(nèi)容。project.jsonproject.json是項(xiàng)目的核心配置文件，示例如下：{

"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"

]

}

}由于該文件的詳細(xì)參數(shù)非常多，具體詳細(xì)內(nèi)容請(qǐng)參考/fwlink/?LinkID=517074，在這里我們主要講解如下3個(gè)類型的內(nèi)容。webrootwebroot是指定該web項(xiàng)目的靜態(tài)文件存放地址，目前是用于在發(fā)布的時(shí)候講該目錄中的內(nèi)部發(fā)布的正確的位置（詳細(xì)內(nèi)容可以在部署發(fā)布章節(jié)中找到）。注意BookStore解決方案中帶有地球圖標(biāo)的wwwroot目錄是真實(shí)的文件夾路徑，我們可以對(duì)其進(jìn)行修改，比如將其修改為wwwroot1，那么相應(yīng)的webroot的值也應(yīng)該修改為wwwroot1，因?yàn)間ulpfile.js里代碼要通過project.webroot來(lái)使用該目錄，以便能夠?qū)ower管理的前端庫(kù)都復(fù)制到正確的目錄。程序集管理在解決方案的References節(jié)點(diǎn)點(diǎn)，我們看到有兩個(gè)分類，分別是：DNX4.5.1和DNXCore5.0，其中DNXCore5.0就是我們所說的云優(yōu)化版（即可以在其它操作系統(tǒng)下部署的跨平臺(tái)版），而DNX4.5.1則是和之前版本一樣的全功能版，這兩個(gè)版本的程序集是通過dependencies節(jié)點(diǎn)進(jìn)行管理的。在一級(jí)dependencies節(jié)點(diǎn)，主要是定義該項(xiàng)目的通用程序集引用以及版本，而不同的版本的程序集則在framworks下的各版本下的dependencies節(jié)點(diǎn)進(jìn)行維護(hù)，比如："frameworks":{"dnx451":{"dependencies":{"log4net":"2.0.3"}/*只在全功能版中引入log4net程序集*/},"dnxcore50":{}}上述兩種類型的程序集在維護(hù)的時(shí)候，都有智能提示（包括程序集名稱以及版本號(hào)），在當(dāng)定義完自己要用的程序集并保持之后，系統(tǒng)會(huì)自動(dòng)從Nuget上下載所需要的程序集，你也可以通過右鍵References選擇RestorePackages來(lái)更新所有的程序集引用。同時(shí)你依然可以通過右鍵References的形式通過Nuget來(lái)管理這些程序集。腳本事件新版的VS2015允許我們?cè)赽uild解決方案之前、之后、過程；下載程序集之前、之后；更新程序集之前、之后自定義一些基于Nodejs的自定義事件來(lái)執(zhí)行。該事件在project.json中的定義節(jié)點(diǎn)是scripts，示例如下："scripts":{"postrestore":["npminstall"],

//在更新所有的程序集之前執(zhí)行npminstall事件"prepare":["gulpcopy"]//在打開解決方案之前，執(zhí)行g(shù)ulp任務(wù)，調(diào)用bower的install方法。}具體的事件名稱如下：package.jsonpackage.json是NPM管理器的配置文件，由于在VS2015默認(rèn)就深度集成了Nodejs，而NPM又是Nodejs的默認(rèn)包管理器，所以所有基于Nodejs的包都要在這里進(jìn)行配置。該配置文件的默認(rèn)配置如下：{

"name":

"ASP.NET",

"version":

"0.0.0",

"devDependencies":

{

"gulp":

"3.8.11",//gulp任務(wù)管理器

"rimraf":

"2.2.8"

//

遞歸刪除文件的nodejs包

}

}

上述代碼中的rimraf是一個(gè)遞歸刪除文件的nodejs包，我們也可以引用其他插件，像project.json文件中管理程序集一樣，在package.json文件中來(lái)管理前端程序的各種包，例如jquery，bootstrap等等，比如我們要安裝一個(gè)express包，只需要在json文件中添加一個(gè)express字符串鍵，并選擇器版本就可以了，系統(tǒng)會(huì)自動(dòng)下載該NPM包并顯示在解決方案的Dependencies->NPM節(jié)點(diǎn)下。注意：已經(jīng)安裝的包不能自動(dòng)移除（即不能通過在JSON中移除配置），需要右鍵執(zhí)行該包，并手工卸載。bower.json所有的前端包都配置子bower.json文件中，比如你需要的jquery、bootstrap、angular等等，其管理方式與project.json里的程序集和package.json里的npm包一樣，都是通過在dependencies節(jié)點(diǎn)下聲明包的名稱和版本來(lái)實(shí)現(xiàn)的。我們可以在此聲明一個(gè)angular包，保存以后就可以看到在解決方案Dependencie->Bower節(jié)點(diǎn)下該angular已經(jīng)自動(dòng)下載好了，編譯項(xiàng)目，就可以看到在wwroot/lib也可以看到angular文件夾以及相應(yīng)的文件了。在bower.json還有一個(gè)exportsOverride節(jié)點(diǎn)非常重要，他擴(kuò)展了原來(lái)bower的前端文件copy機(jī)制，默認(rèn)情況下bower只會(huì)復(fù)制main節(jié)點(diǎn)定義的文件。但有時(shí)候我們要復(fù)制的文件可能不止這些，所以grunt-bower-task插件就擴(kuò)展了該功能，定義了這個(gè)exportsOverride節(jié)點(diǎn)，其使用規(guī)則如下：如果Bower包定義了main文件節(jié)點(diǎn)，就將其復(fù)制到wwwroot/lib下。如果Bower包定義了的main節(jié)點(diǎn)為空，則將整個(gè)包的目錄都復(fù)制到wwwroot/lib下。如果定義了exportsOverride節(jié)點(diǎn)，則只會(huì)把該節(jié)點(diǎn)指定的文件復(fù)制到wwwroot/lib下。注意，exportsOverride節(jié)點(diǎn)中定義的key/value，其中key表示要文件復(fù)制目標(biāo)（即wwwroot/lib下）對(duì)應(yīng)包名下的子目錄，value表示源文件目錄或文件。例如:"bootstrap":

{

"js":

"dist/js/*.*",

//將dist/js/下的所有文件，復(fù)制到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文件復(fù)制到wwwroot/lib/jquery目錄下

},注意：和NPM類似，bower.json里的配置的包，不能自動(dòng)移除，需要從Bower里卸載該包，并將相關(guān)的文件從wwwroot/lib中移除。gulpfile.jsgulpfile.js是gulp任務(wù)管理器的配置文件，默認(rèn)情況下，該配置文件會(huì)把wwwroot/lib目錄下的所有文件清除（clean任務(wù)），然后重新從bower_components目錄中復(fù)制一份（copy任務(wù)）。該文件配置的修改會(huì)影響到VS里的TaskRunnerExplorer的顯示，如下圖所示：以默認(rèn)配置為例，該配置文件在Task目錄下注冊(cè)了兩個(gè)任務(wù)，分別是clean和copy，并默認(rèn)在VS解決方案清除編譯以后重新執(zhí)行clean任務(wù)，但我們也可以給該任務(wù)綁定任何一個(gè)執(zhí)行時(shí)間點(diǎn)，我們可以右鍵該任務(wù)->綁定->在構(gòu)建之前，然后在點(diǎn)擊面板左邊的刷新按鈕，這時(shí)候該綁定內(nèi)容就會(huì)同步保存在gulpfile.js的***行，代碼如下：///<bindingBeforeBuild='copy'Clean='clean'/>此時(shí)，刪除wwwroot/lib目錄下所有的文件，然后重新編譯BookStore項(xiàng)目，就會(huì)自動(dòng)在wwwroot/lib目錄下生成所有需要的文件，即將Bower.json里定義的各種包按照配置需求復(fù)制到該目錄下。clean任務(wù)clean任務(wù)的主要作用，是在編譯之前或清理解決方案是，將lib目錄下的前端文件全部刪除，以便重新copy新的文件。具體分析如下：var

gulp

=

require("gulp"),

//

引用gulp

rimraf

=

require("rimraf"),//

引用rimraf

fs

=

require("fs");

//引用文件系統(tǒng)

eval("var

project

=

"

+

fs.readFileSync("./project.json"));

//讀取project.json配置文件

var

paths

=

{

bower:

"./bower_components/",

lib:

"./"

+

project.webroot

+

"/lib/"

};

gulp.task("clean",

function

(cb)

{

//注冊(cè)clean任務(wù)

rimraf(paths.lib,

cb);

//

遞歸刪除lib目錄下的所有文件

});copy任務(wù)copy任務(wù)則很簡(jiǎn)單，將bower_components目錄下符合條件的文件復(fù)制lib目錄下，分析如下：gulp.task("copy",

["clean"],

function

()

{

//

注冊(cè)copy任務(wù)

var

bower

=

{

//

目錄對(duì)應(yīng)關(guān)系

"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));

//復(fù)制到目標(biāo)文件夾

}

});Grunt任務(wù)VS2015中，雖然默認(rèn)支持的是Gulp構(gòu)建工具，但其實(shí)還支持Grunt構(gòu)建工具，使用方式和Gulp類似，要使用Grunt，也需要引用類似的依賴包，示例如下：{

"version":

"0.0.0",

"name":

"",

"devDependencies":

{

"grunt":

"0.4.5",

//grunt任務(wù)管理器

"grunt-bower-task":

"0.4.0"

//

基于grunt的bower管理插件

}

}上述代碼中的grunt-bower-task是一個(gè)基于grunt的bower管理插件，用于自動(dòng)執(zhí)行bower的install命令來(lái)安裝Bower包。注意：已經(jīng)安裝的包不能自動(dòng)移除（即不能通過在JSON中移除配置），需要右鍵執(zhí)行該包，并手工卸載。gruntfile.js是grunt任務(wù)管理器的配置文件，要使用grunt，就需要?jiǎng)?chuàng)建gruntfile.js文件，默認(rèn)情況下，該配置文件只配置了grunt-bower-task插件的任務(wù)執(zhí)行，該插件會(huì)讀取bower.json配置信息，將相關(guān)的包通過bower:install命令都安裝到指定的目錄下（默認(rèn)是通過targetDir設(shè)置的wwwroot/lib目錄。該文件配置的修改會(huì)影響到VS里的TaskRunnerExplorer的顯示，如下圖所示：以默認(rèn)配置為例，該配置文件注冊(cè)了一個(gè)名為default的任務(wù)在該面板里（AliasTasks列表中）顯示，該任務(wù)也是Grunt的默認(rèn)任務(wù)名稱，但并沒有定義該任務(wù)在什么時(shí)候執(zhí)行，所以這時(shí)候我們可以給該任務(wù)綁定一個(gè)執(zhí)行時(shí)間點(diǎn)，我們可以右鍵該任務(wù)->綁定->在構(gòu)建之前，然后在點(diǎn)擊面板左邊的刷新按鈕，這時(shí)候該綁定內(nèi)容就會(huì)同步保存在gruntfile.js的***行，代碼如下：///

<binding

BeforeBuild='default'

/>此時(shí)，刪除wwwroot/lib目錄下所有的文件，然后重新編譯BookStore項(xiàng)目，就會(huì)自動(dòng)在wwwroot/lib目錄下生成所有需要的文件，即將Bower.json里定義的各種包按照配置需求復(fù)制到該目錄下。而Tasks中的任務(wù)，則是從grunt.loadNpmTasks里加載的包里分析出來(lái)的任務(wù)，如bower。我們?cè)賮?lái)練習(xí)一個(gè)例子，假設(shè)我們編譯之前要對(duì)wwwroot/css/目錄下的site.css文件進(jìn)行壓縮（壓縮成site.min.css），我們則可以安裝如下方式進(jìn)行操作：首先，在package.json里定義一個(gè)可以壓縮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同級(jí)節(jié)點(diǎn)下面，添加如下內(nèi)容：/*壓縮css*/

cssmin:

{

target:

{

options:

{

sourceMap:

true,

},

files:

{

/*輸出文件路徑：原始文件路徑*/

'wwwroot/css/site.min.css':

'wwwroot/css/site.css'

}

}

}***再注冊(cè)此插件，代碼如下：grunt.loadNpmTasks('grunt-contrib-cssmin');

/*壓縮css*/

這樣，你就可以在Task

Runner

Explorer面板中看到cssmin任務(wù)，然后運(yùn)行它了，當(dāng)然你也可以將該任務(wù)和default任務(wù)一起添加到編譯構(gòu)建之前進(jìn)行執(zhí)行。代碼如下：

///

<binding

BeforeBuild='default,

cssmin'

/>另外，在給一些例子，一個(gè)是用于js壓縮，一個(gè)是用于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:

{

//開發(fā)版（無(wú)壓縮）

development:

{

options:

{

sourceMap:

true

},

files:

{

'wwwroot/Styles/site.css':

'wwwroot/Lesses/site.less'

}

},

//生產(chǎn)版（壓縮）

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*/建議：不要在多個(gè)時(shí)期都綁定同一種任務(wù)。推薦：grunt還有一個(gè)插件用于監(jiān)控文件的修改，比如兼容css文件的修改，一旦修改了就調(diào)用css的壓縮命令，詳情請(qǐng)參考grunt-contrib-watch插件。config.jsonconfig.json就是以前的web.config，但是沒有web.config擁有各種類型的配置那么強(qiáng)大，其中各種功能的配置都以代碼的形式轉(zhuǎn)移到Startup.cs文件中了；另外一部分信息配置內(nèi)容，則放在config.json文件中以json的格式進(jìn)行保存。注意，該文件的信息默認(rèn)并沒有自動(dòng)加載，而是需要自己手工加載該配置信息，代碼如下：//Startup.cs類的構(gòu)造函數(shù)中

Configuration

=

new

Configuration()

.AddJsonFile("config.json")

.AddEnvironmentVariables();通過Configuration實(shí)例加載該配置文件，保存在Configuration屬性中，以便可以在其它地方進(jìn)行使用，而使用時(shí)候的key值，則是按照層級(jí)來(lái)定義的，以如下默認(rèn)內(nèi)容來(lái)說：{

"AppSettings":

{

"SiteTitle":

"WebDemo01"

}

}要獲取鏈接字符串，則需要使用如下key值：var

connString

=

Configuration.Get("AppSettings:SiteTitle");使用起來(lái)，沒有web.config方便了，但是為了兼容其它操作系統(tǒng)，只能這樣了。注意：在ASP.NET5中，配置信息不僅支持json格式，還支