Java学习11.20
javaweb数据库——普查系统（第二步）
这篇博客接上一篇博客，主要是前端页面jsp文件
1.主功能页面——index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>人口普查系统</title>
<style type="text/css">
a{font-size:30px}
</style>
</head>
<body><%
Object message =request.getAttribute("message");
if(message!=null&&!"".equals(message)){
%>
<script type="text/javascript">
alert("<%=request.getAttribute("message")%>");
</script>
<%}%>
<div align="center" font-size="30px">
<h1>人口普查系统</h1>
<div>
<a href="insert.jsp">信息登记</a>
</div>
<div>
<a href="servlet?method=list">信息修改</a>
</div>
<div>
<a href="servlet?method=list">信息删除</a>
</div>
<div>
<a href="servlet?method=list">浏览信息</a>
</div>
<div>
<a href="servlet?method=list">查询信息</a>
</div>
</div>
</body>
</html>
2.增加
insert.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加</title>
</head>
<body>
<%
Object message = request.getAttribute("message");
if (message != null && !"".equals(message)) {
%>
<script type="text/javascript">
alert("<%=request.getAttribute("message")%>"); //弹出对话框
</script>
<%
}
%>
<div align="center">
<h1>添加信息</h1>
<a href="index.jsp">返回主页</a>
<form action="servlet?method=insert" method="post">
<table id="addTable" class="table table-bordered ">
<tr class="text-center row">
<tr>
<td class="col-sm-2">
id
</td>
<td class="col-sm-4">
<input type="text" class="form-control" name="id" id="id" >
</td>
<tr class="text-center row">
<td class="col-sm-2">
户别
</td>
<td class="col-sm-4">
<input type="radio" name="hubie" id="hubie" value="家庭户">家庭户
<input type="radio" name="hubie" id="hubie" value="集体户">集体户
</td></tr>
<tr>
<td class="col-sm-2">
住房类型
</td>
<td class="col-sm-4">
<input type="radio" name="livetype" id="livetype" value="家庭住宅">家庭住宅
<input type="radio" name="livetype" id="livetype" value="集体住所">集体住所
</td><tr><td> </td><td>
<input type="radio" name="livetype" id="livetype" value="工作地住所">工作地住所
<input type="radio" name="livetype" id="livetype" value="其他住宅">其他住宅
<input type="radio" name="livetype" id="livetype" value="无住宅">无住宅
</td>
</tr>
<tr class="text-center row">
<td class="col-sm-2">
本户现住房面积:
</td>
<td class="col-sm-4">
<input type="text" class="form-control" name="area" id="area" placeholder="请输入数字(平方米)">
</td>
</tr>
<tr>
<td class="col-sm-2 ">
本户现住房间数:
</td>
<td class="col-sm-4">
<input type="text" class="form-control" name="roomnum" id="roomnum" placeholder="请输入数字(间)">
</td>
</tr>
<tr class="text-center row">
<td class="col-sm-2">
户主姓名
</td>
<td class="col-sm-4">
<input type="text" class="form-control" name="name" id="name" placeholder="请输入户主姓名">
</td>
</tr>
<tr class="text-center row">
<td class="col-sm-2 ">
身份证号码
</td>
<td class="col-sm-4">
<input type="text" class="form-control" name="idcard" id="idcard" placeholder="请输入身份证号码">
</td>
</tr>
<tr class="text-center row">
<td class="col-sm-2">
性别
</td>
<td class="col-sm-4">
<input type="radio" name="sex" id="sex" value="男">男
<input type="radio" name="sex" id="sex" value="女">女
</td>
</tr>
<tr class="text-center row">
<td class="col-sm-2">
民族
</td>
<td class="col-sm-4">
<input type="text" class="form-control" name="nation" id="nation" placeholder="民族">
</td>
</tr>
<tr class="text-center row">
<td>
受教育程度
</td>
<td colspan="3">
<select class="form-control" id="education" name="education">
<option value="研究生">研究生</option>
<option value="大学本科">大学本科</option>
<option value="大学专科">大学专科</option>
<option value="高中">高中</option>
<option value="初中">初中</option>
<option value="小学">小学</option>
<option value="未上过学">未上过学</option>
</select>
</td>
</tr>
</table>
<input type="submit" value="添加" onclick= "return check()" />
</form>
</div>
</body>
<script type="text/javascript">
function check() //封装一个<body>中做成点击事件的函数
{
if(document.getElementById('area').value=='') {
alert('现住房面积不能为空！');
document.getElementById('area').focus();
return false;
}
else if(document.getElementById('area').value%1!=0){
alert('住房面积不是整数！');
return false;
}
if(document.getElementById('roomnum').value=='') {
alert('现住房间数不能为空！');
document.getElementById('roomnum').focus();
return false;
}
else if(document.getElementById('roomnum').value%1!=0){
alert('现住房间数不是整数！');
return false;
}
if(document.getElementById('name').value=='') {
alert('户主姓名不能为空！');
document.getElementById('name').focus();
return false;
}
if(document.getElementById('idcard').value.length!=18) {
alert('身份证号码位数错误！');
document.getElementById('idcard').focus();
return false;
}
if(document.getElementById('nation').value=='') {
alert('民族不能为空！');
document.getElementById('nation').focus();
return false;
}
}
</script>
</html>
3.浏览页面
list.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
Object message = request.getAttribute("message");
Object grade_list = request.getAttribute("grade_list");
if(message!=null && !"".equals(message)){
%>
<script type="text/javascript">
alert("<%=request.getAttribute("message")%>");
</script>
<%} %>
<div align="center">
<h1 >信息列表</h1>
<h1>
<form action="searchServlet" method="post">
<select name="cxfs">
<option id="cxfs"value ="1">姓名</option>
<option id="cxfs" value ="2">性别</option>
<option id="cxfs"value="3">受教育程度</option>
<option id="cxfs"value="4" >民族</option>
</select>
<input type="text" id="value" name="value" placeholder="请输入条件">
<input type="submit" id="select" name="select" value="查询" />
</form>
</h1>
<a href="index.jsp">返回主页</a>
<table >
<tr>
<td>id</td>
<td>户别</td>
<td>住房类型</td>
<td>面积</td>
<td>数目</td>
<td>姓名</td>
<td>身份证</td>
<td>性别</td>
<td>民族</td>
<td>教育</td>
<td align="center" colspan="2">操作</td>
</tr>
<c:forEach items="${list}" var="item">
<tr>
<td>${item.id}</td>
<td>${item.hubie}</td>
<td>${item.livetype}</td>
<td>${item.area}</td>
<td>${item.roomnum}</td>
<td>${item.name}</td>
<td>${item.idcard}</td>
<td>${item.sex}</td>
<td>${item.nation}</td>
<td>${item.education}</td>
<td><a href="update.jsp?id=${item.id}&hubie=${item.hubie}&livetype=${item.livetype}&area=${item.area}&roomnum=${item.roomnum}&name=${item.name}&idcard=${item.idcard}&sex=${item.sex}&nation=${item.nation}&education=${item.education}">修改</a></td>
<td><a href="servlet?method=delete&id=${item.id}">删除</a></td>
</tr>
</c:forEach>
</table>
</div>
</body>
</html>
4.修改功能
update.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>修改</title>
</head>
<body>
<div align="center">
<h1>修改</h1>
<a href="index.jsp">返回主页</a>
<form action="servlet?method=update" method="post">
<div>
id:<input type="text" id="id" name="id" readonly="true"
value="${param.id}" />
</div>
<div>
户别： <input type="radio" name="hubie" id="hubie" value="家庭户">家庭户
<input type="radio" name="hubie" id="hubie" value="集体户">集体户
</div>
<div>
住房类型:<input type="text" id="livetype" name="livetype"
value="${param.livetype}" />
</div>
<div>
面积：<input type="text" id="area" name="area"
value="${param.area}" />
</div>
<div>
数目：<input type="text" id="roomnum" name="roomnum"
value="${param.roomnum}" />
</div>
<div>
姓名：<input type="text" id="name" name="name"
value="${param.name}" />
</div>
<div>
身份证：<input type="text" id="idcard" name="idcard"
value="${param.idcard}" />
</div>
<div>
性别：<input type="radio" id="sex" name=sex value="男" />男
<input type="radio" id="sex" name="sex" value="女" />女
</div>
<div>
民族：<input type="text" id="nation" name="nation"
value="${param.nation}" />
</div>
<div>
教育：<select class="form-control" id="education" name="education">
<option value="研究生">研究生</option>
<option value="大学本科">大学本科</option>
<option value="大学专科">大学专科</option>
<option value="高中">高中</option>
<option value="初中">初中</option>
<option value="小学">小学</option>
<option value="未上过学">未上过学</option>
</select>
</div>
<div>
<input type="submit" value="修改" onclick= "return check()" />
</div>
</form>
</div>
</body>
<script type="text/javascript">
function check() //封装一个<body>中做成点击事件的函数
{
if(document.getElementById('area').value=='') {
alert('现住房面积不能为空！');
document.getElementById('area').focus();
isInterger(area);
return false;
}
else if(document.getElementById('area').value%1!=0){
alert('住房面积不是整数！');
return false;
}
if(document.getElementById('roomnum').value=='') {
alert('现住房间数不能为空！');
document.getElementById('roomnum').focus();
return false;
}
else if(document.getElementById('roomnum').value%1!=0){
alert('现住房间数不是整数！');
return false;
}
if(document.getElementById('idcard').value.length!=18) {
alert('身份证号码位数错误！');
document.getElementById('idcard').focus();
return false;
}
}
</script>
</html>
