注释：本文所使用的jdbc工具类和验证码生成工具类未写出

  1. 首先设置页面首页为登录页面 ```java @WebServlet(“/index”) public class IndexServlet extends ViewBaseServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    1. this.doPost(request, response);

    }

    @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    1. //首先需要使用thymeleaf渲染login.html登录页面，由于不需要设置参数，看起来就和网页直接打开的界面一样
    2. super.processTemplate("login",request,response);

    } } 实现thymeleaf渲染

  1. web.html配置参数
  2.     <context-param>
  3.     <!-- 视图(html页面)的前缀 -->
  4.     <param-name>view-prefix</param-name>
  5.     <param-value>/</param-value>
  6. </context-param>
  7. <context-param>
  8.     <!-- 视图(html文件)的前缀 -->
  9.     <param-name>view-suffix</param-name>
  10.     <param-value>.html</param-value>
  11. </context-param>
  12. <!-- 访问欢迎页面-->
  13. <welcome-file-list>
  14.     <welcome-file>index</welcome-file>
  15. </welcome-file-list>
  3. 2.  设置登录界面，包括检验账号密码和记住我，以及注册等等功能 
  4. ```java
  5. @WebServlet("/login")
  6. public class ServletLogin extends ViewBaseServlet {
  7.     @Override
  8.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  9.         this.doPost(request, response);
  10.     }
  12.     @Override
  13.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  14.         String username = request.getParameter("username");
  15.         String password = request.getParameter("password");
  16.         UserDao userDao = new UserDao();
  17.         User user = new User();
  18.         user.setUsername(username);
  19.         user.setPassword(password);
  20.         User userlogin = userDao.selectByNameAndPwd(user);
  21.         String remember = request.getParameter("remember");
  22.         if (userlogin != null) {
  23.             if (remember!=null) {
  24.                 //设置客户端用户登录数据
  25.                 Cookie cookie1 = new Cookie("username", username);
  26.                 Cookie cookie2 = new Cookie("password", password);
  27.                 //设置cookie存活时间，除非服务器重启失效和客户端清除用户数据
  28.                 cookie1.setMaxAge(7 * 24 * 60 * 60);
  29.                 cookie2.setMaxAge(7 * 24 * 60 * 60);
  30.                 response.addCookie(cookie1);
  31.                 response.addCookie(cookie2);
  32.             }
  33.             //服务端存储用户数据
  34.             HttpSession session=request.getSession();
  35.             session.setAttribute("user",user);
  36.             //登录成功后实现页面跳转到用户
  37.            super.processTemplate("success",request,response);
  38.         } else {
  39.             request.setAttribute("error","用户名或密码不正确");
  40.             //账号密码错误后显示输出错误，重新跳转页面进行输入
  41.             super.processTemplate("login", request, response);
  42.         }
  43.     }
  44. }
  46. <div id="loginDiv" style="height: 350px">
  47.     <form action="login" id="form" method="post">
  48.         <h1 id="loginMsg">LOGIN IN</h1>
  49. <!--  当登录界面输错后，会显示提示语句      -->
  50.         <div id="errorMsg" th:text="${error}"></div>
  51. <!-- 设置记住我的功能，接收request的cookie，由于接收到cookie是多个，所以需要进行删选过滤 （注意双引号里面包单引号)      -->
  52.         <p>Username:<input id="username" name="username" type="text"  th:each="cookie1:${#request.getCookies()}"
  53.                            th:if="${cookie1.getName().equals('username')}" th:value="${cookie1.getValue()}"></p>
  54.         <p>Password:<input id="password" name="password" type="password" th:each="cookie:${#request.getCookies()}"
  55.         th:if="${cookie.getName().equals('password')}" th:value="${cookie.getValue()}"></p>
  56.         <p>Remember:<input id="remember" name="remember" type="checkbox"></p>
  57.         <div id="subDiv">
  58.             <input type="submit" class="button" value="login up">
  59.             <input type="reset" class="button" value="reset">&nbsp;&nbsp;&nbsp;
  60.             <a href="register.html">没有账号？</a>
  61.         </div>
  62.     </form>
  63. </div>
  1. 登录成功（两种情况） ```html 1.//直接实现一个简单的用户登录成功样式（推荐）

    欢迎你:

2.通过servlet实现 @WebServlet( “/success”) public class SucessServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request,response); }

  1. @Override
  2. protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  3.     response.setContentType("text/html;charset=utf-8");
  4.     String username = request.getAttribute("username").toString();
  5.     //直接向网页上打印
  6.     PrintWriter writer = response.getWriter();
  7.     writer.write("欢迎你，用户："+username);
  8. }

}

  3. 4.  验证码图片检验，防止机器人攻击服务器 
  4. ```java
  5. @WebServlet("/checkcode")
  6. public class CheckServlet extends ViewBaseServlet {
  7.     @Override
  8.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  9.         this.doPost(request, response);
  10.     }
  12.     @Override
  13.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  14.         ServletOutputStream outputStream = response.getOutputStream();
  15.         //设置验证码图片的长宽，输出页面，以及验证码长度
  16.         String s = CheckCodeUtil.outputVerifyImage(100, 50, outputStream, 4);
  17.         System.out.println(s);
  18.         //输出流使用后要关闭，避免造成内存阻塞，不然验证码图片不显示刷新
  19.         outputStream.close();
  20.         HttpSession session = request.getSession();
  21.         session.setAttribute("checkCode", s);
  22.     }
  23. }

  1. 注册用户 ```java @WebServlet(“/register”) public class RegisterServlet extends ViewBaseServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    1. this.doPost(request, response);

    }

    @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    1. String username = request.getParameter("username");
    2. String password = request.getParameter("password");
    3. String checkCode = request.getParameter("checkCode");
    4. HttpSession session = request.getSession();
    5. //获取验证码生成的字符串
    6. String checkCode1 = (String) session.getAttribute("checkCode");
    7. UserDao userDao = new UserDao();
    8. User user = new User();
    9. user.setUsername(username);
    10. user.setPassword(password);
    11. //和用户输入的字符串对比检验
    12. if (checkCode.equalsIgnoreCase(checkCode1)) {
    13.     int i = userDao.addUser(user);
    14.     if (i > 0) {
    15.         //设置注册成功后直接登录
    16.         request.getRequestDispatcher("login").forward(request,response);
    17.     }
    18. }else {
    19.     //设置验证码输入错误后重新跳转到注册页面
    20.     request.setAttribute("msg", "验证码错误");
    21.     super.processTemplate("register", request, response);
    22. }

    } }

欢迎注册

已有帐号？ 登录 

  1.     <table>
  3.         <tr>
  4.             <td>用户名</td>
  5.             <td class="inputs">
  6.                 <input name="username" type="text" id="username">
  7.                 <br>
  8.                 <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
  9.             </td>
  11.         </tr>
  13.         <tr>
  14.             <td>密码</td>
  15.             <td class="inputs">
  16.                 <input name="password" type="password" id="password">
  17.                 <br>
  18.                 <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
  19.             </td>
  20.         </tr>
  23.         <tr>
  24.             <td>验证码</td>
  25.             <td class="inputs">
  26.                 <input name="checkCode" type="text" id="checkCode">
  27.                 <img src="checkcode" id="checkimg">
  28.                 <!--    设置用户看不清可以刷新验证码图片 ，javascript:void(0)实现简单跳转   -->
  29.                 <a href="javascript:void(0)" id="changeImg" onclick="changecode()">看不清？</a>
  30.                     <!--     验证码输入错误时会显示  -->
  31.                 <p th:text="${msg}"></p>
  32.             </td>
  34.         </tr>
  36.     </table>
  38.     <div class="buttons">
  39.         <input value="注 册" type="submit" id="reg_btn">
  40.     </div>
  41.     <br class="clear">
  42. </form>

  3. 6.  用户 
  4. ```java
  5. public class UserDao implements Impl {
  6.     @Override
  7.     //查询账号验证码和mysql里面的表是否正确
  8.     public User selectByNameAndPwd(User loginUser) {
  9.         User user=null;
  10.         String username=loginUser.getUsername();
  11.         String password=loginUser.getPassword();
  12.         String sql="select * from tb_user where username=? and password=?";
  13.         List<Map<String, Object>> maps = JdbcUtil.executeQuery(sql, username, password);
  14.         if(maps.size()>0){
  15.             user=new User();
  16.             Map<String, Object> map = maps.get(0);
  17.             user.setId(Integer.valueOf(map.get("id").toString()));
  18.             user.setUsername(map.get("username").toString());
  19.             user.setPassword(map.get("password").toString());
  20.         }
  21.         return user;
  22.     }
  24.     @Override
  25.     //添加用户数据（注册）
  26.     public int addUser(User user) {
  27.         String username = user.getUsername();
  28.         String password = user.getPassword();
  29.         String sql="insert into tb_user(username,password) value(?,?)";
  30.         int i = JdbcUtil.executeUpdate(sql, username, password);
  31.         return i;
  32.     }
  33. }
  34. 设置接口
  35. public interface Impl {
  36.     User selectByNameAndPwd(User loginUser);
  37.     int addUser(User user);
  38. }
  40. ViewBaseServlet：
  41.     public class ViewBaseServlet extends HttpServlet {
  42.     private TemplateEngine templateEngine;
  44.     @Override
  45.     public void init() throws ServletException {
  47.         // 1.获取ServletContext对象
  48.         ServletContext servletContext = this.getServletContext();
  50.         // 2.创建Thymeleaf解析器对象
  51.         ServletContextTemplateResolver templateResolver = new ServletContextTemplateResolver(servletContext);
  53.         // 3.给解析器对象设置参数
  54.         // ①HTML是默认模式，明确设置是为了代码更容易理解
  55.         templateResolver.setTemplateMode(TemplateMode.HTML);
  57.         // ②设置前缀
  58.         String viewPrefix = servletContext.getInitParameter("view-prefix");
  60.         templateResolver.setPrefix(viewPrefix);
  62.         // ③设置后缀
  63.         String viewSuffix = servletContext.getInitParameter("view-suffix");
  65.         templateResolver.setSuffix(viewSuffix);
  67.         // ④设置缓存过期时间（毫秒）
  68.         templateResolver.setCacheTTLMs(60000L);
  70.         // ⑤设置是否缓存
  71.         templateResolver.setCacheable(true);
  73.         // ⑥设置服务器端编码方式
  74.         templateResolver.setCharacterEncoding("utf-8");
  76.         // 4.创建模板引擎对象
  77.         templateEngine = new TemplateEngine();
  79.         // 5.给模板引擎对象设置模板解析器
  80.         templateEngine.setTemplateResolver(templateResolver);
  82.     }
  84.     protected void processTemplate(String templateName, HttpServletRequest req, HttpServletResponse resp) throws IOException {
  85.         // 1.设置响应体内容类型和字符集
  86.         resp.setContentType("text/html;charset=UTF-8");
  88.         // 2.创建WebContext对象
  89.         WebContext webContext = new WebContext(req, resp, getServletContext());
  91.         // 3.处理模板数据
  92.         templateEngine.process(templateName, webContext, resp.getWriter());
  93.     }
  94. }

总结：

  1. 感觉设置页面打开初始路径为登录页面这个点很巧妙
  2. 遇到的主要问题会有转发和重定向以及thymeleaf的使用有点混淆，要注意区别
  3. 在设置验证码刷新这一块，有很多需要注意的点；例如验证码不会刷新就是没有加上时间戳，验证码图片不显示就是输出流没有关闭，还有设置验证码输出错误时，需要定义到当前页面重新输入
  4. 在进行设置数据库时，id要设置自动递增