1.1 Web标准与VS2013开发环境
虽然目前存在多种典型的Web应用程序编程模型,但是,无论是哪种编程模型,其使用的技术都必须符合Web标准,这样才能在发布后被多种客户端浏览器正确识别和显示。
1.1.1 B/S编程模型与Web标准
这一节我们主要学习进行Web开发时首先必须了解的基础知识。
1.B/S编程模型
B/S(Browser/Server,浏览器/服务器)编程模型是一种以HTTP为基本传输协议的体系结构编程模式。在B/S编程模型中,开发人员只需要编写部署在Web服务器上的应用程序即可,而不需要编写专用的客户端程序。或者说,客户端程序是一种通过HTTP实现数据传输的通用应用程序,即我们平常所说的浏览器。
相对于B/S编程模型来说,C/S(Client/Server,客户端/服务器)编程模型既需要编写部署在服务器上的服务器端程序,也需要编写安装在用户计算机上的客户端程序,这种应用程序编程模型除了可以使用HTTP作为基础传输协议以外,还可以采用其他的网络传输协议,如TCP、UDP等。或者说,凡是通过下载并安装客户端程序才能运行的应用程序都属于用C/S编程模型编写的应用程序,如QQ、飞信、微信、360安全卫士等都属于C/S应用程序。
传统B/S编程模型一般采用三层架构设计。用户界面、逻辑处理、数据支持构成最基本的三层架构,如图1-1所示。
图1-1 传统B/S编程模型三层架构
2.Web标准
Web标准是国际上通用的Web设计规范,凡是符合Web标准规定的设计规范的网站,都能用各种客户端浏览器正常访问。
(1)W3C制定的Web设计标准
Web设计标准也叫Web设计规范或者Web开发规范,这些Web标准大部分都是由W3C(World Wide Web Consortium,全球万维网联盟)和开发商以及用户等共同制定的,如HTML、CSS、Graphics(SVG和Canvas API)、JavaScript、Web API、Audio and Video以及Mobile Web等,W3C都制定了对应的设计标准。
如果读者希望查看W3C发布的各种Web设计标准的具体规定和技术文档,可参考W3C的官方网站(英文),网址如下:
http://www.w3.org/standards/webdesign/
也可以参考下面的中文版网站:
http://www.chinaw3c.org/standards.html
但是,Web标准只提供了功能和设计规范,而具体实现则由软件生产厂家来完成。换而言之,标准仅说明了可以使用哪些功能,这些功能的语法格式,以及在使用符合标准的内容时,哪些是推荐使用的,哪些是建议不要这样用的。而如何实现符合标准规定的内容,则由具体的开发工具来决定。
(2)Web 1.0和Web 2.0
从大的方面来看,Web开发经历了从Web 1.0到Web 2.0的变迁。随着以HTML5为核心的Web 2.0时代的到来,以及“天、空、地”一体化的各种Web应用,Web设计标准和相应的实现技术也都发生了翻天覆地的变化。
1999年,W3C制定了HTML 4.01标准,随后公布了CSS 2.1标准和JavaScript标准。这时的HTML、CSS以及JavaScript标准统称为Web 1.0标准。
HTML5、CSS3、JavaScript、Canvas、SVG、WebGL以及移动设备开发规范等都是W3C发布的新一代Web开发标准,为了将其和早期的设计标准区分开,一般将这些新的设计标准统称为Web 2.0标准。
随着HTML5、CSS3等新标准的正式发布和快速流行,不支持这些标准的旧版浏览器正在迅速被淘汰,为了在客户端浏览器的残酷竞争中占有一定的用户量,各大浏览器生产厂家都在快速更新所提供的浏览器版本,以尽快实现新的Web标准,避免被其他浏览器淘汰。
目前世界上流行的各种“现代浏览器”的最新版本都支持新的Web标准,如微软公司的IE 11.0浏览器、Mozilla基金会的FireFox浏览器、谷歌公司的Chrome浏览器以及Opera浏览器、Safari浏览器等。
在VS2013下编辑HTML文档或者CSS时,系统会自动检查所编辑的内容是否符合HTML5正式标准和CSS3正式标准(正式标准不再包含各厂家自定义的前缀)。当开发人员编写的代码不符合正式标准规定的规范时,编辑器会自动显示绿色的波浪形下划线提醒Web开发人员。
3.静态网页和动态网页
许多初学者都误将包含各种动画、滚动字幕等视觉上具有“动态效果”的网页认为是动态网页,否则认为是静态网页,其实这样理解是不正确的。实际上,无论是动态网页还是静态网页,都可以展示文字、图片、动画等动态效果,但从网页生成的内部方式来看,静态网页和动态网页却有着本质的差别。
静态网页是指Web服务器发送到客户端的静态HTML页面,其特点是URL固定、内容相对稳定、容易被搜索引擎检索。在静态网页上,一样可以出现各种动态的效果,如动画、滚动字幕等。图1-2展示了静态网页的基本工作原理。
图1-2 静态网页工作原理
动态网页是指Web服务器根据客户端请求,随不同用户、不同时间的操作,动态返回不同静态内容的网页。换而言之,当客户端向服务器发送请求时,服务器先对其进行处理,然后再将处理结果转换为静态网页发送到客户端。图1-3展示了动态网页的基本工作原理。
图1-3 动态网页工作原理
采用动态网页技术的网站可以实现比静态网页更多的功能。
1.1.2 安装VS2013开发环境
Microsoft Visual Studio系列开发工具是Windows操作系统平台上最流行的开发工具,它提供的各种方便的开发模型使开发人员能快速地构建和编写各种复杂的应用程序,或者说,只需要使用同一种开发工具,就能完成所有的软件开发任务。
本书介绍的所有内容都是在VS2013开发环境下用【ASP.NET Web应用程序】模板来实现的。所有源程序都在Windows 7操作系统和IE 11.0浏览器下调试通过。
1.安装包含Update4的VS2013旗舰版
VS2013内置了HTML5、CSS3以及ASP.NET 5.0等相关技术,特别是它的“模型联编”技术、HTML5和CSS3等正式标准设计规范的检查,以及非常方便的智能提示等,十分便于Web应用程序的开发。这些集成技术带来的便捷是VS2012以及更早版本所不具备的。学习本书内容前,应先安装VS2013开发工具。
本书开发环境的具体要求如下。
(1)操作系统:Windows 7(32位或者64位)。
(2)内存:最低1GB,建议2GB或者更高。
(3)包含Update4的VS2013旗舰版(Visual Studio Ultimate 2013 with Update 4)。
由于VS2013的安装过程比较简单,这里不再介绍具体安装步骤。
如果不使用VS2013旗舰版,也可以安装包含Update4的VS2013开发版,这是一种免费的版本,主要用于个人学习和小公司使用,但其功能没有VS2013旗舰版强大。
2.下载和安装IE 11.0浏览器
IE 11.0浏览器全面实现了HTML5、CSS3、JavaScript、Canvas、SVG以及WebGL等Web 2.0正式标准的功能,而且运行速度快、使用方便,而IE 9.0和IE 10.0只是实现了Web 2.0推荐标准草案中的部分功能,IE 8.0和IE6.0由于研发时间更早,不支持Web 2.0标准。
IE 11.0浏览器的官方下载网址如下:
http://windows.microsoft.com/zh-cn/internet-explorer/ie-11-worldwide-languages
从该下载网页选择合适的IE 11.0版本(32位或者64位简体中文版,网站会根据访问时使用的操作系统自动选择合适的版本),下载后直接运行安装即可。
至此,我们完成了本书需要的开发和调试环境的安装。
1.1.3 ASP.NET Web应用程序
ASP.NET是一个免费的Web开发平台,是微软公司在.NET框架的基础上构建的一种Web开发架构。2014年11月12日,微软公司在纽约举办的全球开发者联盟大会上郑重声明,不但现在的ASP.NET是完全免费的,以后所有.NET框架也将全部开源(可支持Windows、Mac OS X和Linux三大操作系统)。关于微软.NET框架开源的更多信息,有兴趣的读者可参考下面的网站(或者搜索“.NET开源”查看国内翻译版):
http://winsupersite.com/visual-studio/visual-studio-and-net-go-cross-platform
1.One ASP.NET
VS2013提供的ASP.NET Web应用程序模板同时提供了多种Web应用编程模型,从大的方面来说,这些编程模型主要分为两大类,一类是网站(Sites)编程模型,另一类是服务(Services)编程模型,如图1-4所示。
图1-4 ASP.NET Web应用程序编程模型
这种在同一个ASP.NET Web应用程序项目中可同时选择多种Web编程模型的技术称为“模型联编”技术,也叫“One ASP.NET”,这也是从VS2013开始首次使用的技术。
“One ASP.NET”的本质含义为:在【ASP.NET Web应用程序】模板提供的编程模型中,既可以仅选择一种模型,也可以根据项目需要同时选择多个模型,包括MVC(扩展名为.cshtml的文件)、Web Pages(扩展名为.html的文件)、Web Forms(扩展名为.aspx的文件)、Single Pages(移动设备常用的单页应用程序开发模型)、Web API(基于HTTP的Web服务编程接口)以及SignalR(支持云环境的实时Web应用服务,如天气预报服务、地图服务等)。
在这些编程模型中,最常用的有两种,一种是基于事件驱动的编程模型(简称WebForms或Web窗体),另一种是基于测试驱动的编程模型(简称MVC)。
2.Web窗体编程模型
在VS2013开发工具推出之前,.NET开发人员主要用【ASP.NET Web窗体应用程序】模板来开发Web应用程序,这是一种基于事件的敏捷Web开发模型。从VS2013开始,微软公司不再专门提供【ASP.NET Web窗体应用程序】模板,但仍然在开发工具中保留了【Web窗体】开发模式。
【Web窗体】的最大优势是易理解、上手快,非常适合利用它内置的Web服务器控件开发Web应用程序。但是,随着Web 2.0时代的到来,新的Web标准使HTML5和CSS3的功能变得非常强大,此时【Web窗体】的缺点也逐渐暴露出来(这也恰恰是它刚推出时的优点),最突出的问题主要体现在以下两个方面。
(1)新版本的Web窗体为了兼容旧版本,使Web服务器控件封装的功能变得越来越臃肿,这在一定程度上影响了程序运行的效率。另外,HTML5、CSS3以及各种优秀开源架构的推出,也让【Web窗体】提供的Web服务器控件变得越来越无用。
(2)随着大型Web应用程序项目的分工越来越细,【Web窗体】编程模型使大型Web项目的单元测试工作变得非常棘手。
在这种情况下,微软公司又推出了开源的、基于测试驱动的【MVC】编程模型。
3.MVC编程模型
ASP.NET MVC是微软公司实现的、开源的、基于测试驱动的Web应用程序编程模型。官方网址如下:
MVC(Models、Views、Controllers)其实并不是一种新技术,该设计思想早在20世纪70年代就已经被提出。MVC体系结构的精髓是它可以帮助开发人员创建数据支持(Models)、逻辑处理(Controllers)和用户界面(Views)完全分离的应用程序,由于这种物理上的结构分离非常清晰,所以即使系统非常庞大,也同样容易维护和扩展。
随着Web技术的发展,MVC模式也在不断地变化和完善,就像1946年的第1台计算机与目前的计算机虽然基本结构相同,但是实际上其硬件实现已经和最初的结构千差万别类似,最初提出的MVC设计思想也与目前的MVC不可同日而语。
ASP.NET MVC推出以后,迅速成为.NET环境下Web开发人员的首选技术。目前大型软件公司都建议开发人员用C#和ASP.NET MVC来开发Web应用程序,而不再建议用传统的Web窗体技术来开发。
不过,对于微软公司来说,为了让开发人员仍然能继续使用原来已经熟悉的技术,在其提供的开发工具中,【Web窗体】和【MVC】这两种编程模型将会一直同时存在。
(1)MVC编程模型的特点
ASP.NET MVC编程模型具有以下特点。
① 任务分离。
ASP.NET MVC强制实施“任务分离”的策略。在任务分离的过程中,应用程序被分成离散的松耦合部件,即:模型、视图和控制器。这种任务分离模式使复杂Web应用程序更易于测试、维护和扩展。
在VS2013开发环境下,ASP.NET MVC中的模型(Models)用于存放独立且可重复使用的组件,用C#实现的组件默认都保存在项目的Models文件夹下;视图(Views)用于呈现网页界面,用Razor视图引擎、HTML5、CSS3以及JavaScript等实现的视图页面默认都保存在项目的Views文件夹下;控制器(Controllers)用于控制整个网站的处理流程以及协调Views和Models之间的数据传递,用C#实现的这些代码默认都保存在项目的Controllers文件夹下。
② 基于测试驱动的开发。
利用ASP.NET MVC架构,可以对控制器中提供的每个操作方法都单独进行单元测试,从而为测试驱动的开发(TDD)提供了更好的支持,非常适合大型团队开发功能和层次结构都很复杂的Web应用程序。
③ 对HTML5和CSS3的操控能力高。
VS2013内置的ASP.NET MVC 5显著提高了开发人员对HTML5和CSS3的操控能力,该架构完全公开和实现了HTML5和CSS3规范,这是【Web窗体】模型无法做到的。换而言之,早期的【Web窗体】模型在简化功能设计的同时,也导致开发人员降低了对HTML5和CSS3进行深度控制或者细粒度控制的灵活性。
(2)ASP.NET MVC的版本发展
本书成稿时,ASP.NET MVC的稳定版是第5版,该版本也是VS2013内置的版本。
ASP.NET MVC的发展历程如下。
2008年,微软公司推出了.NET框架3.5和VS2008。VS2008首次内置了ASP.NET MVC 1.0。但是,该版本仅支持ASPX视图引擎,而且功能有限。
2010年,微软公司推出了.NET框架4.0和VS2010。VS2010内置了ASP.NET MVC 2,该版本仍然是仅支持ASPX视图引擎。
2012年,微软公司推出了.NET框架4.5和VS2012。在V2012开发环境中,同时内置了ASP.NET MVC 3(简称MVC3)、ASP.NET MVC 4(简称MVC4)以及ASP.NET Web API等架构。从MVC3开始,首次引入Razor视图引擎,而且其后续的更高版本默认也都使用Razor视图引擎。
2013年,微软公司推出了.NET框架4.5.1和VS2013,并在VS2013开发环境中内置了ASP.NET MVC 5(简称MVC5),同时将Web窗体、MVC、Web API、实时Web以及实体框架等架构全部整合在一起。
总之,VS2013开发环境突出了ASP.NET模型联编的概念,在VS2013的Web选项卡中,只有一个【ASP.NET Web应用程序】模板,在该模板中,开发人员可根据业务需要,在同一个解决方案或者同一个项目中任选【MVC】、【Web窗体】、【Web API】等编程模型之一,也可以同时选择这些编程模型。