码迷，mamicode.com
首页 > 移动开发 > 详细

路飞项目搭建3 TODO注释, 自定义模态框, vue-cookies操作浏览器cookies, 腾讯云短信开发, 代码(登录注册页面，多方式登录，手机是否存在验证接口，腾讯短信开发)

时间：2020-03-02 01:14:00      阅读：197      评论：0      收藏：0      [点我收藏+]

标签：实战   width   ESS   res   hang   *args   nav   cnp   otto   

TODO注释

"""
作用：todo是一种特殊的注释，书写就是 # TODO 注释内容，可以在TODO控制台面板快速定位注释位置
"""

技术图片

 

 

 

自定义模态框

componses/Login.vue
<template>
    <div class="login">
        <span @click="close_login">x</span>
    </div>
</template>

<script>
    export default {
        name: "Login",
        methods: {
            close_login() {
                this.$emit(‘close‘)
            }
        }
    }
</script>

<style scoped>
    .login {
        width: 100vw;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 666;
        background-color: rgba(0, 0, 0, 0.3);
    }
    span {
        font-size: 30px;
        cursor: pointer;
    }
</style>
componses/Header.vue
<template>
    <div class="header">
        <!-- ... -->
        <span @click="pull_login">登录</span>

        <Login v-if="is_login" @close="close_login" />
    </div>
</template>

<script>
    import Login from ‘./Login‘

    export default {
        name: "Header",
        data() {
            return {
                is_login: false,
            }
        },
        methods: {
            pull_login() {
                this.is_login = true;
            },
            close_login() {
                this.is_login = false;
            }
        },
        components: {
            Login,
        }
    }
</script>

 

vue-cookies操作浏览器cookies

"""
1）vue项目安装插件：
>: cnpm install vue-cookies

2）vue项目在main.js中配置
import cookies from ‘vue-cookies‘
Vue.prototype.$cookies = cookies;


3）vue项目逻辑中使用 vue-cookies 插件
增改：this.$cookies.set(key, value, exp)
查：this.$cookie.get(key)
删：this.$cookie.remove(key)

exp参数:
1）直接给数字，单位是s
2）默认是1d，代表一天
3）其他单位 1d 1m 1y，通常后后台统一 7d
"""

 

腾讯云短信开发

短信服务应用申请
""" 准备工作
1）创建短信应用 - 应用管理
2）申请短信签名 - 国内短信 > 签名管理
3）申请短信模块 - 国内短信 > 正文模板管理
"""
python中开发腾讯云短信服务
"""
1）API文档，接口的使用说吧
2）SDK，基于开发语言封装的可以直接调用的功能(工具)集合
    官网sdk使用文档中找到安装命令：pip install qcloudsms_py
    按照sdk使用说明进行开发：https://cloud.tencent.com/document/product/382/11672
"""

 

代码

1.登录注册页面

前提：基于element-ui环境

模态登录组件

<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>

模态注册组件

<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>

导航条：结合实际情况完成样式

<template>
    <div class="nav">
        <span @click="put_login">登录</span>
        <span @click="put_register">注册</span>
        <Login v-if="is_login" @close="close_login" @go="put_register" />
        <Register v-if="is_register" @close="close_register" @go="put_login" />
    </div>
</template>

<script>
    import Login from "./Login";
    import Register from "./Register";
    export default {
        name: "Nav",
        data() {
            return {
                is_login: false,
                is_register: false,
            }
        },
        methods: {
            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;
            }
        },
        components: {
            Login,
            Register
        }
    }
</script>

<style scoped>

</style>

登录业务分析

多方式登录

技术图片

"""
1）前台提供账号密码，账号可能是 用户名、手机号、邮箱等

接口：
后台只需要提供一个多方式登录接口即可 - 多方式登录接口
"""
验证码登录

技术图片

"""
1）前台提供手机号和验证码完成登录

接口：
前台填完手机号，往后台发送校验手机号的请求，如果存在继续，不存在提示注册 - 手机号存在与否接口
前台点击发送验证码，将手机再次发送给后台，后台将手机号通知给第三方，发送短信 - 手机验证码接口
前台点击登录提交手机号与验证码，完成验证码登录 - 验证码登录接口
"""

注册业务分析

验证码注册

技术图片

