这是一个关于用户信息管理系统的前后端交互实现项目，包括登录、主页展示、添加、修改、删除和查询功能。登录界面展示登录代码，主页显示用户信息。添加功能通过表单收集用户姓名、性别、年龄等信息。修改功能允许用户更新联系人信息，删除功能通过JavaScript实现。查询功能实现了模糊查询和分页展示，分页细节考虑了禁用状态和页码跳转。项目强调细节处理的重要性。
此项目作为一个小型的前后交互的用户信息管理系统
登录界面
登录页面展示
登录部分代码展示
出错显示框
主页显示页面
代码展示
删除修改显示
添加功能
页面显示
代码展示
<div class="container">
<center><h3>添加联系人页面</h3></center>
<form action="${pageContext.request.contextPath}/addUserServlet" method="post">
<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="gender" value="男" checked="checked"/>男
<input type="radio" name="gender" 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 for="address">籍贯：</label>
<select name="address" class="form-control" id="address">
<option value="广东">广东</option>
<option value="广西">广西</option>
<option value="湖南">湖南</option>
</select>
</div>
<div class="form-group">
<label for="qq">QQ：</label>
<input type="text" class="form-control" name="qq" placeholder="请输入QQ号码" id="qq"/>
</div>
<div class="form-group">
<label for="email">Email：</label>
<input type="text" class="form-control" name="email" id="email" placeholder="请输入邮箱地址"/>
</div>
<div class="form-group" style="text-align: center">
<input class="btn btn-primary" type="submit" value="提交" />
<input class="btn btn-default" type="reset" value="重置" />
<input class="btn btn-default" type="button" value="返回" />
</div>
</form>
</div>
修改功能
修改页面显示
修改代码展示
<div class="container" style="width: 400px;">
<h3 style="text-align: center;">修改联系人</h3>
<form action="${pageContext.request.contextPath}/updateUserServlet" method="post">
<input type="hidden" name="id" value="${user.id}">
<div class="form-group">
<label for="name">姓名：</label>
<input type="text" class="form-control" id="name" value="${user.name}" name="name" readonly="readonly" placeholder="请输入姓名" />
</div>
<div class="form-group">
<label>性别：</label>
<c:if test="${user.gender=='男'}">
<input type="radio" name="gender" value="男" checked />男
<input type="radio" name="gender" value="女" />女
</c:if>
<c:if test="${user.gender=='女'}">
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" checked />女
</c:if>
</div>
<div class="form-group">
<label for="age">年龄：</label>
<input type="text" class="form-control" id="age"value="${user.age}" name="age" placeholder="请输入年龄" />
</div>
<div class="form-group">
<label for="address">籍贯：</label>
<c:if test="${user.address=='广东'}">
<select name="address" class="form-control" id="address">
<option value="广东" selected>广东</option>
<option value="广西">广西</option>
<option value="湖南">湖南</option>
</select>
</c:if>
<c:if test="${user.address=='广西'}">
<select name="address" class="form-control" id="address">
<option value="广东" selected>广东</option>
<option value="广西" selected>广西</option>
<option value="湖南">湖南</option>
</select>
</c:if>
<c:if test="${user.address=='湖南'}">
<select name="address" class="form-control" id="address">
<option value="广东" selected>广东</option>
<option value="广西">广西</option>
<option value="湖南" selected>湖南</option>
</select>
</c:if>
</div>
<div class="form-group">
<label for="qq">QQ：</label>
<input type="text" class="form-control" id="qq" name="qq" value="${user.qq}" placeholder="请输入QQ号码"/>
</div>
<div class="form-group">
<label for="email">Email：</label>
<input type="text" class="form-control" name="email" id="email" value="${user.email}" placeholder="请输入邮箱地址"/>
</div>
<div class="form-group" style="text-align: center">
<input class="btn btn-primary" type="submit" value="提交" />
<input class="btn btn-default" type="reset" value="重置" />
<input class="btn btn-default" type="button" value="返回"/>
</div>
</form>
</div>
删除功能
删除页面显示
删除代码展示
function deleteUser(id) {
//${pageContext.request.contextPath}/delUserServlet?id=${user.id}
if (confirm("您确定要删除吗?")) {
location.href = "${pageContext.request.contextPath}/delUserServlet?id=" + id;
}
}
window.onload=function () {
//给删除选中绑定单击事件
document.getElementById("delSelected").onclick=function () {
//提交表单
var flag=false;
var uids = document.getElementsByName("uid");
for (var i = 0; i <uids.length ; i++) {
if(uids[i].checked){
flag=true;
}
}
if(flag==false){
confirm("您没有选中条目");
}
if(flag){
if(confirm("您确定要删除选中条目吗?")){
document.getElementById("form").submit();
}
}
}
}
查询
模糊查询
分页细节展示
当前页面为1时，设为禁用，当你再次点上一页时，还在第一页
，最后一页时，也是如此，代码如下
<div>
<nav aria-label="Page navigation">
<ul class="pagination">
<c:if test="${pb.currentPage==1}">
<li class="disabled">
</c:if>
<c:if test="${pb.currentPage!=1}">
<li>
</c:if>
<a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage-1}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<c:forEach begin="1" end="${pb.totalPage}" var="i">
<c:if test="${pb.currentPage==i}">
<li class="active"><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}">${i}</a></li>
</c:if>
<c:if test="${pb.currentPage!=i}">
<li><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}">${i}</a></li>
</c:if>
</c:forEach>
<c:if test="${pb.currentPage==pb.totalPage}">
<li class="disabled">
<a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</c:if>
<c:if test="${pb.currentPage<pb.totalPage}">
<li>
<a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage+1}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</c:if>
<span style="font-size: 25px;margin: 5px;">
共${pb.totalCount}条记录,共${pb.totalPage}页</span>
</ul>
</nav>
</div>
当然要实现此分页还离不开PageBean，封装分页需要用到的一些数据
public class PageBean {
private int totalCount;//总记录数
private int totalPage;// 总页码
private List list;//每页的数据
private int currentPage;//当前页码
private int rows;//每页显示的记录数
public int getTotalCount() {
return totalCount;
}
public void setTotalCount(int totalCount) {
this.totalCount = totalCount;
}
public int getTotalPage() {
return totalPage;
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
public List<T> getList() {
return list;
}
public void setList(List<T> list) {
this.list = list;
}
public int getCurrentPage() {
return currentPage;
}
public void setCurrentPage(int currentPage) {
this.currentPage = currentPage;
}
public int getRows() {
return rows;
}
public void setRows(int rows) {
this.rows = rows;
}
@Override
public String toString() {
return "PageBean{" +
"totalCount=" + totalCount +
", totalPage=" + totalPage +
", list=" + list +
", currentPage=" + currentPage +
", rows=" + rows +
'}';
}
}
总结
此小项目虽说不是很难，细节很多，有时候一个小问题，比如:jsp页面中name属性中字段和java实体类中的字段不匹配，很难发现。总的来说，细节决定成败！
扫一扫
2180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
