任务一网站项目分析与总体设计

2025年09月21日

版权

任务一网站项目分析与总体设计

学习目标

了解绿吧企业用品公司企业门户网站的需求。

熟悉网站开发的基本流程。

熟悉企业门户网站的基本模块。

能为该网站建立网站结构图。

能设计出该网站的界面草图。

能设计该网站的数据库结构。

项目描述

绿吧旅游用品公司是一家专营户外旅游、休闲产品的企业，该公司提供的主要产品有冲锋衣裤、速干衣、polo衫、徒步鞋和溯溪鞋；登山包、徒步包和休闲包；帐篷、睡袋、便携式餐具和折叠桌椅等。

面对电子商务的蓬勃发展，该企业结合自身产品的特点和资源，制定了相关的发展战略。其中非常重要的一个举措，就是建立一个企业门户网站。在网络时代，企业的网站就是网络中的名片，公司希望借助这个网络名片，提升企业的知名度，宣传企业的产品，与用户之间建立更加密切的互动关系。

任务描述

本次任务，需要充分了解企业的建站需求，能合理地设置网站的功能模块，绘制网站结构图、界面草图，并在此基础上设计相关的数据库系统。

任务分析与相关知识

1.网站开发技术的选择

目前比较流行的网站开发技术有PHP、JSP和.NET。表1-1-1对这三种技术进行了比较。

表1-1-1 技术路线比较

本项目选择JSP技术实现网页的动态功能，选择MySQL作为后台的数据库管理系统，需要完成如下软件的安装和环境的配置：

1）MyEclipse（集成Web服务器）。可以到网络中搜索最新的版本，下载之后，按照安装向导的提示，全部采用默认配置，直接安装即可。本书中使用的是MyEclipse7.5，目前来看，最新的版本与本书使用的版本的基本功能和界面差别不是特别大，学习者可以适应。

2）MySQL数据库服务器。到MySQL的官方网站http：//www.mysql.com/downloads/，选择“MySQL Community Server”版本进行下载即可。

下载之后，直接安装，出现如图1-1-1所示的安装向导界面。

连续单击几次“Next”按钮之后，就可以完成安装。在安装过程中大部分的页面都可以采用默认设置，其中密码设置页面如图1-1-2所示，MySQL的默认系统用户是root。

图1-1-1 安装向导界面

图1-1-2 密码设置界面

这里需要特别说明的是，在安装过程中如果在如图1-1-3所示的界面中选择了“Lanch the MySQL Server automatically”，就表示每次开机之后，都会自动启动MySQL服务器，当然也可以在“管理工具”的“服务”项中手动启动、停止或重启该数据库服务器，特别是当数据库运行出现异常，可以按照如图1-1-4与图1-1-5所示进入MySQL的服务管理界面，对该服务进行手工管理。

图1-1-3 服务启动设置界面

图1-1-4 管理工具界面

图1-1-5 服务管理界面

3）访问MySQL数据库的JDBCAPI。可以在MySQL的官方网站下载JDBC的驱动，该文件不用安装，只要解压缩之后就可以用了。

2.网站开发的流程

网站开发最重要的就是清晰地了解用户的真实需求与定位，所以目前的网站开发流程如图1-1-6所示。

图1-1-6 网站开发基本流程

第一步：与需求方的沟通。与网站的使用者、网站需求提出者召开多方会议，充分、完整地了解建站的目的、网站的定位与功能上的需求。

第二步：建立网站原型。根据网站的需求，绘制网站的基本架构图（网站的原型），即界面草图。网站原型能用非常直观的方式反映出网站的需求是否满足。这个环节可以与需求方进行更具体的沟通与交流，从而获取最贴近用户需求的网站原型。一旦网站原型确定下来，网站的开发工作就水到渠成了。

第三步：网站美工设计。结合原型的设计，完成网页美工设计。

第四步：网站前台设计。将网站美工设计转换为HTML静态页面。

第五步：网站后台开发。采用适当的后台开发技术，如JSP、PHP和.NET来实现网站的所有功能。

3.JSP网站开发技术简介

JSP（Java Server Pages）是由Sun Microsystems公司倡导的，许多公司参与共同创建的一种使软件开发者可以响应客户端请求，从而动态生成HTML、XML或其他格式文档的Web网页的技术标准。JSP技术以Java语言作为脚本语言，JSP网页为整个服务器端的Java库单元提供了一个接口来服务于HTTP的应用程序。

JSP使Java代码和特定的预定义动作可以嵌入到静态页面中。JSP句法增加了被称为JSP动作的XML标签，它们用来调用内建功能。另外，可以创建JSP标签库，然后像使用标准HTML或XML标签一样来使用它们。标签库提供了一种和平台无关的扩展服务器性能的方法。

JSP编译器可以把JSP编译成Java代码写的Servlet，然后再由Java编译器编译成机器码，也可以直接编译成二进制码。

简单地说，JSP的主要语法包含如下内容：

1）脚本语法。一个JSP页面最简单的结构如下所示。

其中，＜%...%＞是JSP脚本最显著的外形特征，JSP的注释、指令和脚本元素都被包含在其中。

2）Servlet应用。Servlet是位于Web服务器端专门用来处理用户请求的小应用程序。它从本质上看就是一个具有特殊功能的类，它的实现需要遵循一定的规范。

3）Web容器提供的内置对象。当使用JSP脚本或者是Servlet小应用程序处理Web请求的时候，需要能够和用户进行一些信息的交互，而JSP项目是在Web服务器提供的Web容器中运行的，这个Web容器提供一系列默认对象便于JSP记录和处理网页之间传递的信息。常用的内置对象有request、response、session、out、pageContext等。

