登录到主页功能实现

已于 2022-06-24 20:54:57 修改
阅读量499 收藏
点赞数
文章标签： django python 后端
于 2022-06-24 17:01:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qishaoawei/article/details/125448638
版权

1创建新项目的准备工作

1.1命令框内创建新项目

打开指定文件夹，在路径位置输入cmd打开命令行
django-admin startproject 项目名 创建项目

1.2在新项目内创建子应用

python manage.py startapp 子应用名

1.3在settings.py文件内注册

在settings.py文件内注册子应用
跨域也顺便弄好
认证模型类也弄好
DRF工程
下载第三方模块
在黑窗口内进行安装
pip install djangorestframework

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
	'corsheaders',  #配置跨域
    'rest_framework',   #配置drf框架
    '创建的子应用名'    #注册子应用
]
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'corsheaders.middleware.CorsMiddleware'   # 添加跨域中间件
]
CORS_ORIGIN_WHITELIST=[
    'http://127.0.0.1:8080',
    'http://localhost:8080'
]
CORS_ALLOW_CREDENTIALS=True
CORS_ALLOW_METHODS=('*')
CORS_ALLOW_HEADERS=('*')
#用户认证模型类
AUTH_USER_MODEL='子应用名.模型类名'

1.5配置数据库

在settings.py文件内

# 配置数据库
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',  # 使用mysql数据库
        'HOST': 'localhost',  # 主机
        'PORT': 3306,  		# 端口
        'USER': 'root',  	# 数据库的用户名
        'PASSWORD': '密码', # 数据库的密码
        'NAME': '创建的数据库名',  	# 数据库的名字
    }
}

1.6修改语言和时区

在settings.py文件内

LANGUAGE_CODE = 'zh-Hans'  #语言

TIME_ZONE = 'Asia/Shanghai'  #时区

1.7安装数据库

在跟项目名同名的文件夹内init.py文件里安装

import pymysql
pymysql.install_as_MySQLdb()

1.8创建模型类

在子应用文件夹里的models.py创建

from django.db import models
# Create your models here.
#user
from django.contrib.auth.models import AbstractUser
from django.utils import timezone
class User(AbstractUser):
    mobile=models.CharField('手机号',max_length=11)
    last_login = models.DateTimeField('上次登录时间',default=timezone.now)
    def __str__(self):
        return self.username
    class Meta:
        db_table='user'

1.9创建好模型类后进行迁移

在项目内终端执行
生成迁移文件：python manage.py makemigrations
执行迁移:python manage.py migrate
如果迁移出错，把数据库删了创建新的数据库，生成的迁移文件也删了，重新执行上面2个步骤

认证模型类

在settings.py文件内注册

#用户认证模型类
AUTH_USER_MODEL='users.User'

登录后端接口 实现

登录接口
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” 注册成功，需申请管理员权限 后台superuser
必须是管理员才可以登录，即is_staff=True & is_active=True；这些可以使用superuser在后台修改！！！

登录的逻辑：

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

编写视图

from rest_framework.views import APIView
from rest_framework.response import Response
from users.models import User
import random,redis
#登录的视图LoginAPIView
from django.contrib.auth.hashers import check_password
from datetime import datetime
from rest_framework_jwt.utils import jwt_encode_handler,jwt_payload_handler
class LoginAPIView(APIView):
    def post(self,request):
        #1.获取前段数据
        username=request.data.get('username')
        password=request.data.get('password')
        mobile=request.data.get('mobile')
        smsCode=request.data.get('smsCode')
        #2.判断是不是新用户，
        user=User.objects.filter(username=username).first()
        redis_conn=redis.Redis(host='127.0.0.1',port=6379,password='shayebushi')
        if user:
            #该用户是第二次或第n次登录，优先使用密码认证，密码错误再考虑短信
            if check_password(password,user.password):
                #密码正确，判断密码是否是管理员
                if user.is_staff and user.is_active:
                    #允许成功登录
                    token=self.gen_token(user)
                    user.last_login=datetime.now()
                    user.save()
                    return Response({
                        'code':200,
                        'msg':'登陆成功，进入首页',
                        'data':{
                            'uid': user.id,
                            'username': user.username,
                            'token': token
                        }
                    })
                else:
                    return Response({
                        'code':206,
                        'msg':'没有管理员权限'
                    })

            else:
                #密码不正确，考虑有没有短信验证码，若有smsCode属于密码重置
                if smsCode:
                    #前端传入短信验证码，密码重置
                    validation=self.validate_sms_code(smsCode,mobile,redis_conn)
                    if validation:
                        #完成短信认证，开始重写密码
                        user.set_password(password)
                        user.save()
                        return Response({
                            'code':207,
                            'msg':'密码已重置'
                        })
                    else:
                        return Response({
                            'code':204,
                            'msg':'验证码已过期或错误'
                        })
                else:
                    return Response({
                        'code':205,
                        'msg':'用户名或密码错误'
                    })
        else:
            #用户第一次来注册，需要使用短信验证码来认证
            if smsCode:
                #使用验证码验证 并注册
                validation=self.validate_sms_code(smsCode,mobile,redis_conn)
                if validation:
                    #注册用户信息
                    User.objects.create_user(username=username,password=password,mobile=mobile)
                    return Response({
                        'code':201,
                        'msg':'注册成功需要申请管理员权限'
                    })
                else:
                    return Response({
                        'code':204,
                        'msg':'验证码过期或错误'
                    })
            else:
                return Response({
                    'code':208,
                    'msg':'第一次登录需使用收集验证码'
                })
    @staticmethod
    def gen_token(user):
        '''
        :param user:  用户对象
        :return:    jwt token 字符串
        '''
        #生成payload载荷信息
        payload=jwt_payload_handler(user)
        # 生成token
        token=jwt_encode_handler(payload)
        return token

    @staticmethod
    def validate_sms_code(smsCode,mobile,redis_sonn):
        '''
        :param smsCode:  短信验证码 字符串
        :param mobile:  手机号 字符串
        :param redis_sonn:  redis 链接对象
        :return:   Boolean
        '''
        #构造key
        key='sms_%s'%mobile
        #获取redis中的验证码
        stored_code=redis_sonn.get(key)
        #开始对比
        if stored_code and stored_code.decode()==smsCode:
            return True
        else:
            return False

