1.思维导图
2.代码部分
登录功能
//UserServlet.java
@WebServlet(name = "UserServlet" ,urlPatterns = "/user")
public class UserServlet extends BaseServlet {
private UserService userService = new UserServiceImpl();
public String login(HttpServletRequest request , HttpServletResponse response){
User user = new User();
try {
BeanUtils.populate(user,request.getParameterMap());
User existUser = userService.login(user);
if (null == existUser) {
//登录失败
request.setAttribute("errorMsg","账户或密码错误");
return "login.jsp";
} else {
//登录成功
request.getSession().setAttribute("existUser",existUser);
return "redirect:index.jsp";
}
} catch (Exception e) {
e.printStackTrace();
}
request.setAttribute("errorMsg","登录失败");
return "login.jsp";
}
}
//BaseServlet.java
public class BaseServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String methodName = request.getParameter("methodName");
try {
Method method = this.getClass().getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
if (null != method) {
String returnValue = (String) method.invoke(this,request,response);
if (null != returnValue) {
//是否有":"
int index = returnValue.lastIndexOf(":");
if (-1 == index) {
//没有":"
request.getRequestDispatcher(returnValue).forward(request,response);
} else {
//有":"
String path = returnValue.substring(index + 1);
if (returnValue.startsWith("redirect")){
//重定向
response.sendRedirect(request.getContextPath() + File.separator + path);
} else if (returnValue.startsWith("forward")){
//请求转发
request.getRequestDispatcher(path).forward(request,response);
}
}
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
}
<head>
<title>用户登录</title>
<script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
<script>
/**
* 刷新随机验证码
*/
function refreshCode() {
console.log("refreshCode");
//${pageContext.request.contextPath}/validatecode.jsp 相当于 一张图片
$("#validateCode").attr("src","${pageContext.request.contextPath}/validatecode.jsp?"+Math.random());
}
/**
* 表单校验 : 后台校验、前端校验
* 假设，使用后台校验，先发起请求，再做判断，如果校验不通过
* 使用前端校验，不需要发起请求
*/
function checkInfo() {
return checkNull("username") && checkLength("username") && checkRule("username") &&
checkNull("password") && checkLength("password") && checkRule("password") ;
}
function checkNull(id) {
var value = $("#"+id).val();
var reg = /^\s*$/
if (reg.test(value)) {
//为空
$("#error").html(id+"不能为空");
return false;
} else {
//不为空
return true;
}
}
function checkLength(id) {
var value = $("#"+id).val();
if (value.length >= 6 && value.length <= 9) {
return true;
} else {
$("#error").html(id+"长度在6~9之间");
return false;
}
}
/**
* 校验账户和密码
*/
function checkRule(id) {
var value = $("#"+id).val();
var reg = /^[a-z0-9]{6,9}$/
if (reg.test(value)) {
return true;
} else {
$("#error").html(id+"由小写字母、数字组成");
return false;
}
}
</script>
</head>
<body>
<font color="red" id="error">${errorMsg}</font>
<form action="${pageContext.request.contextPath}/user" method="post" onsubmit="return checkInfo()">
<input type="hidden" name="methodName" value="login"/>
账户:<input type="text" name="username" id="username"/><br>
密码:<input type="text" name="password" id="password"/><br>
验证码:<input type="text" name="validateCode"/> <img id="validateCode" onclick="refreshCode()" src="${pageContext.request.contextPath}/validatecode.jsp"><br>
<button type="submit">登录</button>
</form>
</body>
注册功能
//UserServlet.java
public void selectUserListByPage(HttpServletRequest request , HttpServletResponse response){
String currentPageStr = request.getParameter("currentPage");
//获取当前页数
Integer currentPage = getCurrentPage(currentPageStr);
try {
PageBean<User> pageBean = userService.selectUserListByPage(currentPage);
//将PageBean转换成json字符串,并将json字符串响应到浏览器
JsonUtils.writeJsonStr(response,pageBean);
} catch (Exception e) {
e.printStackTrace();
}
}
//UserService.java
@Override
public PageBean<User> selectUserListByPage(Integer currentPage) throws Exception {
PageBean<User> pageBean = new PageBean<>();
//设置当前页数
pageBean.setCurrentPage(currentPage);
//设置总记录数
Integer totalSize = userDao.selectTotalSize();
pageBean.setTotalSize(totalSize);
//设置每页记录数
Integer pageSize = 3;
pageBean.setPageSize(pageSize);
//设置总页数
Integer totalPage = ( totalSize % pageSize == 0 ) ? ( totalSize / pageSize ) : ( totalSize / pageSize + 1 );
pageBean.setTotalPage(totalPage);
//设置当前页数据: select * from tb_user limit ? , ?;
Integer begin = (currentPage - 1) * pageSize;
List<User> userList = userDao.selectUserListByPage(begin, pageSize);
pageBean.setList(userList);
return pageBean;
}
<head>
<title>首页</title>
<script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
<script>
/**
* 分页查询用户列表
* @param currentPage 当前页数
*/
function selectUserListByPage(currentPage){
console.log("selectUserListByPage selectUserListByPage selectUserListByPage")
//异步加载列表数据
$.get("${pageContext.request.contextPath}/user",{
"methodName":"selectUserListByPage",
"currentPage":currentPage
},function (data) {
//data就是PageBean(js对象)
var pageBean = data;
//就是table的标签内容
var html = "";
html += "<tr>";
html += "<td>ID</td>";
html += "<td>账户</td>";
html += "<td>密码</td>";
html += "</tr>";
var list = pageBean.list;
$(list).each(function (index) {
html += "<tr>";
html += "<td>" + this.id + "</td>";
html += "<td>" + this.username + "</td>";
html += "<td>" + this.password + "</td>";
html += "</tr>";
})
// 第1/10页 总记录数:100 每页显示10条 [首页] [上一页] [下一页] [尾页]
html += "<tr>";
html += "<td colspan='3'>";
html += "第" + pageBean.currentPage + "/" + pageBean.totalPage + "页 总记录数:" + pageBean.totalSize + " 每页显示" + pageBean.pageSize + "条";
if (1 != pageBean.currentPage) {
//显示首页、上一页
html += " <a href='javascript:void(0);' onclick='selectUserListByPage(1)'>首页</a>";
html += " <a href='javascript:void(0);' onclick='selectUserListByPage(" + (pageBean.currentPage - 1) + ")'>上一页</a>";
}
if (pageBean.totalPage != pageBean.currentPage) {
//显示尾页、下一页
html += " <a href='javascript:void(0);' onclick='selectUserListByPage(" + (pageBean.currentPage + 1) + ")'>下一页</a>";
html += " <a href='javascript:void(0);' onclick='selectUserListByPage(" + pageBean.totalPage + ")'>尾页</a>";
}
html + "</td>"
html += "</tr>";
$("#tbl").html(html);
},"json");
}
$(function () {
selectUserListByPage(2);
})
</script>
</head>
<body>
<table id="tbl" border="1px" cellspacing="0px" cellpadding="15px" width="600px" height="200px"> </table>
</body>
/**
* 删除用户
*/
function deleteUser(id){
var flag = confirm("确认删除该用户？")
if (flag) {
//发起删除用户异步请求
$.post("${pageContext.request.contextPath}/user",{
"methodName":"deleteUser",
"id":id
},function (data) {
console.log(data);
if (data.flag) {
//如果删除成功，刷新用户列表，就是分页查询用户列表
selectUserListByPage(1);
}
//如果删除失败，不做处理
},"json");
}
}
//UserServlet.java
public void deleteUser(HttpServletRequest request , HttpServletResponse response){
Integer id = Integer.parseInt(request.getParameter("id"));
boolean flag = true;
String msg = "删除成功";
try {
userService.deleteUserById(id);
flag = true;
msg = "删除成功";
} catch (Exception e) {
e.printStackTrace();
flag = false;
msg = "删除失败";
}
Map<String,Object> map = new HashMap<>();
map.put("flag",flag);
map.put("msg",msg);
JsonUtils.writeJsonStr(response,map);
}
function deleteUsers(){
var eles = $(".ids:checked");
if (0 == eles.length) {
alert("请选择要删除的选项!!")
} else {
var flag = confirm("确认删除这些用户吗？")
if (flag) {
var ids = [];
eles.each(function (index) {
var id = $(this).val();
ids.push(id);
})
var idsStr = ids.join(",");
$.post("${pageContext.request.contextPath}/user",{
"methodName":"deleteUsers",
"ids": idsStr
},function (data) {
if (data.flag) {
selectUserListByPage(1);
}
},"json");
}
}
}
//UserServlet.java
public void deleteUsers(HttpServletRequest request , HttpServletResponse response){
String idsStr = request.getParameter("ids");
System.out.println(idsStr);
String[] ids = idsStr.split(",");
boolean flag = true;
String msg = "删除成功";
for (String id : ids) {
try {
userService.deleteUserById(Integer.parseInt(id));
flag = true;
msg = "删除成功";
} catch (Exception e) {
e.printStackTrace();
flag = false;
msg = "删除失败";
break;
}
}
Map<String,Object> map = new HashMap<>();
map.put("flag",flag);
map.put("msg",msg);
JsonUtils.writeJsonStr(response,map);
}