首页

在这里插入图片描述

1. 登录用户信息显示

用户模型类

#用户表
class User(AbstractUser):
    """
    用户表
    """
    phone = models.CharField(max_length=11, unique=True, verbose_name='用户手机')
    last_login = models.DateTimeField()

    class Meta:
        db_table = 'user'

    def __str__(self):
        return self.username

1.1 登录后端接口实现

获取短信验证码接口：
api：/users/sms_code/
method: POST
data: {
mobile: mobile
}
响应：必须code响应码
?
?
登录接口
api: /users/logincount/
method: POST
data:
{
username: this.username,
password: this.password,
mobile: this.phone,
code: this.smscode
}
?
响应：
code == “204” 验证码过期或者错误
code == “205” 用户名或密码错误
code == “206” 没有管理员权限
code == “207” 密码已重置
code == “200” 登录成功
code == “201” 注册成功，需申请管理员权限
必须是管理员才可以登录，即is_staff=True & is_active=True；这些可以使用superuser在后台修改！！！

登录的逻辑：

用户第一次登录，使用手机验证码进行注册
存储用户名、密码、手机号，返回201
用户第二次及 n 次登录，优先使用密码验证；
用户名、密码均正确，检查用户是否有管理员权限（只有is_staff=True&is_active=True时，才允许登录），分别返回响应；
用户、密码验证未通过时，检查是否有短信验证码，有则验证短信验证码（验证通过则重置密码，返回207）；
无短信验证码，直接返回205

#登录的接口
class LoginCount(APIView):
    def post(self, request):
        "登录"
        mobile = request.data.get('mobile')
        sms_code = request.data.get("code")
        username = request.data.get('username')
        password = request.data.get('password')

        redis_cli = redis.Redis(host="localhost", port=6379, password="laufing", db=2)
        # 判断是否第一次登录
        user = User.objects.filter(username=username).first()
        if user:
            # 说明不是第一次登录
            # 因为前端必须输入username & password  首先以password验证
            if check_password(password, user.password):
                if user.is_active and user.is_staff:
                    # 认证通过，并且是管理员
                    token = self.gen_token(user)
                    user.last_login=datetime.now()
                    user.save()
                    return Response({
                        "msg": "登录成功",
                        "code": "200",
                        "user": user.username,
                        'token': token
                    })
                else:
                    return Response({
                        "code": "206",
                        "msg": "没有管理员权限"
                    })
            else:
                # 认证不通过， 检查用户是否忘记密码，忘记密码可以使用手机验证码登录，并重置密码
                if sms_code:
                    # 用户在使用短信验证码登录
                    judgement = self.judge_sms_code(redis_cli, mobile, sms_code)
                    if judgement:
                        # 验证码 验证成功, 重置用户的密码
                        User.objects.create_user(username=username, password=password,
                                                 mobile=mobile)
                        return Response({
                            "code": "207",
                            "msg": "密码已重置"
                        })
                    return Response({
                        "code": "204",
                        "msg": "验证码过期或错误"
                    })
                else:
                    return Response({"code": "205", "msg": "用户名或密码错误"})

        else:
            # 用户第一次登录， 必须使用短信验证码
            judgement = self.judge_sms_code(redis_cli, mobile, sms_code)

            if judgement:
                # 验证码  认证通过
                # 保存用户信息
                User.objects.create_user(username=username, password=password, mobile=mobile)

                return Response({
                    "code": "201",
                    "msg": "注册成功，需申请管理员权限"
                })
            return Response({
                "code": "204",
                "msg": "验证码过期或错误"
            })
    # 生成token
    @staticmethod
    def gen_token(user):

        #  登陆成功时 生成token
        payload = jwt_payload_handler(user)
        token = jwt_encode_handler(payload)

        return token

    # 验证短信验证码
    @staticmethod
    def judge_sms_code(redis_cli, mobile, sms_code):

        # 校验验证码是否在有效期内
        data = redis_cli.get("sms_%s" % mobile)

        if data:
            # 在有效期内
            redis_code = data.decode('utf-8')
            if redis_code == sms_code:
                return True

        return False

