前台页面设计使用的数据表：tb_user。

1.6.1 前台页面概述

页面是用户与程序进行交互的接口，用户可从页面中查看程序显示给用户的信息，程序可从页面中获取用户输入的数据，所以在进行页面的设计时，不仅要从程序开发的角度分析，还要考虑到页面的美观及布局。本系统的前台页面就充分考虑到了这些内容，因此，本系统中所有的前台页面都采用一种页面框架。该页面框架采用二分栏结构，分为4个区域，即页头、侧栏、页尾和内容显示区。都市供求信息网的前台首页运行效果如图1.7所示。

1.6.2 前台页面技术分析

实现前台页面框架的JSP文件为IndexTemp.jsp，该页面的布局如图1.8所示。

本系统中，对前台用户所有请求的响应都通过该框架页面进行显示。在IndexTemp.jsp文件中主要采用include动作和include指令来包含各区域所对应的JSP文件。因为页头、页尾和侧栏是不变的，所以可以在框架页面中事先指定；而对于内容显示区中的内容则应根据用户的操作来显示，所以该区域要显示的页面是动态改变的，可通过一个存储在request范围内的属性值指定。例如，对用户访问网站首页的请求，可在处理该请求的类中向request中注册一个属性，并设置其值为default.jsp，这样当响应返回到框架页面后，可在页面中获取该值，根据该值加载相应页面；若用户触发了“发布信息”请求，则设置该属性值为addInfo.jsp，此时在IndexTemp.jsp中就会显示信息发布的页面。

1.6.3 前台页面实现过程

根据以上的页面概述及技术分析，需要分别创建实现各区域的JSP文件，如实现页头的top.jsp、实现侧栏的left.jsp、页尾文件end.jsp和首页中需要在内容显示区显示的default.jsp等JSP文件。下面主要介绍框架页面IndexTemp.jsp的实现。

以下为IndexTemp.jsp文件中的Scriptlet脚本程序：

代码位置：光盘 \MR\01\WebRoot\view\IndexTemp.jsp

关键代码解析

❶获取上下文路径，获取的值以“/”开头，然后加上应用名称。

❷生成一个路径，该路径将被用于<base>HTML标识中设置当前路径。其中getScheme()方法用来获取网络协议，getServerName()方法用来获取服务器名称，getServerPort()方法用来获取服务器端口。所以该行代码最终会生成类似“http://localhost:8080/CityInfo/”的路径。

❸获取要在内容显示区中显示的文件的路径，默认为defaulst.jsp，即与IndexTemp.jsp处于同一目录下的default.jsp文件。mainPage变量将被作为<jsp:include>动作标识的属性值。

以下为IndexTemp.jsp文件中实现页面显示的代码：

代码位置：光盘 \MR\01\WebRoot\view\IndexTemp.jsp

关键代码解析

❶通过<base>HTML标识设置当前路径，这样，在该页面中的所有的URI（包括在该页面中通过include指令与动作标识包含的其他页面中的URI）都是相对于basePath指定的路径。

❷通过<link>HTML标识包含外部CSS样式文件，其中href属性用来指定文件位置。

❸通过include动作标识包含需要在内容显示区显示的JSP文件。 tJh8/FJiNqhy3vDb6vAeZ05twXtg2yPS0e0aZDL7MvM7E5kPQWjqWENJqs6hdOZu