Java的web项⽬练习，展⽰数据库中所有联系⼈的信息，并实现
添加，删除和修改功能
整体思路: 在项⽬⾸页写⼀个超链接，连接地址为⼀个servlet(ServletDome2)-->(通过service层和dao层到数据库中查询并获取联系⼈表中的所有联系⼈的所有信息)，将获取到的信息通过重定向，传给⼀个展⽰所有联系⼈信息的jsp(show.jsp)-->(展⽰所有联系⼈的信息，并且每个联系⼈后⾯都有两个操作超链接按钮(修改和删除)，页⾯下⾯还有⼀个添加联系⼈的超链接按钮)，如果⽤户点击了修改按钮(此按钮指向⼀个可以查询到该联系⼈所有供修改信息的servlet(ServletSelect1))-->先查询到该联系⼈的信息，并将信息传给供⽤户修改联系⼈信息的
jsp(update.jsp)以供⽤户查看并修改联系⼈信息(该jsp展⽰页⾯中的联系⼈信息如果被修改则数据库中的信息也将随之修改否则就还是之前的信息，此页⾯有三个按钮可以分别提交，重置和返回).当⽤户在该页⾯修改完成点提交按钮后，会弹出确认提⽰框，再次点击确认后，会将修改内容传给可以修改信息的servlet(ServletUpdate)，再接收传来的数据封装到对象中，并调⽤service层对象的修改⽅法将对象作为⽅法参数传⼊，然后service层再传给dao层，在dao层进⾏对数据库的修改操作并将结果返回.-->在ServletUpdate中获取修改后返回的结果进⾏判断，并在页⾯给出相应的提⽰信息.
删除的操作步骤和修改的⼏乎⼀样.添加的步骤相对⽐较简单了.
注意：联系⼈的id为主键且⾃增不可以被修改.联系⼈名字不可以被修改.在删除操作时页⾯显⽰的信息都为只读.
⾸页超链接的代码略...
jsp的相应参考代码为:
显⽰信息的:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="java.sun/jsp/jstl/core" %><%--jsp的指令tagLib引⼊--%>
<!DOCTYPE html>
<!-- ⽹页使⽤的语⾔ -->
<html lang="zh-CN">
<head>
<!-- 指定字符集 -->
<meta charset="utf-8">
<!-- 使⽤Edge最新的浏览器的渲染⽅式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- viewport视⼝：⽹页可以根据设置的宽度⾃动进⾏适配，在浏览器的内部虚拟⼀个容器，容器的宽度与设备的宽度相同。
width: 默认宽度与设备的宽度相同
initial-scale: 初始的缩放⽐，为1:1 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前⾯，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap模板</title>
<!-- 1. 导⼊CSS的全局样式 -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- 2. jQuery导⼊，建议使⽤1.9以上的版本 -->
<script src="../js/jquery-2.1.0.min.js"></script>
<!-- 3. 导⼊bootstrap的js⽂件 -->
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
td, th {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h3 >显⽰所有联系⼈</h3>
<table border="1" class="table table-bordered table-hover">
<tr class="success">
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>籍贯</th>
<th>籍贯</th>
<th>QQ</th>
<th>邮箱</th>
<th>操作</th>
</tr>
<c:if test="${not empty list}">
<c:forEach items="${list}" var="contact">
<tr>
<td>${contact.id}</td>
<td>${contact.name}</td>
<td>${contact.sex}</td>
<td>${contact.age}</td>
<td>${contact.address}</td>
<td>${contact.qq}</td>
<td>${ail}</td> <%--将id属性值传回给服务器--%>
<td><a class="btn btn-default btn-sm" href= "${tPath}/ss1?id=${contact.id}">修改</a> <a class="btn btn-default btn-sm"
href="${tPath}/ss2?id=${contact.id}">删除</a></td>
</tr>
</c:forEach>
</c:if>
<tr>
<td colspan="8" align="center"><a class="btn btn-primary" href="${tPath}/jsps/add.jsp">添加联系⼈</a></td>
</tr>
</table>
</div>
</body>
</html>
修改信息的参考代码为:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="java.sun/jsp/jstl/core" prefix="c" %>
<%
String path = ContextPath();
String basePath = Scheme()+"://"+ServerName()+":"+ServerPort()+path+"/";
%>
<!DOCTYPE html>
<!-- ⽹页使⽤的语⾔ -->
<html lang="zh-CN">
<head>
<base href="<%=basePath%>"/>
<!-- 指定字符集 -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>修改⽤户</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" >
<h3 >修改联系⼈</h3><%--οnsubmit="javascript: if(confirm('是否提交')){return true}else{return false}" 弹出确认框询问--%>
<form action="${tPath}/update?id=${contact.id}" method="post" οnsubmit="javascript: if(confirm('是否提交')){return true}else{return false}">
<div class="form-group">
<label for="name">姓名：</label>
<input type="text" class="form-control" id="name" name="name" readonly="readonly" value="${cont
act.name}" placeholder="请输⼊姓名" />
</div>
<div class="form-group">
<label>性别：</label><%--<%=Sex()=="man"?" checked":""%> 展⽰选中的单选框--%>
<input type="radio" name="sex" value="男" ${contact.sex == "男"?"checked":""} />男
<input type="radio" name="sex" value="⼥" ${contact.sex == "⼥"?"checked":""} />⼥
</div>
<div class="form-group">
<label for="age">年龄：</label>
<input type="text" class="form-control" id="age" name="age" value="${act.age}" placeholder="请输⼊年龄" /> </div>
<div class="form-group">
<label >籍贯：</label>
<select name="address" class="form-control" >
<option value="⼴东" ${contact.address == "⼴东"?"selected":""}>⼴东</option>
<option value="⼴西" ${contact.address == "⼴西"?"selected":""}>⼴西</option>
<option value="湖南" ${contact.address == "湖南"?"selected":""}>湖南</option>
</select>
</div>
<div class="form-group">
<label >QQ：</label>
<input type="text" class="form-control" name="qq" value="${contact.qq}" placeholder="请输⼊QQ号码"/>
</div>
<div class="form-group">
<label >Email：</label>
<input type="text" class="form-control" name="email" value="${ail}" placeholder="请输⼊邮箱地址"/>
</div>
<div class="form-group" >
<input class="btn btn-primary" type="submit" value="提交" />
<input class="btn btn-default" type="reset" value="重置" />
<input class="btn btn-default" type="button" value="返回" οnclick="(-1)"/>
</div>
</form>
</div>
</body>
</html>
删除联系⼈的代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="java.sun/jsp/jstl/core" prefix="c" %>
<%
String path = ContextPath();
String basePath = Scheme()+"://"+ServerName()+":"+ServerPort()+path+"/";
%>
<!DOCTYPE html>
<!-- ⽹页使⽤的语⾔ -->
<html lang="zh-CN">
<head>
<base href="<%=basePath%>"/>
<!-- 指定字符集 -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>修改⽤户</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<body>
<div class="container" >
<h3 >修改联系⼈</h3><%--οnsubmit="javascript: if(confirm('是否提交')){return true}else{return false}" 弹出确认框询问--%> <form action="${tPath}/delete?id=${contact.id}" method="post" οnsubmit="javascript: if(confirm('真的删除该联系⼈吗')){return true}else{return false}">
<div class="form-group">
<label for="name">姓名：</label>
<input type="text" class="form-control" id="name" name="name" readonly="readonly" value="${contact.name}" placeholder="请输⼊姓名" />
</div>
<div class="form-group">
<label>性别：</label><%--<%=Sex()=="man"?" checked":""%> 展⽰选中的单选框--%>
<input type="radio" name="sex" readonly="readonly" value="男" ${contact.sex == "男"?"checked":""} />男
<input type="radio" name="sex" readonly="readonly" value="⼥" ${contact.sex == "⼥"?"checked":""} />⼥
</div>
<div class="form-group">
<label for="age">年龄：</label>
<input type="text" class="form-control" id="age" name="age" readonly="readonly" value="${act.age}" placeholder="请输⼊年龄" />
</div>
<div class="form-group">
<label >籍贯：</label>
<select name="address" readonly="readonly" class="form-control" >
<option value="⼴东" ${contact.address == "⼴东"?"selected":""}>⼴东</option>
<option value="⼴西" ${contact.address == "⼴西"?"selected":""}>⼴西</option>
<option value="湖南" ${contact.address == "湖南"?"selected":""}>湖南</option>
</select>
</div>
<div class="form-group">
<label >QQ：</label>
<input type="text" class="form-control" name="qq" readonly="readonly"value="${contact.qq}" placeholder="请输⼊QQ号码"/>
</div>
<div class="form-group">
<label >Email：</label>
<input type="text" class="form-control" name="email" readonly="readonly" value="${ail}" placeholder="请输⼊邮箱地址"/>
</div>
<div class="form-group" >
<input class="btn btn-primary" type="submit" value="确定删除" />
<input class="btn btn-default" type="button" value="放弃删除" οnclick="(-1)"/>
</div>
</form>java修改html文件
</div>
</body>
</html>
添加联系⼈的代码:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- HTML5⽂档-->
<!DOCTYPE html>
<!-- ⽹页使⽤的语⾔ -->
<html lang="zh-CN">
<head>
<!-- 指定字符集 -->
<meta charset="utf-8">
<!-- 使⽤Edge最新的浏览器的渲染⽅式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- viewport视⼝：⽹页可以根据设置的宽度⾃动进⾏适配，在浏览器的内部虚拟⼀个容器，容器的宽度与设备的宽度相同。
width: 默认宽度与设备的宽度相同
initial-scale: 初始的缩放⽐，为1:1 -->
initial-scale: 初始的缩放⽐，为1:1 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前⾯，任何其他内容都*必须*跟随其后！ -->
<title>添加⽤户</title>
<!-- 1. 导⼊CSS的全局样式 -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- 2. jQuery导⼊，建议使⽤1.9以上的版本 -->
<script src="../js/jquery-2.1.0.min.js"></script>
<!-- 3. 导⼊bootstrap的js⽂件 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<center><h3>添加联系⼈</h3></center>
<form action="${tPath}/add" method="post" οnsubmit="javascript: if(confirm('是否确认添加')){return true}else{return false}">
<div class="form-group">
<label for="name">姓名：</label>
<input type="text" class="form-control" id="name" name="name" placeholder="请输⼊姓名">
</div>
<div class="form-group">
<label>性别：</label>
<input type="radio" name="sex" value="男" checked="checked"/>男
<input type="radio" name="sex" value="⼥"/>⼥
</div>
<div class="form-group">
<label for="age">年龄：</label>
<input type="text" class="form-control" id="age" name="age" placeholder="请输⼊年龄">
</div>
<div class="form-group">
<label >籍贯：</label>
<select name="address" class="form-control" id="jiguan">
<option value="⼴东">⼴东</option>
<option value="⼴西">⼴西</option>
<option value="湖南">湖南</option>
</select>
</div>
<div class="form-group">
<label >QQ：</label>
<input type="text" class="form-control" name="qq" placeholder="请输⼊QQ号码"/>
</div>
<div class="form-group">
<label >Email：</label>
<input type="text" class="form-control" name="email" placeholder="请输⼊邮箱地址"/>
</div>
<div class="form-group" >
<input class="btn btn-primary" type="submit" value="提交" />
<input class="btn btn-default" type="reset" value="重置" />
<input class="btn btn-default" type="button" value="返回" οnclick="(-1)" />
</div>
</form>
</div>
</body>
</html>
Java代码:
web层:
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论