1.2 登录用户信息前端页面修改


<script>
import cons from "@/components/constant";
export default {
  name: "Login",
  data() {
    return {
      errshow: false,
      errmsg: "",
      password: "",
      username: "",
      phone: "",
      smsCode: "",
    };
  },
  methods: {
    // 获取短信验证码
    getSmsCode() {
      this.axios
        .post(cons.apis + "/users/sms_code/", { mobile: this.phone })
        .then((resp) => {
          if (resp.data.code == "200") {
            alter("验证码发送成功");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 登录
    fnLogin() {
      if (this.username == "" || this.password == "") {
        this.errmsg = "用户名或密码不能为空";
        this.errshow = true;
        return;
      }
      // 
      this.axios
        .post(cons.apis + "/users/logincount/", {
          username: this.username,
          password: this.password,
          mobile: this.phone,
          code: this.smsCode,
        })
        .then((response) => {
          // 验证码过期
          if (response.data.code == "204") {
            this.errmsg = response.data.msg;
            this.errshow = true;
          }
          // 验证码错误
          if (response.data.code == "401") {
            this.errmsg = response.data.msg;
            this.errshow = true;
          }
          if (response.data.code == "200") {
          	//清空
            localStorage.clear();
            console.log("response>>>", response.data);
            // 保存jwt token的数据
            localStorage.token = response.data.token;
            localStorage.username = response.data.user;
            // console.log("this>>>", this);
            // 跳转到首页
            console.log("跳转到Home页面");
            this.$router.push({ path: "/home" });
            // console.log(this.$route.path);
          }
        })
        .catch((error) => {
          this.errmsg = "用户名或密码错误";
          this.errshow = true;
        });
    },
  },
};
</script>

2. 用户总人数

前端在CountPanel.vue

2.1 用户总人数后端接口实现

class UsersCountView(APIView):
    def get(self, request):
        "获取用户总人数"
        num=User.objects.all().count()
        return Response({'count': num})

2.2 用户总人数前端页面实现

 // 获取总人数
  this.axios.get(cons.apis + '/users/count/', {
      headers: {
        'Authorization': 'JWT ' + token
      },
      responseType: 'json',
  })
  .then(dat=>{
      console.log(dat);
      this.total_count = dat.data.count;

  }).catch(err=>{
     console.log(err.response);
     if(err.response.status==401){
        this.$router.push({path:'/'});
     }
  });

3. 日增用户

3.1 日增用户后端接口实现

class DaliAddUserView(APIView):
    def get(self, request):
        "日增加用户数"
        # 获取当前的时间
        date = time.strftime("%y-%m-%d")  # 如"22-03-30"
        # 根据当前时间过滤用户，获取用户数量
        num = User.objects.filter(date_joined__contains=date).count()
        # 返回
        return Response({"count":num})

3.2 日增用户前端vue修改

// 获取日增人数
 this.axios.get(cons.apis + '/users/dalycount/', {
     headers: {
       'Authorization': 'JWT ' + token
     },
     responseType: 'json',
 })
 .then(dat=>{
     this.day_increment = dat.data.count;
 }).catch(err=>{
    console.log(err);
 });

4.日活跃用户

4.1 日活跃用户后端接口实现

class DalyLiveUserView(APIView):
    def get(self, request):
        "日活跃用户"
        date = time.strftime("%y-%m-%d")
        # 根据当前时间过滤用户，获取用户数量
        num = User.objects.filter(last_login__contains=date).count()
        # 返回
        return Response({"count": num})

4.2 日活跃用户前端实现

// 获取日活人数
  this.axios.get(cons.apis + '/users/livecount/', {
      headers: {
        'Authorization': 'JWT ' + token
      },
      responseType: 'json',
  })
  .then(dat=>{
      this.day_active = dat.data.count;
  }).catch(err=>{
     console.log(err);
  });