python django前后台分离项目 请求工具axios(复制 粘贴即可使用)

python django前后台分离项目中固定写法:

利用axios对接口数据进行请求并渲染

-------------------request.js--------------------
import axios from "axios";
//利用sxios对象方法create 创建一个axsion实例
//引入进度条
import nprogress from 'nprogress';
import "nprogress/nprogress.css";
const  requests=axios.create({
     headers: {
    'Content-Type': 'application/json'
  },
    baseURL:"/api",
    withCredentials: false,
    timeout:5000,
});
//请求拦截器
requests.interceptors.request.use((config)=>{
    nprogress.start();
    config.headers['Authorization'] = `token` // 让每个请求携带自定义 token 请根据实际情况自行修改
    return config;
});
//响应拦截器
requests.interceptors.response.use((res)=> {
    nprogress.done();
    console.log('相应拦截器正常处理')
    return res.data;
},(error => {
    return Promise.reject(new Error('faile'))
}));

//对外暴露
export  default  requests;

--------------------------------统一管理API(index.js)-----------------------------

//当前这个模块 API统一管路   导入的request.js 即为利用axios对接口数据进行请求 的文件
import requests  from "./request.js";   
//对请求接口进行封装
export  const  userinfor_by_get = ()=>requests({url:'/approuter/user/',method:'get'});
export  const  car_load_infor=()=>requests({url:'/approuter/login_user_byauto/',method:'get'})

----------------------------统一管理路由 需要改变的仅为导入路由组件和 routes中的对应的属性和名称

import  Vue from "vue";
import VueRouter from "vue-router";
//使用vue
Vue.use(VueRouter);
// 引入路由组件
import home from "@/pages/hoem"
import register from "@/pages/register"
import login from "@/pages/login"
import data_time_container from "@/components/Header/data_time_container";
// 配置路由
export default  new VueRouter({
    routes:[
        {
            path:"/home",
            component:home,
            meta:{show:true},
            // name:"home",
            // props:true, 注意传参的方式和种类
        },
         {
            path:"/register",
            component:register,
            // meta:{show:true},
            // name:"register",
            // props:true, 注意传参的方式和种类
        },
         {
            path:"/login",
            component:login,
            // meta:{show:true},
            // name:"login",
            // props:true, 注意传参的方式和种类
        },
        // {
        //     path: "*",
        //     redirect:"/home"
        // }
        //注册了组件路由中的视图
        {
            path: '/data_time_container',
            component: data_time_container,
        }
    ]
})

----------------------------------仓库管理

import  Vue from 'vue';
import  Vuex from 'vuex';
Vue.use(Vuex);
//state:仓库存储数据的地方
const state={
    count:1
};
//mutations:修改state的唯一手段
const  mutation={
    ADD(state){
        state.count++;
    }
};
//action:处理action，处理业务逻辑 和异步
const action={
    add({commit}){
        commit("ADD");
    }
};
//getter:简化仓库数据 获取仓库数据更方便
const  getter={};

//对外暴露store类的一个实例

export  default  new Vuex.Store({
    state,
    mutation,
    action,
    getter

});