经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » Java相关 » Java » 查看文章
一步一步实现web程序信息管理系统之三----登陆业务逻辑实现(验证码功能+参数获取)
来源:cnblogs  作者:火炎_焱燚  时间:2018/11/9 13:05:00  对本文有异议

本篇紧接着上一篇文章[一步一步实现web程序信息管理系统之二----后台框架实现跳转登陆页面]

验证码功能

一般验证码功能实现方式为,前端界面访问一个url请求,后端服务代码生成一个图片流返回至浏览器,浏览器通过img标签来展示图片信息,其流程模式如下所示:
在这里插入图片描述

  • 前端界面
    前端界面需要完成的功能,
    1)跳转到登陆页面后立即生成一个验证码图片
    2)由于看不清或其他原因,可以更改验证码图片数据
    更改img标签的属性以及增加一个事件
  1. <img src="/verify/authImage?1" id="codeImg" alt="点击更换" onclick="javascript:changeImg()"
  2. title="点击更换" />

增加以下javascript代码,来向后端服务请求图片,鼠标点击一下验证码图片即可实现刷新验证码

  1. <script src="../static/plugins/jquery-1.12.4/jquery.min.js" th:src="@{/plugins/jquery-1.12.4/jquery.min.js}" ></script>
  2. <script type="text/javascript">
  3. function changeImg(){
  4. var imageCode=$("#codeImg");
  5. imageCode.attr('src', '/verify/authImage?date=' + new Date());
  6. }
  7. </script>
  • 后端业务
    生成验证码功能是一个通用的方法,其他业务或以后其他地方也能使用的到。我们可以再次创建一个maven module模块项目,用于存放一些公共组件。比如:现在的生成验证码代码模块、以后的web模块统一返回数据功能等等。创建工程项目可以参照上一篇文章完成。
    生成验证码图片源代码
  1. package springboot.study.common;
  2. import java.awt.Color;
  3. import java.awt.Font;
  4. import java.awt.Graphics;
  5. import java.awt.image.BufferedImage;
  6. import java.io.IOException;
  7. import java.io.OutputStream;
  8. import java.util.Random;
  9. import javax.imageio.ImageIO;
  10. public class AuthImageCodeUtils {
  11. private static final Color Color = null;
  12. private static char mapTable[] = { 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q',
  13. 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', };
  14. /**
  15. * 功能:生成彩色验证码图片 参数width为生成图片的宽度,参数height为生成图片的高度,参数os为页面的输出流
  16. */
  17. public static String getCerPic(int width, int height, OutputStream os) {
  18. if (width < 60) {
  19. width = 60;
  20. }
  21. if (height <= 0) {
  22. height = 20;
  23. }
  24. BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_3BYTE_BGR);
  25. // 获取图形上下文
  26. Graphics graphics = image.getGraphics();
  27. // 设定背景颜色
  28. graphics.setColor(new Color(0xDCDCDC));
  29. graphics.fillRect(0, 0, width, height);
  30. // 边框
  31. graphics.setColor(Color.black);
  32. graphics.drawRect(0, 0, width - 1, height - 1);
  33. // 随机产生验证码
  34. String strEnsure = "";
  35. // 4代表4位验证码
  36. for (int i = 1; i <= 4; i++) {
  37. strEnsure += mapTable[(int) (mapTable.length * Math.random())];
  38. }
  39. // 将图形验证码显示在图片中
  40. graphics.setColor(Color.black);
  41. graphics.setFont(new Font("Atlantic Inline", Font.PLAIN, 20));
  42. String str = strEnsure.substring(0, 1);
  43. graphics.drawString(str, 8, 17);// 8:左右距离,17:上下距离
  44. str = strEnsure.substring(1, 2);
  45. graphics.drawString(str, 20, 15);
  46. str = strEnsure.substring(2, 3);
  47. graphics.drawString(str, 35, 18);
  48. str = strEnsure.substring(3, 4);
  49. graphics.drawString(str, 45, 15);
  50. // 随机产生10个干扰点
  51. Random random = new Random();
  52. for (int i = 0; i <= 10; i++) {
  53. int x = random.nextInt(width);
  54. int y = random.nextInt(height);
  55. graphics.drawOval(x, y, 1, 1);
  56. }
  57. // 释放图形上下文
  58. graphics.dispose();
  59. try {
  60. ImageIO.write(image, "JPEG", os);
  61. } catch (IOException e) {
  62. e.printStackTrace();
  63. return "";
  64. }
  65. return strEnsure;
  66. }
  67. }

