【途牛旅游项目】02 - 登录功能实现 - 验证码功能 - ajax实现登录

傷城~ 2022-12-12 12:29 289阅读 0赞

文章目录

    • 登录功能分析图解
    • 最终实现截图
    • 实现登录功能
        1. 创建测试类
        1. 创建业务层UserService
        1. 创建实体类 - User用户类和Msg错误提示类
        1. 创建dao层
        1. 创建dao的映射文件
        1. 创建属性文件，连接数据库db.properties
        1. 编写日志配置log4j2.xml
        1. 配置Spring核心配置文件applicationContext.xml
        1. 创建获取class类的工具类GetDaoUtils
        1. 运行测试类，测试逻辑是否有问题
        1. 编写随机生成验证码的业务逻辑类
        1. 编写图片验证码的servlet
        1. 登录servlet
        1. 编写filter，全局编码解决
        1. 编写页面jsp，点击验证码进行图片更换
        1. aJax实现异步登录，并判断输入是否合法，防止非法注入
        1. 运行结果

登录功能分析图解

在这里插入图片描述

最终实现截图

在这里插入图片描述

实现登录功能

1. 创建测试类

  1. //测试user业务层
  2. public class TestUserService { 
  4.     //测试登录
  5.     @Test
  6.     public void test01(){ 
  7.         UserService userService = new UserService();
  9.         //创建user数据
  10.         User user = new User();
  11.         user.setUsername("861221293");
  12.         user.setPassword("ABC123456");
  13.         //user.setStatus("Y");//用户激活
  15.         //测试登录
  16.         int code = userService.login(user);
  17.         if(code == 1){ 
  18.             System.out.println("登录成功");
  19.         }else if(code == -1){ 
  20.             System.out.println("用户名或密码错误");
  21.         }else if(code == -2){ 
  22.             System.out.println("用户未激活");
  23.         }
  24.     }
  25. }

2. 创建业务层UserService

  1. //user业务层
  2. public class UserService { 
  4.     private static UserDao userDao = null;
  6.     //登录用户
  7.     public int login(User user) { 
  8.         userDao = GetDaoUtils.getMapper(UserDao.class);
  10.         User u = userDao.getUserByUsernamePassword(user);
  11.         if(u == null){ 
  12.             return -1;  //账号密码匹配找不到
  13.         }else { 
  14.             //判断用户user是否激活
  15.             if(u.getStatus().equals("Y")){ 
  16.                 return 1;   //账号密码正确，且已经激活
  17.             }else { 
  18.                 return -2;  //账号未激活
  19.             }
  20.         }
  21.     }
  22. }

3. 创建实体类 - User用户类和Msg错误提示类

  1. //User类
  2. public class User { 
  3.     private int uid;
  4.     private String username;    //登录用户名
  5.     private String password;    //密码
  6.     private Date birthday;      //生日
  7.     private String name;        //昵称
  8.     private String sex;         //性别
  9.     private String telephone;   //电话号码
  10.     private String email;       //邮箱
  11.     private String status;      //激活状态
  12.     private String code;        //激活码（UUID）
  13.     //省略getter/setter方法
  14. }
  16. //Msg信息提示类
  17. public class Msg { 
  18.     private int code;
  19.     private Object data;
  20.     //省略getter/setter方法
  21. }

4. 创建dao层

  1. public interface UserDao { 
  2.     // 通过usernmae和password查询用户
  3.     public User getUserByUsernamePassword(User user);
  4. }

5. 创建dao的映射文件

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  4. <mapper namespace="com.xgf.dao.UserDao">
  5.     <select id="getUserByUsernamePassword" parameterType="com.xgf.bean.User" resultType="com.xgf.bean.User">
  6.            select uid,username,password,name,birthday,sex,telephone,email,status,code
  7.             from tab_user
  8.             where username = #{username} and password = #{password}
  9.     </select>
  10. </mapper>

6. 创建属性文件，连接数据库db.properties

  1. #mysql jdbc 属性文件里面不能有分号
  2. jdbc.driver = com.mysql.jdbc.Driver
  3. jdbc.url = jdbc:mysql://localhost:3306/travelnetwork?useUnicode=true&characterEncoding=UTF-8&useSSL=false
  4. jdbc.username = root
  5. jdbc.password = 861221293

