vue+SSM实现验证码功能


Posted in Javascript onDecember 07, 2018

 源码:https://github.com/HannahLihui/StudentManager-SSM/tree/master/SSM-git/StudentManager-SSM-master

1.前端有一个img引入,这里this.src=this.src+'?'就会调用映射到后台的checkCode

<el-form-item prop="code">
     <img src="checkCode" alt="" width="100" height="32" class="passcode" style="height:43px;cursor:pointer; float:left;"onclick="this.src=this.src+'?'">>
    <el-input v-model="login.code" placeholder="请输入验证码" style="width: 100px; float:center" auto-complete="off"></el-input>
</el-form-item>

2.后台返回一个图片

@RequestMapping(value="/checkCode")
 public void checkCode(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
 //设置相应类型,告诉浏览器输出的内容为图片
   response.setContentType("image/jpeg");
   HttpSession session = request.getSession();
   //设置响应头信息,告诉浏览器不要缓存此内容
   response.setHeader("pragma", "no-cache");
   response.setHeader("Cache-Control", "no-cache");
   response.setDateHeader("Expire", );
   RandomValidateCode randomValidateCode = new RandomValidateCode();
   try {
    randomValidateCode.getRandcode(request, response);
   } catch (Exception e) {
    e.printStackTrace();
   }
 }

3.是通过RandomValidateCode生成随机字符串以及图片。下面这个代码可以直接用一下。来自:

public class RandomValidateCode {
public static final String RANDOMCODEKEY = "randomcode_key";//放到session中的key
 private Random random = new Random();
 private String randString = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";//随机产生的字符串
 private int width = 80;//图片宽
 private int height = 26;//图片高
 private int lineSize = 40;//干扰线数量
 private int stringNum = 4;//随机产生字符数量
 /**
 * 生成随机图片
 */
 public void getRandcode(HttpServletRequest request,
   HttpServletResponse response) {
  HttpSession session = request.getSession();
  //BufferedImage类是具有缓冲区的Image类,Image类是用于描述图像信息的类
  BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_BGR);
  //产生Image对象的Graphics对象,改对象可以在图像上进行各种绘制操作
  Graphics g = image.getGraphics();
  g.fillRect(0, 0, width, height);
  g.setFont(new Font("Times New Roman",Font.ROMAN_BASELINE,18));
  g.setColor(getRandColor(160, 200));
  //绘制干扰线
  for(int i=0;i<=lineSize;i++){
   drowLine(g);
  }
  //绘制随机字符
  String randomString = "";
  for(int i=1;i<=stringNum;i++){
   randomString=drowString(g,randomString,i);
  }
  session.removeAttribute(RANDOMCODEKEY);
  session.setAttribute(RANDOMCODEKEY, randomString);
  g.dispose();
  try {
  //将内存中的图片通过流动形式输出到客户端
   ImageIO.write(image, "JPEG", response.getOutputStream());
  } catch (Exception e) {
   e.printStackTrace();
  }
 }
 /*
 * 获得字体
 */
 private Font getFont(){
  return new Font("Fixedsys",Font.CENTER_BASELINE,18);
 }
 /*
 * 获得颜色
 */
 private Color getRandColor(int fc,int bc){
  if(fc > 255)
   fc = 255;
  if(bc > 255)
   bc = 255;
  int r = fc + random.nextInt(bc-fc-16);
  int g = fc + random.nextInt(bc-fc-14);
  int b = fc + random.nextInt(bc-fc-18);
  return new Color(r,g,b);
 }
 /*
 * 绘制字符串
 */
 private String drowString(Graphics g,String randomString,int i){
  g.setFont(getFont());
  g.setColor(new Color(random.nextInt(101),random.nextInt(111),random.nextInt(121)));
  String rand = String.valueOf(getRandomString(random.nextInt(randString.length())));
  randomString +=rand;
  g.translate(random.nextInt(3), random.nextInt(3));
  g.drawString(rand, 13*i, 16);
  return randomString;
 }
 /*
 * 绘制干扰线
 */
 private void drowLine(Graphics g){
  int x = random.nextInt(width);
  int y = random.nextInt(height);
  int xl = random.nextInt(13);
  int yl = random.nextInt(15);
  g.drawLine(x, y, x+xl, y+yl);
 }
 /*
 * 获取随机的字符
 */
 public String getRandomString(int num){
  return String.valueOf(randString.charAt(num));
 }
}

--------------------------------------------------------------------------------

4.至于验证验证码就是我弄了半天的东西。。。

因为我不太会vue 然后写前端研究了会会才知道它是怎么用的。然后我开始是想从前端拿到后端的session,但是vue这个是html页面,不能<%@ %>引入java代码,然后我又试了一下js的ajax引入,但是报错,vue框架我也不太懂。。然后还是交给后端验证嘛。

然后就很简单了,从login那里验证,提交的时候多了一个验证码,但是我觉得这样做其实是不太好的,因为验证码跟登录一起验证,有点耗时,分开比较好。

