注释：本文所使用的jdbc工具类和验证码生成工具类未写出
-
首先设置页面首页为登录页面
@WebServlet("/index") public class IndexServlet extends ViewBaseServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //首先需要使用thymeleaf渲染login.html登录页面，由于不需要设置参数，看起来就和网页直接打开的界面一样 super.processTemplate("login",request,response); } } 实现thymeleaf渲染 <html lang="en" xmlns:th="http://www.thymeleaf.org"> <script> //首页转换渲染 location.href="index" </script> web.html配置参数 <context-param> <!-- 视图(html页面)的前缀 --> <param-name>view-prefix</param-name> <param-value>/</param-value> </context-param> <context-param> <!-- 视图(html文件)的前缀 --> <param-name>view-suffix</param-name> <param-value>.html</param-value> </context-param> <!-- 访问欢迎页面--> <welcome-file-list> <welcome-file>index</welcome-file> </welcome-file-list> -
设置登录界面，包括检验账号密码和记住我，以及注册等等功能
@WebServlet("/login") public class ServletLogin extends ViewBaseServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String username = request.getParameter("username"); String password = request.getParameter("password"); UserDao userDao = new UserDao(); User user = new User(); user.setUsername(username); user.setPassword(password); User userlogin = userDao.selectByNameAndPwd(user); String remember = request.getParameter("remember"); if (userlogin != null) { if (remember!=null) { //设置客户端用户登录数据 Cookie cookie1 = new Cookie("username", username); Cookie cookie2 = new Cookie("password", password); //设置cookie存活时间，除非服务器重启失效和客户端清除用户数据 cookie1.setMaxAge(7 * 24 * 60 * 60); cookie2.setMaxAge(7 * 24 * 60 * 60); response.addCookie(cookie1); response.addCookie(cookie2); } //服务端存储用户数据 HttpSession session=request.getSession(); session.setAttribute("user",user); //登录成功后实现页面跳转到用户 super.processTemplate("success",request,response); } else { request.setAttribute("error","用户名或密码不正确"); //账号密码错误后显示输出错误，重新跳转页面进行输入 super.processTemplate("login", request, response); } } } <div id="loginDiv" style="height: 350px"> <form action="login" id="form" method="post"> <h1 id="loginMsg">LOGIN IN</h1> <!-- 当登录界面输错后，会显示提示语句 --> <div id="errorMsg" th:text="${error}"></div> <!-- 设置记住我的功能，接收request的cookie，由于接收到cookie是多个，所以需要进行删选过滤 （注意双引号里面包单引号) --> <p>Username:<input id="username" name="username" type="text" th:each="cookie1:${#request.getCookies()}" th:if="${cookie1.getName().equals('username')}" th:value="${cookie1.getValue()}"></p> <p>Password:<input id="password" name="password" type="password" th:each="cookie:${#request.getCookies()}" th:if="${cookie.getName().equals('password')}" th:value="${cookie.getValue()}"></p> <p>Remember:<input id="remember" name="remember" type="checkbox"></p> <div id="subDiv"> <input type="submit" class="button" value="login up"> <input type="reset" class="button" value="reset"> <a href="register.html">没有账号？</a> </div> </form> </div> -
登录成功（两种情况）
1.//直接实现一个简单的用户登录成功样式（推荐） <h2>欢迎你:<span th:text="${session.user.username}"></span></h2> 2.通过servlet实现 @WebServlet( "/success") public class SucessServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request,response); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); String username = request.getAttribute("username").toString(); //直接向网页上打印 PrintWriter writer = response.getWriter(); writer.write("欢迎你，用户："+username); } } -
验证码图片检验，防止机器人攻击服务器
@WebServlet("/checkcode") public class CheckServlet extends ViewBaseServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ServletOutputStream outputStream = response.getOutputStream(); //设置验证码图片的长宽，输出页面，以及验证码长度 String s = CheckCodeUtil.outputVerifyImage(100, 50, outputStream, 4); System.out.println(s); //输出流使用后要关闭，避免造成内存阻塞，不然验证码图片不显示刷新 outputStream.close(); HttpSession session = request.getSession(); session.setAttribute("checkCode", s); } } -
注册用户
@WebServlet("/register") public class RegisterServlet extends ViewBaseServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String username = request.getParameter("username"); String password = request.getParameter("password"); String checkCode = request.getParameter("checkCode"); HttpSession session = request.getSession(); //获取验证码生成的字符串 String checkCode1 = (String) session.getAttribute("checkCode"); UserDao userDao = new UserDao(); User user = new User(); user.setUsername(username); user.setPassword(password); //和用户输入的字符串对比检验 if (checkCode.equalsIgnoreCase(checkCode1)) { int i = userDao.addUser(user); if (i > 0) { //设置注册成功后直接登录 request.getRequestDispatcher("login").forward(request,response); } }else { //设置验证码输入错误后重新跳转到注册页面 request.setAttribute("msg", "验证码错误"); super.processTemplate("register", request, response); } } } <div class="form-div"> <div class="reg-content"> <h1>欢迎注册</h1> <span>已有帐号？</span> <a href="login.html">登录</a> </div> <form id="reg-form" action="register" method="get"> <table> <tr> <td>用户名</td> <td class="inputs"> <input name="username" type="text" id="username"> <br> <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span> </td> </tr> <tr> <td>密码</td> <td class="inputs"> <input name="password" type="password" id="password"> <br> <span id="password_err" class="err_msg" style="display: none">密码格式有误</span> </td> </tr> <tr> <td>验证码</td> <td class="inputs"> <input name="checkCode" type="text" id="checkCode"> <img src="checkcode" id="checkimg"> <!-- 设置用户看不清可以刷新验证码图片 ，javascript:void(0)实现简单跳转 --> <a href="javascript:void(0)" id="changeImg" οnclick="changecode()">看不清？</a> <!-- 验证码输入错误时会显示 --> <p th:text="${msg}"></p> </td> </tr> </table> <div class="buttons"> <input value="注 册" type="submit" id="reg_btn"> </div> <br class="clear"> </form> </div> <script> function changecode(){ //设置时间戳，点击看不清时可以刷新验证码 document.getElementById("checkimg").src="checkcode?"+new Date().getTime(); } </script> -
用户
public class UserDao implements Impl { @Override //查询账号验证码和mysql里面的表是否正确 public User selectByNameAndPwd(User loginUser) { User user=null; String username=loginUser.getUsername(); String password=loginUser.getPassword(); String sql="select * from tb_user where username=? and password=?"; List<Map<String, Object>> maps = JdbcUtil.executeQuery(sql, username, password); if(maps.size()>0){ user=new User(); Map<String, Object> map = maps.get(0); user.setId(Integer.valueOf(map.get("id").toString())); user.setUsername(map.get("username").toString()); user.setPassword(map.get("password").toString()); } return user; } @Override //添加用户数据（注册） public int addUser(User user) { String username = user.getUsername(); String password = user.getPassword(); String sql="insert into tb_user(username,password) value(?,?)"; int i = JdbcUtil.executeUpdate(sql, username, password); return i; } } 设置接口 public interface Impl { User selectByNameAndPwd(User loginUser); int addUser(User user); } ViewBaseServlet： public class ViewBaseServlet extends HttpServlet { private TemplateEngine templateEngine; @Override public void init() throws ServletException { // 1.获取ServletContext对象 ServletContext servletContext = this.getServletContext(); // 2.创建Thymeleaf解析器对象 ServletContextTemplateResolver templateResolver = new ServletContextTemplateResolver(servletContext); // 3.给解析器对象设置参数 // ①HTML是默认模式，明确设置是为了代码更容易理解 templateResolver.setTemplateMode(TemplateMode.HTML); // ②设置前缀 String viewPrefix = servletContext.getInitParameter("view-prefix"); templateResolver.setPrefix(viewPrefix); // ③设置后缀 String viewSuffix = servletContext.getInitParameter("view-suffix"); templateResolver.setSuffix(viewSuffix); // ④设置缓存过期时间（毫秒） templateResolver.setCacheTTLMs(60000L); // ⑤设置是否缓存 templateResolver.setCacheable(true); // ⑥设置服务器端编码方式 templateResolver.setCharacterEncoding("utf-8"); // 4.创建模板引擎对象 templateEngine = new TemplateEngine(); // 5.给模板引擎对象设置模板解析器 templateEngine.setTemplateResolver(templateResolver); } protected void processTemplate(String templateName, HttpServletRequest req, HttpServletResponse resp) throws IOException { // 1.设置响应体内容类型和字符集 resp.setContentType("text/html;charset=UTF-8"); // 2.创建WebContext对象 WebContext webContext = new WebContext(req, resp, getServletContext()); // 3.处理模板数据 templateEngine.process(templateName, webContext, resp.getWriter()); } }
总结：
-
感觉设置页面打开初始路径为登录页面这个点很巧妙
-
遇到的主要问题会有转发和重定向以及thymeleaf的使用有点混淆，要注意区别
-
在设置验证码刷新这一块，有很多需要注意的点；例如验证码不会刷新就是没有加上时间戳，验证码图片不显示就是输出流没有关闭，还有设置验证码输出错误时，需要定义到当前页面重新输入
-
在进行设置数据库时，id要设置自动递增
990
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