7. 编写日志配置log4j2.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!-- 日志文件 -->
  3. <Configuration status="WARN">
  4.     <Appenders>
  5.         <!--Console向控制台追加日志 SYSTEM_OUT系统输出控制台 -->
  6.         <Console name="Console" target="SYSTEM_OUT">
  7.             <PatternLayout pattern=" 日志log： %d{HH:mm:ss.SSS} [%t] %-5level %logger{36} - %msg%n "/>
  8.         </Console>
  9.     </Appenders>
  10.     <!-- 记录哪些类的日志信息 -->
  11.     <Loggers>
  12.         <!--DEBUG 是日志级别 调试信息也会记录 -->
  13.         <Logger name="com.xgf.dao" level="DEBUG"/>
  14.         <Root level="error">
  15.             <AppenderRef ref="Console"/>
  16.         </Root>
  17.     </Loggers>
  18. </Configuration>

8. 配置Spring核心配置文件applicationContext.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xmlns:mybatis="http://mybatis.org/schema/mybatis-spring" xmlns:tx="http://www.springframework.org/schema/tx" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://mybatis.org/schema/mybatis-spring http://mybatis.org/schema/mybatis-spring.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd">
  6.     <!--1. 引入jdbc的属性文件，在配置中通过占位使用 -->
  7.     <context:property-placeholder location="classpath*:db.properties" />
  9.     <!--2. <context:component-scan>扫描包中注解所标注的类(@Component、@Service、@Controller、@Repository) -->
  10.     <context:component-scan base-package="com.xgf"/>
  12.     <!--3. 由spring管理 配置数据源数据库连接(从jdbc属性文件中读取参数) -->
  13.     <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
  14.         <property name="username" value="${jdbc.username}"/>
  15.         <property name="password" value="${jdbc.password}"/>
  16.         <property name="url" value="${jdbc.url}"/>
  17.         <property name="driverClassName" value="${jdbc.driver}"/>
  18.     </bean>
  20.     <!-- 通过spring来管理Mybatis的sqlSessionFactory对象创建，将MyBatis的二级缓存配置configLocation粘入 -->
  21.     <!--4. 通过完全限定名匹配查找 创建SqlSessionFactoryBean -->
  22.     <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
  23.         <property name="dataSource" ref="dataSource" />
  24.     </bean>
  26.     <!-- 5. mybatis提供的一个注解扫描标签（搜索映射器 Mapper 接口），通过自动扫描注解的机制，创建每个dao接口定义的bean -->
  27.     <mybatis:scan base-package="com.xgf.dao"/>
  29. </beans>

9. 创建获取class类的工具类GetDaoUtils

  1. // 获取bean工具类
  2. public class GetDaoUtils { 
  4.     private static ApplicationContext applicationContext = null;
  6.     //静态代码块 只加载一次
  7.     static { 
  8.         //加载配置文件
  9.         applicationContext = new ClassPathXmlApplicationContext("com/xgf/config/applicationContext.xml");
  10.     }
  12.     public static <T> T getMapper(Class classFile) { 
  13.        return (T) applicationContext.getBean(classFile);
  14.     }
  15. }

10. 运行测试类，测试逻辑是否有问题

测试结果，测试成功
>Preparing: select uid,username,password,name,birthday,sex,telephone,email,status,code from tab\_user where username = ? and password = ?

