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 面向对象 成员的访问约束
Dec 23 Python
Python生成随机验证码的两种方法
Dec 22 Python
详解Python函数作用域的LEGB顺序
May 14 Python
python使用fcntl模块实现程序加锁功能示例
Jun 23 Python
python3.x 将byte转成字符串的方法
Jul 17 Python
python 多线程中子线程和主线程相互通信方法
Nov 09 Python
python使用opencv在Windows下调用摄像头实现解析
Nov 26 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
Jan 12 Python
Python文字截图识别OCR工具实例解析
Mar 05 Python
实现ECharts双Y轴左右刻度线一致的例子
May 16 Python
使用Keras实现Tensor的相乘和相加代码
Jun 18 Python
使用python把xmind转换成excel测试用例的实现代码
Oct 12 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 和 MySQL 基础教程(二)
2006/10/09 PHP
PHP输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
vue实现数据控制视图的原理解析
2020/01/07 Javascript
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
Python使用sorted排序的方法小结
2017/07/28 Python
python如何使用unittest测试接口
2018/04/04 Python
通过Pandas读取大文件的实例
2018/06/07 Python
spark dataframe 将一列展开,把该列所有值都变成新列的方法
2019/01/29 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
python访问hdfs的操作
2020/06/06 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
Pycharm plot独立窗口显示的操作
2020/12/11 Python
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
应付会计岗位职责
2013/12/12 职场文书
学校运动会报道稿
2014/09/23 职场文书
离职报告范文
2014/11/04 职场文书
安全检查汇报材料
2014/12/26 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
交通安全温馨提示语
2015/07/14 职场文书
《分数乘法》教学反思
2016/02/24 职场文书