controller处理请求源代码

  1. @RequestMapping("/verify/authImage")
  2. public void authImage(HttpServletRequest request,HttpServletResponse response) throws IOException {
  3. response.setHeader("Pragma", "No-cache");
  4. response.setHeader("Cache-Control", "no-cache");
  5. response.setDateHeader("Expires", 0);
  6. response.setContentType("image/jpeg");
  7. // 生成随机字串
  8. //String verifyCode = VerifyCodeUtils.generateVerifyCode(4);
  9. // 存入会话session
  10. HttpSession session = request.getSession(true);
  11. // 删除以前的
  12. // 生成图片
  13. int w = 60, h = 20;
  14. OutputStream out = response.getOutputStream();
  15. //VerifyCodeUtils.outputImage(w, h, out, verifyCode);
  16. String verifyCode=AuthImageCodeUtils.getCerPic(w, h, out);
  17. System.out.println(verifyCode);
  18. session.removeAttribute("verCode");
  19. session.removeAttribute("codeTime");
  20. session.setAttribute("verCode", verifyCode.toLowerCase());
  21. session.setAttribute("codeTime", LocalDateTime.now());
  22. }

完成后启动一下程序,访问http://localhost:9001/即可看到后端生成的验证码图片
在这里插入图片描述
鼠标点击一个图标可以更换验证码图片。这里只是我实现的验证码图片,效果可能不是特别好。
如果哪位小伙伴有好一点的算法或效果,可以互相学习一下
提示:eclipse中如何在一个项目中引用其他项目,右键点击项目->maven->add dependency
在这里插入图片描述

登陆实现

上面已经实现验证码功能,但我们还没有完成提交登陆表单数据,还无法完成登陆功能。在实现提交登陆表单之前应该对输入的数据进行校验一下,复杂的校验不在我们考虑之内(应该以自己实际项目需要来制定)但用户名为空、密码为空、验证码信息为空这些基本的应该有,所以我们继续完善登陆页面。

  • 界面html代码
  1. function checkValidity() {
  2. var userText = $("#username");
  3. var passwordText = $("#password");
  4. var codeText = $("#code");
  5. if (userText.val() == "") {
  6. userText.tips({
  7. side : 2,
  8. msg : '用户名不得为空',
  9. bg : '#AE81FF',
  10. time : 3
  11. });
  12. userText.focus();
  13. return false;
  14. }
  15. if (passwordText.val() == "") {
  16. passwordText.tips({
  17. side : 2,
  18. msg : '密码数据不得为空',
  19. bg : '#AE81FF',
  20. time : 3
  21. });
  22. passwordText.focus();
  23. return false;
  24. }
  25. if (codeText.val() == "") {
  26. codeText.tips({
  27. side : 2,
  28. msg : '验证码不得为空',
  29. bg : '#AE81FF',
  30. time : 3
  31. });
  32. codeText.focus();
  33. return false;
  34. }
  35. return true;
  36. }
  37. function loginCheck() {
  38. if(checkValidity()){
  39. }
  40. }

当不输入密码时,界面提示效果
在这里插入图片描述
密码与验证码效果类似。
登陆表单提交采用post方式提交

  1. function loginCheck() {
  2. if(checkValidity()){
  3. var username=$("#username").val();
  4. var password=$("#password").val();
  5. var code=$("#code").val();
  6. $.ajax({
  7. type: "post",//post类型请求
  8. url: '/login',//url
  9. data: {'username':username,'password':password,'code':code,'tm':new Date().getTime()},//请求数据
  10. dataType:'json',//数据类型为JSON类型
  11. cache: false,//关闭缓存
  12. success: function(data){
  13. }
  14. });
  15. }
  16. }

登陆逻辑实现代码

  1. @RequestMapping("/login")
  2. @ResponseBody
  3. public JsonResult loginCheck(String username,String password,String code){
  4. System.out.println("username == "+ username +" password=== "+password +" code==="+code);
  5. JsonResult js=null;
  6. return js;
  7. }

仅仅实现显示出前端界面发送来的数据。编写完成后,我们重新启动一下程序。可以看到如下效果:
在这里插入图片描述
可以看到我们在后端获取到 前端界面发送来的数据。

下一篇整合数据库来实现真正的登陆。
附上本篇文章的源码地址
一步一步实现web程序信息管理系统之三----登陆业务逻辑实现(验证码功能+参数获取)

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号