"""
1）前台提供手机号、验证码、密码完成注册

接口：
前台填完手机号，往后台发送校验手机号的请求，如果不存在继续，存在提示登录 - 手机号存在与否接口
前台点击发送验证码，将手机再次发送给后台，后台将手机号通知给第三方，发送短信 - 手机验证码接口
前台点击注册提交手机号、验证码及密码，完成验证码注册 - 验证码注册接口
"""

汇总

"""
多方式登录接口
手机号存在与否接口
手机验证码接口
验证码登录接口
验证码注册接口
"""

 

2.多方式登录

后台

插件
>: pip install djangorestframework-jwt
urls.py
path(‘login/‘, views.LoginViewSet.as_view({‘post‘: ‘login‘})),
views.py
技术图片 
from rest_framework.viewsets import ViewSet
from . import serializers, models
from utils.response import APIResponse
class LoginViewSet(ViewSet):
    # 局部禁用认证、权限组件
    authentication_classes = ()
    permission_classes = ()

    def login(self, request, *args, **kwargs):
        serializer = serializers.LoginSerializer(data=request.data, context={‘request‘: request})
        if serializer.is_valid():
            token = serializer.context.get(‘token‘)

            # 原来要一个个拿信息
            # username = serializer.context.get(‘username‘)
            # icon = serializer.context.get(‘icon‘)

            # 拿到登录用户，直接走序列化过程，将要返回给前台的数据直接序列化好给前台
            user = serializer.context.get(‘user‘)
            result = serializers.LoginSerializer(user, context={‘request‘: request}).data
            result[‘token‘] = token  # id，username，icon，token
            return APIResponse(result=result)
        return APIResponse(1, serializer.errors)
View Code
serializers.py
技术图片 
from rest_framework import serializers
from rest_framework import exceptions
from django.conf import settings
from . import models

class LoginSerializer(serializers.ModelSerializer):
    # 覆盖，避免login校验username有数据库唯一字段约束的限制
    username = serializers.CharField()

    class Meta:
        model = models.User
        # username、password可以通过局部钩子指定详细的校验规则
        fields = (‘id‘, ‘username‘, ‘password‘, ‘icon‘)
        extra_kwargs = {
            ‘id‘: {
                ‘read_only‘: True,
            },
            ‘icon‘: {
                ‘read_only‘: True,
            },
            ‘password‘: {
                ‘write_only‘: True,
            }
        }

    def validate(self, attrs):
        # 多方式得到user
        user = self._get_user(attrs)
        # user签发token
        token = self._get_token(user)
        # token用context属性携带给视图类
        self.context[‘token‘] = token

        ‘‘‘ 自己将user的信息逐个处理，传给视图
        # 前台可能不仅仅只需要登录成功的token，可能还需要用户名、用户头像等
        self.context[‘username‘] = user.username

        # 通过请求头格式化icon
        request = self.context[‘request‘]
        icon = ‘http://%s%s%s‘ % (request.META[‘HTTP_HOST‘], settings.MEDIA_URL, user.icon)
        self.context[‘icon‘] = icon
        ‘‘‘
        # 将登录用户对象直接传给视图
        self.context[‘user‘] = user

        return attrs

    def _get_user(self, attrs):
        import re
        username = attrs.get(‘username‘)
        if re.match(r‘^1[3-9][0-9]{9}$‘, username):
            user = models.User.objects.filter(mobile=username).first()
        elif re.match(r‘^.*@.*$‘, username):
            user = models.User.objects.filter(email=username).first()
        else:
            user = models.User.objects.filter(username=username).first()
        if not user:
            raise exceptions.ValidationError({‘username‘: ‘username error‘})

        password = attrs.get(‘password‘)
        if not user.check_password(password):
            raise exceptions.ValidationError({‘password‘: ‘password error‘})

        return user

    def _get_token(self, user):
        from rest_framework_jwt.serializers import jwt_payload_handler, jwt_encode_handler
        payload = jwt_payload_handler(user)
        token = jwt_encode_handler(payload)
        return token
View Code

