路飛專案五
阿新 • • 發佈：2020-07-27
1 登陸註冊模態框
# Login.vue <template> <div class="login"> <div class="box"> <i class="el-icon-close" @click="close_login"></i> <div class="content"> <div class="nav"> <span :class="{active: login_method === 'is_pwd'}" @click="change_login_method('is_pwd')">密碼登入</span> <span :class="{active: login_method === 'is_sms'}" @click="change_login_method('is_sms')">簡訊登入</span> </div> <el-form v-if="login_method === 'is_pwd'"> <el-input placeholder="使用者名稱/手機號/郵箱" prefix-icon="el-icon-user" v-model="username" clearable> </el-input> <el-input placeholder="密碼" prefix-icon="el-icon-key" v-model="password" clearable show-password> </el-input> <el-button type="primary">登入</el-button> </el-form> <el-form v-if="login_method === 'is_sms'"> <el-input placeholder="手機號" prefix-icon="el-icon-phone-outline" v-model="mobile" clearable @blur="check_mobile"> </el-input> <el-input placeholder="驗證碼" prefix-icon="el-icon-chat-line-round" v-model="sms" clearable> <template slot="append"> <span class="sms" @click="send_sms">{{ sms_interval }}</span> </template> </el-input> <el-button type="primary">登入</el-button> </el-form> <div class="foot"> <span @click="go_register">立即註冊</span> </div> </div> </div> </div> </template> <script> export default { name: "Login", data() { return { username: '', password: '', mobile: '', sms: '', login_method: 'is_pwd', sms_interval: '獲取驗證碼', is_send: false, } }, methods: { close_login() { this.$emit('close') }, go_register() { this.$emit('go') }, change_login_method(method) { this.login_method = method; }, check_mobile() { if (!this.mobile) return; if (!this.mobile.match(/^1[3-9][0-9]{9}$/)) { this.$message({ message: '手機號有誤', type: 'warning', duration: 1000, onClose: () => { this.mobile = ''; } }); return false; } this.is_send = true; }, send_sms() { if (!this.is_send) return; this.is_send = false; let sms_interval_time = 60; this.sms_interval = "傳送中..."; let timer = setInterval(() => { if (sms_interval_time <= 1) { clearInterval(timer); this.sms_interval = "獲取驗證碼"; this.is_send = true; // 重新回覆點擊發送功能的條件 } else { sms_interval_time -= 1; this.sms_interval = `${sms_interval_time}秒後再發`; } }, 1000); } } } </script> <style scoped> .login { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 10; background-color: rgba(0, 0, 0, 0.3); } .box { width: 400px; height: 420px; background-color: white; border-radius: 10px; position: relative; top: calc(50vh - 210px); left: calc(50vw - 200px); } .el-icon-close { position: absolute; font-weight: bold; font-size: 20px; top: 10px; right: 10px; cursor: pointer; } .el-icon-close:hover { color: darkred; } .content { position: absolute; top: 40px; width: 280px; left: 60px; } .nav { font-size: 20px; height: 38px; border-bottom: 2px solid darkgrey; } .nav > span { margin: 0 20px 0 35px; color: darkgrey; user-select: none; cursor: pointer; padding-bottom: 10px; border-bottom: 2px solid darkgrey; } .nav > span.active { color: black; border-bottom: 3px solid black; padding-bottom: 9px; } .el-input, .el-button { margin-top: 40px; } .el-button { width: 100%; font-size: 18px; } .foot > span { float: right; margin-top: 20px; color: orange; cursor: pointer; } .sms { color: orange; cursor: pointer; display: inline-block; width: 70px; text-align: center; user-select: none; } </style>
# Register.vue <template> <div class="register"> <div class="box"> <i class="el-icon-close" @click="close_register"></i> <div class="content"> <div class="nav"> <span class="active">新使用者註冊</span> </div> <el-form> <el-input placeholder="手機號" prefix-icon="el-icon-phone-outline" v-model="mobile" clearable @blur="check_mobile"> </el-input> <el-input placeholder="密碼" prefix-icon="el-icon-key" v-model="password" clearable show-password> </el-input> <el-input placeholder="驗證碼" prefix-icon="el-icon-chat-line-round" v-model="sms" clearable> <template slot="append"> <span class="sms" @click="send_sms">{{ sms_interval }}</span> </template> </el-input> <el-button type="primary">註冊</el-button> </el-form> <div class="foot"> <span @click="go_login">立即登入</span> </div> </div> </div> </div> </template> <script> export default { name: "Register", data() { return { mobile: '', password: '', sms: '', sms_interval: '獲取驗證碼', is_send: false, } }, methods: { close_register() { this.$emit('close', false) }, go_login() { this.$emit('go') }, check_mobile() { if (!this.mobile) return; if (!this.mobile.match(/^1[3-9][0-9]{9}$/)) { this.$message({ message: '手機號有誤', type: 'warning', duration: 1000, onClose: () => { this.mobile = ''; } }); return false; } this.is_send = true; }, send_sms() { if (!this.is_send) return; this.is_send = false; let sms_interval_time = 60; this.sms_interval = "傳送中..."; let timer = setInterval(() => { if (sms_interval_time <= 1) { clearInterval(timer); this.sms_interval = "獲取驗證碼"; this.is_send = true; // 重新回覆點擊發送功能的條件 } else { sms_interval_time -= 1; this.sms_interval = `${sms_interval_time}秒後再發`; } }, 1000); } } } </script> <style scoped> .register { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 10; background-color: rgba(0, 0, 0, 0.3); } .box { width: 400px; height: 480px; background-color: white; border-radius: 10px; position: relative; top: calc(50vh - 240px); left: calc(50vw - 200px); } .el-icon-close { position: absolute; font-weight: bold; font-size: 20px; top: 10px; right: 10px; cursor: pointer; } .el-icon-close:hover { color: darkred; } .content { position: absolute; top: 40px; width: 280px; left: 60px; } .nav { font-size: 20px; height: 38px; border-bottom: 2px solid darkgrey; } .nav > span { margin-left: 90px; color: darkgrey; user-select: none; cursor: pointer; padding-bottom: 10px; border-bottom: 2px solid darkgrey; } .nav > span.active { color: black; border-bottom: 3px solid black; padding-bottom: 9px; } .el-input, .el-button { margin-top: 40px; } .el-button { width: 100%; font-size: 18px; } .foot > span { float: right; margin-top: 20px; color: orange; cursor: pointer; } .sms { color: orange; cursor: pointer; display: inline-block; width: 70px; text-align: center; user-select: none; } </style>
#Head.vue #template底部 <div class="right-part"> <div> <span @click="put_login">登入</span> <span class="line">|</span> <span @click="put_register">註冊</span> </div> </div> <Login v-if="is_login" @close="close_login" @go="put_register"/> <Register v-if="is_register" @close="close_register" @go="put_login"/> # js <script> import Login from './Login' import Register from './Register' export default { name: "Header", data() { return { url_path: sessionStorage.url_path || '/', is_login: false, is_register: false, } }, methods: { goPage(url_path) { // 傳入的路由如果不是當前所在路徑，就跳轉 if (this.url_path !== url_path) { this.$router.push(url_path); } sessionStorage.url_path = url_path; }, put_login() { this.is_login = true; this.is_register = false; }, put_register() { this.is_login = false; this.is_register = true; }, close_login() { this.is_login = false; }, close_register() { this.is_register = false; } }, created() { sessionStorage.url_path = this.$route.path; this.url_path = this.$route.path; }, components: { Login, Register } } </script>
2 登陸註冊介面分析
# 1 多方式登入介面
# 2 手機號登入介面
# 3 傳送驗證碼介面
# 4 註冊介面
# 5 校驗手機號是否存在介面
3 多種登陸方式
# 路由
from django.urls import path,include
from . import views
from rest_framework.routers import SimpleRouter
router=SimpleRouter()
router.register('',views.LoginView,'login')
urlpatterns = [
path('',include(router.urls) ),
]
# 檢視類
from rest_framework.viewsets import ViewSet
from . import serializer
from luffyapi.utils.response import APIResponse
from rest_framework.decorators import action
class LoginView(ViewSet):
@action(methods=['POST'],detail=False)
def login(self,request,*args,**kwargs):
ser=serializer.UserSerilaizer(data=request.data)
if ser.is_valid():
token=ser.context['token']
username=ser.context['user'].username
return APIResponse(token=token,username=username)
else:
return APIResponse(code=0,msg=ser.errors)
# 序列化類
from rest_framework import serializers
from . import models
from rest_framework.exceptions import ValidationError
class UserSerilaizer(serializers.ModelSerializer):
username=serializers.CharField()
class Meta:
model=models.User
fields=['username','password','id']
extra_kwargs={
'id':{'read_only':True},
'password':{'write_only':True}
}
def validate(self, attrs):
# 多種登入方式
user=self._get_user(attrs)
# 簽發token
token=self._get_token(user)
# 放到context中，我在檢視類中可以取出來
self.context['token']=token
self.context['user']=user
return attrs
def _get_user(self,attrs):
username = attrs.get('username')
password = attrs.get('password')
import re
if re.match('^1[3-9][0-9]{9}$',username):
user=models.User.objects.filter(telephone=username).first()
elif re.match('^.+@.+$',username): #郵箱
user=models.User.objects.filter(email=username).first()
else:
user=models.User.objects.filter(username=username).first()
if user:
ret=user.check_password(password)
if ret:
return user
else:
raise ValidationError('密碼錯誤')
else:
raise ValidationError('使用者不存在')
def _get_token(self,user):
from rest_framework_jwt.serializers import jwt_payload_handler,jwt_encode_handler
payload=jwt_payload_handler(user) # 通過user物件獲得payload
token=jwt_encode_handler(payload) # 通過payload獲得token
return token
4 cookies修改頁面登陸狀態
1 重點，cookie操作
this.$cookies.set('key',value,過期時間秒)
this.$cookies.get('key')
this.$cookies.remove('key')
2
# template
<el-button type="primary" @click="login_password">登入</el-button>
#js
login_password() {
if (this.username && this.password) {
//傳送請求
this.$axios.post(this.$settings.base_url + '/user/login/', {
username: this.username,
password: this.password
}).then(response => {
console.log(response.data)
//把使用者資訊儲存到cookie中
// this.$cookies.set('key','value','過期時間,按s計')
this.$cookies.set('token',response.data.token,'7d')
this.$cookies.set('username',response.data.username,'7d')
//關閉登入視窗(子傳父)
this.$emit('close')
//給父元件，Head傳遞一個事件，讓它從cookie中取出token和username
this.$emit('loginsuccess')
}).catch(errors => {
})
} else {
this.$message({
message: '使用者名稱或密碼必須填哦',
type: 'warning',
});
}
},
5 前臺登出
# Head.vue
### template
<span @click="logout">登出</span>
### js
logout(){
//清除cookie
this.$cookies.remove('token')
this.$cookies.remove('username')
//把兩個變數值為空
this.username=''
this.token=''
},
6 手機號是否存在介面
# urls.py 如果不重寫檢視類不需要動
# views.py
class LoginView(ViewSet):
@action(methods=['GET'], detail=False)
def check_telephone(self,request,*args,**kwargs):
import re
telephone=request.query_params.get('telephone')
if not re.match('^1[3-9][0-9]{9}',telephone):
return APIResponse(code=0,msg='手機號不合法')
try:
models.User.objects.get(telephone=telephone)
return APIResponse(code=1)
except:
return APIResponse(code=0,msg='手機號不存在')
7 騰訊雲簡訊服務
#0 註冊一個公眾號（）
-https://mp.weixin.qq.com/
-註冊訂閱號，一路下一步，申請個人
-截一個圖（首頁）
#1 騰訊雲，---註冊---實名：-https://console.cloud.tencent.com/smsv2
#2 https://console.cloud.tencent.com/smsv2/csms-sign/create
-把圖傳上去，認證
#3 建立模板（稽核）
#4 應用管理（建立一個應用，記住appid和App Key）
#5 扣程式碼（https://cloud.tencent.com/document/product/382/11672）
# 7 幫助文件
-API：一堆web介面，基於API介面來寫
-SDK：軟體開發工具包軟體,別人基於api介面，用不同語言封裝的工具包，我們可以直接呼叫方法完成某些事
8 簡訊驗證碼介面
# lib/tx_sms
#__init__.py
from .send import get_code,send_message
#send.py
from qcloudsms_py import SmsSingleSender
from luffyapi.utils.logger import log
from . import settings
# 生成一個四位隨機驗證碼
def get_code():
import random
s_code=''
for i in range(4):
s_code+=str(random.randint(0,9))
return s_code
def send_message(phone,code):
ssender = SmsSingleSender(settings.appid, settings.appkey)
params = [code, '3'] # 當模板沒有引數時，`params = []`
try:
result = ssender.send_with_param(86, phone, settings.template_id, params, sign=settings.sms_sign, extend="", ext="")
if result.get('result') == 0:
return True
else:
return False
except Exception as e:
log.error('手機號：%s,簡訊傳送失敗,錯誤為：%s'%(phone,str(e)))
#settings.py
# 簡訊的配置
# 簡訊應用 SDK AppID
appid = 140039846 # SDK AppID 以1400開頭
# 簡訊應用 SDK AppKey
appkey = "fd972f6da15add4de47b50b8dbe930"
# 簡訊模板ID，需要在簡訊控制檯中申請
template_id = 66935 # NOTE: 這裡的模板 ID`7839`只是示例，真實的模板 ID 需要在簡訊控制檯中申請
# 簽名
sms_sign = "小猿取經" # NOTE: 簽名引數使用的是`簽名內容`，而不是`簽名ID`。這裡的簽名"騰訊雲"只是示例，真實的簽名需要在簡訊控制檯中申請
# views.py
@action(methods=['GET'], detail=False)
def send(self,request,*args,**kwargs):
'''
傳送驗證碼介面
:return:
'''
import re
from luffyapi.libs.tx_sms import get_code,send_message
from django.core.cache import cache
from django.conf import settings
telephone = request.query_params.get('telephone')
if not re.match('^1[3-9][0-9]{9}', telephone):
return APIResponse(code=0, msg='手機號不合法')
code=get_code()
result=send_message(telephone,code)
# 驗證碼儲存（儲存到哪？）
# sms_cache_%s
cache.set(settings.PHONE_CACHE_KEY%telephone,code,180)
if result:
return APIResponse(code=1,msg='驗證碼傳送成功')
else:
return APIResponse(code=0, msg='驗證碼傳送失敗')