注册及登录

最新推荐文章于 2022-05-14 14:57:31 发布

十年丿之后

最新推荐文章于 2022-05-14 14:57:31 发布

阅读量429

点赞数

文章标签： python

本文链接：https://blog.csdn.net/qq_52209823/article/details/113337063

版权

在这里插入图片描述
注册接口

class RegisterView(APIView):
    """
    注册功能
    """
    def post(self, request):
        """
        {'username': ['zhangsan'], 'password1': ['123'],
        'password2': ['123'], 'email': ['haiming_dong@126.com']}
        """
        # 获取数据
        username = request.data.get('username')
        password1 = request.data.get('password1')
        password2 = request.data.get('password2')
        email = request.data.get('email')
        # 判断数据完整性
        if not all([username, password1, password2, email]):
            return Response({'msg': '数据不完整', 'code': 400})
        # 判断邮箱是否符合规则
        if not re.match('^[0-9a-zA-Z_]{0,19}@[0-9a-zA-Z]{1,6}\.com$', email):
            return Response({'msg': '邮箱格式不正确', 'code': 400})
        # 获取用户对象，用来判断用户是否存在
        user_obj = User.objects.filter(username=username)
        # 判断用户是否存在，存在时返回用户已注册
        if user_obj:
            return Response({'msg': '用户已存在', 'code': 400})
        # 不存在时， 判断两次密码是否一致
        if password1 == password2:
            # 构建用户数据，对密码进行加密
            user_data = {'username': username, 'password': make_password(password1), 'email': email}
            # 反序列化添加用户
            user_serializer = UserModelSerializer(data=user_data)
            # 校验用户数据
            if user_serializer.is_valid():
                # 保存用户信息
                user_serializer.save()
                # 打印保存的返回信息
                print(user_serializer.data)
                # 发送邮件准备数据
                subject = '好又多商城会员注册'
                message = ''
                from_email = settings.EMAIL_FROM
                recipient_list = [email]
                html_message = '<h3>{}, 欢迎注册好，请点以下链接进行激活：</h3><a href="http://127.0.0.1:8000/users/active/?user_id={}">点击这里进行激活</a>'.format(username, user_serializer.data.get('id'))
                # 发送邮件
                send_mail(subject=subject,
                          message=message,
                          from_email=from_email,
                          recipient_list=recipient_list,
                          html_message=html_message)
                # 返回注册成功
                return Response({'msg': '注册成功', 'code': 200})
            # 校验失败，返回失败信息
            else:
                return Response({'error': user_serializer.errors, 'code': 400})
        # 两次密码不致时，返回两次密码 不一致
        return Response({'msg': '两次密码不一致', 'code': 400})

注册页面

<template>
    <div>
        <div class="register_con">
            <div class="l_con fl">
                <a class="reg_logo"><img src="/static/images/logo.png"></a>
                <div class="reg_slogan">足不出户  ·  新鲜每一天</div>
                <div class="reg_banner"></div>
            </div>

            <div class="r_con fr">
                <div class="reg_title clearfix">
                    <h1>用户注册</h1>
                    
                </div>
                <div class="reg_form clearfix">
                    <form @submit.prevent="register">
                    <ul>
                        <li>
                            <label>用户名:</label>
                            <input type="text" name="user_name" id="user_name" v-model="username">
                            <!-- <span class="error_tip">提示信息</span> -->
                        </li>					
                        <li>
                            <label>密码:</label>
                            <input type="password" name="pwd" id="pwd" v-model="password1">
                            <!-- <span class="error_tip">提示信息</span> -->
                        </li>
                        <li>
                            <label>确认密码:</label>
                            <input type="password" name="cpwd" id="cpwd" v-model="password2">
                            <!-- <span class="error_tip">提示信息</span> -->
                        </li>
                        <li>
                            <label>邮箱:</label>
                            <input type="text" name="email" id="email" v-model="email">
                            <!-- <span class="error_tip">提示信息</span> -->
                        </li>
                        <li class="agreement">
                            <input type="checkbox" name="allow" id="allow" checked="checked">
                            <label>同意<a href='#'>《好又多用户使用协议》</a></label>
                            <!-- <span class="error_tip2">提示信息</span> -->
                        </li>
                        <li class="reg_sub">
                            <input type="submit" value="注 册" name="">
                        </li>
                    </ul>				
                    </form>
                </div>

            </div>

        </div>

        <div class="footer no-mp">
            <div class="foot_link">
                <a href="#">关于我们</a>
                <span>|</span>
                <a href="#">联系我们</a>
                <span>|</span>
                <a href="#">招聘人才</a>
                <span>|</span>
                <a href="#">友情链接</a>		
            </div>
            <p>CopyRight © 2016 北京趣活信息技术有限公司 All Rights Reserved</p>
            <p>电话：010-51851888    京ICP备*******8号</p>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            username: '',
            password1: '',
            password2: '',
            email: '',
            base_url: 'http://127.0.0.1:8000'
        }
    },
    methods: {
        register() {
            // 实例化
            let form_data = new FormData()
            // 添加数据
            form_data.append('username', this.username)
            form_data.append('password1', this.password1)
            form_data.append('password2', this.password2)
            form_data.append('email', this.email)
            
            // 发送请求
            axios({
                url: this.base_url + '/users/register/',
                method: 'post',
                data: form_data
            }).then(res => {
                console.log(res.data)
            })
        }
    },
    created() {

    }
}
</script>

