django rest framework vue 实现用户登录详解

最新推荐文章于 2024-05-09 20:30:33 发布
最新推荐文章于 2024-05-09 20:30:33 发布
阅读量1.1k 收藏 4
点赞数 1
分类专栏： python 文章标签： python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/marraybug/article/details/117754529
版权

后端代码就不介绍了，可以参考 django rest framework 实现用户登录认证

这里介绍一下前端代码，和前后端的联调过程

在components下新建login.vue 文件

​
    <template>
     <div class="login">
      <el-form label-width="80px">
      <el-form-item label="用户名">
       <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
       <el-input v-model="form.password" type="password"></el-input>
      </el-form-item>
      <el-form-item>
       <el-button type="primary" @click="onLogin">登录</el-button>
       <el-button>取消</el-button>
      </el-form-item>
      </el-form>
     </div>
    </template>
    
    <script>
    import axios from 'axios';
    export default {
     name: "login",
     data() {
     return {
      form: {
      username: null,
      password: null
      }
     }
     },
     methods: {
     onLogin() {
      axios.post('http://127.0.0.1:8000/api/v1/auth/',this.form,{withCredentials:true}).then((res)=> {
      console.log(res);
      this.$router.go({path:'/'});
      });
     }
     }
    }
    </script>
    
    <style scoped>
    .login {
     width: 50%;
     margin: 0 auto;
    }
    </style>

修改rounter下index.js

​
    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import test from '@/components/test'
    import runoob from '@/components/runoob'
    import vhtml from '@/components/vhtml'
    import Login from '@/components/login'
    Vue.use(Router)
    
    var router = new Router({
     routes: [
     {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
     },
     {
      path: '/test',
      name: 'test',
      component: test
     }
     ,
     {
      path: '/login',
      name: 'login',
      component: Login
     }
     ,
     {
      path: '/runoob',
      name: 'runoob',
      component: runoob
     },
     {
      path: '/vhtml',
      name: 'vhtml',
      component: vhtml
     },
     ]
    })
    router.beforeEach((to,from,next)=> {
     if(to.path==='/login') {
     window.hideLogin = false;
     }
     // if(!window.token&&to.path!=='/login') {
     // router.go('/login');
     // }else {
     // next();
     // }
     next();
    })
    export default router;

修改项目 man.js

​
    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import ElementUI from 'element-ui'
    import axios from 'axios'
    Vue.prototype.axios = axios
    
    Vue.config.productionTip = false
    
    Vue.use(ElementUI); // 引入elementui
    
    /* eslint-disable no-new */
    new Vue({
     el: '#app',
     router,
     components: { App },
     template: '<App/>'
    })

启动项目 npm run dev

 

输入url,访问查看页面

 

启动服务端

 

浏览器打开检查功能

数据用户名和密码，点击登录 如下图。

 

因为还没做登录跳转页。所以 先通过这种方式，检验是否登录成功。

查看后台返回信息

 

遇到的问题：

1、跨域问题

因为vue 和django项目是两个前后端独立的项目，分别启动后，存在端口不一致的跨域问题。

如这里vue端口是8080，django 是8000,会一直存在找不到服务的问题。

解决方法：修改jango settings.py 文件

首先安装 corsheaders

​
    # 安装
    pip install django-cors-headers
​
    # 添加 corsheaders 应用
    # Application definition
    INSTALLED_APPS = [
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
     'rest_framework',
     'api',
     'corsheaders', # 解决跨域问题 修改1
    ]
​
    # 中间层设置
    # 添加如下
    MIDDLEWARE = [ 
     ...
     'corsheaders.middleware.CorsMiddleware',
     'django.middleware.common.CommonMiddleware',
     ...
    ]
​
    # CORS 设置跨域域名 配置白名单
    CORS_ORIGIN_WHITELIST = [
     "https://example.com",
     "https://sub.example.com",
     "http://localhost:8080",
     "http://localhost:8000",
     "http://127.0.0.1:8000"
    ]
