kawaguchigo-station.jpg
1.关于jquery封装 ajax 进行文件下载空白
1-1 问题描述 ：
后端返回数据流，前端使用blob与a链接的download实现文件下载，出现下载文件打开空白
1-2 问题原因 ：
jquery在封装ajax时，对返回数据进行了处理，默认将 流数据 转成了 string类型 数据，使得，前端在接收到数据，进行下载时，出现空白
1-3 解决方法 ：
自己封装ajax请求，防止数据类型被修改 (适用于PC端的流文件下载)
var url = "/electronicPolicy/downLoadPolicy";
var xhr = new XMLHttpRequest();
var data = JSON.stringify({
policySort: policySort,
policyNo: policyNo,
credentialNo: credentialNo,
identifyCode: identifyCode,
});
xhr.open("POST", url, true); // 也可以使用POST方式，根据接口
xhr.setRequestHeader("Content-Type", "application/json");
xhr.responseType = "blob"; // 返回类型blob
//定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
xhr.onload = function() {
// 请求完成
if (this.status === 200) {
// 返回200
var blob = this.response;
var url = window.URL.createObjectURL(blob);
var fileName = policyNo + ".pdf";
var link = document.createElement("a");
link.style.display = "none";
link.href = url;
link.setAttribute("download", fileName);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}; // 发送ajax请求
xhr.send(data);
- blob下载文件 https://www.cnblogs.com/goloving/p/7651636.html
- 原生ajax请求 https://www.jianshu.com/p/2be2e4f1fc8e
2 jquery封装ajax使用formData进行文件上传
2-1 问题描述
通过android方法调用相机，H5接收android返回的图片base64码传给后端，后端没有反应
2-2 问题原因-解决方法
processData 这玩意儿在使用 FormData 作为数据体时是不能开启的而 .ajax 这个方法
$.ajax({
url: "/zyvp/media/imageUpload",
type: "POST",
data: param,
contentType: false, // 关关关！必须得 false
// 这个不关会扔一个默认值application/x-www-form-urlencoded过去，后端拿不到数据的！
// 而且你甚至不能传个字符串'multipart/form-data'，后端一样拿不到数据！
processData: false,
success: function(response) {
if (response.status === 1) {
var data = JSON.stringify({
orderNo: policyNo,
operateType: "ocrRecognise",
recogniseType: "recognize_id_card",
fileName: response.data.fileName,
authUserName: "zyic",
authUserPwd: "zyic"
});
$.ajax({
type: "POST",
url: "/zyvp/media/ocrRecognise",
contentType: "application/json;charset=utf-8",
data: data,
success: function(response) {
if (response.status == 1) {
$("#idNumber").val(response.data.id_number);
} else {
}
},
error: function(error) {
alert(error);
}
});
} else if (response.data.status === 0) {
alert("上传失败!");
}
},
error: function(error) {}
});
2-3 关于formData
使用FormData对象来传输文件，FormData 对象的字段类型可以是 Blob, File, string 如果它的字段类型不是Blob也不是File，则会被转换成字符串类型。
使用append添加时formdata的key若已存在，则不能重复添加，会忽略本次append操作，所以建议set替代append来使用
参考文档 http://www.bubuko.com/infodetail-2927785.html
3 使用computed属性定义数据，当数据类型为 Object/Array时，数据改变，页面并未重新渲染
由于 JavaScript 的限制，Vue 不能检测以下变动的数组
1. 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如：vm.items.length = newLength
为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：
// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)
你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名。
还是由于 JavaScript 的限制， Vue 不能检测对象属性的添加或删除
有时你可能需要为已有对象赋予新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象
this.userProfile = Object.assign({}, this.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
对于已经创建的实例，Vue 不能动态添加根级别的响应式属性,
实际上是不能直接在data上增加属性，但可以在data里的对象上增加属性。
实际解决问题代码
computed: {
...mapGetters(['get_costInfoDtoList','get_costDoubtDtoList']),
//数据整合
costInfoDtoList: {
get(){
const vm = this
//将扣减数据分别加入到各个类
var costInfoList = this.get_costInfoDtoList // 医疗跟踪费用列表
var costDoubtDtoList = this.get_costDoubtDtoList // 医疗审核费用疑点信息
console.log(costInfoList,costDoubtDtoList)
costInfoList.forEach(element => {
element.costDto.deductionAmount = 0
costDoubtDtoList.forEach(el => {
if(element.costDto.costType == el.doubtCostType) {
vm.$set(element.costDto,element.costDto.deductionAmount,el.deductionAmount)
element.costDto = Object.assign({},element.costDto,{
'deductionAmount': el.deductionAmount,
'resultAmount': el.resultAmount
})
}else {
if(element.costDetailDtoList.length != 0) {
element.costDetailDtoList.forEach(elem => {
if(el.doubtCostType == elem.costItemType) {
elem.deductionAmount = el.deductionAmount
elem.resultAmount = el.resultAmount
}
})
}
}
})
});
// 各子类的扣减总和等于父类扣减值
costInfoList.forEach(element=>{
if(element.costDetailDtoList.length != 0){
var totalDeductionAmount = 0
element.costDetailDtoList.forEach(el => {
if(el.deductionAmount){
totalDeductionAmount += el.deductionAmount
}
})
debugger
if(!(totalDeductionAmount == 0 && element.costDto.deductionAmount != 0)) {
element.costDto.deductionAmount = totalDeductionAmount
}
}
})
return [...costInfoList]
},
set(val){
console.log(val)
}
}
},
参考文档 https://blog.csdn.net/weixin_40260594/article/details/79079628
4. Vue-Router路由 query/params传参
4-1 query 方式传参和接收参数
传参:
this.$router.push({
path:'/xxx'
query:{
id:id
}
})
接收参数:
this.$route.query.id
4-2 params 方式传参和接收参数
params 传参:
this.$router.push({
name:'xxx'
params:{
id:id
}
})
接收参数:
this.$route.params.id
4-3 两者异同
- 在传递参数是 使用的都是 this.route
- query相当于 get 请求，可以在地址栏看到请求参数
params相当于 post 请求，参数不会再地址栏中显示 - params传参，push里面只能是 name:'xxxx' ,不能是path:'/xxx',
因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！