springboot+vue实现验证码功能

springboot+vue实现验证码功能

本文实例为大家分享了springboot+vue实现验证码功能的具体代码，供大家参考，具体内容如下

1.工具类 直接用不用改

package com.example.demo.Util;

import org.slf4j.Logger;

import org.slf4j.LoggerFactory;

import javax.imageio.ImageIO;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.HttpSession;

import java.awt.*;

import java.awt.image.BufferedImage;

import java.util.HashMap;

import java.util.Map;

import java.util.Random;

//import java.util.logging.Logger;

public class CodeUtil {

public static final String RANDOMCODEKEY= "RANDOMVALIDxdGfFmlPbdATECODEKEY";//放到session中的key

private String randString = "0123456789";//随机产生只有数字的字符串 private String

//private String randString = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";//随机产生只有字母的字符串

//private String randString = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";//随机产生数字与字母组合的字符串

private int width = 95;// 图片宽

private int height = 25;// 图片高

private int lineSize = 40;// 干扰线数量

private int stringNum = 4;// 随机产生字符数量

private static final Logger logger = LoggerFactory.getLogger(CodeUtil.class);

private Random random = new Random();

/**

* 获得字体

*/

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);

}

/**

* 生成随机图片

*/

public void getRandcode(HttpServletRequest request, HttpServletResponse response) {

HttpSession session = request.getSession();

// BufferedImage类是具有缓冲区的Image类,Image类是用于描述图像信息的类

BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_BGR);

Graphics g = image.getGraphics();// 产生Image对象的Graphics对象,改对象可以在图像上进行各种绘制操作

g.fillRect(0, 0, width, height);//图片大小

g.setFont(new Font("Times New Roman", Font.ROMAN_BASELINE, 18));//字体大小

g.setColor(getRandColor(110, 133));//字体颜色

// 绘制干扰线

for (int i = 0; i <= lineSize; i++) {

drowLine(g);

}

// 绘制随机字符

String randomString = "";

for (int i = 1; i <= stringNum; i++) {

randomString = drowString(g, randomString, i);

}

logger.info(randomString);

//将生成的随机字符串保存到session中

session.removeAttribute(RANDOMCODEKEY);

session.setAttribute(RANDOMCODEKEY, randomString);

g.dispose();

try {

// 将内存中的图片通过流动形式输出到客户端

ImageIO.write(image, "JPEG", response.getOutputStream());

} catch (Exception e) {

e.printStackTrace();

// logger.error("将内存中的图片通过流动形式输出到客户端失败>>>> ", e);

}

}

/**

* 绘制字符串

*/

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));

}

}

2.Controller层

要跨域！！

@RestController

@RequestMapping("/Code")

public class CodeController {

private final static Logger logger = LoggerFactory.getLogger(CodeController.class);

/**

* 生成验证码

*/

@GetMapping("getVerify")

@CrossOrigin(origins = "*")

// @RequestMapping(value = "/getVerify")

public void getVerify(HttpServletRequest request, HttpServletResponse response) {

try {

response.setContentType("image/jpeg");//设置相应类型,告诉浏览器输出的内容为图片

response.setHeader("Pragma", "No-cache");//设置响应头信息，告诉浏览器不要缓存此内容

response.setHeader("Cache-Control", "no-cache");

response.setDateHeader("Expire", 0);

CodeUtil randomValidateCode = new CodeUtil();

randomValidateCode.getRandcode(request, response);//输出验证码图片方法

} catch (Exception e) {

e.printStackTrace();

// logger.error("获取验证码失败>>>> ", e);

}

}

/**

* 校验验证码

*/

@RequestMapping(value = "/checkVerify",headers = "Accept=application/json")

@CrossOrigin(origins = "*",allowCredentials="true")

public boolean checkVerify(@RequestParam String verifyInput, HttpSession session) {

try{

//从session中获取随机数

String inputStr = verifyInput;

String random = (String) session.getAttribute("RANDOMVALIDATECODEKEY");

if (random == null) {

return false;

}

if (random.equals(inputStr)) {

return true;

} else {

return false;

}

}catch (Exception e){

e.printStackTrace();

// logger.error("验证码校验失败", e);

return false;

}

}

}

3.前台vue方式：

页面部分

ref="elForm"

:model="formData"

:rules="rules"

size="medium"

label-width="83px"

label-position="left"

>

v-model="formData.code"

placeholder="请输入验证码"

clearable

:style="{ width: '100%' }"

>

提交

重置

ref="elForm"

:model="formData"

:rules="rules"

size="medium"

label-width="83px"

label-position="left"

>

v-model="formData.code"

placeholder="请输入验证码"

clearable

:style="{ width: '100%' }"

>

v-model="formData.code"

placeholder="请输入验证码"

clearable

:style="{ width: '100%' }"

>

提交

重置

js部分：

vue方法：

data() {

return {

imgUrl: "/api/Code/getVerify",

formData: {

code: undefined,

},

rules: {

code: [

{

required: true,

message: "请输入验证码",

trigger: "blur",

},

],

},

};

},

methods: {

aVerify() {

var that = this;

var data = Qs.stringify({

verifyInput: this.formData.code,

});

that

.axios({

method: "post",

url: "/api/Code/checkVerify",

data: data,

})

.then((response) => {

console.log(response);

if ( response.data) {

alert("success!");

} else {

alert("failed!");

}

getVerify();

});

},

getVerify(obj) {

console.log(obj);

// obj.src = "/api/Code/getVerify?" + Math.random();

this.imgUrl = "/api/Code/getVerify?" + Math.random();

},

resetForm() {

this.$refs["elForm"].resetFields();

},

},

原生js方法：

function getVerify(obj) {

// obj.src = "/api/Code/getVerify"

obj.src = "/api/Code/getVerify?" + Math.random(); //原生js方式

console.log(obj.src);

// this.imgCode= "/api/Code/getVerify?"+Math.random();

}

// function getVerify() {

// // $("#imgCode").on("click", function() {

// $("#imgVerify").attr("src", 'Code/getVerify?' + Math.random());//jquery方式

// // });

// }

function aVerify() {

var value = $("#verify_input").val();

// alert(value);

$.ajax({

async: false,

type: "post",

url: "/api/Code/checkVerify",

dataType: "json",

data: {

verifyInput: value,

},

success: function (result) {

if (result) {

alert("success!");

} else {

alert("failed!");

}

// window.location.reload();

getVerify();

},

});

}

实际应用中：

防止页面跳回不重新加载：

imgUrl直接绑定随机数

imgUrl: "/api/Code/getVerify?" + Math.random(),

aVerify() {

var that = this;

var data = Qs.stringify({

verifyInput: this.formData.code,

});

that

.axios({

method: "post",

url: "/api/Code/checkVerify",

data: data,

})

.then((response) => {

console.log(response);

this.result=response.data;

console.log(this.result);

if ( response.data) {

this.submitForm();

// alert("success!");

} else {

this.$message({

type: "warning",

message: "验证码错误",

});

this.getVerify();

}

// this.reload();

});

},

getVerify() {

console.log("hhhhh");

// var timestmp = (new Date()).valueOf();

// obj.src = "/api/Code/getVerify?" + Math.random();

this.imgUrl = "/api/Code/getVerify?" + Math.random();

// this.imgUrl = "/api/Code/getVerify?" + "&t=" +timestmp;

},

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。