​
    #直接允许所有主机跨域
    
    CORS_ORIGIN_ALLOW_ALL = True 默认为False
    CORS_ALLOW_CREDENTIALS = True # 允许携带cookie
    # 下面这两个设置 经测试无用 
    #
    # # 解决跨域问题 修改5
    # CORS_ALLOW_METHODS = (
    #  'DELETE',
    #  'GET',
    #  'OPTIONS',
    #  'PATCH',
    #  'POST',
    #  'PUT',
    #  'VIEW',
    # )
    # # 解决跨域问题 修改6
    # CORS_ALLOW_HEADERS = (
    #  'XMLHttpRequest',
    #  'X_FILENAME',
    #  'accept-encoding',
    #  'authorization',
    #  'content-type',
    #  'dnt',
    #  'origin',
    #  'user-agent',
    #  'x-csrftoken',
    #  'x-requested-with',
    #  'Pragma',
    # )

settings.py文件

    """
    Django settings for logintest project.
    Generated by 'django-admin startproject' using Django 2.1.2.
    For more information on this file, see
    https://docs.djangoproject.com/en/2.1/topics/settings/
    For the full list of settings and their values, see
    https://docs.djangoproject.com/en/2.1/ref/settings/
    """
    import os
    # Build paths inside the project like this: os.path.join(BASE_DIR, ...)
    BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
    # Quick-start development settings - unsuitable for production
    # See https://docs.djangoproject.com/en/2.1/howto/deployment/checklist/
    # SECURITY WARNING: keep the secret key used in production secret!
    SECRET_KEY = 'zj9a#c4al&@_up8^g46ke44a1l%p^_wa1_5xgx60ertwu9$y(%'
    # SECURITY WARNING: don't run with debug turned on in production!
    # DEBUG = True
    DEBUG = False
    ALLOWED_HOSTS = ['localhost', '127.0.0.1']
    # Application definition
    INSTALLED_APPS = [
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
     'rest_framework',
     'api',
     'corsheaders', # 解决跨域问题 修改1
    ]
    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', # 解决跨域问题 修改2
     'django.middleware.common.CommonMiddleware', # 注意顺序 解决跨域问题 修改3
    ]
    ROOT_URLCONF = 'logintest.urls'
    #
    # #跨域增加忽略 修改4
    CORS_ALLOW_CREDENTIALS = True
    CORS_ORIGIN_ALLOW_ALL = True
    # # CORS_ORIGIN_WHITELIST = (
    # #  '*'
    # # )
    CORS_ORIGIN_WHITELIST = [
     "https://example.com",
     "https://sub.example.com",
     "http://localhost:8080",
     "http://localhost:8000",
     "http://127.0.0.1:8000"
    ]
    #
    #
    # # 解决跨域问题 修改5
    # CORS_ALLOW_METHODS = (
    #  'DELETE',
    #  'GET',
    #  'OPTIONS',
    #  'PATCH',
    #  'POST',
    #  'PUT',
    #  'VIEW',
    # )
    # # 解决跨域问题 修改6
    # CORS_ALLOW_HEADERS = (
    #  'XMLHttpRequest',
    #  'X_FILENAME',
    #  'accept-encoding',
    #  'authorization',
    #  'content-type',
    #  'dnt',
    #  'origin',
    #  'user-agent',
    #  'x-csrftoken',
    #  'x-requested-with',
    #  'Pragma',
    # )
    TEMPLATES = [
     {
      'BACKEND': 'django.template.backends.django.DjangoTemplates',
      # 'DIRS': [],
      'DIRS': ['vuefront/dist'], # 修改1
      'APP_DIRS': True,
      'OPTIONS': {
       'context_processors': [
        'django.template.context_processors.debug',
        'django.template.context_processors.request',
        'django.contrib.auth.context_processors.auth',
        'django.contrib.messages.context_processors.messages',
       ],
      },
     },
    ]
    # 新增2
    # Add for vue.js
    STATICFILES_DIRS = [
     os.path.join(BASE_DIR, "vuefront/dist/static"),
    ]
    WSGI_APPLICATION = 'logintest.wsgi.application'
    # Database
    # https://docs.djangoproject.com/en/2.1/ref/settings/#databases
    
    # DATABASES = {
    #  'default': {
    #   'ENGINE': 'django.db.backends.sqlite3',
    #   'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    #  }
    # }
    # MySQL adil 密码：helloyyj
    DATABASES = {
     'default':{
      'ENGINE':'django.db.backends.mysql',
      'HOST':'127.0.0.1',
      'PORT':'3306',
      'NAME':'pyweb', # 数据库名
      'USER':'adil',
      'PASSWORD':'helloyyj',
      'OPTIONS':{
       'sql_mode': 'traditional'
      },
     }
    }
    # Password validation
    # https://docs.djangoproject.com/en/2.1/ref/settings/#auth-password-validators
    
    AUTH_PASSWORD_VALIDATORS = [
     {
      'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
     },
     {
      'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
     },
     {
      'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
     },
     {
      'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
     },
    ]
    # Internationalization
    # https://docs.djangoproject.com/en/2.1/topics/i18n/
    # LANGUAGE_CODE = 'en-us'
    #
    # TIME_ZONE = 'UTC'
    LANGUAGE_CODE = 'zh-Hans'
    TIME_ZONE = 'Asia/Shanghai'
    USE_I18N = True
    USE_L10N = True
    USE_TZ = True
    # Static files (CSS, JavaScript, Images)
    # https://docs.djangoproject.com/en/2.1/howto/static-files/
    STATIC_URL = '/static/'

