一、登录
1.1 登录界面
jsp登录界面是在login.html的基础上进行修改的，jsp登录页面展示：
login.html代码如下：
<!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 class="container" style="width: 400px;">
<h3 style="text-align: center;">管理员登录</h3>
<form action="login" method="post">
<div class="form-group">
<label for="user">用户名：</label>
<input type="text" name="user" class="form-control" id="user" placeholder="请输入用户名"/>
</div>
<div class="form-group">
<label for="password">密码：</label>
<input type="password" name="password" class="form-control" id="password" placeholder="请输入密码"/>
</div>
<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="vcode" title="看不清点击刷新" id="vcode"/></a>
</div>
<hr/>
<div class="form-group" style="text-align: center;">
<input class="btn btn btn-primary" type="submit" value="登录">
</div>
</form>
<!-- 出错显示的信息框 -->
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" >
<span>×</span></button>
<strong>登录失败!</strong>
</div>
</div>
</body>
</html>在此基础上添加一个checkCodeServlet和loginServlet，完成动态生成验证码和对用户输入的信息进行一个校验，并返回给浏览器。
<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>1.2 loginServlet
loginServlet：完成对用户输入的数据进行判断，当验证码输入错误，便会跳转到login.jsp页面，在页面上展示错误信息，验证码输入正确，则在userServiceImpl调用dao中方法对用户名和密码进行判断，正确则将user存入session中并跳转到index界面，错误则login.jsp页面进行错误信息的展示。
// 1.设置编码
request.setCharacterEncoding("utf-8");
// 2.获取数据
// 2.1获取用户填写的验证码
String verifycode = request.getParameter("verifycode");
// 3.验证码的校验
HttpSession session = request.getSession();
String checkCode = (String)session.getAttribute("CHECKCODE_SERVER");
session.removeAttribute("CHECKCODE_SERVER");//确保验证码的一次性
if (checkCode == null || !checkCode.equalsIgnoreCase(verifycode)) {
// 验证码不正确
// 提示信息
request.setAttribute("cc_error","验证码输入错误!");
// 跳转登录页面
request.getRequestDispatcher("/login.jsp").forward(request,response);
return;
}
Map<String, String[]> map = request.getParameterMap();
// 4.封装user对象
User user = new User();
try {
BeanUtils.populate(user,map);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
// 5.调用service查询
UserService service = new UserServiceImpl();
User loginUser = service.login(user);
// 6.判断是否登录成功
if (loginUser != null) {
// 登录成功
// 将user存入session中
session.setAttribute("user",loginUser);
// 跳转页面
response.sendRedirect(request.getContextPath()+"/index.jsp");
}else {
// 提示信息
request.setAttribute("u_error","用户名和密码错误!");
// 跳转到登录页面
request.getRequestDispatcher("/login.jsp").forward(request,response);
}二、index界面
在index.html基础上进行修改，添加userListServlet对所有用户信息进行查询。
<a
href="${pageContext.request.contextPath}/userListServlet" style="text-decoration:none;font-size:33px">查询所有用户信息
</a>注意： 这里的虚拟目录要用EL表达式动态生成！
userListServlet代码如下：
// 1.调用UserService完成查询
UserService service = new UserServiceImpl();
List<User> users = service.findAll();
// 2.将list存入request域
request.setAttribute("users",users);
// 3.转发到list.jsp页面
request.getRequestDispatcher("/list.jsp").forward(request,response);三、添加功能
3.1 添加功能的逻辑图：
3.2 代码修改
在add.html页面基础上，提交表单跳转addUserServlet中进行获取所有数据，调用service完成添加用户等。
<form id="form" action="${pageContext.request.contextPath}/addUserServlet" method="post">根据id绑定一个单击事件，当点击重置按钮便跳转到add.jsp
document.getElementById("back").onclick = function () {
location.href = "${pageContext.request.contextPath}/add.jsp";
}运用正则表达式对用户输入的数据进行判断，这里只展示一个，剩下的大家可以举一反三
window.onload = function () {
document.getElementById("form").onsubmit = function () {
return checkUserName() && checkAge() && checkQQ() && checkEmail();
}
document.getElementById("name").onblur = checkUserName;
document.getElementById("age").onblur = checkAge;
document.getElementById("qq").onblur = checkQQ;
document.getElementById("email").onblur = checkEmail;
function checkUserName() {
var username = document.getElementById("name").value;
var u_userName = /^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20})$/ ;
var flag = u_userName.test(username);
var u_error = document.getElementById("u_error");
if (flag) {
u_error.innerHTML = "<img src='image/gou.png'>'";
}else {
u_error.innerHTML = "姓名格式有误!";
}
return flag;
}
} <input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名" required="required">
<span id="u_error" class="error"></span>3.3 addUserServlet
addUserServlet：完成对用户输入的数据的保存，并跳转到userListServlet对用户信息进行查询
// 1.设置编码
request.setCharacterEncoding("utf-8");
// 2.获取参数
Map<String, String[]> map = request.getParameterMap();
// 3.封装对象
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.跳转到userListServlet
response.sendRedirect(request.getContextPath()+"/userListServlet");四、删除功能
4.1 删除功能的逻辑图：
4.2 代码修改
用JSTL标签的<c:forEach>对数据进行一个动态的展示
<c:forEach items="${pb.list}" var="user" varStatus="s">
<tr>
<th><input type="checkbox" name="u_id" value="${user.id}"></th>
<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}/findUserServlet?id=${user.id}">修改</a>
<a class="btn btn-default btn-sm" href="javascript:deleteUser(${user.id});">删除</a></td>
</tr>
</c:forEach>调用方法传递id并在方法中，添加confirm提示，确定则跳转到delUserServlet。
<a class="btn btn-default btn-sm" href="javascript:deleteUser(${user.id});">删除</a></td>function deleteUser(id) {
// 用户安全提示
if (confirm("您确认要删除么？")) {
// 访问路径
location.href = "${pageContext.request.contextPath}/delUserServlet?id="+id;
}
}4.3 delUserServlet
代码如下：
// 1.获取id
String id = request.getParameter("id");
// 2.调用service删除
UserService service = new UserServiceImpl();
service.deleteUser(id);
// 3.跳转到查询所有的servlet
response.sendRedirect(request.getContextPath()+"/findUserByPageServlet");五、修改功能
5.1 修改功能的逻辑图：
5.2 修改代码
提交表单，跳转到updateUserServlet进行操作，并在最后跳转到userListServlet对用户信息进行查询
<form action="${pageContext.request.contextPath}/updateUserServlet" method="post">用户要修改值的回显
<input type="text" class="form-control" value="${user.name}" id="name" name="name" readonly="readonly" placeholder="请输入姓名" /><%-- 隐藏域，提交id--%>
<input type="hidden" name="id" value="${user.id}">5.3 updateUserServlet
updateUserServlet：获取表单数据，封装User对象并调用service完成修改，最后跳转到userListServlet对用户信息进行查询
// 1.设置编码
request.setCharacterEncoding("utf-8");
// 2.获取map
Map<String, String[]> map = request.getParameterMap();
// 3.封装对象
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.updateUser(user);
// 5.跳转到查询所有Servlet
response.sendRedirect(request.getContextPath()+"/updateUserServlet");六、删除选中功能
6.1 删除选中功能的逻辑图：
6.2 代码修改
给删除选中绑定单击事件，添加confirm提示，确定并判断是否有id被选中
<a class="btn btn-primary" href="javascript:void(0);" id="delSelected">删除选中</a>window.onload = function () {
// 给删除选中的按钮添加点击事件
document.getElementById("delSelected").onclick = function () {
if (confirm("您确定要删除选中条目么？")) {
var flag = false;
// 判断是否有选中条目
var cbs = document.getElementsByName("u_id");
for (var i = 0; i < cbs.length; i++) {
if (cbs[i].checked) {
// 有一个条目选中了
flag = true;
break;
}
}
if (flag) {//有条目被选中
// 表单提交
document.getElementById("form").submit();
}
}
}
}
设置第一行的id为firstCb，绑定单击事件，当选中第一个，其他的checked与它一致
<th><input type="checkbox" id="firstCb"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>籍贯</th>
<th>QQ</th>
<th>邮箱</th>
<th>操作</th> // 1.获取第一个cb
document.getElementById("firstCb").onclick = function () {
// 2.获取下边列表所有的cb
var cbs = document.getElementsByName("u_id");
// 3.遍历
for (var i = 0; i < cbs.length; i++) {
// 4.设置这些cbs[i]的checked状态等于firstCb
cbs[i].checked = this.checked;
}
}这里有一个小bug，当点击删除选中按钮，但没有选中数据，便会报错，所以要在UserServiceImpl中的重写方法中进行判断
@Override
public void delSelectedUser(String[] u_ids) {
if (u_ids != null && u_ids.length != 0) {
// 1.遍历u_ids
for (String u_id : u_ids) {
userDao.delete(Integer.parseInt(u_id));
}
}
}6.3 delSelectedServlet
// 1.获取所有的id
String[] u_ids = request.getParameterValues("u_id");
// 2.调用service
UserService service = new UserServiceImpl();
service.delSelectedUser(u_ids);
// 3.跳转到查询所有的servlet
response.sendRedirect(request.getContextPath()+"/userListServlet");七、分页查询功能
7.1 分页查询功能的逻辑图：
7.2 代码修改
创建一个实体类PageBean，并在UserServiceImpl中调用dao中的方法查询totalCount和list集合，判断当前页
@Override
public PageBean<User> findUserByPage(String _currentPage, String _rows) {
int currentPage = Integer.parseInt(_currentPage);
int rows = Integer.parseInt(_rows);
if (currentPage <= 0) {//超过第一页，将当前页设为第一页
currentPage = 1;
}
// 1.创建空的PageBean对象
PageBean<User> pb = new PageBean<User>();
// 2.调用dao查询totalCount
int totalCount = userDao.findTotalCount();
pb.setTotalCount(totalCount);
// 3.计算总页码
int totalPage = (totalCount % rows) == 0 ? (totalCount/rows) : (totalCount/rows+1);
pb.setTotalPage(totalPage);
if (currentPage >= totalPage + 1) {//超过最后一页，将当前页设为最后一页
currentPage = totalPage;
}
// 4.设置参数
pb.setCurrentPage(currentPage);
pb.setRows(rows);
// 5.调用dao查询list集合
// 计算开始记录的索引
int start = (currentPage - 1) * rows;
List<User> list = userDao.findByPage(start,rows);
pb.setList(list);
return pb;
}用JSTL标签的<c:forEach>对数据进行一个动态的展示
<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">${i}</a></li>
</c:if>
<c:if test="${pb.currentPage != i}">
<li><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5">${i}</a></li>
</c:if>
</c:forEach>对当前页的链接设置激活状态，当点击上一页或下一页超过上一页便设置禁用状态，后台代码的判断则在上面
<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" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<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" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>7.3 FindUserByPageServlet
// 设置编码
request.setCharacterEncoding("utf-8");
// 1.获取参数
String currentPage = request.getParameter("currentPage");//当前页码
String rows = request.getParameter("rows");//每页显示的条数
if (currentPage == null || "".equals(currentPage)) {
currentPage = "1";
}
if (rows == null || "".equals(rows)) {
rows = "5";
}
// 2.调用service查询
UserService service = new UserServiceImpl();
PageBean<User> pb = service.findUserByPage(currentPage,rows);
// 3.将PageBean存入request
request.setAttribute("pb",pb);
// 4.转发到list.jsp
request.getRequestDispatcher("/list.jsp").forward(request,response);八、复杂条件查询功能
8.1 复杂条件查询功能的逻辑图：
8.2 代码修改
在UserServiceImpl中对代码进行修改，添加复杂条件进行查询
@Override
public PageBean<User> findUserByPage(String _currentPage, String _rows, Map<String, String[]> condition) {
int currentPage = Integer.parseInt(_currentPage);
int rows = Integer.parseInt(_rows);
if (currentPage <= 0) {//超过第一页，将当前页设为第一页
currentPage = 1;
}
// 1.创建空的PageBean对象
PageBean<User> pb = new PageBean<User>();
// 2.调用dao查询totalCount
int totalCount = userDao.findTotalCount(condition);
pb.setTotalCount(totalCount);
// 3.计算总页码
int totalPage = (totalCount % rows) == 0 ? (totalCount/rows) : (totalCount/rows+1);
pb.setTotalPage(totalPage);
if (currentPage >= totalPage + 1) {//超过最后一页，将当前页设为最后一页
currentPage = totalPage;
}
// 4.设置参数
pb.setCurrentPage(currentPage);
pb.setRows(rows);
// 5.调用dao查询list集合
// 计算开始记录的索引
int start = (currentPage - 1) * rows;
List<User> list = userDao.findByPage(start,rows,condition);
pb.setList(list);
return pb;
}在UserDaoImpl的复习方法中对sql语句等进行修改
@Override
public int findTotalCount(Map<String, String[]> condition) {
// 1.定义模板初始化sql
String sql = "select count(*) from user where 1 = 1 ";
StringBuilder sb = new StringBuilder(sql);
// 2.遍历map
Set<String> set = condition.keySet();
// 定义参数的集合
List<Object> params = new ArrayList<Object>();
for (String key : set) {
// 排除分页条件的参数
// 获取value
if ("currentPage".equals(key) || "rows".equals(key)) {
continue;
}
String value = condition.get(key)[0];
// 判断value是否有值
if (value != null || "".equals(value)) {
// 有值
sb.append(" and " +key+ " like ? ");
params.add("%"+value+"%");//？条件的值
}
}
// 3.执行sql
return template.queryForObject(sb.toString(),Integer.class,params.toArray());
}
@Override
public List<User> findByPage(int start, int rows, Map<String, String[]> condition) {
// 1.定义模板初始化sql
String sql = "select * from user where 1 = 1 ";
StringBuilder sb = new StringBuilder(sql);
// 2.遍历map
Set<String> set = condition.keySet();
// 定义参数的集合
List<Object> params = new ArrayList<Object>();
for (String key : set) {
// 排除分页条件的参数
// 获取value
if ("currentPage".equals(key) || "rows".equals(key)) {
continue;
}
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(rows);
// 2.执行sql
return template.query(sb.toString(),new BeanPropertyRowMapper<User>(User.class),params.toArray());
}在分页条的链接基础上加上复杂条件，这里只展示一个
<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>8.3 FindUserByPageServlet的修改
在前面FindUserByPageServlet的基础上加上获取复杂条件的查询并添加到request域中
// 获取条件查询的参数
Map<String, String[]> condition = request.getParameterMap();
// 将查询条件存入request
request.setAttribute("condition",condition);注意：前面的userListServlet被现在的findUserByPageServlet所替代，不然查询的结果便会没有！！
603
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
