vue和springboot实战项目
vue+spring boot实现校验码功能本文实例为大家分享了vue+spring boot实现校验码功能的具体代码，供大家参考，具体内容如下
用vue写了一个校验码来玩玩，样子如下：
1.img标签
<img
="height:40px; width: 100px; cursor: pointer;"
ref="imgIdentifyingCode"
:src="selectedLogoPicture.imgUrl"
class="logoImg"
>
2.js代码
/**
* 获取校验码
*/
getIdentifyingCode() {
let selft = this;
//let pic = this.$refs.imgIdentifyingCode
selft.loadingChack = true;
let uuid = Utils.getUuid(32, 16);
this.$store.state.uuid = uuid;
this.$api.reader.getVerify(
{ responseType: "arraybuffer", uuid: uuid },
r => {
selft.loadingChack = false;
selft.selectedLogoPicture.imgUrl = "data:image.jpg" alt="vue和springboot实战项目（vue+spring boot实现校验码功能）" border="0" />
3.controller
@RequestMapping("/getVerify")
public void getVerify(@RequestParam String uuid, HttpServletRequest request, HttpServletResponse response) {
response.setContentType("image.jpg" alt="vue和springboot实战项目（vue+spring boot实现校验码功能）" border="0" />
4.service
@Override
public void getRandcodedDawTransparent(String uuid, HttpServletRequest request, HttpServletResponse response) {
try {
Map<String, Object> map = CodeUtil.getRandcodedDawTransparent();
// 将生成的随机字符串保存到session中
log.info("==保存的uuid:"+uuid);
log.info("==保存的code:"+map.get("code"));
sessionUtil.saveCode(uuid, map.get("code"));
response.setContentType("image.jpg" alt="vue和springboot实战项目（vue+spring boot实现校验码功能）" border="0" />
5.util
public static Map<String, Object> getRandcodedDawTransparent() throws IOException {
Map<String, Object> rsMap = new HashMap<>();
// 创建BufferedImage对象
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
// 获取Graphics2D
Graphics2D g2d = image.createGraphics();
// 增加下面代码使得背景透明
image = g2d.getDeviceConfiguration().createCompatibleImage(width, height, Transparency.TRANSLUCENT);
g2d.dispose();
g2d = image.createGraphics();
g2d.setFont(new Font("Times New Roman", Font.ROMAN_BASELINE, 18));// 字体大小
g2d.setColor(getRandColor(110, 133));// 字体颜色
// 绘制干扰线
for (int i = 0; i <= lineSize; i++) {
drowLine(g2d, width, height);
}
// 绘制随机字符
String randomString = "";
for (int i = 1; i <= stringNum; i++) {
randomString = drowString(g2d, randomString, i);
}
log.info(randomString);
rsMap.put("code", randomString);
g2d.dispose();
ByteArrayOutputStream baos = new ByteArrayOutputStream();// io流
ImageIO.write(image, .jpg" alt="vue和springboot实战项目（vue+spring boot实现校验码功能）" border="0" />
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持开心学习网。