当前位置: 首页 > Web前端 > vue.js

前端开发问题记录

时间:2023-04-01 01:12:54 vue.js

1.关于jquery封装ajax下载文件空白1-1问题描述:后端返回数据流,前端使用blob和一个链接下载实现文件下载,下载的文件打开空白1-2问题原因:jquery处理了封装ajax时返回的数据,默认将流数据转成string类型的数据,这样前端收到数据下载时,会出现空白1-3。解决方法:自己封装ajax请求,防止修改数据类型(适用于PC端流式文件下载)varurl="/electronicPolicy/downLoadPolicy";varxhr=newXMLHttpRequest();vardata=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){//返回200varblob=this.response;varurl=window.URL.createObjectURL(blob);varfileName=policyNo+".pdf";varlink=document.createElement("a");link.style.display="无";link.href=网址;link.setAttribute(“下载”,文件名);document.body.appendChild(链接);链接.点击();document.body.removeChild(链接);}};//发送ajax请求xhr.send(data);blob下载文件https://www.cnblogs.com/golov...原生ajax请求https://www.jianshu.com/p/2be...2Jquery封装ajax并使用formData上传文件2-1问题描述是通过android方法调用的摄像头,H5接收android返回的图片的base64编码发送给后端,但是后端没有响应2-2问题原因-解决方法processDatacannotbeopenedwhenusingFormData作为数据体,$.post中默认是开启的,所以只能使用$.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数据=JSON.stringify({orderNo:policyNo,operateType:"ocrRecognise",recognizeType:"recognize_id_card",文件名:response.data.fileName,authUserName:"zyic",authUserPwd:"zyic"});$.ajax({type:"POST",url:"/zyvp/media/ocrRecognise",contentType:"application/json;charset=utf-8",data:数据,成功:function(response){if(response.status==1){$("#idNumber").val(response.data.id_number);}else{}},error:function(error){alert(error);}});}elseif(response.data.status===0){alert("上传失败!");}},error:function(error){}});#####2-3关于formData使用FormData对象传输文件,FormData对象的字段类型可以是Blob,File,stringifits字段类型不是Blob如果不是File,会转成string类型如果使用append添加时formdata键已经存在,则不能重复添加,这个append操作会被忽略,所以建议使用set而不是append使用参考文档http://www.bubuko.com/infodet...3使用计算属性定义数据。当数据类型为Object/Array时,数据发生变化,页面不会重新渲染。由于JavaScript的限制,Vue无法检测到以下更改的数组1.当您使用索引直接设置项目时,例如:vm.items[indexOfItem]=newValue2。当你修改数组的长度时,例如:vm.items.length=newLength为了解决第一类问题,可以通过以下两种方式实现,和vm.items[indexOfItem]=newValue效果一样,但也会触发状态更新://Vue.setVue.set(example1.items,indexOfItem,newValue)//Array.prototype.spliceexample1.items.splice(indexOfItem,1,newValue)你也可以使用vm.$set实例方法,它只是全局Vue.set的别名。仍然由于JavaScript的限制,Vue无法检测到对象属性的添加或删除有时您可能需要为现有对象分配新的属性,例如使用Object.assign()或_。延长()。在这种情况下,您应该为已经创建的对象创建一个具有两个对象属性的新对象this.userProfile=Object.assign({},this.userProfile,{age:27,favoriteColor:'VueGreen'})例如,Vue不能动态添加根级响应属性。其实它不能直接给数据添加属性,但是可以给数据中的对象添加属性。实际解题代码computed:{...mapGetters(['get_costInfoDtoList','get_costDoubtDtoList']),//数据整合costInfoDtoList:{get(){constvm=this//给每个类添加推导数据varcostInfoList=this.get_costInfoDtoList//医疗追踪费用列表varcostDoubtDtoList=this.get_costDoubtDtoList//医疗审计费用可疑信息console.log(costInfoList,costDoubtDtoList)costInfoList.forEach(element=>{element.costDto.deductionAmount=0costDoubtDtoList.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.deductionAmountelem.resultAmount=el.resultAmount}})}}})});//每个子类的总扣减等于父类扣减值costInfoList.forEach(element=>{if(element.costDetailDtoList.length!=0){vartotalDeductionAmount=0element.costDetailDtoList.forEach(el=>{if(el.deductionAmount){totalDeductionAmount+=el.deductionAmount}})调试器if(!(totalDeductionAmount==0&&element.costDto.deductionAmount!=0)){element.costDto.deductionAmount=totalDeductionAmount}}})return[...costInfoList]},set(val){console.log(val)}}},参考文档https://blog.csdn.net/weixin_...4.Vue-Router路由查询/params参数传递4-1查询方式参数传递与接收参数传递:this.$router.push({path:'/xxx'query:{id:id}})接收参数:this.$route.query.id4-2params方法传递和接收参数params传递参数:this.$router.push({name:'xxx'params:{id:id}})接收参数:this.$route.params.id4-3两者的异同是在传递参数时使用this.$router在接收参数时使用this。$routequery相当于get请求,地址栏可以看到请求参数params相当于post请求,parameters不会地址栏显示params,推送只能是name:'xxxx',不能是path:'/xxx',因为params只能用name引入路由。如果这里写成路径,接收参数的页面将是undefined!!!文章仅用于记录开发过程中遇到的问题,记录和总计,如有版权问题,请联系删除