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 相关文章推荐
ASP中Sub和Function的区别说明
Aug 30 Javascript
jquery入门—选择器实现隔行变色实例代码
Jan 04 Javascript
jQuery点击弹出下拉菜单的小例子
Aug 01 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
Aug 21 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
React 使用browserHistory项目访问404问题解决
Jun 01 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
深入了解响应式React Native Echarts组件
May 29 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
详解如何为你的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
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
JavaScript 指导方针
2007/04/05 Javascript
豆瓣网的jquery代码实例
2008/06/15 Javascript
JavaScript XML操作 封装类
2009/07/01 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
python 穷举指定长度的密码例子
2020/04/02 Python
python获取linux系统信息的三种方法
2020/10/14 Python
css3 实现滚动条美化效果的实例代码
2021/01/06 HTML / CSS
美国户外生活方式品牌:Eddie Bauer
2016/12/28 全球购物
FILA斐乐中国官方商城:意大利运动品牌
2017/01/25 全球购物
给校长的一封建议书
2014/03/12 职场文书
安全生产目标责任书
2014/04/14 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
怎样写辞职信
2015/02/27 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书