1.下載redis準(zhǔn)備
- 運(yùn)行redis-server:redis-server.exe redis.windows.conf
- 再開一個(gè)命令行窗口导犹，進(jìn)入redis目錄運(yùn)行redis-cli.exe命令
2.注冊(cè)阿里云服務(wù)（并申請(qǐng)一個(gè)模板和簽名寫程序有用歹篓，發(fā)送驗(yàn)證碼要收錢往自己賬戶里充點(diǎn)錢）
3.添加依賴
<dependency>
<groupId>com.aliyun</groupId>
<artifactId>aliyun-java-sdk-core</artifactId>
<version>4.0.3</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>
public static String getVerifyCode(){
Random random=new Random();
StringBuilder stringBuilder=new StringBuilder();
for(int i=0;i<6;i++){
stringBuilder.append(String.valueOf(random.nextInt(10)));
}
return stringBuilder.toString();
}
package com.spring.jianyueapi.util;
import com.aliyuncs.CommonRequest;
import com.aliyuncs.CommonResponse;
import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.IAcsClient;
import com.aliyuncs.exceptions.ClientException;
import com.aliyuncs.http.MethodType;
import com.aliyuncs.profile.DefaultProfile;
public class SMSUtil {
public static String send(String mobile){
DefaultProfile profile=DefaultProfile.getProfile("cn-hangzhou","LTAIL4bn0wGEtnsG","KMwPoHxc95LnRAfmaIL6sAVJ4M9PGc");
IAcsClient client=new DefaultAcsClient(profile);
CommonRequest request=new CommonRequest();
request.setMethod(MethodType.POST);
request.setDomain("dysmsapi.aliyuncs.com");
request.setVersion("2017-05-25");
request.setAction("SendSms");
request.putQueryParameter("RegionId", "cn-hangzhou");
request.putQueryParameter("PhoneNumbers", mobile);
request.putQueryParameter("SignName", "jianyuesms");
request.putQueryParameter("TemplateCode", "SMS_162732247");
String verifyCode = StringUtil.getVerifyCode();
request.putQueryParameter("TemplateParam","{\"code\":"+verifyCode+"}");
CommonResponse response= null;
try {
response = client.getCommonResponse(request);
System.out.println(response.getData());
} catch (ClientException e) {
e.printStackTrace();
}
return verifyCode;
}
}
void signUp(UserDTO userDTO);
@Override
public void signUp(UserDTO userDTO) {
User user1=new User();
user1.setMobile(userDTO.getMobile());
user1.setPassword(StringUtil.getBase64Encoder(userDTO.getPassword()));
user1.setNickname("新用戶");
user1.setAvatar("http://ppeto2k90.bkt.clouddn.com/avatar/default.png");
user1.setRegtime(new Date());
user1.setStatus((short)1);
userMapper.insert(user1);
}
- 單元測試
- 獲取/驗(yàn)證驗(yàn)證碼接口
@PostMapping(value = "/verify")
public ResponseResult getVerifyCode(@RequestParam("mobile") String mobile){
User user=userService.getUserByMobile(mobile);
if (user!=null){
return ResponseResult.error(StatusConst.MOBILE_EXIST,MsgConst.MOBILE_EXIST);
}else{
//SMSUtil.send(mobile);
String verifyCode= SMSUtil.send(mobile);
System.out.println(verifyCode);
redisService.set(mobile,verifyCode);
return ResponseResult.success();
}
}
@PostMapping(value = "/check")
public ResponseResult checkVerifyCode(@RequestParam("mobile") String mobile,@RequestParam("verifyCode") String verifyCode){
String code=redisService.get(mobile).toString();
System.out.println(code+"---");
System.out.println(verifyCode);
if(code.equals(verifyCode)){
return ResponseResult.success();
}else {
return ResponseResult.error(StatusConst.VERIFYCODE_ERROR,MsgConst.VERIFYCODE_ERROR);
}
}
@PostMapping(value = "/sign_up")
public ResponseResult signUp(@RequestBody UserDTO userDTO){
userService.signUp(userDTO);
return ResponseResult.success();
}
前端
<template>
<view class="content">
<view class="box"><input type="number" class="phone" v-model="mobile" placeholder="請(qǐng)輸入手機(jī)號(hào)" required="required"/></view>
<view class="box"><input type="text" class="code" v-model="verifyCode" placeholder="請(qǐng)輸入短信驗(yàn)證碼" required="required" />
<button class="accept" @tap="!safety.state ? getVerifyCode():''">{{!safety.state&&'獲取'||(safety.time+' s')}}</button>
</view>
<button @tap="checkCode" class="register"><text class="rightnow">下一步</text></button>
</view>
</template>
<script>
export default {
data() {
return {
mobile:'',
verifyCode:'',
safety:{
time:60,
state:false,
interval:''
}
};
},
onLoad() {
},
onShow() {
},
methods: {
getVerifyCode:function(){
var _this=this;
uni.request({
url:this.apiServer+'/user/verify',
method:'POST',
header:{
'content-type':'application/x-www-form-urlencoded'
},
data:{
mobile:_this.mobile
},
success:res =>{
//成功后倒計(jì)時(shí)60s后可在點(diǎn)擊
this.safety.state=true;
//倒計(jì)時(shí)
this.safety.interval=setInterval(() =>{
if(this.safety.time-- <=0){
this.safety.time=60;
this.safety.state=false;
clearInterval(this.safety.interval);
}
},1000);
if(res.data.code===0){
uni.showToast({
title:'驗(yàn)證碼已發(fā)送'
});
_this.disabled=true;
console.log(_this.disabled);
}else{
uni.showModal({
title:'提示',
content:res.data.msg
});
}
}
})
},
checkCode:function(){
var _this=this;
console.log(_this.verifyCode);
uni.request({
url: this.apiServer + '/user/check',
method:'POST',
header:{
'content-type':'application/x-www-form-urlencoded'
},
data:{
mobile:_this.mobile,
verifyCode:_this.verifyCode
},
success: res =>{
console.log(res.data);
if(res.data.code===0){
uni.navigateTo({
url:'../register_psd/register_psd?mobile='+_this.mobile
});
}else{
uni.showModal({
title:'提示',
content:res.data.msg
});
}
}
});
}
}
};
</script>
<template>
<view class="content">
<view class="box"><input type="text" password class="password" v-model="password" placeholder="請(qǐng)輸入密碼" required="required"/></view>
<navigator class="register" @tap="signUp(userDTO)"><button class="rightnow">立即注冊(cè)</button></navigator>
</view>
</template>
<script>
export default {
data() {
return {
mobile:'',
password:''
};
},
onLoad:function(option) {
//option為object類型,會(huì)序列化上個(gè)頁面?zhèn)鬟f的參數(shù)
console.log(option.mobile);
this.mobile=option.mobile;
},
onShow() {
},
methods: {
signUp:function(userDTO){
var _this=this;
uni.request({
url:this.apiServer+'/user/sign_up',
method:'POST',
header:{'content-type': 'application/json'},
data:{
mobile:_this.mobile,
password:_this.password
},
success:res =>{
if(res.data.code===0){
uni.showModal({
title:'提示',
content:'注冊(cè)成功'
})
uni.navigateTo({
url:'../signin/signin'
});
}else{
uni.showModal({
title:'提示',
content:res.data.msg
});
}
}
});
}
}
};
</script>