11. 编写随机生成验证码的业务逻辑类

  1. /* * 生成验证码，并将验证码转化为图片的业务层 * */
  2. public class VerificationCodeService { 
  4.     public VerificationCodeService() { 
  5.     }
  7.     // 生成验证码字符串 -- 随机数
  8.     public String createRandomCode() { 
  9.         String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";//所有随机数字符串集合
  10.         //Random类 产生指定范围内的随机数
  11.         Random random = new Random();
  13.         StringBuilder sb = new StringBuilder();
  14.         //随机截取4个字符
  15.         for(int i =0 ;i < 4; i++){ //4个随机数
  16.             //包括开头不包括结尾 从0到str.length()-1里面随机产生一个整数
  17.             int index = random.nextInt(str.length());//从0到str.length()不包括最后一个 右边开区间
  18.             char randomStr = str.charAt(index);//安装随机产生的值获取字符
  19.             sb.append(randomStr);//StringBuilder拼接字符串
  21.         }
  22.         return sb.toString();
  23.     }
  26.     // 将生成的随机字符串验证码转化为图片
  27.     public BufferedImage changeStringToImage(String code) { 
  28.         Random rd = new Random();
  29.         //创建一个画布
  30.         int width = 80;
  31.         int height = 30;
  32.         BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
  33.         //创建画笔
  34.         Graphics g = image.getGraphics();
  35.         //给画笔设置颜色(绘制随机验证码的时候的验证码颜色)
  36.         g.setColor(new Color(240,240,240));  //#00000 FFFFFF
  37.         //设置验证码的 背景色
  38.         g.fillRect(0, 0, width, height);
  39.         // 设置字体
  40.         g.setFont(new Font("宋体",Font.BOLD,16));
  42.         g.setColor(new Color(0,0,0));  //#00000 FFFFFF
  43.         // g.drawString(checkCodeStr, 20, 20);
  44.         for (int i = 0; i <4 ; i++) { 
  45.             //画字符
  46.             g.setColor(new Color(rd.nextInt(120),rd.nextInt(120),rd.nextInt(120)));
  47.             g.drawString(code.charAt(i)+"", 16*i + rd.nextInt(16), 15 + rd.nextInt(10) );
  48.             if(i % 2 == 0) { //画线
  49.                 g.setColor(new Color(rd.nextInt(120), rd.nextInt(120), rd.nextInt(120)));
  50.                 g.drawLine(rd.nextInt(75), rd.nextInt(28), rd.nextInt(75), rd.nextInt(28));
  51.             }
  52.         }
  53.         return image;
  54.     }
  55. }

12. 编写图片验证码的servlet

  1. // 验证码-生成验证码显示成图片的servlet
  2. @WebServlet("/checkCodeServlet")
  3. public class CheckCodeServlet extends HttpServlet { 
  4.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
  5.         doGet(request,response);
  6.     }
  8.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
  10.         //服务器通知浏览器不要缓存
  11.         response.setHeader("pragma","no-cache");
  12.         response.setHeader("cache-control","no-cache");
  13.         response.setHeader("expires","0");
  14.         //1：创建一个验证码的业务
  15.         VerificationCodeService vcs = new VerificationCodeService();
  16.         //2:生产一个随机的4个字符组成的字符串
  17.         String verificationCode =  vcs.createRandomCode();
  18.         System.out.println(verificationCode);
  20.         //将验证码保存到session中
  21.         HttpSession session = request.getSession();
  22.         session.setAttribute("verificationCode",verificationCode);
  24. // request.setAttribute("verificationCode",verificationCode);
  26.         //3:将字符串转成图片
  27.         //BufferedImage类将图片生成到内存中，然后直接发送给浏览器
  28.         BufferedImage image =  vcs.changeStringToImage(verificationCode);
  30.         //4:使用OutputStream写到浏览器
  31. // System.out.println(image);
  32.         //获取输出流
  33.         ServletOutputStream outputStream = response.getOutputStream();
  35.         ImageIO.write(image,"jpeg",outputStream);//参1，内存中的图片 参2，格式 参3，字节输出流
  36.         outputStream.flush();
  37.         outputStream.close();//关流
  38. // request.getRequestDispatcher("/").forward(request,response);
  39.     }
  40. }

