目录

1.短信sdk接入

2.前端点击获取验证码效果

3.注册后端接口实现

4.注册-前端

5.Celery

6.Celery完成短信发送功能

1.短信sdk接入

1.准备工作

1.下载云通讯相关的文件  https://github.com/cloopen/python-sms-sdk

2.在lyapi目录下创建一个lib文件夹,将ronglian_sms_sdk文件夹放入lib文件夹中

3.文件夹下的目录结构如图所示

4.登录 https://www.yuntongxun.com/ 获取一些相关信息

ACCOUNT SID:8a216da863f8e6c20164139687e80c1b
AUTH TOKEN : 6dd01b2b60104b3dbc88b2b74158bac6
AppID(默认):8aaf0708697b6beb01699f4442e3177c

2.使用容联云通讯发送短信

sms.py

from django.conf import settings
from .SmsSDK import SmsSDK
import json accId = settings.SMS_INFO.get('ACCID')
accToken = settings.SMS_INFO.get('ACCTOKEN')
appId = settings.SMS_INFO.get('APPID') def send_message(tid, mobile, datas):
sdk = SmsSDK(accId, accToken, appId)
resp = sdk.sendMessage(tid, mobile, datas)
resp = json.loads(resp)
print(resp)
return resp.get('statusCode') == '000000'

dev.py

SMS_INFO = {
'ACCID':'8a216da8754a45d5017563ac8e8406ff',
'ACCTOKEN':'a2054f169cbf42c8b9ef2984419079da',
'APPID':'8a216da8754a45d5017563ac8f910705',
}

views.py

# views.py
'''todo 发送验证码'''
import logging
logger = logging.getLogger('django')
from lyapi.libs.ronglian_sms_sdk.sms import send_message
from django.conf import settings
class GetSMSCodeView(APIView):
def get():
...... # 发送验证码
ret = send_message(settings.SMS_INFO.get('TID'),phone,(sms_code,constants.SMS_CODE_EXPIRE_TIME))
if not ret:
logger.error('{}手机号短信发送失败'.format(phone))
return Response({'msg':'短信发送失败 ,请联系管理员!!'},status=status.HTTP_500_INTERNAL_SERVER_ERROR) return Response({'msg': 'ok'})

3.drf后端接口测试

访问users/sms_code/13015409856,可得到msg:ok 并且手机会接受到验证码信息

2.前端点击获取验证码效果

1.在register.vue中给获取验证码按钮绑定个点击事件

<!-- html -->

<div>
<input v-model = "sms" type="text" placeholder="输入验证码" class="user" style="width: 62%">
<button style="width: 34%;height: 41px;" @click="getSmsCode">{{ btn_msg }}</button>
</div>
// js
<script>
export default {
name: 'Register',
data(){
return {
......
interval_time:60, // 倒计时时间
btn_msg:'点击获取验证码', // 按钮上面的信息
flag:false // 判断定时器是否已经开启
}
},
created(){
},
methods:{
......
getSmsCode(){
this.$axios.get(`${this.$settings.Host}/users/sms_code/${this.mobile}/`)
.then(()=>{
// 计时器
this.flag = setInterval(()=>{
if(this.interval_time > 0){
this.interval_time--;
this.btn_msg=`${this.interval_time}秒后重新获取`;
}else{
this.interval_time=60;
this.btn_msg='点击发送验证码';
clearInterval(this.flag);
this.flag=false;
}
},1000)
})
.catch(()=>{ }) } }, };
</script>

这个时候 我们在注册页面点击获取验证码按钮 手机上就可以收到短信了

2.效果:按钮变为不可点击

未获取验证码时:按钮显示点击获取验证码 且按钮是可点击的

​获取验证码时,按钮显示倒计时,并且倒计时时按钮不可点击