配置路由

from django.urls import path
from users import views
urlpatterns = [
    #获取短信验证码
    path('sms_code/',views.SmsCodeAPIView.as_view()),
    # 用户的登录
    path('logincount/',views.LoginAPIView.as_view())
]

登录用户信息 前端页面实现

<script>
import cons from "@/components/constant";
export default {
  name: "Login",
  data() {
    return {
      errshow: false,
      errmsg: "",
      password: "",
      username: "",
      phone: "",
      smsCode: "",
    };
  },
  methods: {
    // 获取短信验证码
    getSmsCode() {
      if (!this.phone){
        this.$message({
          type:'warning',
          message:'手机号不能为空'
        })
        return
      }
      // 一般要加正则匹配
      // 发送短信获取验证码
      this.axios.get('/v1/users/sms_code/',{
        params:{
          mobile:this.phone
        }
      }).then((result) => {
        if (result.data.code==200){
          this.$message({
            type:'success',
            message:result.data.msg
          })
        }else{
          this.$message({
            type:'error',
            message:result.data.msg
          })
        }
      }).catch((err) => {
        console.log('获取短信验证码错误',err)
      });
    },
    // 登录
    fnLogin() {
      if (this.username == "" || this.password == "") {
        this.errmsg = "用户名或密码不能为空";
        this.errshow = true;
        return;
      }
      //http://www.meiduo.site:8000/meiduo_admin/authorizations/
      
      // 发送请求
      this.axios.post('/v1/users/logincount/',{
        username:this.username,
        password:this.password,
        mobile:this.phone,
        smsCode:this.smsCode
      }).then((result) => {
        console.log('登录的响应：',result)
        // 处理响应
        if (result.data.code==200){
          this.$message({
            type:"success",
            message:result.data.msg
          })
          // 保存 useranme uid token 
          localStorage.clear()
          localStorage.token=result.data.data.token
          localStorage.uid=result.data.data.uid
          localStorage.username=result.data.data.username
          // 进入项目的首页
          this.$router.push({path:'/home'})
        }else{
          this.errshow=true
          this.errmsg=result.data.msg
        }
      }).catch((err) => {
        console.log('登录错误：',err)
      });
    },
  },
};
</script>

axios注意事项

如果请求错误，就去main.js里查看axios是否配置
在这里插入图片描述

统计用户总数，日增，日活跃数

后端

需要导包 import time
利用查询，获取相关的数据

#统计用户总数的视图
class TotaCountAPIView(APIView):
    def get(self,request):
        #统计用户总数
        total_count=User.objects.all().count()
        return Response({
            'code':200,
            'total_count':total_count
        })
#日增用户的视图
class DayIncrementAPIView(APIView):
    def get(self,request):
        # 统计日增用户    #需要导包 import time
        current_data=time.strftime('%Y-%m-%d')       #查询同一天注册的用户
        day_increment=User.objects.filter(date_joined__contains=current_data).count()
        return Response({
            'code':200,
            'day_increment':day_increment
        })
#统计日活跃用户 视图
class DayLiveAPIView(APIView):
    def get(self,request):
    	# 统计日活跃用户		#需要导包 import time
        current_data = time.strftime('%Y-%m-%d')
        day_live = User.objects.filter(last_login__contains=current_data).count()
        return Response({
            'code': 200,
            'day_live': day_live
        })

