登录注册模态框分析、登录注册前端页面复制、腾讯短信功能二次封装、短信验证码接口、短信登录接口、短信注册接口
# 如果是跳转新的页面
- 路由中配置一个路由
- 写一个视图组件
# 弹窗，盖在主页上--->模态框
### 补充：CSS width = 100vw 和width = 100%的区别
- vw和vh相对的当前浏览器的视口 ，例如当前视口尺寸为375px 那么100vw = 375px，与父元素的大小无关
- width = 100% 是指当前width相对于父元素的宽度，100%时宽度等于父元素的宽度
X
...
....
登录
|
注册
@click="change_login_method('is_pwd')">密码登录
@click="change_login_method('is_sms')">短信登录
prefix-icon="el-icon-user"
v-model="username"
clearable>
prefix-icon="el-icon-key"
v-model="password"
clearable
show-password>
prefix-icon="el-icon-phone-outline"
v-model="mobile"
clearable
@blur="check_mobile">
prefix-icon="el-icon-chat-line-round"
v-model="sms"
clearable>
{{ sms_interval }}
立即注册
新用户注册
prefix-icon="el-icon-phone-outline"
v-model="mobile"
clearable
@blur="check_mobile">
prefix-icon="el-icon-key"
v-model="password"
clearable
show-password>
prefix-icon="el-icon-chat-line-round"
v-model="sms"
clearable>
{{ sms_interval }}
立即登录
老男孩IT教育 | 帮助有志向的年轻人通过努力学习获得体面的工作和生活
三、腾讯短信功能二次封装
3.1封装V2版本
3.2封装V3版本
# sdk文档
# 使用步骤：
- 下载模块：pip3 install tencentcloud-sdk-python
- 修改‘发送短信’的代码，根据自己的签名等# -*- coding: utf-8 -*-
from tencentcloud.common import credential
from tencentcloud.common.exception.tencent_cloud_sdk_exception import TencentCloudSDKException
# 导入对应产品模块的client models。
from tencentcloud.sms.v20210111 import sms_client, models
# 导入可选配置类
from tencentcloud.common.profile.client_profile import ClientProfile
from tencentcloud.common.profile.http_profile import HttpProfile
try:
# 必要步骤：
# 实例化一个认证对象，入参需要传入腾讯云账户密钥对secretId，secretKey。
# 这里采用的是从环境变量读取的方式，需要在环境变量中先设置这两个值。
# 你也可以直接在代码中写死密钥对，但是小心不要将代码复制、上传或者分享给他人，
# 以免泄露密钥对危及你的财产安全。
# SecretId、SecretKey 查询: https://console.cloud.tencent.com/cam/capi
cred = credential.Credential("secretId", "secretKey")
# cred = credential.Credential(
# os.environ.get(""),
# os.environ.get("")
# )
# 实例化一个http选项，可选的，没有特殊需求可以跳过。
httpProfile = HttpProfile()
# 如果需要指定proxy访问接口，可以按照如下方式初始化hp（无需要直接忽略）
# httpProfile = HttpProfile(proxy="http://用户名:密码@代理IP:代理端口")
httpProfile.reqMethod = "POST" # post请求(默认为post请求)
httpProfile.reqTimeout = 30 # 请求超时时间，单位为秒(默认60秒)
httpProfile.endpoint = "sms.tencentcloudapi.com" # 指定接入地域域名(默认就近接入)
# 非必要步骤:
# 实例化一个客户端配置对象，可以指定超时时间等配置
clientProfile = ClientProfile()
clientProfile.signMethod = "TC3-HMAC-SHA256" # 指定签名算法
clientProfile.language = "en-US"
clientProfile.httpProfile = httpProfile
# 实例化要请求产品(以sms为例)的client对象
# 第二个参数是地域信息，可以直接填写字符串ap-guangzhou，支持的地域列表参考 https://cloud.tencent.com/document/api/382/52071#.E5.9C.B0.E5.9F.9F.E5.88.97.E8.A1.A8
client = sms_client.SmsClient(cred, "ap-guangzhou", clientProfile)
# 实例化一个请求对象，根据调用的接口和实际情况，可以进一步设置请求参数
# 你可以直接查询SDK源码确定SendSmsRequest有哪些属性可以设置
# 属性可能是基本类型，也可能引用了另一个数据结构
# 推荐使用IDE进行开发，可以方便的跳转查阅各个接口和数据结构的文档说明
req = models.SendSmsRequest()
# 基本类型的设置:
# SDK采用的是指针风格指定参数，即使对于基本类型你也需要用指针来对参数赋值。
# SDK提供对基本类型的指针引用封装函数
# 帮助链接：
# 短信控制台: https://console.cloud.tencent.com/smsv2
# 腾讯云短信小助手: https://cloud.tencent.com/document/product/382/3773#.E6.8A.80.E6.9C.AF.E4.BA.A4.E6.B5.81
# 短信应用ID: 短信SdkAppId在 [短信控制台] 添加应用后生成的实际SdkAppId，示例如1400006666
# 应用 ID 可前往 [短信控制台](https://console.cloud.tencent.com/smsv2/app-manage) 查看
req.SmsSdkAppId = "app的id号" # # 腾讯短信创建app把app的id号复制过来
# 短信签名内容: 使用 UTF-8 编码，必须填写已审核通过的签名
# 签名信息可前往 [国内短信](https://console.cloud.tencent.com/smsv2/csms-sign) 或 [国际/港澳台短信](https://console.cloud.tencent.com/smsv2/isms-sign) 的签名管理查看
req.SignName = "公众号名"
# 模板 ID: 必须填写已审核通过的模板 ID
# 模板 ID 可前往 [国内短信](https://console.cloud.tencent.com/smsv2/csms-template) 或 [国际/港澳台短信](https://console.cloud.tencent.com/smsv2/isms-template) 的正文模板管理查看
req.TemplateId = "模板ID"
# 模板参数: 模板参数的个数需要与 TemplateId 对应模板的变量个数保持一致，，若无模板参数，则设置为空
req.TemplateParamSet = ["8888", "2"]
# 下发手机号码，采用 E.164 标准，+[国家或地区码][手机号]
# 示例如：+8613711112222， 其中前面有一个+号 ，86为国家码，13711112222为手机号，最多不要超过200个手机号
req.PhOneNumberSet= ["+8618088888888"]
# 用户的 session 内容（无需要可忽略）: 可以携带用户侧 ID 等上下文信息，server 会原样返回
req.SessiOnContext= ""
# 短信码号扩展号（无需要可忽略）: 默认未开通，如需开通请联系 [腾讯云短信小助手]
req.ExtendCode = ""
# 国际/港澳台短信 senderid（无需要可忽略）: 国内短信填空，默认未开通，如需开通请联系 [腾讯云短信小助手]
req.SenderId = ""
resp = client.SendSms(req)
# 输出json格式的字符串回包
print(resp.to_json_string(indent=2))
except TencentCloudSDKException as err:
print(err)
3.3把发送短信封装成包
# 后期别的项目，如果要使用发送短信--->只要把包copy到项目中即可
# 封装包：
- 目录结构
send_tx_sms # 包名
__init__.py
settings.py # 配置文件
sms.py # 核心文件
## 包的代码
### __init__.py
### settings.py
SECRET_ID = ''
SECRET_KEY = ''
APP_ID = ''
SIGN_NAME=''
TEMPLATE_ID=''
### sms.py(核心代码)四、短信验证码接口
from rest_framework.viewsets import ViewSet, GenericViewSet, ViewSetMixin
from .models import UserInfo
from rest_framework.decorators import action
from .serializer import UserMulLoginSerializer
from utils.response import APIResponse
from rest_framework.exceptions import APIException
from libs.send_tx_sms import get_code, send_sms_by_phone
import re
from django.core.cache import cache
# Create your views here.
class UserView(ViewSet):
@action(methods=['GET'], detail=False)
def mobile(self, request):
try:
mobile = request.query_params.get('mobile')
# mobile = request.GET.get('mobile')
# 有且只有一个不报错
UserInfo.objects.get(mobile=mobile)
return APIResponse(msg='手机号存在') # 前端展示的样子：{code:100,msg:'手机号存在'}
except Exception as e:
raise APIException('手机号不存在') # 前端展示的样子：{code:999,msg:'手机号不存在'}
@action(methods=['GET'], detail=False)
def send_sms(self, request):
mobile=request.query_params.get('mobile')
if re.match(r'/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/',mobile):
code = get_code()
print(code) # 保存验证码--->能存，不能取，后期能取--->缓存--->django自带缓存框架
# 放在内存中，只要重启就没了，后期学完Redis，放到Redis中，重启项目还在
cache.set('sms_code_%s'%mobile,code)
res = send_sms_by_phone(mobile, code)
if res:
return APIResponse(msg='发送短信成功')
else:
# raise APIException('发送短信失败')
return APIResponse(msg='发送短信失败', code=101)
else:
return APIResponse(msg='手机号不合法',code=102)五、短信登录接口
### serializer.py
from rest_framework import serializers
from .models import UserInfo
import re
from django.contrib.auth import authenticate
from rest_framework.exceptions import ValidationError, APIException
from rest_framework_jwt.settings import api_settings
from django.core.cache import cache
jwt_payload_handler = api_settings.JWT_PAYLOAD_HANDLER
jwt_encode_handler = api_settings.JWT_ENCODE_HANDLER
# 这个序列化类只用来做登录校验，不做序列化，不做反序列化
class UserMulLoginSerializer(serializers.ModelSerializer):
username = serializers.CharField() # 重写，优先使用现在的，没有unique的限制了
class Meta:
model = UserInfo
fields = ['username', 'password']
# 封装之隐藏属性，__表示隐藏，_并不是隐藏,公司里约定俗成用 _ 表示只在内部用，如果外部想用，也可以用
def _get_user(self, attrs):
# attrs是校验后的数据：字段自己的规则【字段自己又规则：坑】和局部钩子
username = attrs.get('username')
password = attrs.get('password')
# username可能是用户名，邮箱，手机号--->使用正则判断
if re.match(r'^1[3-9][0-9]{9}$', username):
# authenticate:只能使用username和password去校验用户
# user = authenticate(mobile=username, password=password)
user = UserInfo.objects.filter(mobile=username).first()
elif re.match(r'^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$', username):
# re.match(r'^.+@.+$', username): asdf@aasd 会有bug，用户名中如果有@，登录不了
# user = authenticate(email=username, password=password)
user = UserInfo.objects.filter(email=username).first()
else:
# user = authenticate(username=username, password=password)
user = UserInfo.objects.filter(username=username).first()
if user and user.check_password(password):
return user
else:
raise APIException('用户名或密码错误') # 给了detail
def _get_token(self, user):
try:
payload = jwt_payload_handler(user)
token = jwt_encode_handler(payload)
return token
except Exception as e:
raise ValidationError(str(e))
# 全局钩子
def validate(self, attrs):
# 1 取出用户名和密码，校验用户是否存在
user = self._get_user(attrs)
# 2 签发token
token = self._get_token(user)
# 3 把token放到序列化类对象中
self.context['token'] = token
self.context['username'] = user.username
# self.context['icon'] = user.icon
self.context['icon'] = 'http://127.0.0.1:8000/media/' + str(user.icon)
# 以后如果有问题都抛异常
# 如果没有问题，返回attrs
return attrs
class UserMoblieLoginSerializer(serializers.ModelSerializer):
code = serializers.CharField() # code 不是userInfo表的字段，一定要重写
mobile = serializers.CharField()
class Meta:
model = UserInfo
fields = ['mobile', 'code'] # 只要用来做校验，手机号和验证码即可
def _get_user(self, attrs):
mobile = attrs.get('mobile')
code = attrs.get('code')
# 校验code是否正确
old_code = cache.get('sms_code_%s' % mobile)
# cache.set('sms_code_%s' % mobile,'') # code清除
if code == old_code:
user = UserInfo.objects.filter(mobile=mobile).first()
return user
raise APIException('验证码错误')
def _get_token(self, user):
try:
payload = jwt_payload_handler(user)
token = jwt_encode_handler(payload)
return token
except Exception as e:
raise ValidationError(str(e))
# 全局钩子
def validate(self, attrs):
# 1 取出用户名和密码，校验用户是否存在
user = self._get_user(attrs)
# 2 签发token
token = self._get_token(user)
# 3 把token放到序列化类对象中
self.context['token'] = token
self.context['username'] = user.username
# self.context['icon'] = user.icon
self.context['icon'] = 'http://127.0.0.1:8000/media/' + str(user.icon)
return attrs
### views.py
from django.shortcuts import render
from rest_framework.viewsets import ViewSet, GenericViewSet, ViewSetMixin
from .models import UserInfo
from rest_framework.decorators import action
from .serializer import UserMulLoginSerializer, UserMoblieLoginSerializer
from utils.response import APIResponse
from rest_framework.exceptions import APIException
from rest_framework.views import APIView, View
from libs.send_tx_sms import get_code, send_sms_by_phone
import re
from django.core.cache import cache
# Create your views here.
class UserView(ViewSet):
def get_serializer(self,data):
# 判断如果请求地址是mul_login返回的是UserMulLoginSerializer
# 判断如果请求地址是mobile_login返回的是UserMoblieLoginSerializer
# 判断如果请求action是mul_login返回的是UserMulLoginSerializer
# 判断如果请求action是mobile_login返回的是UserMoblieLoginSerializer
if self.action=='mul_login':
return UserMulLoginSerializer(data=data)
else:
return UserMoblieLoginSerializer(data=data)
def common_login(self, request):
ser = self.get_serializer(data=request.data)
ser.is_valid(raise_exception=True)
token = ser.context.get('token')
username = ser.context.get('username')
icon = ser.context.get('icon')
# 无论是哪种登录方式所返回的数据格式都是一致的
return APIResponse(token=token, username=username, icon=icon)
@action(methods=['POST'], detail=False)
def mul_login(self, request):
# # # 1 老写法
# # username = request.data.get('username')
# # password = request.data.get('password')
# # # 查询用户，但是密码是加密的
# # UserInfo.objects.filter(username=username,password=password)
# # # 签发token，然后返回
# # 2 新写法，使用序列化类
# ser = UserMulLoginSerializer(data=request.data)
# # jwt模块的登录就是这样写的
# # 会执行：序列化类字段自己的校验规则，局部钩子，全局钩子
# ser.is_valid(raise_exception=True)
# # 用户名密码校验通过了，在序列化类中--->签发token
# token = ser.context.get('token')
# username = ser.context.get('username')
# icon = ser.context.get('icon') # icon是个对象字符串
# # 前端看到的样子：{code:100,msg:'成功',token:'aaa',username:'root',icon:http://aaa.png}
# return APIResponse(token=token, username=username, icon=icon)
return self.common_login(request)
@action(methods=['POST'], detail=False)
def mobile_login(self, request):
# ser = UserMoblieLoginSerializer(data=request.data)
# ser.is_valid(raise_exception=True)
# token = ser.context.get('token')
# username = ser.context.get('username')
# icon = ser.context.get('icon')
# # 无论是哪种登录方式所返回的数据格式都是一致的
# return APIResponse(token=token, username=username, icon=icon)
return self.common_login(request)
@action(methods=['GET'], detail=False)
def mobile(self, request):
try:
mobile = request.query_params.get('mobile')
# mobile = request.GET.get('mobile')
# 有且只有一个不报错
UserInfo.objects.get(mobile=mobile)
return APIResponse(msg='手机号存在') # 前端展示的样子：{code:100,msg:'手机号存在'}
except Exception as e:
raise APIException('手机号不存在') # 前端展示的样子：{code:999,msg:'手机号不存在'}
@action(methods=['GET'], detail=False)
def send_sms(self, request):
mobile = request.query_params.get('mobile')
if re.match(r'^1[3-9][0-9]{9}$', mobile):
code = get_code()
print(code) # 保存验证码--->能存，不能取，后期能取--->缓存--->django自带缓存框架
# 放在内存中，只要重启就没了，后期学完Redis，放到Redis中，重启项目还在
cache.set('sms_code_%s' % mobile, code)
res = send_sms_by_phone(mobile, code)
if res:
return APIResponse(msg='发送短信成功')
else:
# raise APIException('发送短信失败')
return APIResponse(msg='发送短信失败', code=101)
else:
return APIResponse(msg='手机号不合法', code=102)
写下你的评论吧 !
推荐阅读
我理解ViewHolder的onBindViewHolder如何工作,但是我不清楚notifyItemRangeChanged(0,this.data.size())如何;适用于此示例以及它的确 ...
[详细]
蜡笔小新 2024-09-29 20:59:44
关于页面元素定位，可以根据id、class、name属性以及link_text。其中id属性是最理想的定位方式，class与name属性， ...
[详细]
蜡笔小新 2024-09-28 14:23:38
IamusingmaterialDateTimepickerformyAndroidapp.ButIwanttocombinetheDateandTimepic ...
[详细]
蜡笔小新 2024-09-28 10:23:29
本文整理了Java中com.google.gwt.user.client.ui.RootPanel.detachOnWindowClose方法的一些代码示例，展示了 ...
[详细]
蜡笔小新 2024-09-26 12:58:35
这篇文章主要介绍“CSS浮动和定位属性介绍”，在日常操作中，相信很多人在CSS浮动和定位属性介绍问题上存在疑惑，小编查阅了各式资料，整理出简单 ...
[详细]
蜡笔小新 2024-09-26 10:30:04
题目描述输入整型数组和排序标识，对其元素按照升序或降序进行排序（一组测试用例可能会有多组数据）本题有多组输入，请使用whil ...
[详细]
蜡笔小新 2024-09-30 18:28:29
1)资料下载:点击资料即可下载2)对正点原子Linux感兴趣的同学可以加群讨论：9354467413）关注正点原子公众号，获取最新资料更新 ...
[详细]
蜡笔小新 2024-09-30 15:58:28
本文分析和介绍了GLo ...
[详细]
蜡笔小新 2024-09-30 15:14:04
2019.4.14第1001题：SumProblemProblemDescriptionHey,welcometoHDOJ(HangzhouDianziUniversityOnli ...
[详细]
蜡笔小新 2024-09-30 14:09:13
批量导入publicboolTranBatchImpo ...
[详细]
蜡笔小新 2024-09-30 10:20:25
在这一期的SendMessage函数应用中，我将向大家介绍如何利用消息函数来扩展树型列表(TreeView)控件的功能相信对于树型列表控件大家十分的熟悉， ...
[详细]
蜡笔小新 2024-09-29 19:45:57
题目：Givenanintegerarray,youneedtofindone continuoussubarray thatifyouonlysortthissubarrayin ...
[详细]
蜡笔小新 2024-09-28 13:59:29
FF——————————–直接使用document.creatRange()来创建一个选区;默认是空的;使用selectNode(obj)来代替moveToElementText ...
[详细]
蜡笔小新 2024-09-28 12:08:52
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有
