任务十七 实现游记模块的页面效果
项目二 绿吧旅游用品交易平台开发
任务一 网站项目分析与总体设计
学习目标
了解绿吧旅游用品交易平台的需求。
熟悉交易平台的基本模块。
能为该网站建立网站结构图。
能设计该网站的界面草图。
能设计该网站的数据库结构。
项目描述
绿吧旅游用品公司为了拓展电子商务业务，准备开发一个旅游用品综合交易平台，该平台能够提供公司商品的在线交易功能，并借助论坛、驴友相互晒游记、攻略、照片等功能来聚拢目标消费人群，培养网站文化，引导一种绿色、健康、又时尚的旅游生活方式。该公司提供的主要产品有冲锋衣裤、速干衣、polo衫、徒步鞋、溯溪鞋；登山包、徒步包、休闲包；帐篷、睡袋、便携式餐具、折叠桌椅等。
任务描述
本次任务需要充分了解平台的需求，能合理地设置网站的功能模块，绘制网站结构图、界面草图，并在此基础上设计相关的数据库系统。
任务分析与相关知识
1.常见交易平台的功能模块
分析目前常见的交易平台网站，如淘宝、京东、当当，会发现能够在线交易的网站一般都有如下模块：
1）购物车。
2）会员管理。
3）订单管理。
4）商品评价。
5）留言（站内信、即时留言等形式）。
结合绿吧公司的业务需求，应该为交易平台选择购物车、会员管理、订单管理、商品评价、站内信形式的留言管理等基本模块；同时为了建立用户之间的沟通渠道，应该交易平台添加论坛模块；为了营造一种宣传驴友健康、绿色生活方式的网站文化，建议为交易平台添加游记分享模块。
2.功能模块分析
结合绿吧旅游用品交易平台的定位，可以确定网站必须具备的模块和首页应该具备的基本内容，见表2-1-1。
表2-1-1 网站的基本模块及其功能
3.技术分析
本项目使用JSP技术实现上述模块的开发。通过项目一，我们已经了解JSP的核心技术：
1）脚本。
2）Servlet。
3）JavaBean。
4）JDBC。
5）MVC设计模式。
6）自定义标签的应用。
7）请求、响应、会话等Web对象。
这些技术同样是本项目的技术基础，项目二的实现思路如图2-1-1所示。
图2-1-1 项目二的实现技术框架
任务实施
1.绘制网站的基本结构图
结合网站的模块分析，可以确定网站的基本结构，如图2-1-2所示。
图2-1-2 项目二的网站基本结构图
2.设计网站的基本界面
结合网站结构设计及功能定位，可以绘制整个网站的页面原型，利用原型可以清晰地展示网站的结构、流程，便于企业需求方全面了解网站的设计思路，也能尽早暴露设计的缺陷和不足，便于网站设计人员在早期就能按照新的需求修改和改进网站的设计。结合原型设计可以完成整个网站项目的界面设计。
1）首页界面。首页效果如图2-1-3所示。
图2-1-3 首页（登录前）
在首页登录成功之后显示如图2-1-4所示效果。
图2-1-4 首页（登录后）
2）会员模块界面。在首页单击“注册”，进入如图2-1-5所示的用户注册页面。
图2-1-5 用户注册页面
从首页登录之后，单击“维护我的资料”，进入如图2-1-6所示页面。
图2-1-6 用户资料修改页面
如果单击了只有会员才能使用的功能（如商品的购买、购物车的浏览、发帖、写游记等），而当前浏览者又没有登录，就进入如图2-1-7所示页面。
图2-1-7 用户登录页面
3）商品模块界面。在首页单击产品图片，进入如图2-1-8所示页面（含对商品的评价）。
图2-1-8 单件商品浏览页面
在首页输入产品的“关键字”，选择“主类别”和“子类别”类型后，单击“搜索”按钮，或单击商品的分类，进入如图2-1-9所示页面。
图2-1-9 商品搜索结果页面
4）购物车模块界面。在页眉导航栏中单击“购物车”，进入如图2-1-10所示页面。
图2-1-10 购物车浏览页面
5）订单模块界面。在购物车浏览页面单击“去结算”按钮，进入如图2-1-11所示页面。
图2-1-11 订单预览页面
从首页登录之后，单击“我的历史订单”，进入如图2-1-12所示页面。
图2-1-12 用户的历史订单查看页面
6）商品评价模块界面。在用户的历史订单查看界面中单击“评价”，进入如图2-1-13所示页面。
图2-1-13 商品评价页面
7）留言模块界面。从首页登录之后，单击“我的留言”，进入如图2-1-14所示页面。
图2-1-14 用户留言查看页面
在用户留言查看页面中单击“我要留言”或“回复”，或在游记浏览页面单击“给作者留言”，可以进入如图2-1-15所示页面。
图2-1-15 发留言页面
8）游记模块界面。在页眉导航菜单中单击“分享游记”，进入如图2-1-16所示页面。
图2-1-16 游记分享页面
在游记分享页面中单击“more＞＞”，进入如图2-1-17所示页面。
图2-1-17 游记列表页面
在游记分享页面中单击游记标题或在游记列表页面单击游记的标题，进入如图2-1-18所示页面。
图2-1-18 游记浏览页面
在游记分享页面单击“我要发表游记”，进入如图2-1-19所示页面。
图2-1-19 游记发表页面
9）论坛模块界面。在页眉导航菜单中单击“说说话”，进入如图2-1-20所示页面。
图2-1-20 论坛首页页面
在论坛首页中单击“我要发帖”按钮，进入如图2-1-21所示页面。
图2-1-21 发新帖页面
在论坛首页中单击帖子的标题，进入如图2-1-22所示页面。
图2-1-22 帖子浏览页面
3.设计网站后台数据库的基本结构
根据网站界面原型，可以了解网站需要存储哪些数据。项目二需要的数据库的基本结构如图2-1-23所示。
图2-1-23 项目二数据库关系图
根据上图所示的数据库设计思路和网站对数据存储的具体需求，可以确定项目二后台数据库所有表的基本结构，见表2-1-2～表2-1-10。
表2-1-2 会员表
表2-1-3 产品表
表2-1-4 产品类型表
表2-1-5 订单表
表2-1-6 订单从表
表2-1-7 留言表
表2-1-8 论坛及游记类型表
表2-1-9 游记表
表2-1-10 帖子表
（续）
请读者根据表2-1-2～表2-1-10的数据库结构设计，完成构建GreenBar数据库的SQL脚本greenbar.sql。
在MySQL服务器中执行greenbar.sql，成功建立了项目二的测试数据库。
4.检查已经创建的数据库
在MySQL服务器控制台中执行如图2-1-24所示指令，检查是否成功创建GreenBar数据库，并在该数据库下建立了9个相关的表。
图2-1-24 检查项目二数据库
自我评价
任务二 搭建公共环境
学习目标
了解公共常量的处理方式。
会定义常量。
了解基本的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像素，用来在页眉显示一个动画效果。自我评价
任务三 构建会员模块的模型类
学习目标
了解项目二中会员模块的主要操作。
知道会员模块数据存储的需求。
为会员模块设计和实现数据模型类。
为会员模块设计和实现业务操作类。
任务描述项目二采用MVC设计模式进行设计，所以要先分析出网站所有的数据访问需求，并设计出模型，才能进一步实现页面的功能。
本次任务需要结合项目二会员模块的操作需求，分析出会员模块数据存取的基本结构和业务操作流程，完成会员数据模型类MemberBean和会员业务操作类Memebers的设计。
任务分析与相关知识
1.会员数据模型类MemberBean的设计思路
网站中与会员相关的操作如图2-3-1～图2-3-5所示。
图2-3-1 会员登录
图2-3-2 用户注册
图2-3-3 维护用户资料
图2-3-4 提交订单时要更新收货人地址信息
图2-3-5 论坛浏览时需要显示会员的头像
在这些界面模型中，可以分析出页面需要传递的会员数据有：账号、真实姓名、密码、电子邮件、订单的地址、邮编、联系电话、头像等。
会员数据模型类MemberBean的基本结构如图2-3-6所示。
图2-3-6 会员数据模型类的基本数据结构
2.会员业务操作类Members的设计思路
参考图2-3-1～图2-3-5的会员操作需求，可以得到会员模块的基本操作场景，如图2-3-7所示。
结合上图的业务操作分析，绘制出会员业务操作类Members的基本结构，如图2-3-8所示。
图2-3-7 会员基本操作
图2-3-8 会员业务操作类的基本结构
任务实施
步骤一 在项目greenbarb2c下的models包下添加一个类MemberBean，请读者结合图2-3-6完成编码任务。
步骤二 在项目greenbarb2c下的models包下添加一个类Members，请读者结合图2-3-8完成编码任务。
自我评价
任务四 构建商品模块的模型类
学习目标
了解项目二中商品模块的主要操作。
知道商品模块数据存储的需求。
为商品模块设计和实现数据模型类。
为商品模块设计和实现业务操作类。
任务描述
本次任务需要结合项目二商品模块的操作需求，分析出商品模块数据存取的基本结构和业务操作流程，完成与商品相关的数据模型类（ProductBean、ProducttypesBean）和业务操作类（Products、ProductsTypes）的设计。
任务分析与相关知识
1.数据模型类（ProductBean、ProducttypesBean）的设计思路
网站中与商品相关的操作如图2-4-1～图2-4-3所示。
图2-4-1 显示商品推荐、分类搜索商品、按关键字搜索商品
图2-4-2 查看单件商品信息
图2-4-3 查看购物车的时候需要根据商品编号查看商品的单价等信息
在这些界面模型中，可以分析出页面需要传递的商品信息数据有：编号、货号、名称、商品类型、商品描述、库存数量、定价、是否首页推荐、是否上架、商品的图片、上架的时间等。如图2-4-1、图2-4-2所示，需要单独访问商品的类型信息，所以商品类型信息需要独立传递。
商品数据模型类ProductBean的基本结构如图2-4-4所示。
商品类型数据模型类ProducttypesBean的基本结构如图2-4-5所示。
图2-4-4 商品数据模型类的基本数据结构
图2-4-5 商品类型数据模型类的基本数据结构
2.商品业务操作类Products、商品类型操作类ProductsTypes的设计思路
参考图2-4-1～图2-4-3的商品操作需求，可以得到商品模块的基本操作场景，如图2-4-6所示。
结合上图的业务操作分析，绘制出商品业务操作类Products的基本结构如图2-4-7所示。
图2-4-6 商品基本操作
图2-4-7 商品业务操作类的基本结构
商品类型的操作主要是如图2-4-1、图2-4-2所示的类型的浏览，所以商品类型的操作场景非常单纯，就是商品类型的查询，如图2-4-8所示。
图2-4-8 商品类型基本操作
商品类型业务操作类ProductsTypes的基本结构如图2-4-9所示。
图2-4-9 商品类型业务操作类的基本结构
任务实施
步骤一 在Web项目greenbarb2c中的包models下添加一个类ProductBean，请读者结合图2-4-4完成编码任务。
步骤二 在Web项目greenbarb2c中的包models下添加一个类ProducttypesBean，请读者结合图2-4-5完成编码任务。
步骤三 在Web项目greenbarb2c中的包models下添加一个类Products，请读者结合图2-4-7完成编码任务。
步骤四 在Web项目greenbarb2c中的包models下添加一个类ProductsTypes，请读者结合图2-4-9完成编码任务。
自我评价
任务五 构建购物车模块的模型类
学习目标
了解项目二中购物车模块的主要操作。
知道购物车模块数据存储的需求。
为购物车模块设计和实现数据模型类。
为购物车模块设计和实现业务操作类。
任务描述
本次任务需要结合项目二购物车模块的操作需求，分析出购物车模块数据存取的基本结构和业务操作流程，完成数据模型类CartItem和业务操作类Cart的设计。
任务分析与相关知识
1.数据模型类CartItem的设计思路
网站中与购物车相关的操作如图2-5-1、图2-5-2所示。
图2-5-1 购买商品时将商品添加到购物车
图2-5-2 浏览购物车内容、修改购物车中商品数量、结算完清空购物车
在这些界面模型中，可以分析出购物车中要存放的购物项目包含：商品的编号、购买数量。
购物项目数据模型类CartItem的基本结构如图2-5-3所示。
图2-5-3 购物项目数据模型类的基本数据结构
2.购物车业务操作类Cart的设计思路
参考图2-5-1、图2-5-2的购物车操作需求，可以得到购物车模块的基本操作场景，如图2-5-4所示。
结合上图的业务操作分析，绘制出购物车业务操作类Cart的基本结构，如图2-5-5所示。
图2-5-4 购物车基本操作
图2-5-5 购物车业务操作类的基本结构
任务实施
步骤一 在Web项目greenbarb2c中的包models下添加一个类CartItem，请读者结合图2-5-3完成编码任务。
步骤二 在Web项目greenbarb2c中的包models下添加一个类Cart，请读者结合图2-5-5完成编码任务。
自我评价
任务六 构建订单模块的模型类
学习目标
了解项目二中订单模块的主要操作。
知道订单模块数据存储的需求。
为订单模块设计和实现数据模型类。
为订单模块设计和实现业务操作类。
任务描述
本次任务需要结合项目二订单模块的操作需求，分析出订单模块数据存取的基本结构和业务操作流程，完成和订单相关的数据模型类（OrdersBean、OrderDetailsBean、CommentBean）和业务操作类Orders的设计。
任务分析与相关知识
1.数据模型类（OrdersBean、OrderDetailsBean、CommentBean）的设计思路
网站中与订单相关的操作如图2-6-1～图2-6-4所示。
图2-6-1 下订单
图2-6-2 查看历史订单
当用户查看自己的历史订单时，可以对所购买的商品进行评价。
图2-6-3 针对所购买过的商品发表评论
用户对商品所发表的评论，将在该商品的浏览页面上可以被浏览者看到。
图2-6-4 商品浏览页面的商品评论区域
在这些界面模型中，可以分析出页面需要传递的订单信息数据有两类，一类是与用户下单相关的基本信息：订单编号、下订单的用户、订单送货的地址、邮编、电话、收货人、下订单的时间、订单的状态（是否处理完毕）；另一类是与订单所包含的商品相关的订单明细：商品编号、商品数量、商品评论、发表评论的日期。
订单数据模型类OrdersBean的基本结构如图2-6-5所示。
订单明细数据模型类OrderDetailsBean的基本结构如图2-6-6所示。
图2-6-5 订单数据模型类的基本数据结构
图2-6-6 订单明细数据模型类的基本数据结构
根据图2-6-3、图2-6-4，网页之间需要传递的商品评价信息有：评价的内容、评价的时间等。商品评价数据模型类CommentBean的基本结构如图2-6-7所示。
图2-6-7 商品评价数据模型类的基本数据结构
2.订单业务操作类Orders的设计思路
参考图2-6-1～图2-6-4的订单操作需求，可以得到订单模块的基本操作场景如图2-6所示。
图2-6-8 订单基本操作
结合上图的业务操作分析，绘制出订单业务操作类Orders的基本结构如图2-6-9所示
图2-6-9 订单业务操作类的基本结构
任务实施
步骤一 在Web项目greenbarb2c中的包models下添加一个类OrdersBean，请读者结合图2-6-6完成编码任务。
步骤二 在Web项目greenbarb2c中的包models下添加一个类OrderDetailsBean，请读者结合图2-6-5完成编码任务。
步骤三 在Web项目greenbarb2c中的包models下添加一个类CommentBean，请读者结合图2-6-7完成编码任务。
步骤四 在Web项目greenbarb2c中的包models下添加一个类Orders，请读者结合图2-6-9完成编码任务。
自我评价
任务七 构建留言模块的模型类
学习目标
了解项目二中留言模块的主要操作。
知道留言模块数据存储的需求。
为留言模块设计和实现数据模型类。
为留言模块设计和实现业务操作类。
任务描述
本次任务需要结合项目二留言模块的操作需求，分析出留言模块数据存取的基本结构和业务操作流程，完成留言数据模型类WordsBean和留言业务操作类Words的设计。任务分析与相关知识
1.留言数据模型类WordsBean的设计思路
网站中与留言相关的操作如图2-7-1～图2-7-3所示。
图2-7-1 显示未读留言的条数
图2-7-2 分页查看所有留言基本信息、查看某条留言内容
图2-7-3 发表留言
在这些界面模型中，可以分析出页面需要传递的留言信息数据有：发表时间、标题、内容、发送人、接受人、阅读状态等。
留言数据模型类WordsBean的基本结构如图2-7-4所示。
图2-7-4 留言数据模型类的基本数据结构
2.留言业务操作类Words的设计思路
参考图2-7-1～图2-7-3的留言操作需求，可以得到留言模块的基本操作场景，如图2-7-5所示。
图2-7-5 留言基本操作
结合上图的业务操作分析，绘制出留言业务操作类Words的基本结构如图2-7-6所示。
图2-7-6 留言业务操作类的基本结构
任务实施
步骤一 在Web项目greenbarb2c中的包models下添加一个类WordsBean，请读者结合图2-7-4完成编码任务。
步骤二 在Web项目greenbarb2c中的包models下添加一个类Words，请读者结合图2-7-6完成编码任务。
自我评价
任务八 构建论坛模块的模型类
学习目标
了解项目二中论坛模块的主要操作。
知道论坛模块数据存储的需求。
为论坛模块设计和实现数据模型类。
为论坛模块设计和实现业务操作类。
任务描述
本次任务需要结合项目二论坛模块的操作需求，分析出论坛模块数据存取的基本结构和业务操作流程，完成论坛数据模型类BBSBean和论坛业务操作类BBS的设计。任务分析与相关知识
1.论坛数据模型类BBSBean的设计思路
网站中与论坛相关的操作如图2-8-1～图2-8-3所示。
图2-8-1 论坛分类分页浏览
图2-8-2 查看帖子及其回复
图2-8-3 发表帖子
在这些界面模型中，可以分析出页面需要传递的论坛信息数据有：类型、帖子标题、帖子内容、发贴的时间、发送人、回复率、点击率、父贴编号等。
论坛数据模型类BBSBean的基本结构如图2-8-4所示。
图2-8-4 论坛数据模型类的基本数据结构
2.论坛业务操作类BBS的设计思路
参考图2-8-1～图2-8-3的论坛操作需求，可以得到论坛模块的基本操作场景，如图2-8-5所示。
图2-8-5 论坛基本操作
结合上图的业务操作分析，绘制出论坛业务操作类BBS的基本结构，如图2-8-6所示。
图2-8-6 论坛业务操作类的基本结构
任务实施
步骤一 在Web项目greenbarb2c中的包models下添加一个类BBSBean，请读者结合图2-8-4完成编码任务。
步骤二 在Web项目greenbarb2c中的包models下添加一个类BBS，请读者结合图2-8-6完成编码任务。
自我评价
任务九 构建游记模块的模型类
学习目标
了解项目二中游记模块的主要操作。
知道游记模块数据存储的需求。
为游记模块设计和实现数据模型类。
为游记模块设计和实现业务操作类。
任务描述
本次任务需要结合项目二游记模块的操作需求，分析出游记模块数据存取的基本结构和业务操作流程，完成游记数据模型类TravelsBean和游记业务操作类Travels的设计。任务分析与相关知识
1.游记数据模型类TravelsBean的设计思路
网站中与游记相关的操作如图2-9-1～图2-9-5所示。
图2-9-1 首页显示固定条数的最新游记
图2-9-2 游记首页分类显示固定条数的最新游记
图2-9-3 发表新游记
图2-9-4 分页显示游记搜索的结果
图2-9-5 查看游记内容
在这些界面模型中，可以分析出页面需要传递的游记信息数据有：游记的类型、标题、内容、作者、是否推荐为精华游记、发表的时间等。
游记数据模型类TravelsBean的基本结构如图2-9-6所示。
图2-9-6 游记数据模型类的基本数据结构
2.游记业务操作类Travels的设计思路
参考图2-9-1～图2-9-5的游记操作需求，可以得到游记模块的基本操作场景，如图2-9-7所示。
图2-9-7 游记基本操作
结合上图的业务操作分析，绘制出游记业务操作类Travels的基本结构，如图2-9-8所示。
图2-9-8 游记业务操作类的基本结构
任务实施
步骤一 在Web项目greenbarb2c中的包models下添加一个类TravelsBean，请读者结合图2-9-6完成编码任务。
步骤二 在Web项目greenbarb2c中的包models下添加一个类Travels，请读者结合图2-9-8完成编码任务。
自我评价
任务十 实现首页的页面效果
学习目标
➢ 了解项目二中首页要实现的页面效果。
➢ 根据首页的数据访问需求设计相关的标签。
➢ 实现首页的页面功能。
任务描述
任务一～任务九已经为项目二的功能实现铺好了地基，从任务十开始要为网站实现页面的最终显示效果，本次任务要实现的是首页的页面效果。首页要实现的主要效果是：商品分类展示、要推荐在首页的商品展示、会员快速登录、最新游记的快速浏览等。
任务分析与相关知识
首页主要的功能如图2-10-1所示。
图2-10-1 首页页面功能分析
1）一区是表单，要将搜索条件提交到search.jsp，完成商品的搜索功能。
2）二区是用户区，登录前和登录后会有不同的显示，此区域在用户访问网站的全程相对固定，所以可以设计成一个标签，便于重复使用。
3）三区是商品类型展示区，此区域在用户访问网站的全程相对固定，所以可以设计成一个标签，便于重复使用。
4）四区是首页特有的显示内容——推荐商品显示区域。
5）五区是最新游记浏览，同样该区域在用户访问网站的全程相对固定，所以也可以设计成一个标签。
为了实现首页及整个网站都需要重复使用的页面效果，需要为网站设计几个自定义的标签，分别用来显示用户区效果、商品分类展示效果、最新游记浏览效果；首页包含了快速登录的功能，所以需要添加一个用来判断登录是否成功的Servlet类LoginServet；如果首页登录失败，需要一个msg.jsp显示错误提示信息，综上所述，本次任务要完成的文件见表2-10-1。
表2-10-1 任务清单
任务实施
步骤一 在项目greenbarb2c下添加一个包tags，在tags下添加一个类UserTag.java，该类是自定义标签＜mytags：userzone/＞的标签解析类，主要实现图2-10-1中二区的功能。请读者结合首页的设计需求完成编码任务。
步骤二 在项目greenbarb2c下的tags包下添加一个类TravelsTag.java，该类是自定义标签＜mytags：travels/＞的标签解析类，主要实现图2-10-1中五区的功能。请读者结合首页的设计需求完成编码任务。
步骤三 在项目greenbarb2c下的tags包下添加一个类ProductTypeTag.java，该类是自定义标签＜mytags：producttype/＞的标签解析类，主要实现图2-10-1中四区的功能。请读者结合首页的设计需求完成编码任务。
步骤四 在项目greenbarb2c下添加一个包controllers，在controllers下添加一个Servlet类LoginServlet.java，该类的路径映射和别名都要设置为login，用来实现用户身份的判断，要求把成功登录的用户信息存储在会话中。请读者结合首页的设计需求完成编码任务。
步骤五 在项目greenbarb2c根目录下的WEB-INF文件夹下添加一个标记描述文件mytags.tld，用于将自定义标签与标签解析类对应起来（在后续的任务中还会陆续添加自定义标签类，此文件无需重新创建，只需要在该文件基础上继续添加tag标签就可以了）。请读者结合首页的设计需求完成编码任务。
步骤六 修改web.xml文件（在项目greenbarb2c根目录下的WEB-INF文件夹下），为该XML文件添加如下几行标签（该段标签可以直接添加在标签＜web-app＞后面）。
代码2-10-1 web.xml添加的部分
步骤七 在项目greenbarb2c根目录下添加msg.jsp，用来在网站运行中显示提示信息，请读者模仿项目一任务四的消息提示页面完成编码任务。
步骤八 在项目greenbarb2c根目录下添加index.jsp，完成首页的整体页面效果，请读者结合首页的设计需求完成编码任务。
步骤九 完成如上步骤，运行网站项目，测试首页的页面效果：登录成功、登录失败、首页推荐商品的浏览、首页最新游记的浏览、首页商品分类的浏览。
自我评价
任务十一 实现会员模块的页面效果
学习目标
了解项目二中会员模块要实现的页面效果。
根据会员模块的页面效果完成网页的设计。
根据会员模块的页面效果完成Servlet的设计。
任务描述
本次任务要实现的是会员的页面效果：会员登录、会员退出、会员资料的修改等。
任务分析与相关知识
结合项目二任务三对会员模块的功能分析，可以分析出与会员相关的页面逻辑如图2-11-1所示。
图2-11-1 会员模块页面逻辑
1）login.html是登录页面，该页面要将用户登录的信息提交到login这个Servlet，实现登录的判断。
2）regisger.html是注册页面，该页面的核心功能就是将用户输入的信息交给register处理，实现注册信息的登记。
3）modify.jsp是用户资料修改页面，该页面的核心功能是显示现有的会员信息，并允许用户修改个人资料，并能将修改后的数据交给modifyuser处理，实现用户信息变更的登记。
4）exit是处理用户退出请求的Servlet。
综上所述，本次任务要完成的文件见表2-11-1。
表2-11-1 任务清单
任务实施
步骤一 在项目greenbarb2c下的controllers包中添加一个Servlet类RegisterServlet.java（别名和路径映射名都是register），请读者结合图2-11-1完成编码任务。
步骤二 在项目greenbarb2c下的controllers包中添加一个Servlet类ModifyUserServlet.java（别名和路径映射名都是modifyuser），请读者结合图2-11-1完成编码任务。
步骤三 在项目greenbarb2c下的controllers包中添加一个Servlet类LogoutServlet.java（别名和路径映射名都是exit），请读者结合图2-11-1完成编码任务。
步骤四 在项目greenbarb2c根目录下添加login.html，请读者结合图2-11-1完成编码任务。
步骤五 在项目greenbarb2c根目录下添加modify.jsp，请读者结合图2-11-1完成编码任务。
步骤六 在项目greenbarb2c根目录下添加register.html，请读者结合图2-11-1完成编码任务。
步骤七 完成如上步骤，运行网站项目，测试会员模块的页面效果：登录、注册、修改个人资料、退出。
自我评价
任务十二 实现商品模块的页面效果
学习目标
了解项目二中商品模块要实现的页面效果。
根据商品模块的页面效果完成网页的设计。
任务描述
本次任务要实现的是商品的页面效果：商品搜索、商品浏览。
任务分析与相关知识
结合项目二任务四对商品模块的功能分析，可以分析出与商品相关的页面逻辑如图2-12-1所示。
图2-12-1 商品模块页面逻辑
1）search.jsp是商品搜索页面，该页面可以根据用户提交的条件分页显示搜索的结果。
2）single.jsp是单件商品的浏览页面，该页面将显示商品的详细描述及购买过该商品的用户对该商品的评价信息，并提供商品购买功能。
综上所述，本次任务要完成的文件见表2-12-1。
表2-12-1 任务清单
任务实施
步骤一 在项目greenbarb2c根目录下添加search.jsp，请读者结合图2-12-1完成编码任务。
步骤二 在项目greenbarb2c根目录下添加single.jsp，请读者结合图2-12-1完成编码任务。
步骤三 完成如上步骤，运行网站项目，测试商品模块的页面效果：商品搜索、商品详细信息和评价查看。
自我评价
任务十三 实现购物车模块的页面效果
学习目标
了解项目二中购物车模块要实现的页面效果。
根据购物车模块的页面效果完成网页的设计。
根据购物车模块的页面效果完成Servlet的设计。
根据购物车模块的页面效果完成自定义标签的设计。
任务描述
本次任务要实现的是购物车的页面效果：购物车登录、购物车退出、购物车资料的修改等。
任务分析与相关知识
结合项目二任务八对购物车模块的功能分析，可以分析出与购物车相关的页面逻辑如图2-13-1所示。
图2-13-1 购物车模块页面逻辑
1）用户在商品浏览页面single.jsp查看商品的细节之后，可以单击“我要购买”链接，向购物车中添加商品，但是这个动作有一个前提，就是当前的用户必须是登录之后的用户，其实很多其他的页面也都需要这个前提，如要查看历史订单、要查看自己的留言、要修改会员的资料，都需要先登录才能操作。所以在本次任务中将实现一个自定义标签＜mytags：checklogin/＞，专门为需要授权才能进入的页面提供一个用户身份判断的功能，页面使用了这个标签，将不再担心非法用户进入该页面了。
2）cart.jsp是购物车浏览页面，该页面的核心功能就是查看购物车中所购买的商品明细，并提供修改商品数量的功能。
3）addtocart和removefromcart是两个Servlet，用来处理购物车添加商品和删除商品的用户需求。
综上所述，本次任务要完成的文件见表2-13-1。
表2-13-1 任务清单
任务实施
步骤一 在项目greenbarb2c下的controllers包中添加一个Servlet类AddToCartServlet.java（别名和路径映射名都是addtocart），请读者结合图2-13-1完成编码任务。
步骤二 在项目greenbarb2c下的controllers包中添加一个Servlet类RemoveFromCartServlet.java（别名和路径映射名都是removefromcart），请读者结合图2-13-1完成编码任务。
步骤三 在项目greenbarb2c下的tags包下添加一个类CheckLoginTag.java，该类是自定义标签＜mytags：checklogin/＞的标签解析类。请读者模仿项目一任务十的相关内容完成编码任务。
步骤四 在项目greenbarb2c根目录下的WEB-INF文件夹下的mytags.tld文件中为＜mytags：checklogin/＞添加一个tag标签，请读者模仿项目一任务十的相关内容完成编码任务。
步骤五 在项目greenbarb2c根目录下添加cart.jsp，请读者结合图2-13-1完成编码任务。
步骤六 完成如上步骤，运行网站项目，测试购物车模块的页面效果：购买多件商品、查看购物车、删除所购买的商品。
自我评价
任务十四 实现订单模块的页面效果
学习目标
了解项目二中订单模块要实现的页面效果。
根据订单模块的页面效果完成网页的设计。
根据订单模块的页面效果完成Servlet的设计。
任务描述
本次任务要实现的是订单的页面效果：下订单、查看历史订单、写商品评论、看商品评论。
任务分析与相关知识
结合项目二任务五对订单模块的功能分析，可以分析出与订单相关的页面逻辑如图2-14-1所示。
图2-14-1 订单模块页面逻辑
1）viewhistory.jsp是历史订单查看页面，该页面可以分页查看当前登录用户的所有订单及其明细，在该页面用户可以针对购买过的商品进行评价。
2）vieworder.jsp是从购物车页面跳转过来的订单确认页面，用来让用户看到当前订单的明细，并填写送货地址。该页面的订单表单提交之后，下订单的请求被order这个Servlet处理，并根据处理的结果在msg.jsp页面显示提示信息。
3）newComment.jsp是用户评价商品的页面，该页面的评价表单提交之后，商品评价的请求被comment这个Servlet处理，并根据处理的结果在msg.jsp页面显示提示信息。
综上所述，本次任务要完成的文件见表2-14-1。
表2-14-1 任务清单
任务实施
步骤一 在项目greenbarb2c下的controllers包中添加一个Servlet类NewCommentServlet.java（别名和路径映射名都是comment），请读者结合图2-14-1完成编码任务。
步骤二 在项目greenbarb2c下的controllers包中添加一个Servlet类OrderServlet.java（别名和路径映射名都是order），请读者结合图2-14-1完成编码任务。
步骤三 在项目greenbarb2c根目录下添加viewhistory.jsp，请读者结合图2-14-1完成编码任务。
步骤四 在项目greenbarb2c根目录下添加newComment.jsp，请读者结合图2-14-1完成编码任务。
步骤五 在项目greenbarb2c根目录下添加vieworder.jsp，请读者结合图2-14-1完成编码任务。
步骤六 完成如上步骤，运行网站项目，测试订单模块的页面效果：下订单、查看历史订单、评价订单中的商品。
自我评价
任务十五 实现留言模块的页面效果
学习目标
了解项目二中留言模块要实现的页面效果。
根据留言模块的页面效果完成网页的设计。
根据留言模块的页面效果完成Servlet的设计。
任务描述
本次任务要实现的是留言的页面效果：写留言、查看留言。
任务分析与相关知识
结合项目二任务六对留言模块的功能分析，可以分析出与留言相关的页面逻辑如图2-15-1所示。
图2-15-1 留言模块页面逻辑
1）viewwords.jsp是留言查看页面，可以分页查看所有其他用户给当前用户的留言，如果用户单击留言标题，就会由一个Servlet类readwords来处理留言查看请求，readwords将会修改留言的未读状态，并回到viewwords.jsp查看留言内容。
2）newwords.jsp是写留言页面，留言表单提交后，由newwords这个Servlet来处理。
综上所述，本次任务要完成的文件见表2-15-1。
表2-15-1 任务清单
任务实施
步骤一 在项目greenbarb2c下的controllers包中添加一个Servlet类NewWordsServlet.java（别名和路径映射名都是newwords），请读者结合图2-15-1完成编码任务。
步骤二 在项目greenbarb2c下的controllers包中添加一个Servlet类ReadWrodsServlet.java（别名和路径映射名都是readwords），请读者结合图2-15-1完成编码任务。
步骤三 在项目greenbarb2c根目录下添加newwords.jsp，请读者结合图2-15-1完成编码任务。
步骤四 在项目greenbarb2c根目录下添加viewwords.jsp，请读者结合图2-15-1完成编码任务。
步骤五 完成如上步骤，运行网站项目，测试留言模块的页面效果：写留言、查看留言、查看留言状态的变化。
自我评价
任务十六 实现论坛模块的页面效果
学习目标
了解项目二中论坛模块要实现的页面效果。
根据论坛模块的页面效果完成网页的设计。
根据论坛模块的页面效果完成Servlet的设计。
任务描述
本次任务要实现的是论坛的页面效果：看帖子、发帖子、回复帖子。
任务分析与相关知识
结合项目二任务七对论坛模块的功能分析，可以分析出与论坛相关的页面逻辑如图2-16-1所示。
图2-16-1 论坛模块页面逻辑
1）bbs.jsp是论坛首页，可以分类、分页查看帖子基本信息列表。单击帖子的标题，将会链接到一个Servlet类viewarticle。viewarticle将会修改帖子的点击率，并跳转到viewarticle.jsp页面。
2）viewarticle.jsp是帖子浏览页面，可以看到主帖内容及其全部回复，也可以在该页面直接回复帖子，回复的请求由一个Servlet类newarticle来处理。
3）newarticle.jsp是发新帖页面，发帖的请求由newarticle来处理。
综上所述，本次任务要完成的文件见表2-16-1。
表2-16-1 任务清单
任务实施
步骤一 在项目greenbarb2c下的controllers包中添加一个Servlet类ViewArticleServlet.java（别名和路径映射名都是viewarticle），请读者结合图2-16-1完成编码任务。
步骤二 在项目greenbarb2c下的controllers包中添加一个Servlet类NewArticleServlet.java（别名和路径映射名都是newarticle），请读者结合图2-16-1完成编码任务。
步骤三 在项目greenbarb2c根目录下添加bbs.jsp，请读者结合图2-16-1完成编码任务。
步骤四 在项目greenbarb2c根目录下添加viewarticle.jsp，请读者结合图2-16-1完成编码任务。
步骤五 在项目greenbarb2c根目录下添加newarticle.jsp，请读者结合图2-16-1完成编码任务。
步骤六 完成如上步骤，运行网站项目，测试论坛模块的页面效果：分类看帖子、观察帖子点击率和回复率的变化、回复旧贴、发新帖。
自我评价
任务十七 实现游记模块的页面效果
学习目标
了解项目二中游记模块要实现的页面效果。
根据游记模块的页面效果完成网页的设计。
根据游记模块的页面效果完成Servlet的设计。
根据游记模块的页面效果完成＜mytags：travelbytype/＞的设计。
任务描述
本次任务要实现的是游记的页面效果：游记搜索、游记查看、发游记。
任务分析与相关知识
结合项目二任务九对游记模块的功能分析，可以分析出与游记相关的页面逻辑如图2-17-1所示。
图2-17-1 游记模块页面逻辑
1）travel.jsp是游记首页，该页面将使用一个自定义标签＜mytags：travelbytype/＞，分类显示固定条数的最新游记，该页面可以通过提交游记搜索表单，或是单击“更多”超链接，跳转到页面travellist.jsp。
2）travellist.jsp是游记搜索结果页面，用来分页浏览游记搜索的结果，单击游记的标题，可以进入viewtravel.jsp页面。
3）viewtravel.jsp是单篇游记浏览页面。
4）newtravel.jsp是发布新游记的页面，该页面的游记发布表单由Servlet类newtravel处理。
综上所述，本次任务要完成的文件如表2-17-1所示。
表2-17-1 任务清单
任务实施
步骤一 在项目greenbarb2c下的controllers包中添加一个Servlet类NewTravelServlet.java（别名和路径映射名都是newtravel），请读者结合图2-17-1完成编码任务。
步骤二 在项目greenbarb2c下的tags包下添加一个类TravelByTypeTag.java，该类是自定义标签＜mytags：travelbytype/＞的标签解析类，主要实现图2-1-16（项目二任务一）中分类显示游记区域的功能。请读者结合游记页面的数据显示需求完成编码任务。
步骤三 在项目greenbarb2c根目录下的WEB-INF文件夹下的mytags.tld文件中添加一个tag标签，用于将自定义标签与标签解析类对应起来（注意添加的位置要与其他的tag标签平行）。请读者模仿项目一任务十的相关内容完成编码任务。
步骤四 在项目greenbarb2c根目录下添加travel.jsp，请读者结合图2-17-1完成编码任务。
步骤五 在项目greenbarb2c根目录下添加travellist.jsp，请读者结合图2-17-1完成编码任务。
步骤六 在项目greenbarb2c根目录下添加viewtravel.jsp，请读者结合图2-17-1完成编码任务。
步骤七 在项目greenbarb2c根目录下添加newtravel.jsp，请读者结合图2-17-1完成编码任务。
步骤八 完成如上步骤，运行网站项目，测试游记模块的页面效果：分类查看游记、搜索游记、查看单篇游记、给游记作者留言、发表新游记。
自我评价
