vue+springboot實現(xiàn)登錄驗證碼
本文實例為大家分享了vue+springboot實現(xiàn)登錄驗證碼的具體代碼,供大家參考,具體內(nèi)容如下
先看效果圖
在login頁面添加驗證碼html
在后端pom文件添加kaptcha依賴
<dependency> <groupId>com.github.penggle</groupId> <artifactId>kaptcha</artifactId> <version>2.3.2</version> </dependency>
創(chuàng)建KaptchaConfig工具類
package com.brilliance.module.system.controller.util; import com.google.code.kaptcha.impl.DefaultKaptcha; import com.google.code.kaptcha.util.Config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import java.util.Properties; @Configuration public class KaptchaConfig { @Bean public DefaultKaptcha getDefaultKaptcha() { DefaultKaptcha defaultKaptcha = new DefaultKaptcha(); Properties properties = new Properties(); // 圖片寬 properties.setProperty("kaptcha.image.width", "180"); // 圖片高 properties.setProperty("kaptcha.image.height", "50"); // 圖片邊框 properties.setProperty("kaptcha.border", "yes"); // 邊框顏色 properties.setProperty("kaptcha.border.color", "105,179,90"); // 字體顏色 properties.setProperty("kaptcha.textproducer.font.color", "blue"); // 字體大小 properties.setProperty("kaptcha.textproducer.font.size", "40"); // session key properties.setProperty("kaptcha.session.key", "code"); // 驗證碼長度 properties.setProperty("kaptcha.textproducer.char.length", "4"); // 字體 properties.setProperty("kaptcha.textproducer.font.names", "宋體,楷體,微軟雅黑"); Config config = new Config(properties); defaultKaptcha.setConfig(config); return defaultKaptcha; } }
Controller中,生成的驗證碼存儲在了redis中, 用于以后作校驗(redis的配置以及依賴自行百度)
@RestController @RequestMapping("/api/user") @Api(tags = "系統(tǒng)用戶管理") public class SysUserController extends AbstractController{ @Autowired private SysUserService sysUserService; @Autowired private DefaultKaptcha defaultKaptcha; @Autowired RedisTemplate redisTemplate; @GetMapping("/createImageCode") public void createImageCode(HttpServletRequest request, HttpServletResponse response) throws IOException { response.setHeader("Cache-Control", "no-store, no-cache"); response.setContentType("image/jpeg"); // 生成文字驗證碼 String text = defaultKaptcha.createText(); // 生成圖片驗證碼 BufferedImage image = defaultKaptcha.createImage(text); // 這里我們使用redis緩存驗證碼的值,并設(shè)置過期時間為60秒 redisTemplate.opsForValue().set("imageCode",text,60, TimeUnit.SECONDS); ServletOutputStream out = response.getOutputStream(); ImageIO.write(image, "jpg", out); out.flush(); out.close(); }
生成之后,在登錄界面輸入驗證碼需要進行校驗輸入的是否正確
在登錄按鈕外層加一次請求判斷,驗證輸入的驗證碼是否正確,根據(jù)返回值提示錯誤信息
@PostMapping("/compareCode") public RESULT compareCode(@RequestBody String verificationCode) { if(!redisTemplate.hasKey("imageCode")) { return RESULT.error(500,"驗證碼已過期"); } String code = redisTemplate.opsForValue().get("imageCode").toString(); if(StringUtils.equals(verificationCode,code)) { return RESULT.ok(); } else { return RESULT.error(500,"驗證碼輸入錯誤"); } }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
VUE使用echarts?5.0以上版本渲染器未導(dǎo)入錯誤問題
這篇文章主要介紹了VUE使用echarts?5.0以上版本渲染器未導(dǎo)入錯誤問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06Vue中@click.stop與@click.prevent解讀
Vue中,`@click.stop`用于阻止事件冒泡,而`@click.prevent`用于阻止事件的默認(rèn)行為,這兩個方法在處理事件時非常有用2025-02-02Vue2.0學(xué)習(xí)系列之項目上線的方法步驟(圖文)
這篇文章主要介紹了Vue2.0學(xué)習(xí)系列之項目上線的方法步驟(圖文),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09使用vue-router beforEach實現(xiàn)判斷用戶登錄跳轉(zhuǎn)路由篩選功能
這篇文章主要介紹了vue使用vue-router beforEach實現(xiàn)判斷用戶登錄跳轉(zhuǎn)路由篩選,本篇文章默認(rèn)您已經(jīng)會使用 webpack 或者 vue-cli 來進行環(huán)境的搭建,并且具有一定的vue基礎(chǔ)。需要的朋友可以參考下2018-06-06vue2前端使用axios發(fā)起post請求后端(springboot)接收不到值解決辦法
這篇文章主要介紹了vue2前端使用axios發(fā)起post請求后端(springboot)接收不到值解決辦法,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2024-03-03