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


Posted in Python onJuly 29, 2019

后端代码就不介绍了,可以参考 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

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

输入url,访问查看页面

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

启动服务端

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

浏览器打开检查功能

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

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

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

查看后台返回信息

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

遇到的问题:

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

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

2、注释掉ESlint

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
python使用urllib模块和pyquery实现阿里巴巴排名查询
Jan 16 Python
pandas string转dataframe的方法
Apr 11 Python
python对excel文档去重及求和的实例
Apr 18 Python
Python实现的多进程和多线程功能示例
May 29 Python
python版本五子棋的实现代码
Dec 11 Python
pandas的to_datetime时间转换使用及学习心得
Aug 11 Python
django drf框架自带的路由及最简化的视图
Sep 10 Python
python实现随机加减法生成器
Feb 24 Python
django模型动态修改参数,增加 filter 字段的方式
Mar 16 Python
Python多线程实现支付模拟请求过程解析
Apr 21 Python
keras实现VGG16方式(预测一张图片)
Jul 07 Python
Python中time与datetime模块使用方法详解
Mar 31 Python
python实现倒计时小工具
Jul 29 #Python
django rest framework 实现用户登录认证详解
Jul 29 #Python
pycharm重命名文件的方法步骤
Jul 29 #Python
PyQt5实现暗黑风格的计时器
Jul 29 #Python
Python Django 实现简单注册功能过程详解
Jul 29 #Python
Django models.py应用实现过程详解
Jul 29 #Python
pycharm中显示CSS提示的知识点总结
Jul 29 #Python
You might like
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
PHP中的替代语法介绍
2015/01/09 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
VUE 使用中踩过的坑
2018/02/08 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
JavaScript Blob对象原理及用法详解
2020/10/14 Javascript
JS实现简易日历效果
2021/01/25 Javascript
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
Numpy之文件存取的示例代码
2018/08/03 Python
python ---lambda匿名函数介绍
2019/03/13 Python
详解使用Python下载文件的几种方法
2019/10/13 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
FLOS美国官网:意大利高级照明工艺的传奇
2018/08/07 全球购物
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
企划主管岗位职责
2013/12/12 职场文书
后勤部长岗位职责
2013/12/14 职场文书
给水工程专业毕业生自荐信
2014/01/28 职场文书
水利学院求职自荐书
2014/02/01 职场文书
给全校老师的建议书
2014/03/13 职场文书
超市优秀员工事迹材料
2014/05/01 职场文书
大三学习计划书范文
2014/05/02 职场文书
教师批评与自我批评发言稿
2014/10/15 职场文书
整改报告格式
2014/11/06 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL