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>