前端开发遇到的问题

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 如果它的<font color='red'>字段类型不是Blob也不是File，则会被转换成字符串类型</font>。

• 使用append添加时formdata的key若已存在，则不能重复添加，会忽略本次append操作，所以建议set替代append来使用

参考文档 http://www.bubuko.com/infodetail-2927785.html

---

3 使用computed属性定义数据，当数据类型为 Object/Array时，数据改变，页面并未重新渲染

---

由于 JavaScript 的限制，<font color='red'>Vue 不能检测以下变动的数组</font>

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 的限制， <font color='red'>Vue 不能检测对象属性的添加或删除</font>

有时你可能需要为已有对象赋予新属性，比如使用 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 两者异同

1. 在传递参数是 使用的都是 <font color='red'>this.route</font>
2. query相当于 get 请求，<font color='red'>可以在地址栏看到请求参数 </font>
   params相当于 post 请求，<font color='red'>参数不会再地址栏中显示</font>
3. params传参，push里面只能是 name:'xxxx' ,不能是path:'/xxx',
   因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！