上一篇讲解了数据库链接的实现,本篇将讲解查询系统的搭建以及Demo实现。
作为一个较为简单的查询系统,结构也十分简洁。整个系统运行流程如下图所述。
分析上述流程,可以将系统划分为三部分:输入、查询、表格绘制。
输入的表单由输入部分提交至查询部分有若干种实现方法,最为简单的一种即为在form标签中加入action属性,值设置为查询部分所在的页面,若输入与查询处于同一个页面,则不会出现页面跳转,反之则会出现页面跳转。
目前查询系统基本都为不跳转形式,且输入部分极为简单,本项目中将输入部分的代码嵌入查询及绘制页面,使其共存在同一jsp文件中,action值为本页面,即将表单提交到本页(本项目中为search.jsp),如下所示。
<form action="search.jsp" method="post" name="form2" id="form2">
<center>
<input type="text" style="width:150px" name="ip" id="ip" placeholder="请输入IP地址的前三段"><br />
<button id= 'buttom' type="submit">提交查询</button>
</center>
</form>
功能部分实现完成后,浏览一下界面发现比较简陋,若仅限本人使用,我倒不是很在意,不过这个查询系统是供给一个项目使用的,所以还需要做一定的美化。
本例中,UI使用HTML提供的框架功能,将网页分为上中下三个子页面。中间的页面则为功能部分的search.jsp,上下分别为head.jsp以及foot.jsp,从单位过往项目中提取出页头以及页脚子页面。
框架部分代码如下
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" href="styles/global.css" rel="stylesheet" />
<title>IP信息查询平台</title>
</head>
<frameset rows="114,*,30" cols="*" framespacing="0" frameborder="no" border="0">
<frame src="head.jsp" name="topFrame" scrolling="no" noresize="noresize" id="topFrame" title="页头" />
<frameset rows="*" framespacing="0" frameborder="no" border="0" id="middlezone">
<frame src="search.jsp" name="search" noresize="noresize" id="search" title="查询界面" scrolling="no" />
</frameset>
<frame src="foot.jsp" name="bottomFrame" scrolling="no" noresize="noresize" id="bottomFrame" title="页脚" />
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
至此,整个系统搭建完成,共计4个页面,分别为前端显示页面mainFrame.jsp,页头子页面head.jsp,查询页面search.jsp,页脚子页面foot.jsp。
demo使用流程如下图所示。
1. 初始界面
2. 输入表单
3. 输出结果
至此,整个项目的开发过程已全部记录完毕。很简单的一个系统,可能对于计算机科班的小伙伴来说也就是几个小时的工作量,但对于我这个业余的爱好者,每步都充满着艰辛,从最开始在本机上搭建Tomcat失败,到自以为调教好页面然而一启动Tomcat就花式报错,再到改表格的标签参数发现似乎并没有什么暖用,一路走来还是蛮多感慨。作为目前手上较为完整的项目,它锻炼了我多方面的能力,找开源代码、教程的能力,调bug的能力,以及写测试程序的能力。