前台

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" @click="login">登录</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);
            },

            login() {
                if (!(this.username && this.password)) {
                    this.$message({
                        message: ‘请填好账号密码‘,
                        type: ‘warning‘,
                        duration: 1500
                    });
                    return false  // 直接结束逻辑
                }

                this.$axios({
                    url: this.$settings.base_url + ‘/user/login/‘,
                    method: ‘post‘,
                    data: {
                        username: this.username,
                        password: this.password,
                    }
                }).then(response => {
                    let username = response.data.result.username;
                    let token = response.data.result.token;
                    let user_id = response.data.result.id;
                    this.$cookies.set(‘username‘, username, ‘7d‘);
                    this.$cookies.set(‘token‘, token, ‘7d‘);
                    this.$cookies.set(‘user_id‘, user_id, ‘7d‘);
                    this.$emit(‘success‘, response.data.result);
                }).catch(error => {
                }).catch(error => {
                    console.log(error.response.data)
                })
            }
        }
    }
</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>
View Code
Header.vue
技术图片 
<template>
    <div class="header">
        <div class="slogan">
            <p>老男孩IT教育 | 帮助有志向的年轻人通过努力学习获得体面的工作和生活</p>
        </div>
        <div class="nav">
            <ul class="left-part">
                <li class="logo">
                    <router-link to="/">
                        <img src="../assets/img/head-logo.svg" alt="">
                    </router-link>
                </li>
                <li class="ele">
                    <span @click="goPage(‘/free-course‘)" :class="{active: url_path === ‘/free-course‘}">免费课</span>
                </li>
                <li class="ele">
                    <span @click="goPage(‘/actual-course‘)" :class="{active: url_path === ‘/actual-course‘}">实战课</span>
                </li>
                <li class="ele">
                    <span @click="goPage(‘/light-course‘)" :class="{active: url_path === ‘/light-course‘}">轻课</span>
                </li>
            </ul>

            <div class="right-part">
                <div v-if="!token">
                    <span @click="put_login">登录</span>
                    <span class="line">|</span>
                    <span @click="put_register">注册</span>
                </div>
                <div v-else>
                    <span>{{ username }}</span>
                    <span class="line">|</span>
                    <span @click="logout">注销</span>
                </div>
            </div>
        </div>
        <Login v-if="is_login" @close="close_login" @go="put_register" @success="success_login" />
        <Register v-if="is_register" @close="close_register" @go="put_login" />
    </div>
</template>

<script>
    import Login from ‘./Login‘
    import Register from "./Register"

    export default {
        name: "Header",
        data() {
            return {
                url_path: sessionStorage.url_path || ‘/‘,
                token: ‘‘,
                username: ‘‘,
                user_id: ‘‘,
                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;
            },
            success_login(data) {
                this.is_login = false;
                this.username = data.username;
                this.token = data.token;
                this.user_id = data.user_id;
            },
            logout() {
                this.token = ‘‘;
                this.username = ‘‘;
                this.user_id = ‘‘;
                this.$cookies.remove(‘username‘);
                this.$cookies.remove(‘token‘);
                this.$cookies.remove(‘user_id‘);
            }
        },
        created() {
            sessionStorage.url_path = this.$route.path;
            this.url_path = this.$route.path;

            // 检测cookies，查看登录状态
            this.username = this.$cookies.get(‘username‘);
            this.token = this.$cookies.get(‘token‘);
            this.user_id = this.$cookies.get(‘user_id‘);
        },
        components: {
            Login,
            Register,
        }
    }
</script>

<style scoped>
    .header {
        background-color: white;
        box-shadow: 0 0 5px 0 #aaa;
    }

    .header:after {
        content: "";
        display: block;
        clear: both;
    }

    .slogan {
        background-color: #eee;
        height: 40px;
    }

    .slogan p {
        width: 1200px;
        margin: 0 auto;
        color: #aaa;
        font-size: 13px;
        line-height: 40px;
    }

    .nav {
        background-color: white;
        user-select: none;
        width: 1200px;
        margin: 0 auto;

    }

    .nav ul {
        padding: 15px 0;
        float: left;
    }

    .nav ul:after {
        clear: both;
        content: ‘‘;
        display: block;
    }

    .nav ul li {
        float: left;
    }

    .logo {
        margin-right: 20px;
    }

    .ele {
        margin: 0 20px;
    }

    .ele span {
        display: block;
        font: 15px/36px ‘微软雅黑‘;
        border-bottom: 2px solid transparent;
        cursor: pointer;
    }

    .ele span:hover {
        border-bottom-color: orange;
    }

    .ele span.active {
        color: orange;
        border-bottom-color: orange;
    }

    .right-part {
        float: right;
    }

    .right-part .line {
        margin: 0 10px;
    }

    .right-part span {
        line-height: 68px;
        cursor: pointer;
    }
