用户登录，信息增删改查综合练习

qq_29479019

已于 2022-04-07 17:38:26 修改

阅读量1k

点赞数

文章标签： java

于 2022-04-07 01:14:12 首次发布

本文链接：https://blog.csdn.net/qq_29479019/article/details/124004102

版权

1 综合练习

1.1 简单功能

1.1.1 列表查询

按钮位置 <div style="float: right ; margin: 5px">

增加按钮 <a class="btn btn-primary " href="add.html">添加联系人</a>

增加搜索框，bootstrap中找模板系修改浮动对齐

<div style="float: left">
<form class="form-inline">
<div class="form-group mx-sm-3 mb-2">
<label for="inputPassword1" >姓名</label>
<input type="password" class="form-control" id="inputPassword1" >
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="inputPassword2" >籍贯</label>
<input type="password" class="form-control" id="inputPassword2" >
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="inputPassword3" >email</label>
<input type="password" class="form-control" id="inputPassword3" >
</div>
<button type="submit" class="btn btn-primary mb-2">查询</button>
</form>

复选框表头和数据列都要加

<th><input type="checkbox"></th>

1.1.2 登录

验证码servlet引入：

 <div class="form-inline">
<label for="vcode">验证码：</label>
<input type="text" name="verifycode" class="form-control" id="verifycode" placeholder="请输入验证码" style="width: 120px;"/>
<a href="javascript:refreshCode()"><img src="${pageContext.request.contextPath}/checkCodeServlet" title="看不清点击刷新" id="vcode"/></a>
</div>

验证码刷新，用script设置根据ID取值利用date

 <script>
function refreshCode(){
//1 .  获取验证码图像对象
var  vcode = document.getElementById("vcode");
//2 .  获取src验证码图片
vcode.src = "${pageContext.request.contextPath}/checkCodeServlet?time="+new Date().getTime();
}
</script>

登录数据库设置后面学习后细化

1.1.3 添加添加之后刷新数据

jsp代码：

<body>
<div class="container">
<center><h3>添加联系人页面</h3></center>
<form action="${pageContext.request.contextPath}/addUserServlet" method="post">

添加的信息的action 连接的servlet

名字

姓名：

选择性别

<div class="form-group">
<label>性别：</label>
<input type="radio" name="gender" value="男" checked="checked"/>男 
<input type="radio" name="gender" value="女" checked="checked"/>女
</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>
<option value="浙江">上海</option>
</select>
</div>

<div class="form-group">
<label for="qq">QQ：</label>
<input type="text" class="form-control" id="qq" name="qq" placeholder="请输入QQ号码"/>
</div>

<div class="form-group">
<label for="email">Email：</label>
<input type="text" class="form-control" id="email" name="email" placeholder="请输入邮箱地址"/>
</div>

按钮提交

</form>
<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>
</div>
</body>

servlet：

//1  设置编码格式
request.setCharacterEncoding("utf-8");
   // 2 从网页输入数据获取参数 装到map集合
Map<String,String[]> map = request.getParameterMap();
//3  封装对象 User 对象的声明再另外文件中
User user = new User();
try {
BeanUtils.populate(user,map);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}//4 调用service方法进行保存
UserService service = new UserServiceImpl();
service.addUser(user);
//5 跳转到userListServerlet
response.sendRedirect(request.getContextPath()+"/userListServlet");

1.1.4 删除

<a class="btn btn-primary" href="javascript:void(0);" id="delSelected">删除选中</a>

jsp

<c:forEach items="${users}"  var="user" varStatus="i">
<tr>
<td><input type="checkbox" name="uid" value="${user.id}"></td>
<td>${s.count}</td>
<td>${user.name}</td>
<td>${user.gender}</td>
<td>${user.age}</td>
<td>${user.address}</td>
<td>${user.qq}</td>
<td>${user.email}</td>
<td><a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/updateUserServlet?id=${user.id}">修改</a>&nbsp;
<a class="btn btn-default btn-sm" href="javascript:deleteUser(${user.id});">删除</a></td>
</tr>

servlet：

//1.获取所有id    jsp中uid就是id 可以是几个id
String[] ids = request.getParameterValues("uid");
//2.调用service删除
UserService service = new UserServiceImpl();
service.delSelectedUser(ids);

delSelectedUser来源service下的deleteUser(String id)

public void deleteUser(String id) {
  dao.delete(Integer.parseInt(id));
   }

delete来源dao 包下的delete(int id)方法

public void delete(int id) {
  //1.定义sql
String sql = "delete from user where id = ?";
//2.执行sql
template.update(sql, id);
}
//3.跳转查询所有Servlet
    response.sendRedirect(request.getContextPath()+"/userListServlet");

1.1.5 修改

男女性别选项

<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>

籍贯下拉选项注意selected 拼写

<div class="form-group">
<label for="address">籍贯：</label>
<select name="address" id="address" class="form-control" >
<c:if test="${user.address == '陕西'}">
<option value="陕西"  selected>陕西 </option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="浙江">浙江</option>
  </select>
</div>

界面看不到id 需要用到隐藏域

选中删除servlet

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.获取所有id
String[] ids = request.getParameterValues("uid");
//2.调用service删除
UserService service = new UserServiceImpl();
service.delSelectedUser(ids);

//3.跳转查询所有Servlet
response.sendRedirect(request.getContextPath()+"/userListServlet");
}

删除提示 jsp：

<script>
function deleteUser(id){
//用户安全提示
if(confirm("您确定要删除吗？")){

//访问路径
location.href="${pageContext.request.contextPath}/delUserServlet?id="+id;
}
}

1.2 复杂功能

### 1.2.1 删除选中 ###

删除相关条目及提示 jsp

 window.onload = function(){
//给删除选中按钮添加单击事件
document.getElementById("delSelected").onclick = function(){
if(confirm("您确定要删除选中条目吗？")){

   var flag = false;
//判断是否有选中条目
var cbs = document.getElementsByName("uid");
for (var i = 0; i < cbs.length; i++) {
if(cbs[i].checked){//有一个条目选中了
flag = true;// 确定有被选择
break;
}
}

if(flag){     // flag = true则有条目被选中则表单提交 
document.getElementById("form").submit();
}
}

全勾选 jsp

//1.获取第一个cb
document.getElementById("firstCb").onclick = function(){
//2.获取下边列表中所有的cb
var cbs = document.getElementsByName("uid");
//3.遍历
for (var i = 0; i < cbs.length; i++) {
//4.设置这些cbs[i]的checked状态 = firstCb.checked
cbs[i].checked = this.checked;

}

1.2.2 分页查询

好处：

（1）减轻服务器内存的开销

（2）提升用户体验

1.2.3 复杂条件查询

totalCount（总记录数） = select count from user

totalPage（总页码数） = 提供每页显示条数给服务器

rowsList（每页数据list集合） = select *from user limit ? ?

int rows ：每页记录条数

    *   第一个？：开始查询的索引
    *   第二个？：rows每页显示的条数

currentPage（当前页码数） = 提供当前页码给服务器

开始查询的索引 = (currentPage-1) *rows 服务器

private int totalCount; // 总记录数
private int totalPage ; // 总页码
private List<T> list ; // 每页的数据
private int currentPage ; //当前页码
private int rows;//每页显示的记录数

jsp 页面

 <form class="form-inline" 
    //servlet设置
action="${pageContext.request.contextPath}/findUserByPageServlet" method="post">

condition(一个map集合)：Map<String, String[]> condition = request.getParameterMap();

<div class="form-group">
<label for="exampleInputName2">姓名</label>
<input type="text" name="name" value="${condition.name[0]}" class="form-control" id="exampleInputName2" >
</div>
<div class="form-group">
<label for="exampleInputName3">籍贯</label>
<input type="text" name="address" value="${condition.address[0]}" class="form-control" id="exampleInputName3" >
</div>

<div class="form-group">
<label for="exampleInputEmail2">邮箱</label>
<input type="text" name="email" value="${condition.email[0]}" class="form-control" id="exampleInputEmail2"  >
</div>
<button type="submit" class="btn btn-default" >查询</button>
</form>

分页显示

`<nav aria-label="Page navigation">`
<ul class="pagination">
<c:if test="${pb.currentPage == 1}">// 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">&laquo;</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>

<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">&raquo;</span>
</a>
</li>
<span style="font-size: 25px;margin-left: 5px;">
共${pb.totalCount}条记录，共${pb.totalPage}页

servlet 设置

//1.获取参数
String currentPage = request.getParameter("currentPage");//当前页码
String rows = request.getParameter("rows");     //每页显示条数

if(currentPage == null || "".equals(currentPage)){    //如果当前页是空或空白

currentPage = "1";
}

if(rows == null || "".equals(rows)){ //设置每页条目数
rows = "10";
}

//获取条件查询参数 条件来自页面
Map<String, String[]> condition = request.getParameterMap();

//2.调用service查询
UserService service = new UserServiceImpl();
PageBean<User> pb = service.findUserByPage(currentPage,rows,condition);
 System.out.println(pb);

//3.将PageBean存入request
request.setAttribute("pb",pb);
request.setAttribute("condition",condition);//将查询条件存入request
//4.转发到list.jsp
request.getRequestDispatcher("/list.jsp").forward(request,response);
}

重要方法：

start：开始数据条 rows 一页几条 Map<String, String[]：条件参数

public List<User> findByPage(int start, int rows, Map<String, String[]> condition) {
String sql = "select * from user  where 1 = 1 ";

StringBuilder sb = new StringBuilder(sql); // sql语句拼合

//2.遍历map 获取所有key
Set<String> keySet = condition.keySet();

//定义参数的集合
List<Object> params = new ArrayList<Object>();
for (String key : keySet) {

//排除分页条件参数，当前页不作为查询条件参数成立则终止本次循环，获取不到key
if("currentPage".equals(key) || "rows".equals(key)){
continue;
}

//获取value 明确只有一个值
String value = condition.get(key)[0];
//判断value是否有值
if(value != null && !"".equals(value)){
//有值
sb.append(" and "+key+" like ? ");  //注意空格，sql语句需要空格
params.add("%"+value+"%");//？条件的值 前面sql ？的值 
}
}

//添加分页查询
sb.append(" limit ?,? ");
//添加分页查询参数值
params.add(start);
params.add(rows);
sql = sb.toString();
System.out.println(sql);  //打印测试
System.out.println(params);

return template.query(sql,new BeanPropertyRowMapper<User>(User.class),params.toArray());  //需要加深理解
}

	编号	姓名	性别	年龄	籍贯	QQ	邮箱	操作

qq_29479019

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用户登录，信息增删改查综合练习

1 综合练习1.1 简单功能1.1.1 列表查询按钮位置<div style="float: right ; margin: 5px">增加按钮<a class="btn btn-primary " href="add.html">添加联系人</a>增加搜索框，bootstrap中找模板系修改浮动对齐<div style="float: left"><form class="form-inline"><di..
复制链接

扫一扫