购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

1.6 前台页面设计

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

1.6.1 前台页面概述

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

图1.7 前台首页运行效果

1.6.2 前台页面技术分析

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

图1.8 IndexTemp.jsp页面布局

本系统中,对前台用户所有请求的响应都通过该框架页面进行显示。在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文件。 JJYUdGD4ZDN7DugN8DqqFErS/OVLCKCR7bnqy42YR9p26/Q2IKDVm9hB6iNKTHGo

点击中间区域
呼出菜单
上一章
目录
下一章
×