1、本 科 毕 业 论 文基于敏捷软件开发方法的 Web2.0 网站开发 Ajax 在拼客网站的应用The Web2.0 website development based on Agile programming The Application of Ajax in PinKe Website姓 名：学 号：学 院：软件学院系：软件工程专 业：软件工程年 级： 指导教师： 教授年 月I摘 要WEB 应用现已经进入 WEB2.0 “草根”时代，用户成为网络内容的主体。每天都有无数的新想法诞生，“拼客”就是近年来出现的新兴群体。这里的“拼”是拼凑，拼合的意思，而“客”代表一群人。因而，“拼客”指的就
2、是集中在一起共同完成一件事或活动，实行 AA 制消费的一群人。Ruby on Rails 提供一种快速的网站开发方法，只要有想法，就能很快地把它实现，使得我们可以把主要的精力放在创造想法和满足需求上。ROR 所代表的一类动态的、自由的程序设计语言和开发思想让我们拥抱变化，更好地适应敏捷开发。Ajax 作为 Web2.0 的重要组成部分，避免了页面频繁刷新，让用户感受到一种连续的体验。同时 Rails 提供了对 Ajax 高层次的封装，只要指定几个请求参数，就可以实现整个交互细节，以达到无须编写任何 JavaScript 脚本即可实现 Ajax 功能的目的。本文依据实际开发完成的项目，浅析了 W
3、eb2.0 网站页面的设计，展示并分析 Ajax 在拼客网中的具体应用，对基于 ROR 的 Web2.0 网站设计与开发以及 Ajax 在 ROR 中的具体运用有一定的指导和借鉴意义。关键词：拼客网；Ruby On Rails；Web2.0 ；AjaxIIABSTRACTAt the current time, web applications have already entered web2.0 “grassroots” period, the user has become the subject of web content. Everyday many new ideas appea
4、r. “Pin Ke” is an emerging group in recent years. The “Pin” means “gather” or “collect”, and “Ke” means “People”. Thus, “Pin Ke” refers to the “Dutch Treatment” consumption group, which completes one thing or activities together. Ruby on Rails provides a rapid development methodology to develop web
5、site, as long as there is the idea, it soon will be able to achieve so that we can focus on the creation of the ideas and meeting the demand. ROR represent a class of dynamic, the freedom of programming languages and development of thinking so that we are better able to embrace change and adapt to a
6、gile development. Ajax as an important part of Web2.0 to avoid page refresh frequently, so that users feel a continuous experience. Rails provide a high-level encapsulation for Ajax, as long as the specified request parameter, it can be achieved throughout the interactive details, in order to achiev
7、e Ajax without writing any JavaScript.In this paper, basing on an actual development project, it makes an analysis on the Web2.0 website page design, displays and analyses the specific application of Ajax in the “Pin Ke” website. It makes a certain use of guidance and references for development and
8、design of Web2.0 website and Ajax in ROR.Key words: PinKeWeb; Ruby on Rails; Web2.0; AjaxIII目录第一章 引言 11.1 课题背景及意义 11.2 课题要求 11.3 相关技术概述 .21.3.1 开发环境 21.3.2 Ruby 和 Rails 介绍 .21.4 术语定义 3第二章 总体设计 52.1 Rails 框架 .52.1.1 Rails 框架主要特色 .52.1.2 MVC 设计模式 .62.2 数据库 .102.2.1 数据库配置 .102.2.2 模型设计 122.2.3 迁移任务 12第
9、三章 网站页面设计 .143.1 总体设计理念 .143.2 CSS + xHTML183.3 表现层解决方案 21第四章 Web2.0 和 Ajax 技术 234.1 Web2.0.234.2 Ajax 的定义与关键技术 244.2.1 Ajax 定义 .244.2.2 Ajax 与传统 B/S 架构的比较 .244.2.3 实现 Ajax 的关键技术 28第五章 Ajax 在拼客网的应用 295.1 Rails 的 Ajax 支持 .295.2 拼客网中的 Ajax.315.2.1 Ajax 的核心模块： PrototypeHelper315.2.2 Ajax 的效果模块： Scripta
10、culousHelper 435.3 Rails 中 Ajax 的其他用法 465.4 小结 .49第六章 总结和展望 50IV6.1 总结 .506.2 展望 .50致谢语 53参考文献 54VContentsChapter 1 Introduction 11.1 Background.11.2 Assignment11.3 Technology Summarize.21.3.1 Development Condition .21.3.2 Synopsis for Ruby and Rails.21.4 Terminology Definition List 3Chapter 2 Gener
11、al Design 52.1 Rails Framework.52.1.1 Main Features of Rails Frame.52.1.2 MVC Design Pattern.62.2 Database.102.2.1 Databa Configure.102.2.2 Model Design .122.2.3 Migration Task.12Chapter 3 Web Page Design143.1 Design Methodology.143.2 CSS + xHTML183.3 The Solution Project of View Layer .21Chapter 4
12、Web2.0 and Ajax234.1 Web2.0234.2 The Definition amd Key Technology of Ajax 244.2.1 Definition 244.2.2 Compare Ajax with Traditional B/S Framework244.2.3 The Key Technologies28Chapter 5 The Application of Ajax 295.1 Ajax in Rails .295.2 Ajax in PinKe Web.315.2.1 Core Module: PrototypeHelper 315.2.2 E
13、ffect Module: ScriptaculousHelper.435.3 Others .465.4 Conclusion.49Chapter 6 Summarize and Expectation.506.1 Summarize 506.2 Expectation .50VIAcknowledgements .53References.54基于敏捷软件开发方法的 Web2.0 网站开发 Ajax 在拼客网站的应用1第一章 引言1.1 课题背景及意义WEB 应用已经进入 WEB2.0 “草根”时代，用户成为网络内容的主体。每天都有无数的新想法诞生，Ruby on Rails 提供给我们一
14、种快速的网站开发方法，只要你有想法，你就能很快的把它实现，使得我们可以把主要的精力放在创造想法和满足需求上，Ruby 所代表的一类动态的、自由的程序设计语言和开发思想将占有越来越重要的地位。目前，Ruby on Rails 正在成为 Web 应用程序开发的新途径。 Ruby on Rails 是基于 Ruby 语言的轻型 Web 开发架构，不仅开发效率高（部署容易） 、功能丰富（支持 Ajax、Web Services 等最新应用） ，而且性能方面表现相当出色。该架构的支持者们声称 ROR 开发人员的生产效率最多是使用传统 J2EE 架构的十倍，网上也有相关测试资料显示，该架构性能比轻量级的
15、J2EE 架构 Struts + Hibernate 高 15%30%。拼客是近年来出现的新兴群体。这里的“拼”不是拼命，拼刺，拼抢，拼争，而是拼凑，拼合。 “客”代表一群人，因此， “拼客”指的就是集中在一起共同完成一件事或活动，实行 AA 制消费的一群人。这样，既可以分摊成本、共享优惠、又能享受快乐并从中交友、识友。 “AA 拼客”们，倡导的就是一种“节约、时尚、快乐、共赢”的新型生活方式。目前的拼客有：拼房（合租） 、拼饭（拼餐） 、拼玩、拼卡、拼用、拼车（顺风车） 、拼游（拼团或自助游） 、拼购（团购）等等。AA 拼客是一种时尚、一种潮流、一种理念、一种生活的态度、一种生活的方式。 “
16、拼” ，简而言之就是：联合更多的人，形成更大的力量，花更少的钱，消耗更少的精力，做成我们想做的事情，获得更多的快乐，享受更好的生活。1.2 课题要求使用 Ruby 语言在 Rail 平台上采用敏捷软件开发方法构建一个具有 Web2.0特性的拼客网站。学习并使用 Ajax 技术，通过异步发送请求，改善用户体验。架构方法：基于敏捷软件开发方法的 Web2.0 网站开发 Ajax 在拼客网站的应用2Rails 框架的 MVC 架构。测试方法：代码严格按照 Rails 提供的测试功能测试。整个项目开发采用测试驱动方法在 Internet Explorer 7.0 浏览器下进行开发以及测试。1.3 相关
17、技术概述1.3.1 开发环境硬件环境：普通个人电脑软件环境：操作系统： Microsoft Windows XP SP3开发语言： Ruby1.8.6，JavaScript ，HTML ，CSS 开发工具： Eclipse3.4，Aptana 插件, RadRails 插件框架： Rails1.2.2数据库： MySQL Database 5.0浏览器： IE7.0 / GreenBrowser4.9项目管理平台：TortoiseSVN 1.4.51.3.2 Ruby 和 Rails 介绍（1） Ruby 是一种解释型的方便快捷的面向对象的脚本语言，由日本人松本行弘（Yukihiro Mats
18、umoto，外号 matz）开发，遵守GPL 协议和 Ruby License 。Ruby 的作者于 1993 年 2 月 24 日开始编写Ruby，直至 1995 年 12 月才正式公开发布于 fj （新闻组） 。之所以称为Ruby，是因为 Perl 的发音与 6 月的 诞生石 pearl（珍珠）相同，因此Ruby 以 7 月的 诞生石 ruby （红宝石）命名。Ruby 的作者认为 Ruby (Smalltalk + Perl) / 2，因为 Ruby 是一个语法像 Smalltalk 一样完全面向对象、脚本执行、又有 Perl 强大的文字处理功能的编程语言。 1基于敏捷软件开发方法的 W
19、eb2.0 网站开发 Ajax 在拼客网站的应用3（2） Rails 是用 Ruby 编写的一款完整的、开放源代码的 Web 框架，目的是用更简单而且更少的代码编写 Web 应用。诞生于 2004 年 7 月，Rails 的创始人 David Heinemeier Hanson 从 37signals 公司的项目管理工具 Basecamp 里面分离出 Ruby on Rails，并且以开源方式发布。Rails 当中有很多规矩从一开始就按照 David 的意见制定好了，所以在 Rails 上开发应用程序时，开发人员可以专注于应用程序自身的设计，省却那些花在了解及配置基础框架上面的时间。这也正是
20、Rails 很重要的精神“惯例优于配置” （Convention over Configuration） ，开发人员遵照 Rails 本身的惯例便可以省却配置组态（例如 JavaEE 应用中的大量的配置文件）的时间；此外，Rails 虽然强调惯例的重要及便利性，但针对不同的需求，Rails 也提供修改的空间让开发人员可以进行自订的组态，定义自己的配置来覆盖 Rails 配置。 1（3） Ruby on Rails 是一种结合 Ruby 语言与 Rails 平台的一种网页编程语言，Ruby 语言以自然、简洁、快速著称，全面支持面向对象程序设计，而Rails 则是 Ruby 广泛应用方式之一，在
21、Rails 平台上设计出一套独特的MVC 开发架构，采取模型（Model） 、视图（View） 、控制器（Controller）分离的开发方式，不但减少了开发中的问题，更简化了许多繁复的动作。 1Rails 框架提供了开发 Web 应用的一站式选择。1.4 术语定义本文档中所用到的专门术语的定义和缩写词的原意。表 1-1：专门术语的缩写与定义序号 名词 定义和解释1 GPL GPL 是 GNU General Public License (GNU 通用公共许可证)的缩写形式；它要求软件以源代码的形式发布，并规定任何用户能够以源代码的形式将软件复制或发布给别的用户。基于敏捷软件开发方法的 We
22、b2.0 网站开发 Ajax 在拼客网站的应用42 ROR Ruby On Rails ，即 Ruby 语言在 Rails 框架上的运用。3 Ajax Asynchronous JavaScript and XML(以及 DHTML 等)的缩写。4 CSS Cascading Style Sheets 层叠样式表5 DOM Document Object Model 文档对象模型，它是操作 Html 和XML 文件的一组 API，它提供了文件的结构表述。6 ORM Object Relational Mapping 对象关系映射，即将数据库表映射到类。7 UI User Interface，用
23、户接口，也称为用户界面。基于敏捷软件开发方法的 Web2.0 网站开发 Ajax 在拼客网站的应用5第二章 总体设计2.1 Rails 框架2.1.1 Rails 框架主要特色Rails 框架始终遵循了 DRY（Dont Repeat Yourself 不要重复你自己）和约定优于配置（convertion over configuration）两个核心原则，Rails 结合了 PHP 体系的优点（快速开发）和 Java 体系的优点（程序规整） ，主要有如下的 6 大特点：(1) 全栈式的 MVC 框架Rails 是一个全栈式的 MVC 框架，换句话来说，通过 Rails 可以实现 MVC模式的
24、各个层次，并使他们无缝地协同运转起来。在实际开发一个 MVC 模式的 Web 应用项目中，如果使用 java 开发时，需要用到 Structs、Hibernate 和Spring 三个框架，而且需要额外整合 3 个框架开发出的内容。而使用 Ruby 语言开发相同的项目时，只需要用到 Rails 框架就可以完成。(2) 约定优于配置为了说明各个对象之间的关联关系，一般的 Web 应用开发框架往往采用写入 XML 配置文件的方法。这种方法虽然可以解决一些问题，但是却带来管理上的混乱。Rails 对此采取的解决方案是“约定优于配置” ，这意味着在 Rails 中不会出现 XML 配置文件。Rails
25、 使用 Web 应用多年来积累的各种常见约定（更具体地说是命名规则）来代替 XML 配置文件，而在 Rails 内部的映射与发现机制根据这些约定可以实现对象之间的关联。(3) 更少的代码使用约定来代替 XML 配置文件说明 Rails 本身完成了大量的底层工作，这意味着使用较少的代码来实现应用程序是极有可能的。此外，代码量的缩减也减少了出现 bug 的可能性，降低了维护程序和升级程序的难度。(4) 生成器Rails 使用的实时映射技术和元编程技术，免去了开发人员在开发过程中编写大量样本文件代码的烦恼。在少数需要使用样本文件代码的时候，开发人员基于敏捷软件开发方法的 Web2.0 网站开发 Aj
26、ax 在拼客网站的应用6可以通过 Rails 内建的生成器脚本实时创建，而不再是通过手工编写。Rails 的这个特点可以使开发人员更专注于系统的逻辑结构，而不必为一些琐碎的细节所烦恼。(5) 零周转时间对已有的 Web 应用系统进行修改后，其一般需要经过配置、编译、发布、重新配置、测试等一系列步骤才能投入使用，这明显浪费了许多时间。而使用Rails 开发 Web 应用系统，可以通过浏览器即时查看程序运行结果，从而节约了大量的时间。(6) 支架系统Rails 的支架系统可以自动为任何相关的数据表创建一套包含标准 CRUD 操作和前台视图的系统。通过支架系统，开发人员可以方便快捷地操作数据库中的数
27、据表。此外，Rails 也允许开发人员使用自己设计的代码或视图来替代自动生成的代码和视图。(7) 指导原则Rails 的指导原则是“不要重复你自己”(Dont Repeat Yourself, 或 DRY)。意思是说你写的代码不会有重复的地方。比如以往数据库的接口往往是类似的程序代码但是在很多地方都要重复用到，这无论是给编写还是维护都造成了很大的代价，相反，Rails 给你提供了绝大多数的支持，让你只需要短短的几行代码就可以实现强大的功能。而且，Rails 提供了代码生成工具，让你甚至不需要编写一行代码就实现强大的管理程序。Rails 通过 reflection 和 runtime exten
28、sion减少了对 configuration 文件的依靠，这和 Java，C# 语言的方向有很大不同，让你减少了很多配置和部署的麻烦，但是性能上却完全可以应付一般网站的需求。2.1.2 MVC 设计模式Rails 是使用纯 Ruby 编写的框架(Framework)。它对 Web 开发提供了强有力的支持，如支持数据映射、MVC 模式、Web Services、安全等。而且这些功能操作起来要比同类的产品容易的多，例如其 MVC 模式就比 Struts 更容易使用。除了这些，Rails 还可以根据模板自动生成 Web 应用程序（只需要在命令行简基于敏捷软件开发方法的 Web2.0 网站开发 Aja
29、x 在拼客网站的应用7单输入“rails web 应用程序名 ”单击回车后便可以轻松生成完整的 Web 应用骨架） 。这样可以省去我们很多的时间。图 2-1 所示为 Rails 框架的三层架构示意图：WEBrick 服务器ActiveRecord（业务逻辑组件、DAO组件、领域对象三合一）ORM发送请求 响应请求调用业务逻辑方法返回处理结果持久层框架数据库MVC框架交互底层数据库ActionController（控制器组件）RHTML 页面（视图）用户图 2-1 Ruby on Rails 应用的架构示意图基于敏捷软件开发方法的 Web2.0 网站开发 Ajax 在拼客网站的应用8图 2-2
30、所示为自动生成的 Rails 框架：图 2-2 自动生成的 Rails 应用骨架参考图 2-1 及图 2-2 可以推知，Ruby on Rails 的模型 -视图-控制器架构由以下各部分组成：（1）模型模型包含着应用的状态，状态可能是临时的，也可能是长久性保存在数据库中的。需要注意的是模型不仅包含数据，而且包含数据所代表的逻辑。在 Rails 中，模型通常是由一些代表关系数据库中 RDBMS 表的类组成的。在 RoR 中，模型类是通过 ActiveRecord 模式进行处理的。一般来说，程序员要做的是继承 ActiveRecord 类，同时程序会自动计算出要使用哪个 RDBMS表，这个表有哪些
31、列，表与表之间的关系通过简单的命令来指明。ActiveRecord 基于敏捷软件开发方法的 Web2.0 网站开发 Ajax 在拼客网站的应用9类是 RoR 应用的核心，它合并了 JavaEE 应用中的三个成员富领域对象、业务逻辑组件和 DAO 组件，因此功能复杂同时也最丰富。它虽然必须继承 Rails 框架的持久化基类，但比之 Hibernate 的持久化来的简洁，Hibernate 的持久化对象必须处于 Hibernate Session 的管理下才可以进行持久化。其差异比较如图 2-3 所示：+ s a v e ( )+ d e l e t e ( i n i d : i n t )A
32、c t i v e R e c o r d : B a s eU s e rO b j e c tI t e mA c t i v e R e c o r d的持久化方案H i b e r n a t e的持久化方案+ s a v e ( i n e n t i t y : O b j e c t )+ d e l e t e ( i n i d : i n t )S e s s i o n图 2-3 ActiveRecord 和 Hibernate 持久化的差别（2）控制器控制器将用户界面（RHTML）和数据模型（ActiveRecord）关联起来，并充当协调运作的角色。它接收各种用户操作，
33、更新数据模型，并用合适的 View展示结果给用户。像它的名字一样，可以说 Rails 的 Web 应用的主要控制中心就是各个控制器。比之 Struts， Rails 只需要一个控制器就能完成多种操作，而 Struts 则需要多个，并且需要在 struts-config.xml 中分别配置每个 Action 和其对应的URL。Rails 则采用“约定”的方式，省去大量繁琐的配置。其差异比较如图 2-4 所示：基于敏捷软件开发方法的 Web2.0 网站开发 Ajax 在拼客网站的应用10A c t i v e C o n t r o l l e r : B a s e+ s a v e ( )+
34、d e l e t e ( )+ l i s t ( )U s e rA c t i o n+ e x e c u t e ( )A c t i o n 1A c t i v e C o n t r o l l e rM V C 解决方案S t r u t s M V C 解决方案+ e x e c u t e ( )A c t i o n 2+ e x e c u t e ( )A c t i o n 3图 2-4 ActiveRecor 和 Hibernate 持久化的差别（3）视图View 负责根据 Model 中的数据显示用户界面，负责收集用户输入的表单页，以及返回包含处理结果的显示页
35、。作为 Web 应用，Rails 里的 View 通常是生成部分或者整个网页，当然也可以是 XML 甚至是 JavaScript 代码，通常表现为使用内嵌 Ruby 的 HTMLXMLJavaScript 模板。2.2 数据库选用 MySQL Database 5.0 作为后台数据库。MySQL 的体积小、速度快、总体拥有成本低、而且开放源码，这些优点无疑成为敏捷开发的首选，并且Rails 对 MySQL 具有良好的支持。只需对 Rails 工程下的 config/database.yml配置文件进行简单修改，就可以使用 rake、数据迁移等强大功能。2.2.1 数据库配置一般而言，开发应用程
36、序由三个阶段组成：开发编码、测试和产品发布阶段。在这三个阶段，开发者的需要有很多的差异。在开发编码阶段，开发者希望看到更多的日志、能够立即加载修改过的代码、直观的错误提示等等。而在测试阶段，开发者就需要一个相对独立的环境，这样测试才具有可重复性。在基于敏捷软件开发方法的 Web2.0 网站开发 Ajax 在拼客网站的应用11真实发布运行时，系统需要最优化的效率，最佳的用户体验，并且不应该让用户看到错误。为了支持这些不同的需求，Rails 引入了运行时环境的概念。在不同的环境下运行同一个应用程序，应用程序也会发生变化。标准的三个运行环境(development.rb、production.rb、
37、test.rb) 默认存在于 config/environments 目录中。如图 2-5 所示：图 2-5 environment 目录因为 config/database.yml 文件负责配置与数据库的连接。这个文件由三部分组成，分别对应开发编码、测试和产品发布数据的配置。将 pinkeweb 数据库设在 development 运行时环境： development 中，便于查找日志和修改代码。因此，实际开发中，我们只需对 development 部分进行修改，如图 2-6 所示。图 2-6 数据库连接配置基于敏捷软件开发方法的 Web2.0 网站开发 Ajax 在拼客网站的应用122.2
38、.2 模型设计PinKeWeb 主要用到的模型，通过 ActiveRecord 就能以面向对象的方式操作底层关系数据库。ActiveRecord 包装了数据库中的某个表（或视图）的某一行，并封装了对数据库的存取，通过这个对象，即可访问数据库，执行 CRUD 操作。Rails 的 ActiveRecord 的持久化必须继承 ActiveRecord:Base 类，之后，Rails会根据命名约定，把持久化类和一个与之同名且为复数形式的数据表对应形成映射。并于此可指定数据库表之间的关联关系（一对一 belongs_to，一对多has_many，多对多关系需要创建第三张表作为连接表） 。此处举一例说明
39、，如图2-7 所示：图 2-7 用户表模型2.2.3 迁移任务在 Rails 中有很多方法来创建数据库表，可以使用地层面的 DDL(数据库定义语言) ，如 create table 之类的，也可以使用 navicate 等可视化操作，用可视化工具是有代价的，以前所作的修改都丢失了，所有的操作都是不可撤销的。基于敏捷软件开发方法的 Web2.0 网站开发 Ajax 在拼客网站的应用13还好，Rails 数据迁移工具帮我们解决了这一问题。每一个迁移任务代表队数据库的一次修改，采用独立于数据库的形式。修改的内容既可以是改变数据库结构，如加一个表。也可以是修改数据库中的数据。在 PinKeWeb 中，
40、以002_create_users.rb 为例，运行完 002_create_user.rb 后，它会自动映射到数据库的 users 表。由图 2-7 和图 2-8 的对照比较，可以看出 002_create_user.rb 和users 表是自动映射的。图 2-8 用户表迁移任务基于敏捷软件开发方法的 Web2.0 网站开发 Ajax 在拼客网站的应用14第三章 网站页面设计3.1 总体设计理念Web2.0 网站主要强调直接或直观的交流。所以它与以往类型的网站在设计的上呈现的潮流有所不同。总的来讲，web2.0 网站的设计主要考虑易用性。 3提到 web2.0 网站设计，想到最多的便是“交互
41、体验”，其实所谓网站“交互体验”，就是用户对网站浏览和操作过程的感受，是对网站设计和功能安排的认知和体会。 4本文从体验者的角度，分别从以下2个角度进行阐述感官体验浅白的讲，这就是网站给用户留下的第一印象，即用户初次访问网站所留下的直观感受，是“漂亮” 、 “典雅” 、抑或是“简洁”等等词语都可以用来概括用户的感官体验。作为网站交互体验设计的第一层，感官体验主要通过网站的整体形象来创造。不妨作如下划分：（1）直观的导航导航一定要清晰，明确。包括格式规整，栏目的设置简明易懂，文章列表最好有摘要；交互功能有明显的提示；阅读往返方便，跳转简易便捷。图3-1 导航截图（2）合理的布局常用的网站布局设计
42、划分为三块，即页首 logo，页脚，以及页面正中中间的信息正文主体。这里项目用到了 Rails 的布局模板，即使用 layout 下的 application.rhtml （包含页首、页脚等部分）作为全局模板，然后用其他模块单元作为布局模板来填充主体内容。基于敏捷软件开发方法的 Web2.0 网站开发 Ajax 在拼客网站的应用15图3-2 俱乐部页面截图（3）鲜明的色彩固然有的网站侧重使用淡彩设计，但这里所说的“鲜明的色彩” ，主要是指色彩对主题的表达一目了然。同时有科学分析表明，色彩比印象要来得深刻，基于敏捷软件开发方法的 Web2.0 网站开发 Ajax 在拼客网站的应用16充分发挥色彩
43、在“简洁、鲜明”主题氛围的营造功能和对网站主题的说明功能，更能提升访问者对网站认可程度的印象分。以身边常见的例子为例，如可口可乐公司以红色、激情、简洁风格为主格调，而 IBM 则以蓝色的博大，典雅，给人以深刻印象。我们设计的拼客网站，学习走淡彩简洁路线，选择简单、典雅的淡灰色作为主色调，主题显得朴实明了，界面简单，易于操作。图3-3 拼客网首页截图基于敏捷软件开发方法的 Web2.0 网站开发 Ajax 在拼客网站的应用17行为体验行为体验就是网民使用网站过程中的感受。这种感受来源于很多方面：包括功能、视觉和可用性等多个方面。但如果仔细分析网民在网站上的所有操作行为，会发现，大量的操作无非就分
44、属两类：一类是需要点击鼠标的，一类是需要键盘输入的。行为体验设计核心在于用户行为优化。用户行为优化，也就是网站操作的便捷程度。针对上述分析的网民操作，可以通过减少无效点击、简化注册流程、理清访问路径等几个方面来改善用户体验。拼客网使用 Ajax 和 Rails 自带的验证功能，减少用户的错误信息录入、重复输入和长时间的刷新等待，提供一系列友好的界面提示，清晰明了的网站导航，提供丰富的用户交互、即时消息展示、富文本录入功能等功能，更好地展现用户情感。让用户更自然、更喜欢、更主动地用键盘来说话。从而体现 web2.0 的用户参与的意义。图3-4 注册页面截图基于敏捷软件开发方法的 Web2.0 网
45、站开发 Ajax 在拼客网站的应用18图3-5 富文本编辑框截图3.2 CSS + xHTML随着 Web 标准在国内的逐渐普及以及很多业内人士的大力推行，众多的网站已经开始重构，Web标准的推出将网站的内容与表现分离，同时xHTML文档具有良好的结构，因此需要抛弃传统的表格布局方式，采用 DIV，并使用 CSS层叠样式表来实现页面的外观。 5布局 CSS+DIV 进行网页重构相对与传统的 TABLE 网页布局而具有以下3个方面的显著优势：（1）表现和内容相分离将设计部分剥离出来放在一个独立样式文件（CSS）中，HTML 文件中只存放文本信息。这样的页面对搜索引擎更加友好。举俱乐部最新留言为例
46、：RHTML页面代码为：基于敏捷软件开发方法的 Web2.0 网站开发 Ajax 在拼客网站的应用19图3-6 俱乐部最新留言RHTML代码截图其对应的CSS为：图3-7 俱乐部最新留言页面对应的部分CSS 代码截图项目显示效果：基于敏捷软件开发方法的 Web2.0 网站开发 Ajax 在拼客网站的应用20图3-8 俱乐部最新留言页面截图（2）提高页面浏览速度对于同一个页面视觉效果，采用 CSS+DIV 重构的页面而产生的容量要比 TABLE 编码的页面文件容量小得多，前者一般只有后者的1/2 大小。使得浏览器不用去编译大量冗长的标签，从而提高浏览器解析和显示速度。（3）易于维护和改版采用 C
47、SS+DIV 重构后的页面，只需要简单地修改几个 CSS 文件，就可以达到重新设计整个网站页面的目的。在 Rails 框架中的样式文件，根据其约定，存放在 publicstylesheets 文件夹下。在页面中，可依据项目实际需求，通过语句 “all“ % ，指定需要引用的基于敏捷软件开发方法的 Web2.0 网站开发 Ajax 在拼客网站的应用21自定义 CSS 文件。图3-9 项目中的 CSS 文件截图3.3 表现层解决方案正如先前所述，Rails 是一个符合 MVC 的架构，Ruby on Rails 提供了功能非常强大的表现层方案，主要包含：RHTML 模板、RXML 模板和 RJS
48、模板三种形式，在拼客网站中，主要采用了最常用的 RHTML 模板。Rails 框架是以固定的命名习惯来自动判断整个架构，默认下会将网址分析成 http:/domain-name/ControllerName/ActionName/Attribute/ 然后执行目标Controller 中的 Action，并取出指定的 View（视图）回传给浏览器显示。RHTML 比之 JSP 页面，是更加纯粹的表现层，可以避免开发者将过多的业务逻辑插入 RHTML 页面。同时，在 RHTML 页面中可以使用大量功能丰富的帮助方法（Helper ） ，这些帮助方法非常类似于 JSP 页面中的标签通过一个简单的帮
49、助方法，底层可以隐藏复杂的显示逻辑。 （例如 Rails 中用以封装及实现 Ajax 的 Helper）不仅如此，RHTML 页面还支持丰富的页面装饰技术，使用约定来定义装饰页面。装饰器的作用类似于 JavaEE 应用里的 SiteMesh 框架的应用，它提供了简单的方法来为整个应用生成统一的页面风格。允许开发者在定义 RHTML 页面时只需关心实际的表单和数据输出，而无须理会页面美观、页面效果。一旦开发者开发了完整的应用，美工人员就可以为整个站点编辑装饰器页面，或者为特定模块编写特定的装饰器页面，从而保证整个应用、整个模块有相同的视基于敏捷软件开发方法的 Web2.0 网站开发 Ajax 在拼客网站的应用22觉风格。ROR 应用的装饰器页面都放在 web 应用的 appviewslayouts 路径下，装饰器页面也是一个 RHTML。下面以 club 为例进行介绍。图 3-10 项目中的 club 页面代码在图 3-6 中 index.rhtml 是作为 club 的默认首页，其他的 rhtml 文件分别对应 club_controll