</style>
View Code

 

3.手机是否存在验证接口

后台

urls.py
path(‘mobile/‘, views.MobileViewSet.as_view({‘post‘: ‘check‘})),
views.py
# 手机是否存在接口
import re
class MobileViewSet(ViewSet):
    def check(self, request, *args, **kwargs):
        mobile = request.data.get(‘mobile‘, None)
        if not mobile:
            return APIResponse(1, ‘mobile field required‘)
        if not re.match(r‘^1[3-9][0-9]{9}$‘, mobile):
            return APIResponse(1, ‘mobile field error‘)
        try:
            models.User.objects.get(mobile=mobile)
            return APIResponse(result=True)  # 手机号存在
        except:
            return APIResponse(result=False)  # 手机号不存在

 

4.腾讯云短信开发

短信服务应用申请

""" 准备工作
1）创建短信应用 - 应用管理
2）申请短信签名 - 国内短信 > 签名管理
3）申请短信模块 - 国内短信 > 正文模板管理
"""

python中开发腾讯云短信服务

"""
1）API文档，接口的使用说吧
2）SDK，基于开发语言封装的可以直接调用的功能(工具)集合
    官网sdk使用文档中找到安装命令：pip install qcloudsms_py
    按照sdk使用说明进行开发：https://cloud.tencent.com/document/product/382/11672
"""
t_sms.py
# 所有配置换成申请的数据

# 申请的短信应用 SDK AppID
appid = 1400
# 申请的短信应用 SDK AppKey
appkey = "ba81"
# 申请的短信模板ID，需要在短信控制台中申请
template_id = 5447
# 申请的签名，参数使用的是`签名内容`，而不是`签名ID`
sms_sign = "Owen的技术栈"


from qcloudsms_py import SmsSingleSender
sender = SmsSingleSender(appid, appkey)

import random
def get_code():
    code = ‘‘
    for i in range(4):
        code += str(random.randint(0, 9))
    return code

mobile = 13344556677
# 模板所需参数，和申请的模板中占位符要保持一致
code = get_code()
print(code)
params = [code, 5]
try:
    result = sender.send_with_param(86, mobile, template_id, params, sign=sms_sign, extend="", ext="")
    if result and result.get(‘result‘) == 0:
        print(‘发送成功‘)
except Exception as e:
    print(‘短信发送失败：%s‘ % e)

短信服务二次封装

在libs下创建 tx_sms 包
init.py
from .sms import get_code, send_code
settings.py
# 申请的短信应用 SDK AppID
APP_ID = 1400

# 申请的短信应用 SDK AppKey
APP_KEY = "ba81"

# 申请的短信模板ID，需要在短信控制台中申请
TEMPLATE_ID = 5447

# 申请的签名，参数使用的是`签名内容`，而不是`签名ID`
SIGN = "Owen的技术栈"
sms.py
import random
def get_code():
    code = ‘‘
    for i in range(4):
        code += str(random.randint(0, 9))
    return code


from qcloudsms_py import SmsSingleSender
from . import settings
from utils.logging import logger
sender = SmsSingleSender(settings.APP_ID, settings.APP_KEY)
def send_code(mobile, code, exp):
    try:
        result = sender.send_with_param(
            86,
            mobile,
            settings.TEMPLATE_ID,
            (code, exp),
            sign=settings.SIGN,
            extend="", ext=""
        )
        if result and result.get(‘result‘) == 0:
            return True
        logger.error(‘短信发送失败：%s‘ % result.get(‘errmsg‘))
    except Exception as e:
        logger.critical(‘短信发送异常：%s‘ % e)
    return False

 

路飞项目搭建3 TODO注释, 自定义模态框, vue-cookies操作浏览器cookies, 腾讯云短信开发, 代码(登录注册页面，多方式登录，手机是否存在验证接口，腾讯短信开发)

标签：实战   width   ESS   res   hang   *args   nav   cnp   otto   

原文地址：https://www.cnblogs.com/ludingchao/p/12393169.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！