Django+Vue axios跨域登录

Vue+Django 登录测试

1.Dajngo后端搭建

1.1 创建项目和APP

'''1.创建项目和APP'''
django-admin startproject BookManage # 创建项目
python manage.py startapp books # 创建APP

'''2.在settings中注册books模型'''
INSTALLED_APPS = [
	'books.apps.BooksConfig'
]
# 注：pycharm无法联想，需要把apps文件夹设置为源根
'''3.urls.py中添加路由'''
urlpatterns = [
	path('books/', include('books.urls')),
]
'''4.books/urls.py中添加子路由'''
from django.urls import path
urlpatterns = [

]

1.2配置跨域

  1. 首先浏览器安全策略限制js ajax跨域访问服务器

  2. 如果服务器返回的头部信息中有当前域:

// 允许 http://localhost:8080 这个网站打开的页面中的js访问我
Access-Control-Allow-Origin: http://localhost:8080
// 允许携带cookie访问我
Access-Control-Allow-Credentials: true

那么, 浏览器可以让js 请求该服务器

1. 安装包
pip install django-cors-headers


2. 注册应用
INSTALLED_APPS = [
...
        # 添加 django-cors-headers 使其可以进行 cors 跨域
        'corsheaders'
]


3. 添加中间件
MIDDLEWARE = [
# 放在中间件第一个
		'corsheaders.middleware.CorsMiddleware',
...
]


4. 设置 CORS跨域请求白名单设置
CORS_ORIGIN_WHITELIST = (
'http://127.0.0.1:8080',
'http://localhost:8080',
)
CORS_ALLOW_CREDENTIALS = True # 允许携带cookie
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True

1.3登录接口

  1. urls.py 中配置路由
  • from django.contrib import admin
from django.urls import path, include
from books.views import login

urlpatterns = [
    path('login/', login),
]
  1. app/views.py 中写一个login视图函数
  • from django.http import JsonResponse
import json


def login(request):
    body_json = request.body.decode()
    body_dict = json.loads(body_json)
    name = body_dict.get('name')
    pwd = body_dict.get('pwd')
    if not all([name, pwd]):
        resp = {
            "code": 999,
            "msg": '信息不全'
        }
        return JsonResponse(resp)
    if name == 'zhangsan' and pwd == '1234':
        data = {
            "code": 0,
            "msg": '登录成功',
            "data": {
                "id": 1,
                "name": '张三',
                "age": 18
            }
        }
        resp = JsonResponse(data)
        return resp
    else:
        data = {
            "code": 999,
            "msg": '用户名密码不正确'
        }
        resp = JsonResponse(data)
        return resp

    3.测试接口

    http://127.0.0.1:8000/login/

    {
"name":"zhangsan",
"pwd":"1234"
}

在这里插入图片描述

2.创建一个Login.vue页面

  • 2.1 写页面 views/Login.vue

    <template>
  <div>
    测试axios-{{title}}{{formdata}}
    <p>
      <label>用户名：</label>
      <input v-model="formdata.name">
    </p>
    <p>
      <label>密码：</label>
      <input v-model="formdata.pwd">
    </p>
    <p>
      <button @click="requetLogin">登录</button>
    </p>
  </div>
</template>
<script>
    import {login} from '@/http/apis'; // @符号指的是src路径
    export default {
        // vue页面中双向绑定数据
        data() {
            return {
                title: '测试axios',
                formdata: {
                    name: 'zhangsan',
                    pwd: '1234'
                }
            }
        },
        // vue生命周期中挂在的函数
        mounted() {
        },
        methods: {
            requetLogin() {
                // 获取小节的内容
                let data = this.formdata
                login(data).then((resp) => {
                    // resp: django后端返回的数据
                    console.log(resp);
                }).catch((err) => {
                    console.log(err);
                });
            },
        }
    }
</script>
<style scoped>
</style>

2.2src/router/index.js 中配置vue路由

/* eslint-disable */
// 第一步：实例化axios对象，简单封装
const axios = require('axios'); // 生成一个axios实例
axios.defaults.baseURL = 'http://192.168.56.100:8888'; // 设置请求后端的URL地址
axios.defaults.timeout = 10000; // axios请求超时时间
axios.defaults.withCredentials = true;
axios.defaults.headers['Content-Type'] = 'application/json'; // axios发送数据时使用json格式
axios.defaults.transformRequest = data => JSON.stringify(data); // 发送数据前进行json格式化
// 第二：设置拦截器
/**
 * 请求拦截器(当前端发送请求给后端前进行拦截)
 * 例1：请求拦截器获取token设置到axios请求头中，所有请求接口都具有这个功能
 * 例2：到用户访问某一个页面，但是用户没有登录，前端页面自动跳转 /login/ 页面
 */
axios.interceptors.request.use(config => {
// 从localStorage中获取token
// let token = localStorage.getItem('token');
// 如果有token, 就把token设置到请求头中Authorization字段中
// token && (config.headers.Authorization = token);
  return config;
}, error => {
  return Promise.reject(error);
});
/**
 * 响应拦截器（当后端返回数据的时候进行拦截）
 * 例1：当后端返回状态码是401/403时，跳转到 /login/ 页面
 */
axios.interceptors.response.use(response => {
// 当响应码是 2xx 的情况, 进入这里
// debugger
  return response.data;
}, error => {
// 当响应码不是 2xx 的情况, 进入这里
// debugger
  return error
});

/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function get(url, params, headers) {
  return new Promise((resolve, reject) => {
    // debugger
    axios.get(url, {params, headers}).then(res => {
      resolve(res)
    }).catch(err => {
      reject(err)
    })
  })
}

// 第三：根据上面分装好的axios对象，封装 get、post、put、delete请求
/**
 * post方法，对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 **/
export function post(url, params, headers) {
  return new Promise((resolve, reject) => {
    axios.post(url, params, headers).then((res) => {
      resolve(res)
    }).catch((err) => {
// debugger
      reject(err)
    })
  })
}
export default axios;

2.3src\http\apis.js 中配置后端接口调用请求

// 用户登录
export const login = (params, headers) => post("/login/", params, headers)

2.4router/index.js 配置路由

import Vue from 'vue'
import Router from 'vue-router'
import Login from "../views/Login";

Vue.use(Router)

export default new Router({
  routes: [
    {path: '/login', name: 'Login', component: Login},
  ]
})

3.0用户登录 测试

http://localhost:8080/#/login

点击登录按钮，出发请求，成功登录，并返回django后端信息
在这里插入图片描述

posted @ 2020-12-21 11:47  小芒果测开笔记  阅读(587)  评论(0)  编辑  收藏  举报