黑馬瑞吉外賣之移動端驗證碼登入
- 說明
- 用qq郵箱進行驗證碼發送
hi，我是蘭舟千帆，本次更文還是将瑞吉外賣的筆記完善一下。每一篇都寫得很認真哦，希望需要的人可以得到幫助，謝謝你們的閱讀。
說明
pc端的背景管理我們剩下有訂單明細還沒有進行開發，由于訂單這邊需要移動端下單後才可以看到訂單，是以我們需要去先在移動端開發一些功能後，再回過頭讓訂單這邊進行一個展示。
首先移動端開發的話，我們首先遇到的應該就是登入的問題。移動端登入這邊我們驗證碼發送的話我們這邊采用qq郵箱的驗證碼進行登入。
既然是使用者登入這裡的話，其實我們還需要這樣對應的資料模型。我們先看前端頁面代碼
這裡給到的登入頁面這裡，其實我們可以稍微修改一下，之前這裡是提示的輸入的手機号碼，我們這裡要用qq郵箱驗證登入的話，其實我們可以要求輸入郵箱。
然後的話，其實自己可以找一個郵箱驗證的方式，看看郵箱格式是否正确。
下面這個标準是不統一的，可以按照規則去規定這一段正則。
我們去引入資料模型。User對象。這裡就不給出來了。這都是課程前給到的資料模型實體類。
我記得我後來用這個資料模型，但是發現其實這個資料模型裡面的一些字段還沒有用到。
不過我們需要把這樣的資料模型設計出來。
用qq郵箱進行驗證碼發送
如何使用qq郵箱進行這樣的操作呢？首先我們登入進qq郵箱點選設定，然後點到賬戶這裡。
這裡要開啟，開啟的話，會讓你發一個提示，讓你去開啟這個服務，按照這個流程去做。
然後我們就會收到一個授權碼，這個授權碼要複制下來，我們需要去用。
我們打開我們的項目，在pom中導入這樣的依賴。
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-mail</artifactId>
</dependency> 然後我們在yml配置當中寫一些資訊。這些配置有好多種寫法，我們這樣去寫就可以。
mail:
host: smtp.qq.com
username: 你的使用者名，就是發送者的郵箱位址
password: 你的授權碼
port: 587
default-encoding: UTF-8
properties:
mail:
smtp:
socketFactoryClass: javax.net.ssl.SSLSocketFactory
# 開啟debug以後，郵件發送過程的日志會在控制台上列印出來
debug: true 這樣配置好後，我們基本就可以使用了。
從這裡開始，找到這個按鈕綁定的方法
然後就是下面這裡
在這裡呢，我進行了一個判斷，改變了一下。
下面這主要就是對後端傳回值的進行了一個處理，發送失敗和成功我們都要提示。
getCode(){
this.form.code = ''
//這裡改為了郵箱的正則表達驗證
const regex = /^([\w\.\-]+)\@(\w+)(\.([\w^\_]+)){1,2}$/;
if (regex.test(this.form.phone)) {
this.msgFlag = false
//this.form.code = (Math.random()*1000000).toFixed(0)
sendMsgApi({phone:this.form.phone}).then((res)=>{
if (res.code === 1){
this.$message(
{
message: "^-^驗證碼已經發送，請注意查收",
type: 'success'
}
)
}
else {
this.$message(
{
message: "驗證碼發送失敗,請輸入正确郵箱",
type: 'failed'
}
)
}
});
}else{
this.msgFlag = true
}
}, 是以我們要點到這個裡面去看具體的請求路徑。
ok,基本就是這樣的一個邏輯。
那麼我們就直接去後端接收處理送出過來的這些資料。這裡是發送驗證碼，
使用者輸入郵箱，點選擷取驗證碼，然後這個前端就會給後端發送請求。
public class UserController {
@Autowired
private UserService userService;
@Resource
private JavaMailSender javaMailSender;//我們需要用這個進行郵件發送
//注意這裡我們将發送者從配置檔案注入進來
@Value("${spring.mail.username}")
private String from;
@PostMapping("/sendMsg")
private R_<String> sendMsg(@RequestBody User user, HttpSession session) {
// 這裡用qq郵箱去發送驗證碼
//擷取到前端送出過來的qq号
String phone = user.getPhone();
//這裡工具類判是否為空
if (StringUtils.isNotEmpty(phone)) {
// 這裡用到生成驗證碼的工具類
String code = ValidateCodeUtils.generateValidateCode(4).toString();//生成四位的驗證碼
log.info("code={}", code);
// 建構一個郵件的對象
SimpleMailMessage simpleMailMessage = new SimpleMailMessage();
// 設定郵件發件者
simpleMailMessage.setFrom(from);
// 設定郵件接受者
simpleMailMessage.setTo(phone);
// 設定有紀念的主題
simpleMailMessage.setSubject("登入驗證碼");
// 設定郵件的征文
String text = "^-^道哥（蘭舟千帆）給您的驗證碼為" + code + "請勿洩露";
simpleMailMessage.setText(text);
//将生成的驗證碼儲存到Session
// 将我們生成的手機号和驗證碼放到session裡面，我們後面使用者填入驗證碼之後，我們驗證的時候就從這裡去取然後進行比對
//這裡我們需要一個異常捕獲
session.setAttribute(phone, code);
// return R_.success("手機驗證碼短信發送成功");
try {
javaMailSender.send(simpleMailMessage);
return R_.success("手機驗證碼短信發送成功");
} catch (MailException e) {
e.printStackTrace();
}
}
}
return R_.error("手機驗證碼發送失敗");
} 然後這樣驗證碼就發送完成了，驗證碼發送成功後，使用者郵箱就會收到驗證碼，然後就會在前端将這個資料填入。這樣就又是另外的一次請求。
然後這裡又是一個按鈕，同樣是綁定了方法。
我們走到這個方法,這個方法裡面也有一些處理邏輯。然後我們關注到這裡面主要的請求方法
然後點進去這個方法
然後我們後端這樣去寫就好了。
// 移動應用登入端
@PostMapping("/login")
// 這裡使用map來接收前端傳過來的值
private R_<User> login(@RequestBody Map map, HttpSession session) {
log.info(map.toString());
// 使用map來接收參數,接收鍵值參數、
// 編寫處理邏輯
// 擷取到手機号
// 擷取到驗證碼
// 從Session中擷取到儲存的驗證碼
// 将session中擷取到的驗證碼和前端送出過來的驗證碼進行比較，這樣就可以實作一個驗證的方式
// 比對頁面送出的驗證碼和session中
//判斷目前的手機号在資料庫查詢是否有記錄，如果沒有記錄，說明是一個新的使用者，然後自動将這個手機号進行注冊
String phone = map.get("phone").toString();
String code = map.get("code").toString();
//擷取session中phone字段對應的驗證碼
Object codeInSession = session.getAttribute(phone);
// 下面進行比對
if (codeInSession != null && codeInSession.equals(code)) {
LambdaQueryWrapper<User> userLambdaQueryWrapper = new LambdaQueryWrapper<>();
// 在表中根據号碼來查詢是否存在該郵箱使用者
userLambdaQueryWrapper.eq(User::getPhone, phone);
User user = userService.getOne(userLambdaQueryWrapper);
if(user == null){
//判斷目前手機号對應的使用者是否為新使用者，如果是新使用者就自動完成注冊
user = new User();
user.setPhone(phone);
user.setStatus(1);
userService.save(user);
}
// 這裡我們将user存儲進去，後面各項操作，我們會用，其中攔截器那邊會判斷使用者是否登入，是以我們将這個存儲進去，
session.setAttribute("user",user.getId());
return R_.success(user);
}
return R_.error("驗證失敗");
} 這樣怎麼驗證碼發送給已經驗證登入的功能就開發完成了。
後端這裡成功傳回資料後，然後我們就可以跳轉到首頁面了。