文章目录
运行环境
- windows10
- IDEA专业版
- JDK8
- HTML5、CSS3、JavaScript
- JQuery
- Bootstrap5
1. 页面效果展示
1.1 登陆信息错误提示
1.2 文字验证码
1.3 用户查询自己发布的商品
2. 功能实现
2.1 文字验证码
2.1.1 JSP页面代码
<div class="row">
<label for="ck" class="col-md-2 offset-md-1 fs-4">
<a href="/code" style="list-style-type: none; color: black">验证码</a>
</label>
<div class="col-md-7 order-md-2">
<input type="text" id = "ck" name="ck" class="form-control w-100" placeholder = "${sessionScope.problem}">
</div>
</div>
2.1.2 Servlet类
CodeACtion.java
该类负责产生随机的两个100以内的数字，最后进行加法运算，将两个数字的相加作为问题字符串存入session域的problem对象，然后将相加的结果存入session域的answer对象，最终在前端页面直接判断即可。
package com.uni.action;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.Random;
@WebServlet(name = "CodeAction", urlPatterns = "/code")
public class CodeAction extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
int a = new Random().nextInt(100);
int b = new Random().nextInt(100);
int c = a + b;
HttpSession session = req.getSession();
session.setAttribute("problem", a + " + " + b + " = " + " ? ");
session.setAttribute("answer", c);
resp.sendRedirect("login.jsp");
}
}
2.2 AJAX向后端发送请求实现记住密码
2.2.1 JSP页面代码
<div>
<input id="re_user" type="checkbox" name="re_user" style="zoom: 180%">
<label class="fs-4" for="re_user">记住密码</label>
</div>
2.2.2 JS (JQuery) 代码
通过AJAX请求的方式，前端可以根据Servlet返回的结果进行判断，如果登陆失败则可以显示一个提示的弹窗，如果是直接将请求发送到Servlet不通过JS的AJAX，就无法判断是否成功登陆。
AJAX地址对应Servlet类里urlPattern的参数，由于笔者未用表单的提交而是直接将参数通过地址栏传入，故需要传入登陆信息的参数。
最终判断Servlet类向 response 对象写入的字符串，如果为 " true " 则表示登陆验证成功，最终则跳转到 index.jsp 。
这样的话，用户是不是能直接到 index.jsp 页面呢？
答案是不能，首先是首页有一些获取session域用户信息的代码，如果不存在可能会出现报错。
其次是后端会对这种情况进行处理，比如设置 Servlet 过滤器。
笔者的设定是登陆后才能访问首页，所以需要实现一个拦截非登录用户访问首页及其他登陆后才能访问的一些页面。
$(document).ready(function (){
$("#login").click(function (){
var username = $("#un").val();
var password = $("#pw").val();
var ck = $("#ck").val();
$.ajax({
type: 'POST',
url: "/toLogin?username="+username + "&password=" + password+"&re="+ $("#re_user").prop("checked") + "&ck=" + ck,
async: false,
error: function (data) {
alert('操作失败' + data);
},
success: function (result){
if(result != "true") {
$("#modal-error-info").html(result);
$("#btn-modal-error").click();
}
else window.location.href = "/index.jsp";
}
});
});
});
2.2.3 错误提示模态框
实现错误提示框的HTML代码
<button id="btn-modal-error" type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modal-error" hidden></button>
<div class="modal fade" id="modal-error" tabindex="-1" aria-labelledby="modal-error" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-danger">
<i class="bi bi-exclamation-triangle-fill"></i>
温馨提示
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h5 class="text-warning text-center">
<i class="bi bi-x-circle"></i>
<span id="modal-error-info"></span>
</h5>
</div>
</div>
</div>
</div>
模态框的显示，通过一个按钮，笔者这里设置的id是 btn-modal-error ，所以只要在JS代码中执行
$("#btn-modal-error")
而模态框的显示信息，则可以通过修改 模态框DIV里设置的一个ID为 modal-error-info 的 span 标签的值进行显示，综上，在JS代码中实现显示错误弹窗的提示代码如下：
$("#modal-error-info").val("登陆失败");
$("#btn-modal-error").click();
2.3 Coockie记住密码
2.3.1 关键JSP代码
login.jsp
在登陆页面中，账号密码输入框的内容可通过JSTL语句获取cookie域的对应username和password对象，直接显示之前保存的账号密码，若对象不存在则结果为空，不会影响页面显示。
<%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix="c"%>
<input type="text" id = "un" name="username" class="form-control w-100 mb-4"
placeholder = "请输入用户名" value="${cookie.get("username").value}">
<input type="password" id = "pw" name="password" class="form-control w-100 mb-4" placeholder = "请输入密码" value="${cookie.get("password").value}">
2.3.2 登陆验证的Servlet类
UserLoginAction.java
登陆验证除了验证用户名、密码、验证码正确性以外，还须判断是否记住密码，如果记住密码则需要向cookie域写入用户名和密码的值。
package com.uni.action;
import com.uni.entity.User;
import com.uni.service.Service;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;
import java.io.IOException;
@WebServlet(name = "UserLoginServlet", urlPatterns = "/toLogin")
public class UserLoginAction extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.getWriter().write("无法使用Get请求进行登陆");
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String username = req.getParameter("username");
String password = req.getParameter("password");
HttpSession session = req.getSession();
int ck = Integer.parseInt(req.getParameter("ck"));
Integer answer = (Integer)session.getAttribute("answer");
boolean isRemember = req.getParameter("re").equals("true");
User user = Service.user.checkUser(username, password);
if(user == null){
resp.getWriter().write("账号密码有误");
} else if(ck != answer){
resp.getWriter().write("验证码错误");
} else{
// 登录成功 就创建Cookie对象
Cookie cname = new Cookie("username", username);
Cookie cpw = new Cookie("password", password);
req.getSession().setAttribute("username", username);
if(isRemember) {
// 设置Cookie的有效时长 7天
cname.setMaxAge(3600 * 24 * 7);
cpw.setMaxAge(3600 * 24 * 7);
// 设置Cookie路径
cname.setPath(req.getContextPath());
cpw.setPath(req.getContextPath());
// 写入客户端
resp.addCookie(cname);
resp.addCookie(cpw);
}
/* 保存用户信息到 session域 */
req.getSession().setAttribute("userInfo", user);
resp.getWriter().write("true");
}
}
}
3. 总结
课设最后一天，终于完成了大部分功能，但还是有许多不足与BUG，这些都写在最后的总结里面吧，这一次的功能实现是基于web课程的实验，总体来说还是比较快的，可能更多的时间还是花在了样式的调整上，总体来说，之前下载的模板作用不太大，因为最终还是会按照自己的想法来设计的。