·您现在的位置: 江北区云翼计算机软件开发服务部 >> 文章中心 >> 网站建设 >> 网站建设开发 >> ASP.NET网站开发 >> 解读ASP.NET 5 & MVC6系列(2):初识项目
打开VS2015,创建Web项目,选择ASP.NET Web application,在弹出的窗口里选择ASP.NET 5 Website模板创建项目,图示如下:
我们可以看到,此时Web Forms\MVC\Web API复选框都选择不了,原有是因为在ASP.NET 5中做了大量更改,移除了Web Forms功能,将MVC、Web API、Web Pages这些功能合在了一起,所以自然就不需要这些复选框了。另外由于是CTP版,所以目前还没有提供单元测试项目的创建。
新创建的项目在VS的解决方案目录结构和实际文件夹的目录结构分别如下:
注意:上图是在VS 预览版中的截图,在新版的RC版本中,默认的客户端构建工具变成了gulp(即配置文件是gulpfile.js),而非原来的grunt了。
两个图的差异非常大,我们来一一分析一下这些差异。
通过图示,我们可以看到,在根目录中,不仅项目文件从从csPRoj变成了xproj,还少了很多之前的文件(如web.config),但也多了很多不同的文件以及文件夹,我们先列出这些不同的文件盒文件夹,再来一一讲解这些内容。
文件/文件夹 | 功能描述 |
---|---|
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是项目的核心配置文件,示例如下:
{ "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个类型的内容。
webroot是指定该web项目的静态文件存放地址,目前是用于在发布的时候讲该目录中的内部发布的正确的位置(详细内容可以在部署发布章节中找到)。注意BookStore解决方案中带有地球图标的wwwroot
目录是真实的文件夹路径,我们可以对其进行修改,比如将其修改为wwwroot1
,那么相应的webroot的值也应该修改为wwwroot1
,因为gulpfile.js里代码要通过project.webroot
来使用该目录,以便能够将bower管理的前端库都复制到正确的目录。
在解决方案的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
是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文件中,比如你需要的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节点,其使用规则如下:
注意,exportsOverride节点中定义的key/value,其中key表示要文件复制目标(即wwwroot/lib下)对应包名下的子目录,value表示源文件目录或文件。例如:
"bootstrap": { "js": "dist/js/*.*", //将dist/js/下的所有文件,复制到wwwroot/lib/b