day05登录

登录功能一：

后端：

class LoginView(APIView):
    def post(self,reuqest):# 涉及到密码采用post
        # username=reuqest.data.get('user_name') # 前端提交的用户名
        account=reuqest.data.get('account') # 前端提交的用户名
        pwd=reuqest.data.get('password') # 前端提交的密码

        # 判断登录账号是用户名还是手机号
        rule = r'^1[3-9][0-9]{9}$'
        if not re.findall(rule,account):
            # 没说明输入的是用户名
            user_info=User.objects.filter(user_name=account).first()
        else:
            user_info=User.objects.filter(mobile=account).first()


        # 判断用户是否存在
        # user_info=User.objects.filter(user_name=username).first() # 获取符合条件的第一条数据，如果没有符合条件的，返回的是none
        if not user_info:
            return Response({
                'code':400,
                'msg':'用户名密码错误'
            })
        # 程序到这说明用户存在
        # 判断密码
        if user_info.password != int(pwd):
            return Response({
                'code': 400,
                'msg': '用户名或密码错误'
            })
        # 程序走到这里就证明用户名和密码都正确
        #生成jwt
        # 安装 pip install pyjwt
        import jwt,time
        from django.conf import settings
        payload={
            'user_id':'',# 用户id
            'user_name':'',# 用户名
            'exp':int(time.time())+(60*60*24*30), # 超时时间
        }
        # payload 是载荷的意思
        # key 私用
        # settings.SECRET_KEY django随机生成的一个私钥
        # algorithm 加密方式
        token=jwt.encode(payload,key=settings.SECRET_KEY,algorithm='HS256')
        return Response({
            'code': 200,
            'msg': '登录成功',
            'user':{ # 返回用户信息
                'name':user_info.user_name,
                'mobile':user_info.mobile
            },
            'token':token,
        })
  -------------------------------------------------------------------------------------------------------
  ***路由***
      path('login/',views.LoginView.as_view()),

前端：

   // 点击登录触发
    Login() {
      // 通过element自定义表单校验规则，校验用户输入的用户信息
      this.$refs["ruleForm"].validate(valid => {
        //如果通过校验开始登录
        if (valid) {
          // TODO 登录
          console.log("开始登录，用户名", this.LoginUser.name, "密码", this.LoginUser.pass)
*********************************************************************************************************
          this.$axios.post('/user/login/',{
            'account':this.LoginUser.name,
            'password':this.LoginUser.pass,
          }).then((resp) => {
            if(resp.data.code==200){
              //清空输入框
              this.LoginUser.name=''
              this.LoginUser.pass=''
              //关闭弹框
              this.setShowLogin(false);
              //把返回的用户信息塞入到vues中，用于全局访问
              this.setUser({
                'userName':resp.data.user.name
              })
              //把数据存储到里面页面上
              localStorage.setItem('user',JSON.stringify({
                'userName':resp.data.user.name
              }))
              localStorage.setItem('token',resp.data.token)

              //返回登录成功提示
              this.notifySucceed(resp.data.msg)
            }else{
              this.notifyError(resp.data.msg)
            }
          }).catch((err) => {
            console.log(err)
            this.notifyError('页面错误')
          });
   
        }
      });