springboot+vue實現手機驗證碼功能

榛子云短信平臺用戶中心注冊登錄(有免費的一條消息，剩下的需要買)（阿里云個人得備案）

在springboot中加入依賴，用到了redis，阿里的fastjson，和短信的平臺

<!--集成redis--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-redis</artifactId><version>1.4.1.RELEASE</version></dependency><!--榛子云短信--><dependency><groupId>com.zhenzikj</groupId><artifactId>zhenzisms</artifactId><version>2.0.2</version></dependency><!--轉換JSON格式--><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.49</version></dependency>

然后直接編寫controller層

import com.alibaba.fastjson.JSONObject; import com.pro.back.util.RedisUtils; import com.zhenzi.sms.ZhenziSmsClient; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody;import javax.servlet.http.HttpSession; import java.util.HashMap; import java.util.Map; import java.util.Random; import java.util.concurrent.TimeUnit;@Controller public class CodeController {@AutowiredRedisUtils redisUtils;//短信平臺相關參數//這個不用改private String apiUrl = "https://sms_developer.zhenzikj.com";//榛子云系統上獲取,六位數private String appId = "xxxxxx";private String appSecret = "xxxxxxxxxxxxxxxxxxx";@ResponseBody@GetMapping("/code")public boolean getCode(@RequestParam("memPhone") String memPhone, HttpSession httpSession){try {JSONObject json = null;//隨機生成驗證碼String code = String.valueOf(new Random().nextInt(999999));//將驗證碼通過榛子云接口發送至手機ZhenziSmsClient client = new ZhenziSmsClient(apiUrl, appId, appSecret);Map<String, Object> params = new HashMap<String, Object>();params.put("number", memPhone);//這個是短信模板的參數，從平臺獲取params.put("templateId", "8369");//這個參數就是短信模板上那兩個參數String[] templateParams = new String[2];templateParams[0] = code;templateParams[1] = "2分鐘";params.put("templateParams", templateParams);String result = client.send(params);json = JSONObject.parseObject(result);if (json.getIntValue("code")!=0){//發送短信失敗return false;}//將驗證碼存到redis中,同時存入創建時間（也可以傳入session）//以json存放，這里使用的是阿里的fastjsonjson = new JSONObject();json.put("memPhone",memPhone);json.put("code",code);json.put("createTime",System.currentTimeMillis());// 將認證碼存入redis，有效時長5分鐘redisUtils.set("verifyCode"+memPhone,json,5L, TimeUnit.MINUTES);return true;} catch (Exception e) {e.printStackTrace();return false;}} }

編寫redisUtils，我用的網上的模板
首先在配置文件寫一下（我寫的很簡單，但是能用就行，redis密碼默認沒有就不寫了）

import java.io.Serializable; import java.util.List; import java.util.Set; import java.util.concurrent.TimeUnit; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.data.redis.core.HashOperations; import org.springframework.data.redis.core.ListOperations; import org.springframework.data.redis.core.RedisTemplate; import org.springframework.data.redis.core.SetOperations; import org.springframework.data.redis.core.ValueOperations; import org.springframework.data.redis.core.ZSetOperations; import org.springframework.stereotype.Service; @Service public class RedisUtils {@Autowiredprivate RedisTemplate redisTemplate;/*** 寫入緩存** @param key* @param value* @return*/public boolean set(final String key, Object value) {boolean result = false;try {ValueOperations<Serializable, Object> operations = redisTemplate.opsForValue();operations.set(key, value);result = true;} catch (Exception e) {e.printStackTrace();}return result;}/*** 寫入緩存設置時效時間** @param key* @param value* @return*/public boolean set(final String key, Object value, Long expireTime, TimeUnit timeUnit) {boolean result = false;try {ValueOperations<Serializable, Object> operations = redisTemplate.opsForValue();operations.set(key, value);redisTemplate.expire(key, expireTime, timeUnit);result = true;} catch (Exception e) {e.printStackTrace();}return result;}/*** 批量刪除對應的value** @param keys*/public void remove(final String... keys) {for (String key : keys) {remove(key);}}/*** 批量刪除key** @param pattern*/public void removePattern(final String pattern) {Set<Serializable> keys = redisTemplate.keys(pattern);if (keys.size() > 0) {redisTemplate.delete(keys);}}/*** 刪除對應的value** @param key*/public void remove(final String key) {if (exists(key)) {redisTemplate.delete(key);}}/*** 判斷緩存中是否有對應的value** @param key* @return*/public boolean exists(final String key) {return redisTemplate.hasKey(key);}/*** 讀取緩存** @param key* @return*/public Object get(final String key) {Object result = null;ValueOperations<Serializable, Object> operations = redisTemplate.opsForValue();result = operations.get(key);return result;}/*** 哈希 添加** @param key* @param hashKey* @param value*/public void hmSet(String key, Object hashKey, Object value) {HashOperations<String, Object, Object> hash = redisTemplate.opsForHash();hash.put(key, hashKey, value);}/*** 哈希獲取數據** @param key* @param hashKey* @return*/public Object hmGet(String key, Object hashKey) {HashOperations<String, Object, Object> hash = redisTemplate.opsForHash();return hash.get(key, hashKey);}/*** 列表添加** @param k* @param v*/public void lPush(String k, Object v) {ListOperations<String, Object> list = redisTemplate.opsForList();list.rightPush(k, v);}/*** 列表獲取** @param k* @param l* @param l1* @return*/public List<Object> lRange(String k, long l, long l1) {ListOperations<String, Object> list = redisTemplate.opsForList();return list.range(k, l, l1);}/*** 集合添加** @param key* @param value*/public void add(String key, Object value) {SetOperations<String, Object> set = redisTemplate.opsForSet();set.add(key, value);}/*** 集合獲取** @param key* @return*/public Set<Object> setMembers(String key) {SetOperations<String, Object> set = redisTemplate.opsForSet();return set.members(key);}/*** 有序集合添加** @param key* @param value* @param scoure*/public void zAdd(String key, Object value, double scoure) {ZSetOperations<String, Object> zset = redisTemplate.opsForZSet();zset.add(key, value, scoure);}/*** 有序集合獲取** @param key* @param scoure* @param scoure1* @return*/public Set<Object> rangeByScore(String key, double scoure, double scoure1) {ZSetOperations<String, Object> zset = redisTemplate.opsForZSet();return zset.rangeByScore(key, scoure, scoure1);} }

前端vue測試獲取,隨便把獲取驗證碼60秒內不能重復獲取做了

<template><div><el-form :model="loginForm"><el-form-item label="手機號"><el-input type="text" v-model="loginForm.username" style="width: 200px"></el-input></el-form-item><div class="login_box"><el-input type="text" v-model="loginForm.code" aria-placeholder="請輸入驗證碼" style="width: 200px"></el-input><el-button @click="postCode" :disabled="isClick">{{content}}</el-button></div></el-form></div> </template> <script> //這是我封裝的axios的方法，各位自己寫即可 import {getCode, testCode} from "../api/admin/admin";export default {name: "Login",data(){return{loginForm: {code:'',username:''},content: '發送驗證碼', // 按鈕里顯示的內容totalTime: 60, //記錄具體倒計時時間isClick:false //是否可以點擊}},methods:{//發送驗證碼postCode(){getCode(this.loginForm.username).then(res =>{console.log(res)})//這是60秒倒計時this.countDown()},//這是60秒倒計時countDown () {this.content = this.totalTime + 's后重新發送' //這里解決60秒不見了的問題let clock = window.setInterval(() => {this.totalTime--this.content = this.totalTime + 's后重新發送'this.isClick=trueif (this.totalTime < 0) { //當倒計時小于0時清除定時器window.clearInterval(clock)this.content = '重新發送驗證碼'this.totalTime = 60this.isClick=false}},1000)console.log(111)}},computed:{} } </script>

此時，驗證碼發送到了手機，并且存入到了redis

接下來驗證，，還是在剛剛那個controller里面寫，其實只要提取一下redis里面的數據即可，從前端傳來的手機號，通過手機號獲取剛剛存入redis的驗證碼，看看是否一樣

@ResponseBody@PostMapping("/getCode")public JSONObject getCode(@RequestParam(value = "username") String username,String code){JSONObject Vcode = (JSONObject)redisUtils.get("verifyCode"+username);System.out.println("memPhone:"+username);System.out.println(Vcode);JSONObject verifyCode = (JSONObject)redisUtils.get("verifyCode"+username);System.out.println("傳入的驗證碼是："+code);if(verifyCode.get("code").equals(code)){System.out.println("驗證碼正確");}return Vcode;}

總結

以上是生活随笔為你收集整理的springboot+vue实现手机验证码功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。