13. 登录servlet

  1. @WebServlet("/LoginServlet")
  2. public class LoginServlet extends HttpServlet { 
  5.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
  6.         doGet(request, response);
  7.     }
  9.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
  11.         UserService userService = new UserService();
  12.         HttpSession session = request.getSession();//获取session对象，里面主要是验证码和当前user
  13.         Msg msg = new Msg();//提示信息
  15.         //用户输入的验证码
  16.         String inputCheckCode = request.getParameter("inputCheckCode");
  17.         //从session中获取系统当前生成的验证码
  18.         String verificationCode = (String) session.getAttribute("verificationCode");
  19.         System.out.println("inputCheckCode : " + inputCheckCode + " ;\t verificationCode : " + verificationCode);
  21.         //inputCheckCode 与 verificationCode
  22.         //相同表示验证码不正确，将提示信息写到页面的错误提示
  23.         if (inputCheckCode == null || !inputCheckCode.equalsIgnoreCase(verificationCode)) { 
  24.             //验证码不看大小写
  25.             msg.setCode(-3);
  26.             msg.setData("验证码输入出错，请重新输入验证码");
  28.             //将字符串转换为json数据格式返回给浏览器
  29.             String json = new ObjectMapper().writeValueAsString(msg);
  30.             response.getWriter().println(json);
  31.             return; //返回不继续执行
  32.         }
  35.         //获取请求参数
  36.         Map<String, String[]> map = request.getParameterMap();
  37.         //当前登录用户
  38.         User loginUser = new User();
  39.         try { 
  40.             //参1 javaBean 参2 map 封装bean对象
  41.             BeanUtils.populate(loginUser, map);//将map里面所有的参数赋值给javaBean(login就是输入的username和password)
  42.         } catch (IllegalAccessException e) { 
  43.             e.printStackTrace();
  44.         } catch (InvocationTargetException e) { 
  45.             e.printStackTrace();
  46.         }
  48.         //调用service处理参数，查询当前登录username和password是否存在
  49.         int code = userService.login(loginUser);
  50.         //响应给浏览器 ajax 是响应json给浏览器就可以
  51.         msg.setCode(code);//设置code
  53.         if (code == 1) { 
  54.             msg.setData("登录成功，欢迎您的使用Login Success");
  55.             //将登录user保存到session中
  56.             session.setAttribute("user", loginUser);
  57.             //判断是否开启免登陆
  58.             //登录成功且开启了十天免登陆 就要保存/覆盖cookie
  59.             String ssh = request.getParameter("ssh");
  60.             //从session中删除生成的验证码 不移除的话可能会覆盖新的验证码
  61.             session.removeAttribute("verificationCode");
  62.         } else if (code == -1) { 
  63.             msg.setData("您输入的用户名或密码错误，请重新输入Incorrect user name or password");
  65.         } else if (code == -2) { 
  66.             msg.setData("您的账号还没有激活，请前往激活The account is activated");
  67.         }
  69.         //将字符串转成json数据格式，返回给浏览器显示提示信息msg
  70.         String json = new ObjectMapper().writeValueAsString(msg);
  71.         response.getWriter().println(json);
  72.     }
  73. }

14. 编写filter，全局编码解决

  1. //解决全站乱码问题，处理所有的请求，拦截所有设置编码
  2. @WebFilter("/*")
  3. public class CharchaterFilter implements Filter { 
  4.     public void init(FilterConfig filterConfig) throws ServletException { 
  5.     }
  7.     @Override
  8.     public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException { 
  9.         System.out.println("CharchaterFilter");
  10.         //设置请求编码
  11.         req.setCharacterEncoding("UTF-8");
  12.         //设置响应编码
  13.         resp.setContentType("text/html;charset=UTF-8");
  14.         //放行
  15.         chain.doFilter(req, resp);
  16.     }
  18.     public void destroy() { 
  20.     }
  21. }

15. 编写页面jsp，点击验证码进行图片更换

  1. <section id="login_wrap">
  2.     <div class="fullscreen-bg" style="background: url(images/login_bg.png);height: 532px;">
  4.     </div>
  5.     <div class="login-box">
  6.         <div class="title">
  7.             <img src="images/login_logo.png" alt="">
  8.             <span>欢迎登录途牛旅游账户</span>
  9.         </div>
  10.         <div class="login_inner">
  12.             <!--登录错误提示消息-->
  13.             <div id="errorMsg" class="alert alert-danger" ></div>
  14.             <form id="loginForm" action="" method="post" accept-charset="utf-8">
  15.                 <input type="hidden" name="action" value="login"/>
  16.                 <input id="username" name="username" type="text" placeholder="请输入账号">
  17.                 <input id="password" name="password" type="password" placeholder="请输入密码" autocomplete="off">
  18.                 <div class="verify">
  19.                     <input name="inputCheckCode" type="text" placeholder="请输入验证码" autocomplete="off">
  20.                     <span><img src="checkCodeServlet" alt="" onclick="changeCheckCode(this)"></span>
  21.                     <script type="text/javascript">
  22.                         //图片点击事件
  23.                         function changeCheckCode(img) { 
  24.                             img.src="checkCodeServlet?"+new Date().getTime();//添加时间戳
  25.                         }
  26.                     </script>
  27.                 </div>
  29.                 <div class="submit_btn" >
  30.                     <button id="btn_login" type="button">登录</button>
  31.                     <div class="auto_login">
  32.                         <%-- ssh : 免密码登录 --%>
  33.                         <input type="checkbox" name="ssh" value="ssh" class="checkbox" style="margin-left: 10px">
  34.                         <span >十天免登陆</span>
  35.                     </div>
  36.                 </div>
  37.             </form>
  38.             <div class="reg" >没有账户？<a href="javascript:;">立即注册</a></div>
  39.         </div>
  40.     </div>
  41. </section>
  42. <!--引入尾部-->
  43. <div id="footer">
  45. </div>