<style scoped>

</style>

发送邮件配置

# 配置邮件发送
EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.qq.com'  # 如果为163邮箱，设置为smtp.163.com
EMAIL_PORT = 25  # 或者 465/587是设置了 SSL 加密方式
# 发送邮件的邮箱
EMAIL_HOST_USER = '2597349742@qq.com'
# 在邮箱中设置的客户端授权密码
EMAIL_HOST_PASSWORD = 'ajtbjznedksabiic'  # 第三方登陆使用的授权密码
EMAIL_USE_TLS = True  # 这里必须是 True，否则发送不成功
# 收件人看到的发件人, 必须是一直且有效的
EMAIL_FROM = 'hui<2597349742@qq.com>'
DEFAULT_FROM_EMAIL = EMAIL_HOST_USER

from django.core.mail import send_mail
# 发送邮件准备数据
subject = '好又多商城会员注册'  # 发送邮件的主题
message = ''  # 发送邮件的文本信息
from_email = settings.EMAIL_FROM  # 邮件来自于谁
recipient_list = [email]  # 邮件接收者列表
# 邮件的网页信息，可以带html标签
html_message = '<h3>{}, 欢迎注册，请点以下链接进行激活：</h3><a href="http://127.0.0.1:8000/users/active/?user_id={}">点击这里进行激活</a>'.format(username, user_serializer.data.get('id'))  
# 发送邮件
send_mail(subject=subject,
          message=message,
          from_email=from_email,
          recipient_list=recipient_list,
          html_message=html_message)

登录讲解

1 绘制登录流程图理解逻辑

在这里插入图片描述
1.2 账号登录

class LoginView(APIView):
    """
    登录
    """
    def post(self, request):
        """
        {'username': ['zhangsan'], 'password': ['123']}
        """
        # 获取网页提交数据
        username = request.data.get('username')
        password = request.data.get('password')
        # 获取用户对象，用来判断用户是否存在
        user_obj = User.objects.filter(username=username).first()
        # 判断用户是否存在，存在时，进行密码比对 
        if user_obj: 
            # 使用check_password()进行密码校验，校验通过，颁发token
            if check_password(password, user_obj.password):
                #
                # 返回用户信息、token
                return Response({'msg': '登录成功', 'code': 200, 'username': username, 'user_id': user_obj.pk})
            else:
                return Response({'msg': '用户名或者密码不正确', 'code': 400})
        # 用户不存在时，返回用户名或者密码不正确
        else:
            return Response({'msg': '用户名或者密码不正确', 'code': 400})

前端登录页面

<template>
    <div>
        <div class="login_top clearfix">
            <a href="index.html" class="login_logo"><img src="/static/images/logo.png"></a>	
        </div>

        <div class="login_form_bg">
            <div class="login_form_wrap clearfix">
                <div class="login_banner fl"></div>
                <div class="slogan fl">日夜兼程 · 急速送达</div>
                <div class="login_form fr">
                    <div class="login_title clearfix">
                        <h1>用户登录</h1>                     
                    </div>
                    <div class="form_input">
                        <!-- prevent 阻止事件的默认效果 -->
                        <form @submit.prevent="login">
                            <input type="text" name="username" class="name_input" v-model="username" placeholder="请输入用户名">
                            <div class="user_error">输入错误</div>
                            <input type="password" name="pwd" class="pass_input" v-model="password" placeholder="请输入密码">
                            <div class="pwd_error">输入错误</div>
                            <div class="more_input clearfix">
                                <input type="checkbox" name="">
                                <label>记住用户名</label>
                                <a href="#">立即注册?</a>
                                <a href="#">忘记密码?</a>
                            </div>
                            <input type="submit" name="" value="登录" class="input_submit">
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer no-mp">
            <div class="foot_link">
                <a href="#">关于我们</a>
                <span>|</span>
                <a href="#">联系我们</a>
                <span>|</span>
                <a href="#">招聘人才</a>
                <span>|</span>
                <a href="#">友情链接</a>		
            </div>
            <p>CopyRight © 2016 北京趣活信息技术有限公司 All Rights Reserved</p>
            <p>电话：010-51851888    京ICP备*******8号</p>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data() {
        return {
            username: '',
            password: '',
            base_url: 'http://127.0.0.1:8000'
        }
    },
    methods: {
        login() {
            // 实例化
            let form_data = new FormData()
            // 添加数据
            form_data.append('username', this.username)
            form_data.append('password', this.password)
            // 发送请求
            axios({
                url: this.base_url + '/users/login/',
                method: 'post',
                data: form_data
            }).then(res => {
                console.log(res.data)
                if(res.data.code == 200) {
                    localStorage.setItem('username', res.data.username)
                    localStorage.setItem('user_id', res.data.user_id)
                    this.$router.push({
                        name: 'Index'
                    })
                }
            })
        }
    }
}
</script>

