VS2015 ASP.NET5 Web項目


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讓網站就可以運行起來。這其中的奧秘還有待進一步的深入研究呀。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM