本文详细介绍了Java Web应用中用户登录、添加、删除和分页功能的实现。登录部分涉及验证码生成，使用Servlet处理登录请求。添加用户功能包括表单提交和Servlet处理，同时展示了添加用户的界面和逻辑。分页功能通过PageBean实体类和Servlet实现，动态生成分页链接并展示数据。整个过程涵盖了JSP、Servlet、Service和DAO层的交互。
目录
1. 登录
1.1 登录界面
如果账号密码错误的情况：
如果验证码错误
在login.jsp界面需要注意的是刷新代码这个方法
href="javascript:refreshCode()"尤其是这段代码，在script里面定义一个function方法
<script type="text/javascript"> //切换验证码 function refreshCode() { //获取验证码图片对象 var eb = document.getElementById("vcode"); //设置src属性 eb.src="${pageContext.request.contextPath}/checkCodeServlet?time="+new Date().getTime(); } </script>达到刷新验证码的方法
1.2 Servlet
Servlet的代码
package cn.itcast.web;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* 验证码
*/
@WebServlet("/checkCodeServlet")
public class CheckCodeServlet extends HttpServlet {
@Override
public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
//服务器通知浏览器不要缓存
response.setHeader("pragma","no-cache");
response.setHeader("cache-control","no-cache");
response.setHeader("expires","0");
//在内存中创建一个长80，宽30的图片，默认黑色背景
//参数一：长
//参数二：宽
//参数三：颜色
int width = 80;
int height = 30;
BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
//获取画笔
Graphics g = image.getGraphics();
//设置画笔颜色为灰色
g.setColor(Color.GRAY);
//填充图片
g.fillRect(0,0, width,height);
//产生4个随机验证码，12Ey
String checkCode = getCheckCode();
//将验证码放入HttpSession中
request.getSession().setAttribute("CHECKCODE_SERVER",checkCode);
//设置画笔颜色为黄色
g.setColor(Color.YELLOW);
//设置字体的小大
g.setFont(new Font("黑体",Font.BOLD,24));
//向图片上写入验证码
g.drawString(checkCode,15,25);
//将内存中的图片输出到浏览器
//参数一：图片对象
//参数二：图片的格式，如PNG,JPG,GIF
//参数三：图片输出到哪里去
ImageIO.write(image,"PNG",response.getOutputStream());
}
/**
* 产生4位随机字符串
*/
private String getCheckCode() {
String base = "0123456789ABCDEFGabcdefg";
int size = base.length();
Random r = new Random();
StringBuffer sb = new StringBuffer();
for(int i=1;i<=4;i++){
//产生0到size-1的随机值
int index = r.nextInt(size);
//在base字符串中获取下标为index的字符
char c = base.charAt(index);
//将c放入到StringBuffer中去
sb.append(c);
}
return sb.toString();
}
@Override
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request,response);
}
}
2.index界面
界面呈现
通过点击查询所有信息进入到下一个界面
以下是index.jsp
<%--
Created by IntelliJ IDEA.
User: 10260
Date: 2022/4/15
Time: 17:22
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<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>
<!-- 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>
<script type="text/javascript">
</script>
</head>
<body>
<div>
${user.name},欢迎您~~~~~
</div>
<div align="center">
<a
href="${pageContext.request.contextPath}/findUserByPageServlet" style="text-decoration:none;font-size:33px">查询所有用户信息
</a>
</div>
</body>
</html>
3 添加功能
添加功能主要是添加姓名、年龄、性别、籍贯、qq和邮箱
界面效果
通过表单提交，将form表单action到addUserServlet里面去
<div class="container">
<center><h3>添加联系人页面</h3></center>
<form action="${pageContext.request.contextPath}/addUserServlet" method="post" id="form">
<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">
<%--@declare id="address"--%><label for="address">籍贯：</label>
<select name="address" class="form-control" id="jiguan">
<option value="广东">广东</option>
<option value="广西">广西</option>
<option value="湖南">湖南</option>
</select>
</div>
<div class="form-group">
<%--@declare id="qq"--%><label for="qq">QQ：</label>
<input type="text" class="form-control" name="qq" placeholder="请输入QQ号码"/>
</div>
<div class="form-group">
<%--@declare id="email"--%><label for="email">Email：</label>
<input type="text" class="form-control" name="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="submit" value="返回" href="${pageContext.request.contextPath}/findUserByPageServlet">
</div>
</form>
</div>3.1 添加逻辑图
通过获取到表单内容，然后servlet捕捉到对应的参数，然后传入到Service里面进行逻辑代码操作，这里是添加用户，所以在dao里面进行增加到数据库的sql语句。以下的增删改查都是相同的操作
在jsp页面呈现出来，如果要进行操作通过form表单大action跳转到servlet，然后servlet根据具体的增删改查，跳转到service里面去，最后在dao里面进行增删改查的数据库操作。
3.2 代码修改
这是jsp的代码
<%--
Created by IntelliJ IDEA.
User: 10260
Date: 2022/4/18
Time: 14:49
To change this template use File | Settings | File Templates.
--%>
<%@ 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 -->
<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>
<%-- <script>
window.onload=function () {
function resetThis() {
document.getElementById("form").reset();
}
}
</script>
</head>--%>
<body>
<div class="container">
<center><h3>添加联系人页面</h3></center>
<form action="${pageContext.request.contextPath}/addUserServlet" method="post" id="form">
<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">
<%--@declare id="address"--%><label for="address">籍贯：</label>
<select name="address" class="form-control" id="jiguan">
<option value="广东">广东</option>
<option value="广西">广西</option>
<option value="湖南">湖南</option>
</select>
</div>
<div class="form-group">
<%--@declare id="qq"--%><label for="qq">QQ：</label>
<input type="text" class="form-control" name="qq" placeholder="请输入QQ号码"/>
</div>
<div class="form-group">
<%--@declare id="email"--%><label for="email">Email：</label>
<input type="text" class="form-control" name="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="submit" value="返回" href="${pageContext.request.contextPath}/findUserByPageServlet">
</div>
</form>
</div>
</body>
</html>
<form action="${pageContext.request.contextPath}/addUserServlet" method="post"
一样的跟上面，获取到数据转到servlet里面
3.3 addUserServlet
@WebServlet("/addUserServlet")
public class addUserServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置编码
request.setCharacterEncoding("utf-8");
//获取参数
Map<String, String[]> pm = request.getParameterMap();
//封装对象
User user = new User();
try {
BeanUtils.populate(user, pm);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
//调用service保存
UserService us = new UserServiceImpl();
us.addUser(user);
//跳转到userLIstServlet
response.sendRedirect(request.getContextPath()+"/findUserByPageServlet");
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
这里通过
request.getParameterMap();将add.jsp表单里面的内容用此方法进行获取，通过javaBean的populate的方法将user对象和pm放进去，然后调用service方法
4.多条选中删除
4.1多条删除分析图
4.2jsp效果
左边多条选中的jsp实现
<th><input type="checkbox" id="firstCB"></th>通过定义一个id然后使用function方法
document.getElementById("firstCB").onclick = function () {
//获取所有id
var eb = document.getElementsByName("uid");
for (var i = 0; i < eb.length; i++) {
//等于firstCB的checked
eb[i].checked = this.checked;
}
}这样可以实现多选，多选以后要讲多选的内容，提交表单，然后转到servlet里面去
document.getElementById("delSelected").onclick = function () {
if (confirm("您确定要删除所选条目吗？")) {
//表单提交
//是否有表单被选中
var flag = false;
var eb = document.getElementsByName("uid");
for (var i = 0; i < eb.length; i++) {
if (eb[i].checked) {
//有条目被选中
flag = true;
break;
}
}
if (flag) {
//提交到action的地方
document.getElementById("from").submit();
}
}
form表单发现如果有数据，那么通过action转发到deSelectedservlet里面去
<form id="from" action="${pageContext.request.contextPath}/delSelectedServlet" method="post" >4.3delSelectedServlet
public class delSelectedServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String[] uids = request.getParameterValues("uid");
System.out.println(uids);
//调用service删除
UserService us = new UserServiceImpl();
us.delSelectedUser(uids);
//跳转3
response.sendRedirect(request.getContextPath()+"/findUserByPageServlet");
}通过uid获取到，所有提交的id，然后再service里面进行删除，删除完跳转到list界面。
5.分页
5.1分页分析图
5.2创建pageBean实体类
public class PageBean<T> { private int totalCount; // 总记录数 private int totalPage ; // 总页码 private List<T> list ; // 每页的数据 private int currentPage ; //当前页码 private int rows;//每页显示的记录数将数据存到list里面，代替以前的userLisetServlet页面
一页五条数据
5.3list.jsp
<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 class><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">
</c:if>
<c:if test="${pb.currentPage != pb.totalPage}">
<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="Next">
<span aria-hidden="true">»</span>
</a>
</li>
<span style="font-size: 25px; margin-left: 5px">
共${pb.totalCount}条记录，共${pb.totalPage}页
</span>
</ul>
</nav>
</div>
</div>根据jsp可以知道，第一页的时候不能往前，最后一页不能往后
<c:if test="${pb.currentPage == 1}">第一页就 <li>的class=disabled
<c:if test="${pb.currentPage != 1}">
那么就不是disabled
最后一页道理了一样
最重要是foreac里面的
<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>t 跳转到这个页面，通过循环一页插入五条数据，然后定义了currentPage=1和rows=5以便后续servlet获取
5.4findUserByPageServlet
@WebServlet("/findUserByPageServlet")
public class FindUserByPageServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
//当前页码
String currentPage = request.getParameter("currentPage");
//每页显示条数
String rows = request.getParameter("rows");
if(currentPage==null||"".equals(currentPage)){
currentPage="1";
}
if(rows==null || "".equals(rows)){
rows="5";
}
Map<String, String[]> condition = request.getParameterMap();
//调用service查询
UserService us = new UserServiceImpl();
PageBean<User> pb=us.findUserByPage(currentPage,rows,condition);
//将pagebean存入request
request.setAttribute("pb",pb);
request.setAttribute("condition",condition);
//转发到list.jsp
request.getRequestDispatcher("/list.jsp").forward(request,response);
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
通过获取currentPage和row，表单。进行service操作
5.5Service
@Override
public PageBean<User> findUserByPage(String currentPage, String rows, Map<String, String[]> condition) {
int c = Integer.parseInt(currentPage);
int r = Integer.parseInt(rows);
if(c<=0){
c=1;
}
//1.创建空的PageBean的对象
PageBean<User> pb = new PageBean<User>();
int totalCount= dao.findTotalCount(condition);
pb.setTotalCount(totalCount);
//调用dao查询List集合
//开始记录的索引
int start = (c-1) * r;
List<User> list=dao.findByPage(start,r,condition);
pb.setList(list);
//总页码
int totalPage = (totalCount % r) == 0 ? totalCount/r : (totalCount/r +1);
if(c>totalPage){
c=totalPage;
}
pb.setTotalPage(totalPage);
//2.设置参数
pb.setCurrentPage(c);
pb.setRows(r);
//调用dao查找呢总记录数
return pb;
}然后进行dao操作
@Override
public List<User> findByPage(int start, int r, Map<String, String[]> condition) {
String sql="select * from user where 1=1";
StringBuilder sb = new StringBuilder(sql);
//2.遍历map
Set<String> keyset = condition.keySet();
//定义参数的集合
ArrayList<Object> params = new ArrayList<>();
for (String key : keyset) {
//派出分页条件参数
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 ? ");
//?条件值
params.add("%"+value+"%");
}
}
//添加分页查询
sb.append(" limit ?,?");
//添加分页查询值
params.add(start);
params.add(r);
System.out.println(sb.toString());
System.out.println(params);
return template.query(sb.toString(),new BeanPropertyRowMapper<User>(User.class),params.toArray());
}这里使用StringBuilder进行拼接。拼接成完整的sql语句，因为查找的条件是模糊的，页数会动态改变。这种方法交动态查询sql语句sb，然后参数用ArrayList存进去，需要的时候放进去。
这就是大概的代码！需要细细体会！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
