IT黑马之用户信息管理系统
此项目作为一个小型的前后交互的用户信息管理系统
- 登录界面
- 登录页面展示
- 登录部分代码展示
- 主页显示页面
- 添加功能
- 页面显示
- 代码展示
- 修改功能
- 修改页面显示
- 修改代码展示
- 删除功能
- 删除页面显示
- 删除代码展示
- 查询
- 模糊查询
- 分页细节展示
- 总结
登录界面
登录页面展示
登录部分代码展示
出错显示框
主页显示页面
代码展示
删除修改显示
添加功能
页面显示
代码展示
<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实体类中的字段不匹配,很难发现。总的来说,细节决定成败!
IT黑马之用户信息管理系统相关推荐
- Java+Swing+mysql用户信息管理系统
Java+Swing+mysql用户信息管理系统 一.系统介绍 二.功能展示 1.管理员登陆 2.用户信息查询 3.用户信息添加 4.用户信息修改 5.用户信息删除 三.项目相关 3.1 乱码问题 3 ...
- 用户信息管理系统测试报告
目录 一.测试环境 二.系统测试 三.测试用例 四.单元测试 1.登录测试 2.添加测试 3.删除测试 4.ID查找测试 5.更新测试 6.条件查找测试 7.返回符合条件的用户数测试 一.测试环境 项 ...
- 案例:用户信息管理系统
案例:用户信息管理系统 1.需求 1.1 说明 用户信息列表展示,并且可以对用户信息的进行增删改查操作 1.2 效果图 根据需求,创建效果图,如下: 2.设计 2.1 技术选型 完成本次案例所用使用的 ...
- mvc三层架构(用户信息管理系统)
mvc三层架构(实战项目 用户信息管理系统) 一.三层架构 View 层:用于接收用户提交请求的代码. Service 层:系统的业务逻辑主要在这里完成. Dao 层:直接操作数据库的代码. 二.三层 ...
- 用户信息管理系统(Javaweb实践练习项目,附源码)
目录 前言 1. 系统概述 2. 系统各功能实现思路 2.1 列表查询 2.2 登录 2.3 添加 2.4 删除 2.5 修改 2.6 删除选中 2.7 分页查询 2.8 复杂条件查询 3. 系统源代 ...
- 初学Java,先搞懂第一个程序-----简易用户信息管理系统
初学Java!!!一定要搞懂第一个程序-----简易用户信息管理系统 用户需求 ①实现用户信息添加,包括用户名.年龄.爱好.冻结状态: ②查询指定用户信息,根据用户名查询指定用户的信息是否在用户数据库 ...
- JavaWeb11 —— 用户信息管理系统
JSP案例--用户信息管理系统 1.需求 简单的用户信息管理系统 对用户信息的增删改查 效果截图(部分) 2.设计 技术选型 Servlet + jsp + Mysql + jdbctemplate ...
- [Web技术]用户信息管理系统
工程文件:用户信息管理系统 开发时间:2022.03 - 2022.04 文章目录 一.快速开始 二.任务概述 三.分析与设计 3.1 需求分析 3.2 总体设计 四.功能展示 4.1 用户登录 4. ...
- 用户信息管理系统总结
目录 1 登录 1.1 登录界面 1.2 Servlet 2 index界面 3 添加功能 3.1 添加逻辑图 3.2 代码修改 3.3 addUserServlet 4 删除功能 4.1 删除逻辑 ...
- JavaWeb:用户信息管理系统
目录: 前言: 一.需求分析: 1. 简单功能 2. 复杂功能 3.登录: 二.设计: 1. 技术选型: 2. 数据库设计: 三.开发: 1. 环境搭建 1. 创建数据库环境(mysql8.0) 2. ...
最新文章
- 基于OpenCV的网络实时视频流传输
- MxGraph从入门到精通之2:HelloWorld程序解析
- 关于装箱拆箱导致的异常案例
- 模式分类笔记--聚类分析算法
- 用delphi 做服务器,basic4android 实现三层数据交互
- 通过OpenShift超越云技术
- ffmpeg 2.6.3在Windows系统MinGW的编译
- 使用PackageManager获得应用(包)信息
- java 回调函数实现_Java实现的回调函数
- X5Webview TbsReaderView背景色修改
- 技嘉主板开机自动进入bios怎么解决?
- [Linux 驱动]模块加载RTX8025驱动
- 我的007之skyfall歌词鉴赏及翻译
- Mac如何将图片一键转pdf
- 邮箱客户端程序的实现
- NET 模拟Htpp请求
- linux 权限 c,Linux下获取root权限的c程序
- matlab8邻域搜索算法,一种基于可搜索连续邻域A*算法的路径规划方法与流程
- 网线线序及网线转RS232—— DB9线序
- 文本与字体样式3.0
热门文章
- 华为路由器配置NAT
- 【微信小游戏】微信小游戏开发设置竖屏
- Google Cloud API设计指南
- 微信小程序生成跳转体验版二维码
- UI设计的色彩搭配及原则
- 环状序列|得分(UVa1584|UVa1585)
- DB2错误SQL1585N
- java 泛型 参数传递子类_超类的Java泛型,但并非所有子类都想定义类型参数
- html中背景图片等比例缩放,CSS实现响应式全屏背景图+用CSS3实现全屏按比例缩放背景图片...
- 手机连接linux共享打印机,连接Linux共享打印机