VS2015 ASP.NET5 Web項目結構淺析
前言
本文個人同步博客地址http://aehyok.com/Blog/Detail/76.html
在安裝好VS2015之后,一直想看看新版本的Web項目如何,上個周建了項目之后發現真是面目全非,微軟這次更新真是太凶了。於是我就有了想簡單的了解一下新建的項目結構的沖動,真是一發不可收啊,自己只是想研究個皮毛,這前前后后大概花掉了一周的時間(當然都是業余的)才大致搞明白了一點吧。在此就進行記錄一下。首先來創建一個Web項目
1、打開VS2015新建ASP.NET Web應用程序
2、選擇ASP.NET 5 Starter Web
3、新建項目后可以發現項目結構如下
可以發現項目結構可以分為1到6六個部分。接下來我就來簡單的描述一下我對這6個部分的理解。
1、global.json
1、global.json 文件存放在“Solution Items”解決方案目錄下,打開 global.json文件發現,默認有這樣的配置:
下面我們來驗證一下這個sources的作用。先來做一件事情,下載Asp.Net MVC源碼地址為https://github.com/aspnet/Mvc。然后看一下下載后的文件
現在我將這些文件簡單的復制到E:\projects\Mvc。然后我們回到global.json這個文件,將其中代碼簡單修改,修改后的內容如下
{ ////"sources": [ "src", "test" ] "sources": ["E:\\projects\\Mvc\\src" ] }
再來做兩個操作,右鍵解決方案,第一步先Clean Solution清除解決方案,第二步Build Solution編譯解決方案
成功之后來看一下解決方案下的文件發生了什么變化
通過標記可以發現,解決方案下竟然加載了global.json中設置的路徑項目
如果你想把這些項目刪除掉,那么你可以先恢復global.json中的sources值,以及手動刪除解決方案下的項目,然后重新編譯即可。
2、Dependencies(Bower和NPM)
Bower:bower是twitter開源的一款web包(如bootstrap、jquery)管理,依托github上越來越多的開源web(html+css+js)項目,bower只需要github項目加一個配置文件就可以使用bower方式管理。bower提供了web包的添加、升級、刪除、發布,以及管理包依賴,只需命令方式,即可輕松管理,再也不需要去手工下載拷貝文件了。
我們來看一下在VS2015中如何使用Bower。首先可以通過Nuget來下載安裝Bower。
接着打開bower.json
在“dependencies”下輸入knoc可以發現有智能提示額,我將來操作演示我們來添加knockout這個JavaScript的類庫。
但對於類庫版本沒有進行提示
於是我單獨到官網http://knockoutjs.com/index.html進行輸入一個版本。
"knockout": "^3.2.0"
接下來我們通過菜單進行安裝。先來找到位置 View==>>Others Windows==>>Task Runner Explorer,打開后如下圖所示
然后再在Tasks==>>bower右鍵后點擊Run,這里其實就是要檢查bower.json文件,然后會將我們添加的knockout類庫進行添加到項目中,執行完畢后會發現
NPM:npm 是 Node.js 的模塊依賴管理工具。作為開發者使用的工具,主要解決開發 Node.js 時會遇到的問題。如同 RubyGems 對於 Ruby 開發者和 Maven 對於 Java 開發者的重要性,npm 對與 Node.js 的開發者和社區的重要性不言而喻。現在已經移植到全宇宙最無敵的開發工具Visual Studio中了,真是令人歡呼雀躍。
NPM在VS2015中對應的配置文件為package.json。下面我們來添加一個模塊:通過下面的截圖可以發現,同樣會有智能提示功能。
比如我們添加如下模塊
"express": "^4.10.2"
然后在Task Runner Explorer下執行后在NPM文件夾下可以看到
現在可以右鍵express,然后點擊Restore Package
其實就是真正安裝express模塊吧。
對於NPM的具體使用可以參考http://www.infoq.com/cn/articles/msh-using-npm-manage-node.js-dependence
3、References
References:References 其實就是我們之前VS版本中的引用,可以看下我在VS2010下的截圖
和之前不同的是,現在VS2015項目目錄中只有 ASP.NET 5.0 和 ASP.NET Core 5.0,其中所有的程序集都是通過 project.json 文件中的 dependencies節點進行配置管理。
引用好保存后,vs2015就會自動從nuget上下載相應組件。
4、MVC
Controllers、Models和Views 和我們之前的 ASP.NET MVC 項目沒什么區別,Migrations 是示例項目中使用 EntityFramework 代碼遷移文件。
5、七個文件
不按照順序了。
1、Project_Readme.html
這個頁面很簡單就是針對ASP.NET 5的一個自述HTML網頁。通過這個網頁可以鏈接到關於ASP.NET 5的相關內容頁面。
2、Startup.cs 應該就是原來的Global.asax.cs。
3、config.json主要就是配置數據庫鏈接字符串。
4、gruntfile.js相當於一個任務插件管理器
下面這就是Grunt的任務運行模版
在里面分為Alias Tasks和Tasks,其中alias中的任務,是通過在gruntfile中注冊任務得來 grunt.registerTask("default", ["bower:install"]);
而tasks則是由 grunt.loadNpmTasks("grunt-contrib-copy")得來,這些包需要提前通過package.json聲明好。
下面我簡單的通過Grunt來壓縮一個css文件。
①、在package.json中聲明插件cssmin
②、在gruntfile.js文件中加載插件
grunt.loadNpmTasks("grunt-contrib-cssmin");
③、在NPM在進行安裝插件
④、在Task Runner Explorer中刷新
刷新完后
⑤、在gruntfile.js中添加注冊任務和壓縮的文件
⑥、下面到Task Runner Explorer進行刷新,刷新之后
然后執行Run
執行完之后查看發現
不過數值略有差異。也沒什么關系差不太多。
這里只是通過Grunt執行了一個壓縮的功能,還有其他很多的功能這里就不進行學習記錄了。
6、wwwroot
看到wwwroot,你也許並不陌生。我們來看看網站如何運行起來吧。
現在點擊Web項目右鍵==》》Publish,選擇File System
添加應用名稱,選擇目標路徑,點擊發布
發布成功
既然已經啟動了,那么就相當於網站自承載成功,現在可以打開網站了,但是什么信息都不知道。按照如下指示進行
打開http://localhost:5000
總結
gruntfile.js通過Grunt來管理執行Bower和NPM,而Bower又通過bower.json文件進行管理,NPM又通過package.json進行管理。
project.json相當於原來的配置文件可以管理References下項目的引用集合以及其他配置。
Startup.cs相當於原來的Global.asax.cs。config.json主要來定義數據庫的鏈接字符串。
wwwroot下存放的是一些靜態文件。Web項目發布后,通過bin目錄下唯一的dll文件AspNet.Loader.dll與命令web.cmd讓網站就可以運行起來。這其中的奧秘還有待進一步的深入研究呀。