submitForm(login) {
   this.$refs[login].validate((valid) => {
    if (valid) {
     this.loadings(); //加载动画
    // window.alert(this.login.code);
     this.$http.post('/login', {
      username: this.login.username,
      password: this.login.password,
      remember: this.login.remember,
      code:this.login.code
     }).then(result => {
     //window.alert(result);
      // 判断用户是否登录成功,后端返回JSON格式数据,不然娶不到数据
      if (result.body.success) {
      alert("success");
       window.location.href = "/listStudentInfo";
       this.loading.close(); //关闭动画加载
      } else {
       // 弹出错误信息框
       this.$emit(
        'submit-form',
        this.$message({
         message:result.body.message,
         type: 'warning',
         duration: 6000
        }),
       );
       // 清空表单状态
       this.$refs[login].resetFields();
      }
     });
   }
    else {
     this.$emit(
      'submit-form',
      this.$message({
       message: '输入信息有误!',
       type: 'warning',
       duration: 6000
      }),
     );
     return false;
    }
   });
  },
@RequestMapping("/login")
public Result Login( @RequestParam(value = "username", required = false) String username,
   @RequestParam(value = "password", required = false) String password,
   @RequestParam(value = "remember", required = false) String remember,
   @RequestParam(value = "code", required = false) String code,
   HttpServletRequest request
   ) {
String error = null;
HttpSession session = request.getSession();
 System.out.println(code);
 //System.out.println(session.getAttribute( RandomValidateCode.RANDOMCODEKEY));
if(username==null||session.getAttribute( RandomValidateCode.RANDOMCODEKEY).equals(code)) {
//System.out.println("code 有问题");
return new Result(false, error);
}
//System.out.println(password);
//System.out.println("调试");
Subject subject=SecurityUtils.getSubject();
UsernamePasswordToken token=new UsernamePasswordToken(username,password);
if (remember != null) {
   if (remember.equals("true")) {
    //说明选择了记住我
    token.setRememberMe(true);
   } else {
    token.setRememberMe(false);
   }
  } else {
   token.setRememberMe(false);
  }
System.out.println(token.isRememberMe());
try {
subject.login(token);
Result re=new Result(true, "success");
return new Result(true,error);
} catch (UnknownAccountException e) {
  System.out.println( "登陆出错");
  error = "用户账户不存在,错误信息:" + e.getMessage();
 }catch (IncorrectCredentialsException ex) {
 System.out.println( "用户名和密码不匹配");
 error = "用户名或密码错误,错误信息:" + ex.getMessage();
 }catch (AuthenticationException e) {
 System.out.println( "其他的登陆错误");
 error = "错误信息:" + e.getMessage();
 }
return new Result(false, error);
}

5.session

简单说一下我理解的session和cookie的区别吧,session是保存在服务端的,cookie是保存在客户端的,就是本地会有一个文件夹专门保存cookie。cookie主要是为了保存用户状态嘛,因为http是无状态的连接,每次连接完就不会知道下一次是不是同一个用户。但是保存用户信息在很多应用场景中都是必要的。而session比cookie更加安全,因为session信息保存在服务端的,不容易被盗用。所以重要登陆信息还是应该保存在session上。而且服务端能够保存的session比较大,而单个cookie一般不超过20k.

session是怎么保存用户信息的呢?就是一个用户有一个sessionId,通过sessionId保存用户信息。

session的使用:

session.setAttribute("key","value");
session.getAttribute("key");

6.登陆界面

vue+SSM实现验证码功能

总结

以上所述是小编给大家介绍的vue+SSM实现验证码功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
showModalDialog 和 showModelessDialog
Jan 22 Javascript
JS查看对象功能代码
Apr 25 Javascript
jquery $.getJSON()跨域请求
Dec 21 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
Dec 18 Javascript
js实现表单多按钮提交action的处理方法
Oct 24 Javascript
js倒计时抢购实例
Dec 20 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
AngularJS实现标签页的两种方式
Sep 05 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
基于Vue实现页面切换左右滑动效果
Jun 29 Javascript
详解vue.js移动端配置flexible.js及注意事项
Apr 10 Javascript
详解如何为你的angular app构建一个第三方库
Dec 07 #Javascript
JS实现随机生成10个手机号的方法示例
Dec 07 #Javascript
angular学习之动态创建表单的方法
Dec 07 #Javascript
JavaScript栈和队列相关操作与实现方法详解
Dec 07 #Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 #Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 07 #Javascript
详解在create-react-app使用less与antd按需加载
Dec 06 #Javascript
You might like
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
解javascript 混淆加密收藏
2009/01/16 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
BootStrap Fileinput的使用教程
2016/12/30 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
2020/11/09 jQuery
[01:06]欢迎来到上海,TI9
2018/08/26 DOTA
Python3使用正则表达式爬取内涵段子示例
2018/04/22 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
网络技术支持面试题
2013/04/22 面试题
安全教育感言
2014/03/04 职场文书
应用数学专业求职信
2014/03/14 职场文书
养生餐厅创业计划书范文
2014/03/26 职场文书
幼儿园个人总结
2015/02/28 职场文书
跳高加油稿
2015/07/21 职场文书
如何书写授权委托书?
2019/06/25 职场文书
Vue全家桶入门基础教程
2021/05/14 Vue.js
基于Python实现一个春节倒计时脚本
2022/01/22 Python