任务二 搭建公共环境
学习目标
了解公共常量的处理方式。
会定义常量。
了解基本的JavaScript语法。
会使用JavaScript验证表单数据。
能设计该网站的数据库结构。
任务描述
确定网页之间公共常量的定义，本次任务需要为项目二搭建公共环境。确定网页表单验证的基本方式，确定合理的文件结构与管理方式。
任务分析与相关知识
1.分析各个网页之间需要共享的数据
绿吧交易平台中很多信息的显示需要用到分页技术，分页就意味着要确定每一页需要显示信息的数量，这个数量在表示层用来确定数据显示的量，在模型层用来确定从数据库中取记录集的量，这些代表分页尺寸的数据最好定义成常量，放在一个公共类中统一维护（参考项目一任务九对分页的相关处理方式）。
另外，网页之间有些数据是需要共享的，最典型的代表就是购物车，还有就是登录之后的用户信息，这些数据都是以“键-值”对的形式储存在会话的属性中，所以要为这些属性设计统一的名称，也就是存储的键名，同样为了在使用这些公共属性的时候，不会因为手误写错属性的名称，也建议使用公共常量对这些属性的名称进行统一维护。
根据绿吧交易平台的界面原型，可以分析出需要存储的公共常量，见表2-2-1。
表2-2-1 公共常量表
2.项目二的目录结构设计
项目二同项目一一样，采用JSP的经典目录结构，如图2-2-1所示。
图2-2-1 项目二开发阶段目录结构
3.网页表单验证的需求分析
表单是网页获取用户信息的基本形式，为了提升网页的用户体验，在设计表单时，要尽量减少用户出错的可能性，能够选择的就不要让用户输入，尽量让用户第一反应输入的信息是正确的，即使出现错误，也应该有明确的错误提示。另外，任何错误数据都应该在客户端发现并处理，不要提交到服务器端，这就需要使用客户端脚本，对表单要提交的数据进行验证。一般表单验证的思路如图2-2-2所示。
图2-2-2 项目二表单验证的基本模式
任务实施
步骤一 打开MyEclipse，创建一个新的Web项目greenbarb2c，并将访问MySQL所必须的JDBC驱动类文件包放到网站根目录下的WebRoot\WEB-INF下的lib文件夹中。
步骤二 根据图2-2-1，修改greenbarb2c网站根目录的文件结构，也就是在greenbarb2c网站根目录WebRoot文件夹下创建images、js、styles等文件夹。
步骤三 在项目greenbarb2c下添加一个类文件CONSTANTS.java，该文件放入包common中。该类的代码如下所示。
代码2-2-1 CONSTANTS.java
步骤四 在项目greenbarb2c下添加一个包models，在models下添加一个类DB，要求该类提供数据库访问共同的方法，如连接数据库、执行查询、执行更新等，请读者回顾项目一任务八相关内容完成编码任务。
步骤五 在项目greenbarb2c项目WebRoot\js下添加一个js文件check.js，要求读者根据后面做的网页表单的验证需求，为该文件添加合适的表单验证方法。请读者回顾项目一任务七相关内容完成编码任务。
步骤六 在项目greenbarb2c项目WebRoot\js下添加一个js文件effect.js，该文件用来实现商品搜索时选择商品类别需要的动态效果，代码如下所示。
代码2-2-2 effect.js
步骤七 在项目greenbarb2c项目WebRoot下添加一些图片、动画素材，用来支持网站的测试，具体要求如下：
1）在images子文件夹下添加一个products文件夹，在该文件夹下放置sample.png，用来显示测试产品的图片。
2）在images子文件夹下添加一个faces文件夹，在该文件夹下放置4个文件1.gif、2.gif、3.gif、4.gif代表4个头像，用于用户注册时选择头像。
3）在images根目录下，需要一个981×790像素大小的图片bg.png作为网页的背景（读者可以自行设计一个）。
4）在images根目录下，还需要logo.gif、menu_bike.png、menu_cart.png、menu_talk.png等图片用来作为网页功能导航的图标，如图2-2-3～图2-2-6所示的是本书所采用的图标及尺寸，读者也可根据这个尺寸放置自己的图片。
图2-2-3 logo.gif图片尺寸981×110像素用作首页页眉的背景
图2-2-4 menu_bike.png图片尺寸34×26像素用作首页导航菜单的背景
图2-2-5 menu_cart.png图片尺寸34×26像素用作首页导航菜单的背景
图2-2-6 menu_talk.png图片尺寸34×26像素用作首页导航菜单的背景
5）在swf目录下，需要一个swf文件，该flash文件的尺寸是345×55像素，用来在页眉显示一个动画效果。自我评价
