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

实现注册登录准备分析：

后端代码实现：

1.创建user模型类

2.注册

django

• 获取参数

• 校验参数

• 存入数据库

• 返回响应

视图：

 

 

3.

Vue

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

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

  • 打包构建表单数据

  • axios的post请求提交参数

  • 接收响应

用户名：
手机号：
密码：
确认密码：

     注册

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请求提交参数

  • 接收响应

  • 登录成功,状态保持

用户名：

密码：

     登录