1. 后端需要的参数是 对象里包含一个数组,但传值之后发现数据格式不正确

在这里插入图片描述
经查找之后发现是在发送请求时的 Content-Type 设置的数据格式 与后端的要求不一致的原因🐷😂,后端需要的时 json 格式
而我写的是

export const postRequest = (url, params) => {
    let accessToken = getStore("accessToken");
    let csrfTOKEN = Cookies.get('csrftoken');
    return axios({
        method: 'post',
        // url: `${base}${Prxfix}${url}`,
        url: `${base}${url}`,
        data: params,
        transformRequest: [function (data) {
            let ret = '';
            for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
            }
            ret = ret.substring(0, ret.length - 1);
            return ret;
        }],
        headers: {
        	😡
            'Content-Type': 'application/x-www-form-urlencoded', 
            'authorization': accessToken,
            'X-CSRFToken': csrfTOKEN
        }
    });
};

解决方法
😍❤
修改请求的 Content-Type
修改后

export const postRequestJson = (url, params) => {
    let accessToken = getStore("accessToken");
    let csrfTOKEN = Cookies.get('csrftoken');
    return axios({
        method: 'post',
        url: `${base}${url}`,
        data: params,
        headers: {
        	😘
            'Content-Type': 'application/json',
            'authorization': accessToken,
            'X-CSRFToken': csrfTOKEN
        }
    })
};

2.导出数据,以excel 表格的形式

1)后端返回的表格的地址
2)前端通过创建 a 标签下载

在这里插入图片描述


var a = document.createElement('a')
a.id = 'download'
a.style.display = 'none'
// res.result 为后端返回的 excel表的 地址
a.href = res.result
document.body.appendChild(a)
a.click()

3.批量导出文档,包括图片,excel表格,word 文档 等等

1)发送请求后,后端返回的是 二进制编码文件
2)前端创建一个a标签

在这里插入图片描述

在这里插入图片描述

/*
 * @param {*} path  批量导出的接口
 * @param {*} params  接口时需传递的参数
 * @param {*} file_name 批量导出时的文件名
 * @param {*} useAxios 是否使用 axios
 */
function batchDownload (path, params, file_name, useAxios = true) {
	if (useAxios) {
		return axios({
			method: 'get',
			url: path,
			params,
			responseType: 'blob'
		}).then((res) => {
			if (!res) {
				return 
			}
			let url = window.URL.createObjectURL(new Blob([res], {type: res.type}))
			let a = document.createElement('a')
			a.style.display = 'none'
			a.href = url
			a.target = '_blank'
			if (file_name) {
				a.setAttribute('download', file_name)
			}
			document.body.appendChild(a)
			a.click()
		})
	}
}

batchDownload(‘.../archive/pack_download’, {}, '文件名')

4.Vue 项目在 IE 浏览器打开报错,其他浏览器无问题

vue 项目在 ie 浏览器打开时,登录系统后,页面跳转报错,报错信息如下
events.js:292
throw er; // Unhandled ‘error’ event
^

Error: read ECONNRESET
at TCP.onStreamRead (internal/stream_base_commons.js:205:27)
Emitted ‘error’ event on Socket instance at:
at emitErrorNT (internal/streams/destroy.js:92:8)
at emitErrorAndCloseNT (internal/streams/destroy.js:60:3)
at processTicksAndRejections (internal/process/task_queues.js:84:21) {
errno: ‘ECONNRESET’,
code: ‘ECONNRESET’,
syscall: ‘read’
}
在这里插入图片描述

解决办法: npm config set proxy=http://10.69.4.40:808 把 http://10.69.4.40:808 改成自己的端口号

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