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实现手机验证码功能相关推荐

添加数据功能java,SpringBoot+Vue实现数据添加功能
一.添加代码生成器用来自动为数据库映射类建立:mapper.service.controller package com.hanmh.utils; import com.baomidou.mybat ...
Redis实现手机验证码功能
完成一个手机验证码功能要求: 1.输入手机号,点击发送后随机生成6位数字码,2分钟有效 2.输入验证码,点击验证,返回成功或失败 3.每个手机号每天只能输入3次流程分析代码实现 public c ...
H5 VUE实现手机签名功能
H5 VUE实现手机签名功能功能描述: 利用canvas实现手机签名转化成图片( 包含重绘,由于手机全屏展示所以还添加了图片翻转) 上传后台功能展示: 这里是封装了一个小组件废话不多说上代码: ...
thinkphp实现发送手机验证码功能！
php实现发送手机验证码功能如下: //发送手机验证码public function sendPhoneCodeMessage(){ vendor('SendPhoneCode.SendCode',' ...
vue获取手机验证码60秒倒计时，不能点击按钮
vue获取手机验证码60秒倒计时,不能点击按钮 export const resend = element => {console.log(element)var num = 60var tim ...
实现手机验证码功能（Redis）
完成一个手机验证码功能要求: 1.输入手机号,点击发送后随机生成6位数字码,2分钟有效. 2.输入验证码,点击验证,返回成功或失败. 3.每个手机号每天只能输入3次. 思路: 1. 随机生成6位数字 ...
Redis：09-Redis_Jedis实现手机验证码功能
手机验证码功能要求: 1.输入手机号,点击发送后随机生成6位数字码,2分钟有效 2.输入验证码,点击验证,返回成功或失败 3.每个手机号每天只能输入3次 1.生成6位数字验证码 public sta ...
vue实现手机验证码登录（基于娱乐系统项目）
登录逻辑: 1 验证手机号码输入框,分别判断以下情况并作出弹窗警告 (1:是否为空 (2:是否为11位数字 (3:是否是13,15, 17, 18开头的正确手机号码 2 输入框下面添加一个获取验证码的 ...
基于登录注册用ajax实现手机验证码功能
文章目录基于登录发送验证码输入验证码后完成登录逻辑用户登录条件基于注册发送验证码输入验证码后完成注册逻辑用户注册条件这几天做的项目接触到了用手机验证码完成一些功能,例如登录.注册.以及修 ...

springboot+vue实现手机验证码功能

springboot+vue实现手机验证码功能

springboot+vue实现手机验证码功能相关推荐

最新文章

热门文章