16. aJax实现异步登录，并判断输入是否合法，防止非法注入

  1. <script type="text/javascript" >
  2.         //检查用户名是否规范
  3.         function checkUserName(){ 
  4.             //获取输入框的值
  5.             var username = $("#username").val();
  7.             //正则表达式 定义一个规则，执行test方法，符合规则返回true，否则返回false
  8.             var reg =  /^\w{8,20}$/ ;
  9.             var flag = reg.test(username); //判断
  11.             //如果符合要求，设置输入框边框是正常，否则设置红色
  12.             if(flag){ 
  13.                 $("#username").css("border","");
  14.             }else{ 
  15.                 $("#username").css("border","1px solid red");
  16.             }
  17.             //alert(flag)
  18.             return flag;
  19.         }
  20.         //检查密码是否规范
  21.         function checkPassword(){ 
  22.             //判断密码输入框的值是否合法
  23.             var username = $("#password").val();
  24.             var reg =  /^\w{8,20}$/ ;
  26.             var flag = reg.test(username); //判断
  27.             if(flag){ 
  28.                 $("#password").css("border","");//无色框
  29.             }else{ 
  30.                 $("#password").css("border","1px solid red");//红框
  31.             }
  32.             //alert(flag)
  33.             return flag;
  34.         }
  35.         //页面加载执行函数
  36.         $(function () { 
  37.             $("#errorMsg").html("");
  38.             // 判断两个输入框架的是否格式正确
  39.             $("#username").blur(checkUserName);//输入框失去焦点
  40.             // 如果正确，使用ajax发送请求到servlet
  41.             $("#password").blur(checkPassword);
  43.             //登录判断，username、password是否符合注册规范，如果不符合报错(防止直接注入)
  44.             $("#btn_login").click(function () { 
  45.                 //alert("点击btn_login")
  46.                 //要求两个值正确，我们才做提交
  47.                 if(checkUserName()&&checkPassword()){ 
  48.                     var username = $("#username").val()
  49.                     var password = $("#password").val()
  50.                     var inputCheckCode = $("#inputCheckCode").val()
  51.                     //alert(username+password+inputCheckCode)
  52.                     //写提交
  53.                     $.ajax({ 
  54.                         url:"LoginServlet",
  55.                         async:true,
  56.                         data:$("#loginForm").serialize(),
  57.                         type:"post",
  58.                         dataType:"json",
  59.                         success:function (data) { 
  60.                             // alert(data) {"code":1,"data":"登录成功"}
  61.                             if(1 == data.code){ 
  62.                                 //跳转到主页 index.jsp
  63.                                 $("#errorMsg").html("");
  64.                                 window.location="index.jsp"
  65.                             }else{ 
  66.                                 //显示在界面上
  67.                                 $("#errorMsg").html(data.data);
  68.                             }
  69.                         },
  70.                         error:function () { 
  71.                             alert("服务器发生了错误Error")//比如找不到servlet
  72.                         }
  73.                     });
  74.                 }else{ 
  75.                     $("#errorMsg").html("用户名或密码输入不规范，用户名密码错误");
  76.                 }
  77.             })
  78.         })
  80.     </script>

17. 运行结果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
登录成功：
在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，289人围观）

还没有评论，来说两句吧...

相关阅读