4）组件技术。由于Java本身就是面向对象的程序设计语言，对于JSP来说，它的组件就是Java类，所以JSP能使用各种具有特定功能的类来轻松实现功能的扩展，例如JavaBean就是一种用来实现功能重用的组件技术。一个JavaBean通常由属性方法、业务方法构成。偏重描述实体属性的JavaBean是数据模型类，偏重描述实体的业务行为的JavaBean就是业务逻辑操作类。

5）标签技术。网页是由标签构成的。我们熟悉的是HTML的标签，例如＜b＞…＜/b＞、＜body＞…＜/body＞、＜br/＞等。而JSP标签技术是在HTML标签的基础上扩充更多的与服务器可以交互的标签。JSP支持两种扩展标签：一种是由Sun公司开发的被Web服务器普遍支持的标准标签；另一种是由用户自己开发和定义的用于特定项目的用户自定义标签。

任务实施

1.确定绿吧企业门户网站的基本模块

该网站的模块如图1-1-7所示。

图1-1-7 网站的模块分析

结合绿吧企业网站的定位，可以确定该网站必须具备四大模块及首页应该包含的核心功能，见表1-1-2。

表1-1-2 网站的基本模块及其功能

2.绘制网站的基本结构图

结合网站的模块分析，可以确定网站的基本结构如图1-1-8和图1-1-9所示。

图1-1-9 网站后台的结构图

3.设计网站的原型

结合网站结构设计及功能定位，可以绘制整个网站的页面原型，利用原型可以清晰地展示网站的结构、流程，便于企业需求方全面了解网站的设计思路，也能尽早地暴露设计的缺陷和不足，便于网站设计人员在早期就能按照新的需求修改和改进网站的设计。

原型设计工具有很多种，例如Word、Visio、Photoshop和Powerpoint等，但是目前比较流行的工具是Axure。该工具的试用版本可以直接从网上下载。本书的网页原型就是使用该工具绘制的。

1）前台首页原型（图1-1-10）。首页提供了到“关于我们”、“产品中心”、“新闻中心”和“留言中心”四个模块的链接，在首页的主要区域的左边是公司最新产品及重点推荐的产品展示区域，右边是公司最新发布的新闻。

图1-1-10 前台首页原型

单击首页展示的产品照片，可以直接进入单个商品的展示区域，单击新闻标题可以进入单篇新闻的浏览页面，单击产品显示区域的“更多”，进入产品中心，单击新闻区域的“更多”，进入新闻中心。

2）“关于我们”模块原型（图1-1-11）。

图1-1-11 二级页面“关于我们”原型

3）“产品中心”模块原型（图1-1-12）。在二级页面“产品中心”，单击产品的类目，可以浏览到各种类目下的产品列表，单击产品的图片或者是产品的描述，可以进入三级页面“产品介绍”，如图1-1-13所示。

图1-1-12 二级页面“产品中心”原型

图1-1-13 三级页面“产品介绍”原型

4）“新闻中心”模块原型（图1-1-14）。在二级页面“新闻中心”，单击新闻列表下的分页图标，可以分页浏览到新闻信息。在每一页，单击新闻的标题，可以进入三级页面“新闻查看”，如图1-1-15所示。

5）“留言中心”模块原型（图1-1-16）。在留言中心，浏览者输入标题，姓名，电子邮件和留言内容之后，单击“提交”按钮就可以完成留言。单击“更多”，进入留言列表，如图1-1-17所示。

在留言列表，可以单击分页符号实现留言的分页浏览，单击标题，可以进入单个留言的浏览页面，如图1-1-18所示。

图1-1-14 二级页面“新闻中心”原型

图1-1-15 三级页面“新闻查看”原型

图1-1-16 二级页面“留言中心”原型

图1-1-17 三级页面“留言列表”原型

图1-1-18 四级页面“留言浏览”原型

6）“后台管理首页”原型（图1-1-19）。后台管理的默认页面是“发布新商品”，该页面的左边是各种管理页面的导航栏。单击相应的菜单可以进入二级管理界面。

图1-1-19 后台管理首页原型

7）“商品推荐与维护”页面原型（图1-1-20）。单击商品列表后面的修改，可以进入到“修改商品信息”的三级页面，如图1-1-21所示。

图1-1-20 二级页面“商品推荐与维护”原型

图1-1-21 三级页面“修改商品信息”原型

8）“发布新闻”页面原型（图1-1-22）。

9）“新闻维护”页面原型（图1-1-23）。

图1-1-22 二级页面“发布新闻”原型

图1-1-23 二级页面“新闻维护”原型

10）“留言回复”页面原型（图1-1-24）。单击“未回复留言列表”中的留言标题，可以进入三级页面“回复留言”，如图1-1-25所示。

图1-1-24 二级页面“未回复留言列表”原型

图1-1-25 三级页面“回复留言”原型

11）“email列表”页面原型（图1-1-26）。

图1-1-26 二级页面“用户email列表”原型

4.设计网站后台数据库的基本结构

根据网站原型，可以了解网站需要存储哪些数据。例如，观察图1-1-10，发现首页中要展示商品的图片和描述，那么就可以提炼出“商品”这个实体有图片、描述属性；再观察图1-1-12和图1-1-13，可以了解“商品”这个实体还有类别、名称、价格等属性，另外根据常识，为了区分不同的商品，还需要为每一个商品分配一个编号，以此类推，根据原型的设计及对整个网站业务需求的分析，可以设计出支持该网站的数据库结构图，如图1-1-27所示。