jwt认证使用

在这里插入图片描述
django配制jwt及使用

安装pip install pyjwt
utcnow()：读取的时间一直都是系统的“世界标准时间”，不管系统的本地时区是否设置，读取的时间不会随这些设置变化；
now()：读取的时间是系统的本地时间，也就是说，如果系统时区默认没有设置，那么读取的就是世界标准

vue客户端存储用户

4.1 webstorage介绍

localStorage 永久保存，关闭浏览器，不会消失

增 localStorage.setItem(key, value)

删 localStorage.removeItem(key)

查 localStorage.getItem(key)

sessionStorage 临时保存，关闭浏览器，会消失

增 sessionStorage .setItem(key, value)

删 sessionStorage .removeItem(key)

查 sessionStorage .getItem(key)
记住用户名

<template>
    <div>
        <div class="login_top clearfix">
            <a href="index.html" class="login_logo"><img src="/static/images/logo.png"></a>	
        </div>

        <div class="login_form_bg">
            <div class="login_form_wrap clearfix">
                <div class="login_banner fl"></div>
                <div class="slogan fl">日夜兼程 · 急速送达</div>
                <div class="login_form fr">
                    <div class="login_title clearfix">
                        <h1>用户登录</h1>
                        
                    </div>
                    <div class="form_input">
                        <!-- prevent 阻止事件的默认效果 -->
                        <form @submit.prevent="login">
                            <input type="text" name="username" class="name_input" v-model="username" placeholder="请输入用户名">
                            <div class="user_error">输入错误</div>
                            <input type="password" name="pwd" class="pass_input" v-model="password" placeholder="请输入密码">
                            <div class="pwd_error">输入错误</div>
                            <div class="more_input clearfix">
                                <input type="checkbox" name="" v-model="selectBox" @click="memberUser">
                                <label>记住用户名</label>
                                <a href="#">立即注册?</a>
                                <a href="#">忘记密码?</a>
                            </div>
                            <input type="submit" name="" value="登录" class="input_submit">
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer no-mp">
            <div class="foot_link">
                <a href="#">关于我们</a>
                <span>|</span>
                <a href="#">联系我们</a>
                <span>|</span>
                <a href="#">招聘人才</a>
                <span>|</span>
                <a href="#">友情链接</a>		
            </div>
            <p>CopyRight © 2016 北京趣活信息技术有限公司 All Rights Reserved</p>
            <p>电话：010-51851888    京ICP备*******8号</p>
        </div>
    </div>
    

</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            username: '',
            password: '',
            base_url: 'http://127.0.0.1:8000',
            selectBox: false,
            name: localStorage.getItem('username')
        }
    },
    methods: {
        // 记住用记名
        memberUser() {
            if(this.selectBox) {
                // 为真时，清除用户
                localStorage.removeItem('username')
                this.username = ''
            }else{
                localStorage.setItem('username', this.username)
            }
            
        },
        // 登录
        login() {
            // 实例化
            let form_data = new FormData()
            // 添加数据
            form_data.append('username', this.username)
            form_data.append('password', this.password)
            // 发送请求
            axios({
                url: this.base_url + '/users/login/',
                method: 'post',
                data: form_data
            }).then(res => {
                console.log(res.data)
                if(res.data.code == 200) {
                    localStorage.setItem('username', res.data.username)
                    localStorage.setItem('token', res.data.token)
                    this.$router.push({
                        name: 'Index'
                    })
                }
            })
        }
    },
    created() {
        if(this.name) {
            this.username = this.name
            this.selectBox = true
        }
    }
}
</script>

<style scoped>

</style>