配置路由

from django.urls import path
from users import views
urlpatterns = [
    #获取短信验证码
    path('sms_code/',views.SmsCodeAPIView.as_view()),
    # 用户的登录
    path('logincount/',views.LoginAPIView.as_view()),
    #统计用户总数
    path('total_count/',views.TotaCountAPIView.as_view()),
    #获取日增用户
    path('day_increment/',views.DayIncrementAPIView.as_view()),
    #获取日活用户
    path('day_live/',views.DayLiveAPIView.as_view()),
]

前端

注意，要找到对应的vue组件，
例如：CountPannel.vue
在组件内需要修改的地方进行修改

<script>
export default {
  name: 'CountPannel',
  data(){
    return {
      total_count:0,
      day_increment:0,
      day_active:0,
      day_orders:0
    }
  },
  mounted(){
    let token = localStorage.token;

    // 获取总人数
    this.axios.get('/v1/users/total_count/', {
        headers: {
          'Authorization': 'JWT ' + token
        },
        responseType: 'json',
    })
    .then(res=>{
        console.log('统计用户总数的响应',res);
        // {code:200,total_count:300}
        this.total_count = res.data.total_count;

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

    // 获取日增人数
    this.axios.get('/v1/users/day_increment/', {
        headers: {
          'Authorization': 'JWT ' + token
        },
        responseType: 'json',
    })
    .then(res=>{
      console.log('获取日增用户的响应',res)
        this.day_increment = res.data.day_increment;
    }).catch(err=>{
       console.log(err);
    });

    // 获取日活人数
    this.axios.get('/v1/users/day_live/', {
        headers: {
          'Authorization': 'JWT ' + token
        },
        responseType: 'json',
    })
    .then(res=>{
      console.log('获取日活的用户',res)
        this.day_active = res.data.day_live;
    }).catch(err=>{
       console.log(err);
    });
}
</script>
qishaoawei
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
点击了登录,如何进入主页
代码包工头的博客
04-20 1111
1.点了登录: (1):获取axios实例((基地址从环境变量中获取) (2):获取封装好的接口 (3):收集用户的参数,传给第二步中的接口, 页面上收集页面的数据名与接口一样 (4):经过请求拦截器,添加请求头 (5):代理转发 (6):后端服务器要启动,本地数据库也要启动;后端才能收到请求,返回数据 (7):经过相应拦截器的处理 (8):得到接口调用之后的结果 (9):保存token,token做持久化 2:页面跳转(路由跳转) (1):全局路由前置守卫.只要有路由变化,当token不为空时,且要访问
后台系统-登录成功进入指定页面的实现
weixin_58487208的博客
10-19 1389
在访问login这个页面时，可以在地址栏中补充一个查询字符串来指定登陆成功之后要去到的页面(hash)。例如 # 访问登录页，并且告诉它，登录成功之后要进入 /abc http://localhost:9528/#/login?return_url=/abc 在登录界面: async doLogin() { try { // 在组件中调用带命名空间的action // dispatch是异步的，需要加async await await
一张图 看懂 登录页面 到 主页 的过程 ==＞
weixin_58726419的博客
10-17 132
图解登录页面跳转至首页
qq_46538844的博客
08-16 113
【代码】图解登录页面跳转至首页。
Axure中登录页面与首页的交互（展示登陆的用户名等）
热门推荐
smile juan的专栏
03-12 1万+
该博客讲述登录页面与首页面的交互包括：回车跳转页面、正确账号密码才可登陆、首页面回显用户名3个功能 注：在页面中添加元件时，最好定义元件的名称，方便之后查找 1、回车跳转页面； （1）在用户名和密码的文本框元件中添加属性：提交按钮 （2）提交按钮选中登陆 2、正确账号密码才可登录 （1）登录按钮跳转页面时添加登录条件，点击上方“添加条件”按钮 (2).设置...
首页和登录页面配置
QWERTY55555的专栏
04-14 1385
一、新建static 目录，把css、js、images、media、img静态文件放入static目录下 静态文件： 链接：https://pan.baidu.com/s/1tpqF26h-WecV_bcyQNmsjQ 提取码：25y8 二、项目settings.py 文件中设置static 目录位置 STATIC_URL = '/static/' STATICFILES_DIR...
python使用Flask操作mysql实现登录功能
09-20
主要介绍了python使用Flask操作mysql实现登录功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue 实现登录界面验证码功能
10-15
本文通过实例代码给大家介绍了Vue 实现登录界面 验证码功能，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
SSM 实现登录验证码功能（附源码）
08-26
主要介绍了SSM 实现登录验证码功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
js实现简单登录功能的实例代码
10-26
js验证用户身份，登录成功之后等待一定秒数，跳转到操作页面。使用window函数。代码如下
jsp实现用户自动登录功能
10-15
主要为大家详细介绍了jsp实现用户自动登录功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用户登录+页面跳转+后台首页实现
爱驹一族的博客
06-11 8062
1. 完成用户登录操作 1.1 用户登录流程 用户登录完成之后 需要将密钥进行保存. Session,Cookie 将页面跳转到系统首页. 1.2 Session和Cookie介绍 1.2.1 Session 会话机制 服务器保存用户信息的一种手段. 可以将用户登录信息通过session的方式进行保存. 当会话关闭时,Session对象销毁. 1 1.2.2 Cookie 机制 Cookie，有时也用其复数形式 Cookies。类型为“小型文本文件”，是某些网站为了辨别用户身份，进行Session跟踪而储
6-1 首页和登录页面的配置
huanglianggu的专栏
06-08 719
把index.html拷贝到templates目录下面然后在根目录下面新建一个static目录，如图用于存放css,js,images等文件然后，把静态文件拷贝过来,放到static目录下面现在把静态文件都拷贝过来了，如下图然后配置url启动项目，访问：http://127.0.0.1:8000/按F12，network 是因为样式没有引进来。解决办法：第一步：在文件中，修改文件的引用重新启动，刷...
6.1 首页和登录页面的配置
qq_43298183的博客
12-30 356
1、把首页的页面（index）放到templates目录下，新建一个static文件，把css images img js （全是静态文件）文件全放进static文件下。 2、在URL下配置一个处理静态的URL，Django有一个templateview是专门处理静态文件的。 TemplateView:显示Django HTML template from django.views.gen...
django admin登陆后跳转至自己想要的页面
weixin_42047210的博客
10-06 1442
官网的文档靠谱一点，很简单，就在project的setting里加一句话就可以了 LOGIN_REDIRECT_URL = ‘/index’ 这个‘/index’是你需要跳转的页面，如果有的话才会跳转 我的是admin/ 默认的根路径 所以我写的是LOGIN_REDIRECT_URL = ‘/’ ...
Django框架使用流程（四）自定义管理页面及路由与视图
weixin_42439244的博客
02-13 829
一、页面管理 （1.运行服务器 2.站点简单管理）请看上回分解 3，自定义管理页面 Django提供了admin.ModelAdmin类 通过定义ModelAdmin的子类，来定义模型在Admin界面的显示方式 from django.contrib import admin from .models import Book,Hero # Register your models here. cl...
从零开始学Django --03 实现登录注册
weixin_43241490的博客
02-14 1452
从零开始学Django --03 实现登录注册 实现登录注册 以登录为例，要想实现登录： 让用户访问到登录界面、连接到数据库上 访问登录界面 登录界面通常会包含： html文件、css文件、js文件、image文件，这些东西通常称之为静态资源 静态资源放哪？ 创建静态资源的目录 点击项目名 ，右键 ， new ， directory 创建两个： 一个叫static（通用的名字，也可以自己起），另一个叫templates （用开发工具创建会默认带有） 那么这两个...
【Django2.0学习笔记】30.导航栏添加用户操作
qq_42851418的博客
10-20 851
30、导航栏添加用户操作 1、方便登录登出 导航栏右侧添加“登录、注册”或用户信息 查看Bootstrap里面“组件”——“导航条” 复制代码，打开templates/base.html，粘贴进去。if判断，显示未登录状态的页面导航栏显示和登录之后的页面导航栏显示 然后这里的“登录”和“注册”，参考blog_detail.html里面尚未登录部分的代码： 参考，继续修改base.html如下： 刷新页面，未登录时候，右上角导航栏显示有“登录”和“注册”的选项：： 点击右上角的“注册”，可以跳
怎么用html链接到首页,Web前端
weixin_39759182的博客
06-17 341
课程主题HTML5基础、CSS3基础、切图、综合项目：小U课堂、HTML5进阶、 CSS3进阶、综合项目：小U商城、综合项目：响应式布局实战项目PC端项目：小U课堂静态页面布局、移动端项目：小U商城移动端项目、响应式项目：小U商城后台管理系统培养方向1.熟练使用前端开发IDE:vscode编辑器；2.掌握HTML5基础和HTML5进阶中的常用标签；3.掌握CSS基本语法和文字字体属性；4.掌握盒模...
JAVA登录功能实现
最新发布
09-06
在Java中实现登录功能，通常有多种方式。在初学时，一般采用Servlet来处理登录请求。你可以创建一个登录页面，用户在该页面输入用户名和密码后，点击提交按钮，将表单数据发送到后台的Servlet。Servlet通过获取表单...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值