axios 封装及简单使用

axios 封装及简单使用

 

 

 

封装axios

1.1 创建src/http 文件夹

用来放网络请求相关的文件

 

1.2src/http/index.js

文件夹下, 创建 index.js 文件, 对axios进行封装

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;
src/http/index.js

 

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

目录下创建 apis.js文件, 用来写 接口地址列表

axios 封装及简单使用
/* eslint-disable */ 
import { get, post, put, del } from ./index


// 用户登录 
export const login = (params, headers) => post("/login/", params, headers)
src/http/apis.js

 

 

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设置

axios 封装及简单使用
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
settings.py

 

2.3.登录接口

2.3.1 urls.py中配置路由

axios 封装及简单使用
from django.contrib import admin
from django.urls import path,include
from books.views import *
urlpatterns = [
    path(admin/, admin.site.urls),
    path(login/, login),
]
主路由urls.py

 

2.3.2 user/views.py中写一个login视图函数

axios 封装及简单使用
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
books/views.py

 

2.3.3 测试接口

http://127.0.0.1:8000/login/

 

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

axios 封装及简单使用

 

 

 

 

 

3.创建一个Login.vue页面

3.1 写页面views/Login.vue

 

 在 views下创建 Login.vue 页面

axios 封装及简单使用
<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/views/Login.vue

 

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

 

axios 封装及简单使用
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
    },


]
})
src/router/index.js

 

3. 2.在Login.vue页面中使用axios发送请求

 

axios 封装及简单使用
import { get, post, put, del } from ./index


// 用户登录 
export const login = (params, headers) => post("/login/", params, headers)
src/http/apis.js

 

 

前端接口

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

 axios 封装及简单使用

 

axios 封装及简单使用

上一篇:联通大数据,让生活更美好


下一篇:正则表达式验证手机和邮箱格式