SpringBoot和Vue验证码

后端部分：

一、导入依赖

<!-- 验证码 --><dependency><groupId>com.github.penggle</groupId><artifactId>kaptcha</artifactId><version>2.3.2</version></dependency>

二、创建控制器

KaptchaController2
展示后台生成的验证码

package com.exam.controller;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import javax.servlet.http.HttpServletRequest;@Controller
public class KaptchaController2 {@ResponseBody@RequestMapping("/getVerify")public String getVerifyCode(HttpServletRequest request){String verifyCode = (String)request.getSession().getAttribute("verifyCode");System.out.println("---------------------"+verifyCode);return verifyCode;}
}

验证码生成方法

package com.exam.controller;import com.google.code.kaptcha.impl.DefaultKaptcha;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;@RestController
public class KaptchaController {@Autowiredprivate DefaultKaptcha defaultKaptcha;@GetMapping("/createImageCode")public void defaultKaptcha(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws Exception {byte[] captchaOutputStream = null;ByteArrayOutputStream imgOutputStream = new ByteArrayOutputStream();try {//生产验证码字符串并保存到session中String verifyCode = defaultKaptcha.createText();httpServletRequest.getSession().setAttribute("verifyCode", verifyCode);BufferedImage challenge = defaultKaptcha.createImage(verifyCode);ImageIO.write(challenge, "jpg", imgOutputStream);} catch (IllegalArgumentException e) {httpServletResponse.sendError(HttpServletResponse.SC_NOT_FOUND);return;}captchaOutputStream = imgOutputStream.toByteArray();httpServletResponse.setHeader("Cache-Control", "no-store");httpServletResponse.setHeader("Pragma", "no-cache");httpServletResponse.setDateHeader("Expires", 0);httpServletResponse.setContentType("image/jpeg");ServletOutputStream responseOutputStream = httpServletResponse.getOutputStream();responseOutputStream.write(captchaOutputStream);responseOutputStream.flush();responseOutputStream.close();}}

三、创建config配置文件

package com.exam.config;import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;
import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;import java.util.Properties;@Component
public class KaptchaConfig {@Beanpublic DefaultKaptcha getDefaultKaptcha(){DefaultKaptcha defaultKaptcha = new DefaultKaptcha();Properties properties = new Properties();properties.put("kaptcha.border", "no");properties.put("kaptcha.textproducer.font.color", "black");properties.put("kaptcha.image.width", "150");properties.put("kaptcha.image.height", "40");properties.put("kaptcha.textproducer.font.size", "30");properties.put("kaptcha.session.key", "verifyCode");properties.put("kaptcha.textproducer.char.space", "5");Config config = new Config(properties);defaultKaptcha.setConfig(config);return defaultKaptcha;}
}

前端部分：

一、form表单

<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign"><el-form-item label="用户名" ><el-input v-model.number="formLabelAlign.username" placeholder="请输入用户名"></el-input></el-form-item><el-form-item label="密码" required><el-input v-model="formLabelAlign.password" placeholder="请输入密码" type='password'></el-input></el-form-item><el-form-item label="验证码" required><el-input v-model="formLabelAlign.verifyCode" auto-complete="off" class="el-col-width"></el-input></el-form-item><el-form-item required><img id="img" alt="验证码" onclick="this.src='/api/createImageCode?d='+new Date()*1" src="/api/createImageCode" /></el-form-item><div class="submit"><el-button type="primary" class="row-login" @click="login()">登录</el-button></div></el-form>

二、js逻辑部分

data() {return {role: 2,labelPosition: 'left',formLabelAlign: {username: '20154084',password: '123456',verifyCode: ''}}},methods: {//用户登录请求后台处理login() {console.log("登录操作执行-------");this.$axios({url: `/api/getVerify`,method: 'get',async: false}).then(res => {if (res.data === this.formLabelAlign.verifyCode) {if (this.formLabelAlign.username === "" || this.formLabelAlign.password === "") {this.$message({showClose: true,type: 'error',message: '用户名或者密码为空'})} else {this.$axios({url: `/api/login`,method: 'post',data: {...this.formLabelAlign}}).then(res => {//下面就可以写自己的方法或者跳转

SpringBoot和Vue验证码相关推荐

阿里云部署SpringBoot和Vue项目亲测可用（第一次部署经验贴）
阿里云部署SpringBoot和Vue项目亲测可用!第一次部署经验贴! 前言:与伙伴一起写了一个项目,但是由于老师要我们部署到服务器上,而我从未有部署过,查看了csdn很多博客,试了好多篇,才成功 ...
基于Springboot+Mybatisplus+Vue的科研项目管理系统
基于Springboot+Mybatisplus+Vue的科研项目管理系统 1.1 项目概述开发语言:Java8 数据库:Mysql5 前端技术:bootstrap 后端框架:Springboot ...
利用SpringBoot和Vue实现前后端分离（附源码）
利用SpringBoot和Vue实现前后端分离(附源码) 引言: 本文主要分享了SpringBoot和Vue整合实现前后端分离,实现了简单的增删查改:包括:项目的搭建.后端的实现.前台的实现:(附源码 ...
（附源码）基于SpringBoot和Vue的厨到家服务平台的设计与实现毕业设计 063133
springboot厨到家服务系统摘要在社会快速发展的影响下,餐饮迅速发展,大大增加了餐饮服务信息管理的数量.多样性.质量等等的要求,使餐饮的管理和运营比过去十年更加困难.依照这一现实为基础, ...
基于javaweb的精品养老院管理系统(java+springboot+mybatis+vue+mysql)
基于javaweb的精品养老院管理系统(java+springboot+mybatis+vue+mysql) 运行环境 Java≥8.MySQL≥5.7.Node.js≥10 开发工具后端:ecli ...
springboot基于VUE框架的商城综合项目设计与实现毕业设计源码111612
基于VUE框架的商城综合项目设计与实现摘要随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,商城综合项目当然也不能排除在外.商城综合项 ...
springboot基于VUE框架的商城综合项目设计与实现毕业设计源码
基于VUE框架的商城综合项目设计与实现摘要随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,商城综合项目当然也不能排除在外.商城综合项 ...
Springboot整合kaptcha验证码
Springboot整合kaptcha验证码 01.通过配置类来配置kaptcha 01-01.添加kaptcha的依赖:  <dependen ...
能挣钱的，开源SpringBoot和Vue的企业级项目，代码很规范！
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 简介 SmartAdmin由河南·洛阳 1024创新实验室 ...

SpringBoot和Vue验证码

后端部分：

一、导入依赖

二、创建控制器

三、创建config配置文件

前端部分：

一、form表单

二、js逻辑部分

SpringBoot和Vue验证码相关推荐

最新文章

热门文章