更多设置可以参考 https://github.com/ottoyiu/django-cors-headers/

2、ESlint代码检测，启动vue时系统报错错误警告

解决方式

1、如果对自己信不过。最好的办法就是创建项目的时候不要ESlint 直接N

 

2、注释掉ESlint

在自己的项目目录下build.js――webpack.base.conf.js文件里面有段代码注释掉就行

 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

 

marraybug
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
登录和注册用户drf - Django Rest Framework框架，万能模版
weixin_51098806的博客
03-23 3176
注册接口的实现 首先你需要定义好自己的注册序列化器 apps/user/serializer.py class UserSignupSerializer(serializers.ModelSerializer): password = serializers.CharField(write_only=True) confirm_password = serializers.CharField(write_only=True) code = serializers.CharField
django rest framework 实现用户登录认证详解
09-18
主要介绍了django rest framework 实现用户登录认证详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Django-vue-admin(DVA)部署宝塔2024最新教程及避坑指南
最新发布
邓光正的博客
05-09 729
DVA支持很多种部署方式，教程这里采用的是较为常规后端文件直接压缩打包，前端文件导出build打包形式。无论是DVA还是最新的DVA3都是适用的。后端文件可以直接将本地已经修改好的程序直接打包。下面是前端文件打包指令。
Python+Django+Vue3全栈开发商城项目
07-12
一个Django+Vue3前后端分离的全栈商城系统项目，旨在帮助广大初学者将所学知识快速融合，实现快速开发，专为大学生或者找工作为目的者而设，将零散的知识点融合到项目中，并且收获真实项目的设计思维和开发经验。 本项目前端使用课程《Vue3.0正式版核心技术》开发的商城前端项目，后端使用Python的快速开发框架Django框架。 希望本课程能给广大学者带来技能和项目上的提升。 项目截图：
[Django开源学习 1]django-vue-admin
JacinLee的博客
09-03 8822
Django开源项目1：django-vue-admin快速开发全栈管理系统。欢迎大家学习交流讨论！
django-vue-admin demo_project
abc
06-28 1598
在项目根目录中，复制 ./conf/env.example.py 文件为一份新的到 ./conf 文件夹下，并重命名为 env.py。Windows 运行celery 需要安装 pip install eventlet。后端接口文档地址：http://127.0.0.1:8000/docs/浏览器访问 http://localhost:8080。初始账号：admin 密码：123456。mysql数据库字符集：utf8mb4。在 env.py 中配置数据库信息。mysql数据库版本建议：8.0。
django vue admin服务器部署
wxlly06的博客
12-21 1113
服务器配置
Python在线考试系统前后端源码(Django+Django -Rest-Framework)（vue）
01-19
本项目基于Python语言，利用Django框架作为后端开发工具，结合Django-Rest-Framework进行API接口设计，前端采用Vue.js框架进行页面构建，为大学生毕业设计提供了一套完整的解决方案。 一、Django框架介绍 Django是...
drf-SimpleJWT-Vue:模板 Django + DRF + SimpleJWT + Vue.js 项目
08-04
示例存储库React： Vue： 安卓： iOS： 介绍此模板存储库专用于生成已设置 SimpleJWT 的 Django + DRF 服务器。 这样做的目的是轻松创建展示 SimpleJWT 的清晰用法的存储库。 如果您不使用像 React 这样的前端框架或...
基于vue-cli+Django+sqlite3的学生管理系统
12-02
**基于Vue CLI+Django+SQLite3的学生管理系统详解** 在当今的Web开发领域，前端与后端的结合愈发紧密，而Vue CLI与Django作为各自领域的优秀框架，常常被用于构建复杂的Web应用。本项目“基于Vue CLI+Django+SQLite...
三、django-vue-admin开源项目二次开发——后端快速实现curd及接口
喵酱
06-08 3706
三、django-vue-admin开源项目二次开发——后端快速实现curd及接口
vue+djiango实现登录功能
kairui_guxiaobai的博客
12-02 981
测试平台--登录篇
DRF ~ day11 之 基于角色的访问控制、django的权限演示、权限控制、simple-ui的使用、django-vue-admin演示
weixin_55672697的博客
05-31 1228
DRF ~ day11 之 基于角色的访问控制、django的权限演示、权限控制、simple-ui的使用、django-vue-admin演示
django-vue-admin脚手架快速开发CRUD教程
学亮编程手记
11-19 4642
本页面示例中的 project 均为demo名，可替代成自己的项目名 #需求 创建一个项目管理app； 字段包含：项目名称、项目编码、项目负责人； 功能：包含项目管理的增删改查、导出。 #后端 #1. 创建App 通过命令创建App python3 manage.py createapp project #2. 创建 models 模型 在dvadmin-backend/apps/project/models/ 目录下，创建 project.py 文件(models目录下可创建多个模型文件，
django_rest_framework实现cookie登录接口
分享自己浅浅的知识
11-22 1196
一、前言 1、注册和登录是我们在web中常见页面，当然，测试平台也是需要的，否则谁都可以进来看一看了 2、我们也会天天遇到这种情况，只要你注册或者登录一次，下次再访问首页时，就不会进入登录页面，而是直接进放首页，这个就用到了cookie中传说中的token登录方式 那这些是怎么实现的呢，我们下面就来说一说吧 二、rest_framework rest_framework是个很强大的插件，他其中一个功能就是帮助django自带的用户系统 自动生成token，这样就可以实现基于cookie的用户会话。
Django和Vue实现登录
future_jie的博客
04-14 2568
Django后端连接数据库实现登录 import jwt import json import datetime from django.views import View from django.http import JsonResponse class denglu(View): def post(self,request): z=json.loads(request.body) s=warehouse.objects.filter(users=z['in.
vue2-django 实现登录注册
m0_72582234的博客
01-28 4192
使用单页面vue2与django框架实现登录与注册功能
django-vue-admin:基于RBAC模型权限控制的前后端分离基础开发平台
baidu_35888196的博客
11-05 2892
django-vue-admin 项目地址:https://github.com/caoqianming/django-vue-admin 简介 基于RBAC模型的权限控制的基础开发平台,前后端分离,后端采用django+django-rest-framework,前端采用vue+ElementUI. JWT认证,具有审计功能 内置模块有组织机构\用户\角色\岗位\数据字典\文件库 支持功能权限(控权到每个接口)和简单的数据权限（全部、本级及以下、同级及以下、本人等） 部分截图 启动..
django rest framework如何实现的用户访问频率控制
03-24
Django Rest Framework可以使用第三方库django-ratelimit来实现用户访问频率控制。这个库可以根据IP地址和用户ID来限制访问频次。只需要在Django Rest Framework的views.py文件中导入ratelimit库，通过使用@ratelimit(key='user', rate='10/m', block=False)装饰器来限制访问频次即可。其中key参数可以设置为user或者ip，rate参数用来指定限制访问次数（例如10次/分钟），block参数用来控制是否阻止访问（True或False）。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值