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进行mp3格式判断
Dec 23 Python
在Python程序员面试中被问的最多的10道题
Dec 05 Python
对Python中数组的几种使用方法总结
Jun 28 Python
Python命名空间的本质和加载顺序
Dec 17 Python
Python实现点阵字体读取与转换的方法
Jan 29 Python
python twilio模块实现发送手机短信功能
Aug 02 Python
python创建与遍历List二维列表的方法
Aug 16 Python
django写用户登录判定并跳转制定页面的实例
Aug 21 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
May 03 Python
pandas.DataFrame.drop_duplicates 用法介绍
Jul 06 Python
利用Python的folium包绘制城市道路图的实现示例
Aug 24 Python
Python PIL按比例裁剪图片
May 11 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 使用post,get的一种简洁方式
2010/04/25 PHP
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
zf框架db类的分页示例分享
2014/03/14 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
JavaScript 参考教程
2006/12/29 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
2014/05/12 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
Bootstrap Table使用整理(二)
2017/06/09 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
[50:11]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第三场
2018/04/09 DOTA
python33 urllib2使用方法细节讲解
2013/12/03 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
毕业自我鉴定范文
2013/11/06 职场文书
市场营销专业毕业生求职信
2014/03/26 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
2014年社会实践活动总结范文
2014/04/29 职场文书
纪念一二九运动演讲稿
2014/09/16 职场文书
解析Java异步之call future
2021/06/14 Java/Android