第七次人口普查征集系统是应第七次人口普查所做出的人口信息登记管理系统，其主要功能包括人口信息登记、人口信息查询、人口信息删除、人口信息修改、人口信息浏览等五个功能。其主要组成技术有jsp、HTML、servlet、数据库。
前端成果展示：预期结果展示
前端界面代码：使用的frame 框架组合的文件形成前端的界面布局，代码如下：
1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncoding="utf-8"%> 3 <!doctype html> 4 <html lang="en"> 5 <head> 6 <meta charset="UTF-8"> 7 <meta name="viewport" 8 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 9 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 10 <title></title> 11 <!--框架样式--> 12 <frameset rows="60px,*" frameboder="no" border="1"> 13 <frame src="top.jsp" frameborder="no" noresize="noresize" > 14 <frameset cols="200px,*" frameboder="no" border="1"> 15 <frame src="menu.jsp" frameborder="no" noresize="noresize" > 16 <frame noresize="noresize" src="renkoudengji.jsp" name="right" frameborder="0"> 17 </frameset> 18 </frameset> 19 </head> 20 </html>
其中的组合文件代码如下：
top.jsp文件源代码：
1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncoding="utf-8"%> 3 <!DOCTYPE html> 4 <html> 5 <head> 6 <meta charset="utf-8"> 7 <title>Insert title here</title> 8 9 <link rel="stylesheet" href="layui/css/layui.css" media="all"> 10 <script src="layui/layui.js" type="text/javascript"></script> 11 <script src="jquery/jquery-1.9.1.min.js" type="text/javascript"></script> 12 13 14 </head> 15 <body> 16 <ul class="layui-nav" > 17 <li class="layui-nav-item"> 18 <label>第七次全国人口普查系统</label> 19 </li> 20 <li class="layui-nav-item"> 21 <a href="">个人中心</a> 22 </li> 23 <li class="layui-nav-item"> 24 <a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a> 25 <dl class="layui-nav-child"> 26 <dd><a href="javascript:;">修改信息</a></dd> 27 <dd><a href="javascript:;">安全管理</a></dd> 28 <dd><a href="javascript:;">退了</a></dd> 29 </dl> 30 </li> 31 </ul> 32 33 <script> 34 //注意：导航 依赖 element 模块，否则无法进行功能性操作 35 layui.use('element', function(){ 36 var element = layui.element; 37 38 //… 39 }); 40 </script> 41 </body> 42 </html>
menu.jsp文件源代码：
1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncoding="utf-8"%> 3 <!DOCTYPE html> 4 <html> 5 <head> 6 <meta charset="utf-8"> 7 <title>Insert title here</title> 8 9 <link rel="stylesheet" href="layui/css/layui.css" media="all"> 10 <script src="layui/layui.js" type="text/javascript"></script> 11 <script src="jquery/jquery-1.9.1.min.js" type="text/javascript"></script> 12 13 14 </head> 15 <body bgcolor="#393D49"> 16 <ul class="layui-nav layui-nav-tree" lay-filter="test"> 17 <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> --> 18 <li class="layui-nav-item"><a href="renkoudengji.jsp" target="right">人口信息登记</a></li> 19 <li class="layui-nav-item"><a href="renkouchaxun.jsp" target="right">人口信息查询</a></li> 20 <li class="layui-nav-item"><a href="renkoushanchu.jsp" target="right">人口信息删除</a></li> 21 <li class="layui-nav-item"><a href="renkouxiugai.jsp" target="right">人口信息修改</a></li> 22 <li class="layui-nav-item"><a href="PeopleLiulanServlet?method=doPost" target="right">人口信息浏览</a></li> 23 </ul> 24 </body> 25 </html>
主体采用的是layui框架，该框架使用较为简单便捷，故很适合做前端界面用。该布局设计仅供参考，可以自行修改设置。