<!-- html -->
<div>
<input v-model = "sms" type="text" placeholder="输入验证码" class="user" style="width: 62%">
<button style="width: 34%;height: 41px;" @click="getSmsCode" :disabled="this.flag">{{ btn_msg }}</button>
</div>
// js
<script>
export default {
name: 'Register',
data(){
return {
validateResult:false,
interval_time:60,
btn_msg:'点击获取验证码',
flag:false,
}
},
created(){
},
methods:{
......
getSmsCode(){
this.$axios.get(`${this.$settings.Host}/users/sms_code/${this.mobile}/`)
.then((res)=>{
this.flag = setInterval(()=>{
if(this.interval_time > 0){
this.interval_time--;
this.btn_msg=`${this.interval_time}秒后重新获取`;
this.disabled = true; // 将按钮设置为不可点击
}else{
this.interval_time=60;
this.btn_msg='点击发送验证码';
clearInterval(this.flag);
this.flag=false;
this.disabled = false // 将按钮设置为可点击
}
},1000)
})
.catch((error)=>{ })

3.效果:前端显示:60s已经发过了,别瞎搞

register.vue

// register.vue
getSmsCode(){ this.$axios.get(`${this.$settings.Host}/users/sms_code/${this.mobile}/`)
......
.catch((error)=>{
this.$message.error(error.response.data.msg); // 打印错误信息
})

3.注册后端接口实现

1.后端序列化器对验证码的校验

serializers.py

# serializers.py
from rest_framework import serializers
from django_redis import get_redis_connection
......
# todo 校验验证码
def validate(self, attrs):
......
conn = get_redis_connection('sms_code') # 获取redis所存放验证码的那个库对象
ret = conn.get('mobile_%s' % (phone_number)) # 获取到手机号对应的验证码
if not ret: # 如果验证码不存在
raise serializers.ValidationError('验证码已失效')
if ret.decode() != sms: # 如果验证码不对
raise serializers.ValidationError('验证码输入错误') return attrs ......

2.当用户注册成功后,后端应该返回给前端一个真实的token值

serializers.py

# serializers.py
def create(self, validated_data): ......
# 通过jwt生成一个真实的token值返回给前端
payload = jwt_payload_handler(user)
token = jwt_encode_handler(payload)
user.token = token return user

这个时候我们测试接口 users/register

提交手机号/密码/确认密码/验证码 看是否能拿到后端传给我们的id phone token值

4.注册-前端

用户点击注册按钮后

如果校验通过,应该将后端发过来的id username token存到sessionStorage中  并跳转到首页界面

如果校验失败,应该在前端展示对应的错误信息

register.vue

<script>
export default {
name: 'Register',
data(){
return {
sms:"",
mobile:"",
password:"",
r_password:"",
validateResult:false,
interval_time:60, // /倒计时时间
btn_msg:'点击获取验证码',
flag:false, // 判断定时是否已经开启 }
},
created(){
},
methods:{
......
registerHandler(){
this.$axios.post(`${this.$settings.Host}/users/register/`,{
sms:this.sms,
phone:this.mobile,
password:this.password,
r_password:this.r_password,
}).then((res)=>{

// 注册成功 将id token username存储到前端 并跳转到首页
sessionStorage.token = res.data.token;
sessionStorage.username = res.data.username;
sessionStorage.id = res.data.id;
this.$router.push('/') // 跳转到首页
}).catch((error)=>{

// 注册失败 打印错误信息
console.log(error.response);
}) }, getSmsCode(){ this.$axios.get(`${this.$settings.Host}/users/sms_code/${this.mobile}/`)
.then((res)=>{
this.flag = setInterval(()=>{
if(this.interval_time > 0){
this.interval_time--;
this.btn_msg=`${this.interval_time}秒后重新获取`;
this.disabled = true; // 点击了获取验证码之后 按钮变为不可点击
}else{ //倒计时停止 允许用户发送短信
this.interval_time=60;
this.btn_msg='点击发送验证码';
clearInterval(this.flag);
this.flag=false;
this.disabled = false
}
},1000)
})
.catch((error)=>{
this.$message.error(error.response.data.msg);
}) } }, };
</script>

5.Celery

1.Celery的简单使用

Celery是一个功能完备即插即用的异步任务队列系统。它适用于异步处理问题,当发送邮件、或者文件上传, 图像处理等等一些比较耗时的操作,我们可将其异步执行,这样用户不需要等待很久,提高用户体验。

文档:http://docs.jinkan.org/docs/celery/getting-started/index.html

Celery的特点是:

  • 简单,易于使用和维护,有丰富的文档。

  • 高效,单个celery进程每分钟可以处理数百万个任务。

  • 灵活,celery中几乎每个部分都可以自定义扩展。

2.Celery的架构图

3.Celery的使用

......以后有时间再补上吧!

6.Celery完成短信发送功能

在最外层lyapi目录创建mycelery包

文件目录结构

# 文件结构目录
lyapi/
├── mycelery/
├── config.py # 配置文件
├── __init__.py
├── main.py # 主程序
└── sms/
└── tasks.py # 任务的文件,名称必须是这个!!!

main.py

# main.py

from celery import Celery
import os
os.environ.setdefault('DJANGO_SETTINGS_MODULE','lyapi.settings.dev')
import django
django.setup() app = Celery() app.config_from_object('mycelery.config') app.autodiscover_tasks(['mycelery.sms',])

config.py

# config.py

# 任务队列的链接地址(变量名必须叫这个)
broker_url = 'redis://127.0.0.1:6379/14'
# 结果队列的链接地址(变量名必须叫这个)
result_backend = 'redis://127.0.0.1:6379/15'

tasks.py

# tasks.py

from mycelery.main import app
from lyapi.libs.ronglian_sms_sdk.sms import send_message
from django.conf import settings
from lyapi.settings import constants import logging
logger = logging.getLogger('django') @app.task(name='smsCode')
def sms_codes(phone,sms_code):
ret2 = send_message(settings.SMS_INFO.get('TID'), phone, (sms_code, constants.SMS_CODE_EXPIRE_TIME // 60))
if not ret2:
logger.error('{}手机号短信发送失败'.format(phone)) return '短信发送成功啦'

views.py

# views.py

# 发送验证码
from mycelery.sms.tasks import sms_code
sms_code.delay(phone,sms_code) return Response({'msg':'ok'})

day80:luffy:短信sdk接入&点击获取验证码&注册功能的实现&Celery实现短信发送功能的更多相关文章

  1. day79:luffy:注册之对手机号的验证&amp;实现基本的注册功能逻辑&amp;点击获取验证码&amp;redis

    目录 1.前端和后端对于手机号的验证 2.实现基本的注册功能-不包括验证码 3.点击获取验证码 4.解决登录不上Xadmin的bug 5.redis register.vue页面 <templa ...

  2. Jquery插件实现点击获取验证码后60秒内禁止重新获取

    通过jquery.cookie.js插件可以快速实现“点击获取验证码后60秒内禁止重新获取(防刷新)”的功能 先到官网(http://plugins.jquery.com/cookie/ )下载coo ...

  3. Andorid实现点击获取验证码倒计时效果

    这篇文章主要介绍了Andorid实现点击获取验证码倒计时效果,这种效果大家经常遇到,想知道如何实现的,请阅读本文   我们在开发中经常用到倒计时的功能,比如发送验证码后,倒计时60s再进行验证码的获取 ...

  4. 微信小程序开发——文本框种输入手机号,点击获取验证码无反应的处理方法

    异常描述: 如下图,输入手机号码之后,点击右侧的获取验证码,在开发工具是OK的,真机测试无反应: 页面编码跟H5差不多的,H5没出现这个问题,但是小程序就不一样了. 异常分析: 页面结构层面,为了方便 ...

  5. 快手、抖音、微视类短视频SDK接入教程,7步就能搞定

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由视频咖 发表于云+社区专栏 终端部分 按照如下三步操作,可以用 XCode 或者 Android Studio 编译和调试小视频 Ap ...

  6. 用户点击获取验证码之后我们会发送一条信息到用户手机,然后就会出现一个倒计时按钮,很像支付宝手机付款效果了,下面我给大家分享两个js效果

    js代码  代码如下 复制代码 <div class="input">    <input type="button" id="bt ...

  7. js 点击获取验证码后的倒数60s

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script ...

  8. iOS点击获取短信验证码按钮

    概述 iOS点击获取短信验证码按钮, 由于 Demo整体测试运行效果 , 整个修改密码界面都已展现, 并附送正则表达式及修改密码逻辑. 详细 代码下载:http://www.demodashi.com ...

  9. 国内最简单的短视频SDK

    最近阿里百川和趣拍一起合作推出了一个短视频SDK.之前很多厂商可能都是用的Vitamio的短视频SDK.之后我考察过,也做过一些调查,发现Vitamio真的奇贵无比,屌丝公司根本用不起,阿里和趣拍这下 ...

随机推荐

  1. 【.Net Core】处理静态文件

    静态文件存储在项目的 Web 根目录中. 默认目录是 <content_root>/wwwroot,但可通过 UseWebRoot 方法更改目录. public class Program ...

  2. 机器学习技术点----apachecn的github地址

    预处理 离散化 等值分箱 等量分箱 独热 one-hot 标准化 最小最大 min-max z-score l2 标准化 归一化 特征选择 ANOVA 信息增益/信息增益率 模型验证 评价指标 回归 ...

  3. MVC3学习:利用jquery+ajax生成二维码(支持中文)

    二维码越来越热火了,做电子商务网站,不做二维码,你就OUT了. 一.下载DLL文件(ThoughtWorks.QRCode.dll),并在项目中引用.点此下载 如果你还不知道什么是QRCode二维码, ...

  4. RandomForest随机森林总结

    1.随机森林原理介绍 随机森林,指的是利用多棵树对样本进行训练并预测的一种分类器.该分类器最早由Leo Breiman和Adele Cutler提出,并被注册成了商标.简单来说,随机森林就是由多棵CA ...

  5. Banner中文字怎么排版才好看?

    今天这命题,相信有很多人提出过疑问,一个好的文字排版会给你的作品增添色彩,我们先看看好的作品是怎样的. 看完这些图大家都能感觉出来这是一个好的作品,大家天生就对美和丑有一定的区分. 其实文字排版也好, ...

  6. 【bzoj2795】【Poi2012】A Horrible Poem

    题解: 询问区间的整循环节 设区间长度为$n$ 如果有循环节长为$x$和$y$,那由斐蜀定理得$gcd(x,y)$也一定为一个循环节: 假设最小的循环节长为$mn$,那么对于任何循环节长$x$,一定$ ...

  7. Golang之反射(重点!!)

    1.反射:可以在运行时动态获取变量的相关信息 Import(“reflect”) 两个函数: reflect.TypeOf()//获取变量的类型,返回reflect.Type类型reflect.Val ...

  8. Mysql事务级别 (二)

    事务分为4个等级: 1.read uncommitted(未提交读)     :无法避免脏读.不可重复读.虚读(幻读) 2.read committed (提交读)        :可以避免脏读 3. ...

  9. 【Oracle】容易犯的错误和技巧集合

    引言      此文记录日常开发中容易遇到的oracle编程误区和一些使用技巧,不定期更新. 1.sum(),max(),min(),avg()等函数会得到null值 declare n_num ): ...

  10. Linux下无法挂载U盘

    大概的错误信息是这样的: Error mounting /dev/sdb4 at /media/xxx/xx: Command-line`mount -t "ntfs" -o&qu ...