1.初始化VUE项目
vue init webpack deaxios
cd deaxios
cnpm install axios -S
2.封装axios
2.1 src 文件夹下新建http 文件夹,用来放网络请求相关的文件
2.2 src/http 文件夹下,创建 index.js 文件,对axios 进行封装
const { data } = require('autoprefixer');
const axios = require('axios');
const { error } = require('shelljs');
axios.defaults.baseURL = 'http://192.168.56.100:8888'
axios.defaults.timeout = 10000;
axios.defaults.withCredentials = true;
axios.defaults.headers['Content-Type'] = 'application/json';
axios.defaults.transformRequest = data => JSON.stringify(data);
axios.interceptors.request.use(config=>{
let token = localStorage.getItem('token');
token && (config.headers.Authorzation = token);
return config;
},error => {
return Promise.reject(error)
});
axios.interceptors.response.use(response =>{
return response.data;
},error =>{
return error
});
export function get(url,params,headers){
return new Promise((resolve,reject) =>{
axios.get(url,{params,headers}).then(res=>{
resolve(res.data.ResulObj)
}).catch(err =>{
reject(err.data)
})
})
}
export function post(url,params,headers){
return new Promise((resolve,reject) =>{
axios.post(url,params,headers).then(res=>{
resolve(res.data)
}).catch(err =>{
reject(err.data)
})
})
}
export default axios;
2.3 ser/http 目录下创建 apis.js文件,用来写接口地址列表
import {get,post} from './index'
export const login = (params,headers)=>post('/user/login/',params,headers)
3.创建一个Login.vue页面
3.1写页面 components/Login.vue
<template>
<div> 测试axios-{{title}} </div>
</template>
<script>
import { login } from '@/http/apis';
export default {
data() {
return {
title: '测试axios',
}
},
mounted() {
},
methods: {
}
}
</script>
<style scoped>
</style>
3.2 src/router/index.js 中配置vue路由
import Login from '@/components/Login'
export default new Router({
routes: [
{ path: '/login', name: 'Login', component: Login },
]
})
4在Login.vue页面中使用axios发送请求
4.1src\http\apis.js 中配置后端接口调用请求
/* eslint-disable */
// 接口信息, 生成请求方法
// 引入 get方法, post方法
import { get, post } from './index'
// 用户登录
export const login = (params, headers) => post("/user/login/",params
, headers)
4.2在 Login.vue 页面中导入模块并测试与django联通
<template>
<div>
测试axios-{{title}}
<button @click="requetLogin">登录</button>
</div>
</template>
<script>
import { login } from '@/http/apis';
export default {
data() {
return {
title: '测试axios',
}
},
mounted() {
},
methods: {
requetLogin() {
let data = { name: 'zhangsan', pwd: '123456' }
login(data).then((resp) => {
console.log(resp);
}).catch((err) => {
console.log(err);
});
},
}
}
</script>
<style scoped>
</style>
点击登录按钮,出发请求,成功登录,并返回django后端信息