Django+Vue全栈开发

霆曜2024-10-25 8:22

使用脚手架工具搭建项目

1.在文件夹按住shift键右键单击

生成文件信息如下

启动方式：在终端输入npm run dev

调整生产项目结构

公共的样式 src/assets/common.less

公共js(工具函数、接口地址、配置文件接口地址配置src/utils/apis.js

常量配置src/utils/constants.js

工具函数src/utils/filters.js

网络请求库axios

Axios 是一个基于 Promise 的HTTP客户端，用于浏览器和 node.js 环境。它是一个流行的库，用于发送异步HTTP请求，它提供了一个易于使用的API，并且可以处理请求和响应的转换、请求的自动转换等。

安装： npm install axios -S

查看axios信息

配置拦截

html 复制代码

import axios from "axios";

//创建axios对象，并暴露该对象可以被外部访问
//创建对象时对其进行头信息设置及携带上一次携带的cookie
export const ajax = axios.create({
    headers:{
        source:'h5',
        'Content-Type':'application/x-www-from-urlencoded'
    },
    withCredentials:true
})

//请求拦截器
//参数1，拦截成功；参数2，拦截异常
//两个参数都传递箭头函数用于数据处理过程
//处理完毕需要放行
ajax.interceptors.request.use((req)=>{
    console.log('请求拦截到了')
    return req
},(err)=>{
    return Promise.reject(err)
})
//响应拦截器
ajax.interceptors.response.use((reqs)=>{
    
    return reqs
},(err)=>{
    if(err.response.status==401){
        window.alert('未登录，即将跳转到登录页面')
    }
    return Promise.reject(err)
})