- 注冊流程分析
客戶端先發(fā)送一個手機號碼到后端獲取驗證碼，此時“獲取驗證碼”按鈕是激活狀態(tài)，“下一步”按鈕是禁用狀態(tài)
點擊“獲取驗證碼”按鈕，該按鈕60秒倒計時變?yōu)榻脿顟B(tài)，等待用戶接收驗證碼并輸入
后端根據(jù)這個手機號先到數(shù)據(jù)庫查詢該手機號是否已被注冊点楼，如果已經(jīng)被注冊就返回“該手機號已被注冊”，不繼續(xù)后續(xù)步驟
如果沒被注冊白对，后端為該手機號生成一個隨機6位驗證碼存在Redis中（指定時限）掠廓，然后將該驗證碼通過阿里云的短信服務接口發(fā)送給客戶端
客戶端收到短信，輸入驗證碼甩恼，點擊下一步
后端收到客戶端發(fā)送的驗證碼蟀瞧，就將其和Redis中暫存的驗證碼比對沉颂，如果一致就放行，否則提示“驗證碼錯誤”
驗證碼正確悦污，進入填寫密碼的頁面铸屉，填寫完畢提交到后端，加密存入數(shù)據(jù)庫切端，注冊成功彻坛，讓用戶選擇去登錄，還是回到首頁
- Redis準備
-
下載Redis踏枣，Redis是最流行的鍵值對存儲數(shù)據(jù)庫昌屉，官網(wǎng)只有Linux版本的Redis，自行下載后可以到阿里云ECS去安裝茵瀑，本地只能從GitHub下載间驮，地址點這里
基本操作如下
解壓后放到本地目錄image
cd D:\tools\redis
redis-server.exe redis.windows.confimage再開一個命令行窗口，進入redis目錄马昨，運行redis-cli.exe命令蜻牢，進行一下基本操作，set是設置鍵值對偏陪，keys是列出所有鍵，get是獲取指定鍵的值煮嫌，del是刪除指定的鍵值
image
- 阿里云短信服務
package com.soft1721.jianyue.api.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.exceptions.ServerException;
import com.aliyuncs.http.MethodType;
import com.aliyuncs.profile.DefaultProfile;
/**
* 短消息測試程序
*/
public class SMSTest {
public static void main(String[] args) {
DefaultProfile profile = DefaultProfile.getProfile("cn-hangzhou", "*******", "*****");
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", "****");
request.putQueryParameter("SignName", "****");
request.putQueryParameter("TemplateCode", "SMS_135805735");
request.putQueryParameter("TemplateParam", "{\"code\":\"888888\"}");
try {
CommonResponse response = client.getCommonResponse(request);
System.out.println(response.getData());
} catch (ServerException e) {
e.printStackTrace();
} catch (ClientException e) {
e.printStackTrace();
}
}
}
運行結(jié)果：
后端
pom.xml饥脑，增加阿里云短信服務SDK依賴和SpringBoot集成redis依賴
<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>
util包的StringUtil類增加一個方法，用來獲取六位隨機數(shù)驗證碼
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();
}
編寫SMSUtil短信發(fā)送工具類懦冰，主要將手機號和短信字符串分離成變量灶轰，main方法測試通過后即可刪除
import com.aliyuncs.CommonRequest;
import com.aliyuncs.CommonResponse;
import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.IAcsClient;
import com.aliyuncs.exceptions.ClientException;
import com.aliyuncs.exceptions.ServerException;
import com.aliyuncs.http.MethodType;
import com.aliyuncs.profile.DefaultProfile;
/**
-
短信發(fā)送工具類，返回生成的隨機驗證碼
*/
public class SMSUtil {
public static String send(String mobile) {
DefaultProfile profile = DefaultProfile.getProfile(
"cn-hangzhou",
"*******",
"*******");
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", "*****");
request.putQueryParameter("TemplateCode", "SMS_135805735");
String verifyCode = StringUtil.getVerifyCode();
request.putQueryParameter("TemplateParam", "{"code":" + verifyCode + "}");
try {
CommonResponse response = client.getCommonResponse(request);
System.out.println(response.getData());
} catch (ServerException e) {
e.printStackTrace();
} catch (ClientException e) {
e.printStackTrace();
}
return verifyCode;
}public static void main(String[] args) {
System.out.println(send("139****1489"));
}
}
mapper層增加insertUser方法刷钢，自行實現(xiàn)（id和token不用給值）
service接口增加注冊方法
void signUp(UserDTO userDTO);
signUp方法實現(xiàn)代碼
@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);
}
單元測試
@Test
public void signUp() {
UserDTO userDTO = new UserDTO();
userDTO.setMobile("139****1489");
userDTO.setPassword("111");
userService.signUp(userDTO);
}
controller層編寫前笋颤，先到StatusConst和MsgConst添加需要用到的常量
controller層編寫前，先到StatusConst和MsgConst添加需要用到的常量
public static final int MOBILE_EXIST = 5;
public static final int VERIFYCODE_ERROR = 6;
public static final String MOBILE_EXIST = "手機號已被注冊";
public static final String VERIFYCODE_ERROR = "驗證碼錯誤";
獲取短信驗證碼接口
@PostMapping(value = "/verify")
public ResponseResult getVerifyCode(@RequestParam("mobile") String mobile) {
User user = userService.getUserByMobile(mobile);
//手機號已經(jīng)被注冊
if (user != null) {
return ResponseResult.error(StatusConst.MOBILE_EXIST, MsgConst.MOBILE_EXIST);
} else {
//發(fā)送驗證碼
String verifyCode = SMSUtil.send(mobile);
// String verifyCode = StringUtil.getVerifyCode();
System.out.println(verifyCode);
//手機號和驗證碼作為鍵值對存入redis中
redisService.set(mobile, verifyCode);
return ResponseResult.success();
}
}
驗證短信碼接口
@PostMapping(value = "/check")
public ResponseResult checkVerifyCode(@RequestParam("mobile") String mobile, @RequestParam("verifyCode") String verifyCode) {
//從Redis中取出這個手機號的驗證碼
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();
}
后端swagger測試結(jié)果
前端
在main.js中配置全局服務器地址
Vue.prototype.apiServer = 'http://*****:8080/api'
注冊頁面
<template>
<view class="container">
<view class="sign-box">
<input class="uni-input left" type="number" placeholder="輸入手機號" v-model="mobile" required="required" />
<button class="green-btn small-btn right" @tap="getVerifyCode">獲取驗證碼</button>
</view>
<input class="uni-input" type="number" placeholder="輸入驗證碼" v-model="verifyCode" required="required" />
<button @tap="checkCode" class="green-btn">下一步</button>
</view>
</template>
<script>
export default {
data() {
return {
mobile: '',
verifyCode: ''
};
},
onLoad() {},
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 => {
if (res.data.code === 0) {
uni.showToast({
title: '驗證碼已發(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: '../password/password?mobile=' + _this.mobile
});
} else {
uni.showModal({
title: '提示',
content: res.data.msg
});
}
}
});
}
}
};
</script>
<style>
.sign-box {
display: flex;
align-items: center;
}
.left {
flex: 1 1 70%;
}
.small-btn {
width: 100px;
height: 40px;
font-size: 14px;
}
</style>
密碼頁面
<template>
<view class="container">
<input class="uni-input" password type="text" placeholder="輸入密碼" v-model="password" required="required" />
<button class="green-btn" @tap="signUp(userDTO)">注冊</button>
</view>
</template>
<script>
export default {
data() {
return {
userDTO: {
mobile: '',
password: ''
}
};
},
onLoad: function(option) {
//option為object類型内地，會序列化上個頁面?zhèn)鬟f的參數(shù)
console.log(option.mobile);
this.mobile = option.mobile;
},
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: '注冊成功'
})
uni.navigateTo({
url: '../signin/signin'
});
} else {
uni.showModal({
title: '提示',
content: res.data.msg
});
}
}
});
}
}
};
</script>
<style></style>
登錄頁面
<template>
<view class="uni-flex uni-column container">
<input class="uni-input" type="number" placeholder="輸入手機號" v-model="userDTO.mobile" required="required" />
<input class="uni-input" password type="text" placeholder="輸入密碼" v-model="userDTO.password" required="required" />
<button class="green-btn" @tap="signIn(userDTO)">登錄</button>
<navigator url="../signup/signup" class="nav">注冊新賬號</navigator>
</view>
</template>
<script>
export default {
data() {
return {
userDTO: {
mobile: '',
password: ''
}
};
},
onLoad() {},
methods: {
signIn: function(userDTO) {
var _this = this;
uni.request({
url: this.apiServer + '/user/sign_in',
method: 'POST',
data: {
mobile: userDTO.mobile,
password: userDTO.password
},
header: {
'content-type': 'application/json'
},
success: res => {
// console.log(res.data.data);
if (res.data.code == 0) {
//將用戶數(shù)據(jù)記錄在本地存儲
uni.setStorageSync('login_key', {
userId: res.data.data.id,
nickname: res.data.data.nickname,
avatar: res.data.data.avatar,
token: res.data.data.token,
login: true
});
uni.showToast({
title: '登錄成功'
});
uni.switchTab({
url: '../my/my'
});
}
//登錄失敗伴澄，彈出各種原因
else {
uni.showModal({
title: '提示',
content: res.data.msg
});
}
}
});
}
}
};
</script>
<style scoped>
.nav {
color: #00b26a;
margin-top: 15px;
}
</style>
