axios 封裝及簡單使用

 

 

 

封裝axios

1.1 創建src/http 文件夾

用來放網絡請求相關的文件

 

1.2src/http/index.js

文件夾下, 創建 index.js 文件, 對axios進行封裝

/* eslint-disable */
// 第一步：實例化axios對象，簡單封裝 


const axios = require('axios');                       // 生成一個axios實例 
axios.defaults.baseURL = 'http://127.0.0.1:8000';     // 設置請求后端的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) => { 
        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 function put(url, params, headers) { 
    return new Promise((resolve, reject) => {
        axios.put(url, params, headers).then((res) => { 
             resolve(res) 
        }).catch((err) => { 
            // debugger 
            reject(err) 
})  }) }



export function del(url, params, headers) {
    return new Promise((resolve, reject) => {
        axios.delete(url, { data: params, headers }).then((res) => { 
            resolve(res)
        }).catch((err) => {
            // debugger
            reject(err) 
})  }) }


export default axios;

 

1.3 src/http/apis.js 接口地址

目錄下創建 apis.js文件, 用來寫 接口地址列表

/* eslint-disable */ 
import { get, post, put, del } from './index'


// 用戶登錄 
export const login = (params, headers) => post("/login/", params, headers)

 

 

2.創建一個測試項目

2.1 創建項目和APP

django-admin startproject BookManage   # 創建項目 
python manage.py startapp books        # 創建APP



'''2.在settings中注冊books模型''' 
# 注：pycharm無法聯想，需要把apps文件夾設置為源根
INSTALLED_APPS = [    
    'books.apps.BooksConfig' 
] 


''3.urls.py中添加路由'''

urlpatterns = [    
    path('books/', include('books.urls')), 
]


'''4.books/urls.py中添加子路由'''

from django.urls import path 

urlpatterns = [

]

 

 

2.2 cors設置

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

 

2.3.登錄接口

2.3.1 urls.py中配置路由

from django.contrib import admin
from django.urls import path,include
from books.views import *
urlpatterns = [
    path('admin/', admin.site.urls),
    path('login/', login),
]

 

2.3.2 user/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

 

2.3.3 測試接口

http://127.0.0.1:8000/login/

 

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

 

 

 

 

 

3.創建一個Login.vue頁面

3.1 寫頁面views/Login.vue

 

 在 views下創建 Login.vue 頁面

<template>    
    <div>      
        測試axios-{{title}}    
        <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';

export default {
    data(){
        return{
            title:"測試axios",
            formdata:{
                name:"zhangsan",
                pwd:"1234"
            }
        }
    },
    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>

 

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

 

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'


import Login from '@/views/Login'


Vue.use(Router)

export default new Router({
routes: [

{
      path:'/login',
      name:'Login',
      component:Login
    },


]
})

 

3. 2.在Login.vue頁面中使用axios發送請求

 

import { get, post, put, del } from './index'


// 用戶登錄 
export const login = (params, headers) => post("/login/", params, headers)

 

 

前端接口

http://localhost:8080/#/login/