python和vue实现用户的注册登录

实现注册登录准备分析:

后端代码实现:

1.创建user模型类

2.注册

django

  • 获取参数

  • 校验参数

  • 存入数据库

  • 返回响应

视图:

 

 

3.

Vue

  • 使用v-mdoel绑定表单,获取用户信息

  • 点击按钮,执行注册方法

    • 打包构建表单数据

    • axios的post请求提交参数

    • 接收响应

用户名:<input type=’text’ v-model=’username’>
手机号:<input type=’text’ v-model=’mobile’>
密码:<input type=’text’ v-model=’password’>
确认密码:<input type=’text’ v-model=’password2′>
<button @click=’register’>
     注册
</button>

<script>
export default {
    name: “Register”,
    data() {
        return {
               username:”,
            mobile:”,
            password:”,
            password2:”
        }
    },
    methods: {
        register() {
            let data = new FormData();
            data.append(‘username’, this.username)
            data.append(‘mobile’, this.mobile)
            data.append(‘password’, this.password)
            data.append(‘password2’, this.password2)
            
            this.$axios.post(‘register/’, data)
            .then(resp=>{
                console.log(resp.data)
            })
            .catch(err=>{
                 console.log(err.response.data)
            })
        }
    }
}
</script>

4.

登录

django

  • 使用django内置的登录方式,想要支持多种方式登录,需要 重写 认证类,并在 settings.py配置文件中指明

  • 自己实现登录验证

from restframework.views import APIView
from restframework.response import Response
from rest_framework_jwt.utils import jwt_payload_handler, jwt_encode_handler
from django.db.models import Q
from django.contrib.auth.hashers import check_password
from user.models import User

class LoginAPIView(APIVIew):
    def post(slef, request):
        # 1. 获取参数: 用户名、密码
        username = request.data.get(‘username’)
        password = request.data.get(‘password’)
        
        # 2. 校验参数
        if not all([username, password]):
            return Response({‘msg’:’缺少必要参数’}, status=400)
        
        
        # 3. 不使用django内置的认证方式,自己写
        
        # 3.1 通过 传入的 username  查询 对应的用户, 传入的 username 可能是 用户名,也可能是手机号
        try:
            user = User.objects.get(Q(username=username)  | Q(mobile=username))
        except Exception as e:
            return Response({‘msg’: ‘登录失败’}, status=400)
            
       # 3.2 校验密码
        if check_password(password, user.password):
            # 4. 登录成功,生成token,返回token
            payload = jwt_payload_handler(user=user)
            token = jwt_encode_handler(payload=payload)
            
            return Response({
                ‘token’: token,
                ‘username’: user.username,
                ‘id’: user.id  
            })
        
        else:
            # 5. 登录失败,直接返回响应
            return Response({‘msg’: ‘登录失败’}, status=400)

5.

Vue

  • 目录

    2.注册

    django

    Vue

    登录

    django

    Vue


    使用v-mdoel绑定表单,获取用户信息: 用户名、密码

  • 点击按钮,执行注册方法

    • 打包构建表单数据

    • axios的post请求提交参数

    • 接收响应

    • 登录成功,状态保持

用户名:<input type=’text’ v-model=’username’>

密码:<input type=’text’ v-model=’password’>

<button @click=’login’>
     登录
</button>

<script>
export default {
    name: “Register”,
    data() {
        return {
               username:”,
            password:”,
        }
    },
    methods: {
        login() {
            let data = new FormData();
            data.append(‘username’, this.username)
            data.append(‘password’, this.password)
            
            this.$axios.post(‘login/’, data)
            .then(resp=>{
                console.log(resp.data)
                // 状态保持
                localStroage.setItem(‘username’, resp.data.username)
                localStroage.setItem(‘token’, resp.data.token)
            })
            .catch(err=>{
                 console.log(err.response.data)
            })
        }
    }
}
</script>


版权声明:本文为justzcy原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。