发送短信以及多方式登录
目录
1 首页轮播图，前后端打通
1.1 前端 Banner.vue
<template>
<div class="banner">
<el-carousel height="400px">
<el-carousel-item v-for="item in banner_list" :key="item.id">
<div v-if="item.link.indexOf('http')>-1 ">
<a :href="item.link"><img :src="item.image" alt=""></a>
</div>
<div v-else>
<router-link :to="item.link"><img :src="item.image" alt=""></router-link>
</div>
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
export default {
name: "Banner",
data() {
return {
banner_list: []
}
},
created() {
this.$axios.get(`${this.$settings.base_url}/home/banner/`).then(res => {
console.log(res.data)
this.banner_list = res.data
})
},
}
</script>
<style scoped>
.el-carousel__item {
height: 400px;
min-width: 1200px;
}
.el-carousel__item img {
height: 400px;
margin-left: calc(50% - 1920px / 2);
}
</style>
1.2 前端项目提交到gitee
# 前后端，传到一个仓库中 ---》可以
文件夹：前端，后端项目 ----》git init
# 但是实际在公司中，前端组后端组---》就要分到两个仓库中
# 操作步骤
-配置远程仓库
-本地提交到版本库后
-git push origin master
2 注册页面前端设计
# 登录注册版本，设计
-用户表，没有其他表
-写哪些接口？
-1 用户名密码登录---》多方式登录（可以使用 用户名+密码，手机号+密码，邮箱+密码）
-2 校验手机号是否存在的接口
-3 手机号+验证码登录 ---》后期改成如果没注册，直接注册并登录
-4 发送验证码接口 ---》使用第三方发送短信
-5 注册接口（手机号，验证码，密码）
-目前可以先写出来
-多方式登录
-校验手机号是否存在
-如果发送短信---》第三方平台---》阿里大于短信，腾讯云短信，容联云通信----》花钱买短信条数---》调用它的接口---》给固定的人发送短信
3 多方式登录接口
# 前端传入的数据---》post请求
{username:lqz,password:123}
{username:18953675221,password:123}
{username:33@qq.com,password:123}
# 咱们现在把逻辑写在序列化类中
-写在全局钩子中
3.1 序列化类
from .models import User
from rest_framework import serializers
import re
from rest_framework.exceptions import ValidationError
from rest_framework_jwt.settings import api_settings
from rest_framework.exceptions import APIException
jwt_payload_handler = api_settings.JWT_PAYLOAD_HANDLER
jwt_encode_handler = api_settings.JWT_ENCODE_HANDLER
class MulLoginSerializer(serializers.ModelSerializer):
username = serializers.CharField() # 必须重写该字段，否则会做唯一性校验，如果数据库存在，就抛异常了，没法往下走了
class Meta:
model = User
fields = ['username', 'password'] # 字段自己的规则没有校验通过，从表模型映射过来的username是unique的
def _check_user(self, attrs): # 公司里约定俗称，隐藏属性 __,这个方法只想在内部使用，万一外部真要用，也可以用
try:
username = attrs.get('username')
password = attrs.get('password')
if re.match(r'^1[3-9][0-9]{9}$', username): # 手机号登录
user = User.objects.get(mobile=username)
elif re.match(r'^.+@.+$', username): # 邮箱登录
user = User.objects.get(email=username)
else:
user = User.objects.get(username=username)
if user.check_password(password):
return user
else:
# 使用ValidationError抛异常，一定要写成字典形式，或者直接抛APIException
# raise ValidationError({'detail':'用户名或密码错误'})
raise APIException()
except APIException:
# raise ValidationError({'detail':'用户名或密码错误'})
raise APIException(detail='密码错误')
except Exception:
raise APIException(detail='用户不存在')
def _get_token(self, user):
payload = jwt_payload_handler(user)
token = jwt_encode_handler(payload)
return token
def validate(self, attrs): # 在全局钩子中，校验用户是否登录成功，如果登录成功直接签发token
# 1 多方式得到user---》用户名，手机号，邮箱
user = self._check_user(attrs) # 如果登录失败，就抛异常了
# 2 user签发token---》签发token
token = self._get_token(user)
# 3 把token放到 self 对象中得context属性中
self.context['token'] = token
host = self.context.get('request').META['HTTP_HOST']
self.context['icon'] = 'http://%s/media/%s' % (host, str(user.icon))
return attrs
3.2 视图类
class LoginView(GenericViewSet):
queryset = User.objects.all()
serializer_class = MulLoginSerializer
@action(methods=['POST'], detail=False)
def mul_login(self, request):
ser = self.get_serializer(data=request.data)
# 这一句，会校验字段自己的规则，还会校验局部钩子，还会校验全局钩子
ser.is_valid(raise_exception=True) # 这样写，我们已经处理了全局异常，如果校验不通过，会抛异常
# 生成token---->从序列化类中取出来
token = ser.context.get('token')
return APIResponse(token=token)
3.3 路由
from rest_framework.routers import SimpleRouter
from .views import MobileView,LoginView
# 向这个地址发送get请求，# 127.0.0.1:8000/api/v1/user/ mobile ---get 就能校验手机号是否存在
router = SimpleRouter()
router.register('mobile', MobileView, 'mobile')
router.register('login', LoginView, 'login')
urlpatterns = [
]
urlpatterns += router.urls
4 手机号是否存在接口
4.1 urls.py
#总路由
path('api/v1/user/', include('user.urls')),
# user 的app下的urls.py
from .views import MobileView
router = SimpleRouter()
router.register('mobile', MobileView, 'mobile')
urlpatterns = [
]
urlpatterns += router.urls
4.2 视图类
class MobileView(ViewSet):
def list(self, request):
try:
mobile = request.query_params.get('mobile')
User.objects.get(mobile=mobile) # 有且只有一条才正常
return APIResponse()
except:
raise APIException(detail='手机号不存在')
# return APIResponse(code=101, msg='手机号不存在')
4.3 访问路径
http://127.0.0.1:8000/api/v1/user/mobile/?mobile=189536745211
5 登录注册前端页面
6 腾讯云短信介绍和申请
# 使用第三方短信接口
# 注册一个个人公众号---》实名认证
-需要没有注册过的邮箱
# 使用腾讯云短信
1 创建短信签名
-选择公众号截图
2 创建短信正文模版
-创建一个模板
3 等待审核
4 发送短信---》代码发送
-sdk v2 老一些
v3 新的
# 什么是api接口，什么是sdk
-SDK一般指软件开发工具包，第三方平台提供的通过相应语言写的包
-咱们只需要集成到项目中， 包.方法
-使用简单
-问题是：有的语言没有sdk
-api接口：发送http请求，携带相关数据，调用，通用跟语言没关系
问题分析
#1 python是值传递还是引用传递
-什么是值，什么是引用
-什么是可变，什么是不可变
-【python一切皆引用】
<template>
<div class="login"><span @click="close_login">X</span>
</div>
</template>
<script>
export default {
name: "Login",
methods: {
close_login() {
// 控制父组件中的is_login变量编程false this.$emit('close_login')
} } }
</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); }
</style>
浙公网安备 33010602011771号
