记录vue项目中遇到的一些问题

5下载二进制文件

平时在前端下载文件有两种方式，一种是后台提供一个 URL，然后用 window.open(URL) 下载，另一种就是后台直接返回文件的二进制内容，然后前端转化一下再下载。
由于第一种方式比较简单，在此不做探讨。本文主要讲解一下第二种方式怎么实现。
第二种方式需要用到 Blob 对象， mdn 文档上是这样介绍的：

Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据

具体使用方法

axios({
  method: 'post',
  url: '/export',
})
.then(res => {
  // 假设 data 是返回来的二进制数据
  const data = res.data
  const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
  const link = document.createElement('a')
  link.style.display = 'none'
  link.href = url
  link.setAttribute('download', 'excel.xlsx')
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
})

打开下载的文件，看看结果是否正确。

一堆乱码…

一定有哪里不对。

最后发现是参数 responseType 的问题，responseType 它表示服务器响应的数据类型。由于后台返回来的是二进制数据，所以我们要把它设为 arraybuffer， 接下来再看看结果是否正确。

axios({
  method: 'post',
  url: '/export',
  responseType: 'arraybuffer',
})
.then(res => {
  // 假设 data 是返回来的二进制数据
  const data = res.data
  const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
  const link = document.createElement('a')
  link.style.display = 'none'
  link.href = url
  link.setAttribute('download', 'excel.xlsx')
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
})

这次没有问题，文件能正常打开，内容也是正常的，不再是乱码。
根据后台接口内容决定是否下载文件

如果下载文件的数据量条数符合要求，正常下载（每个页面限制下载数据量是不一样的，所以不能在前端写死）。
如果文件过大，后台返回 { code: 199999, msg: ‘文件过大，请重新设置查询项’, data: null }，然后前端再进行报错提示。

先来分析一下，首先根据上文，我们都知道下载文件的接口响应数据类型为 arraybuffer。返回的数据无论是二进制文件，还是 JSON 字符串，前端接收到的其实都是 arraybuffer。所以我们要对 arraybuffer 的内容作个判断，在接收到数据时将它转换为字符串，判断是否有 code: 199999。如果有，则报错提示，如果没有，则是正常文件，下载即可。具体实现如下：

axios.interceptors.response.use(response => {
    const res = response.data
    // 判断响应数据类型是否 ArrayBuffer，true 则是下载文件接口，false 则是正常接口
    if (res instanceof ArrayBuffer) {
        const utf8decoder = new TextDecoder()
        const u8arr = new Uint8Array(res)
        // 将二进制数据转为字符串
        const temp = utf8decoder.decode(u8arr)
        if (temp.includes('{code:199999')) {
            Message({
            	// 字符串转为 JSON 对象
                message: JSON.parse(temp).msg,
                type: 'error',
                duration: 5000,
            })

            return Promise.reject()
        }
    }
    // 正常类型接口，省略代码...
    return res
}, (error) => {
    // 省略代码...
    return Promise.reject(error)
})

4.前进刷新后退不刷新

需求一：
在一个列表页中，第一次进入的时候，请求获取数据。

点击某个列表项，跳到详情页，再从详情页后退回到列表页时，不刷新。

也就是说从其他页面进到列表页，需要刷新获取数据，从详情页返回到列表页时不要刷新。

解决方案

在 App.vue设置：

        <keep-alive include="list">
            <router-view/>
        </keep-alive>

假设列表页为 list.vue，详情页为 detail.vue，这两个都是子组件。
我们在 keep-alive 添加列表页的名字，缓存列表页。
然后在列表页的 created 函数里添加 ajax 请求，这样只有第一次进入到列表页的时候才会请求数据，当从列表页跳到详情页，再从详情页回来的时候，列表页就不会刷新。
这样就可以解决问题了。
需求二：
在需求一的基础上，再加一个要求：可以在详情页中删除对应的列表项，这时返回到列表页时需要刷新重新获取数据。

我们可以在路由配置文件上对 detail.vue 增加一个 meta 属性。

        {
           path: '/detail',
           name: 'detail',
           component: () => import('../view/detail.vue'),
           meta: {isRefresh: true}
       },

这个 meta 属性，可以在详情页中通过 this.$route.meta.isRefresh 来读取和设置。

设置完这个属性，还要在 App.vue 文件里设置 watch 一下 $route 属性。

    watch: {
       $route(to, from) {
           const fname = from.name
           const tname = to.name
           if (from.meta.isRefresh || (fname != 'detail' && tname == 'list')) {
               from.meta.isRefresh = false
   				// 在这里重新请求数据
           }
       }
   },

这样就不需要在列表页的 created 函数里用 ajax 来请求数据了，统一放在 App.vue 里来处理。
触发请求数据有两个条件：

从其他页面（除了详情页）进来列表时，需要请求数据。
从详情页返回到列表页时，如果详情页 meta 属性中的 isRefresh 为 true，也需要重新请求数据。

当我们在详情页中删除了对应的列表项时，就可以将详情页 meta 属性中的 isRefresh 设为 true。这时再返回到列表页，页面会重新刷新。

3.多个请求下 loading 的展示与关闭

一般情况下，在 vue 中结合 axios 的拦截器控制 loading 展示和关闭，是这样的：

在 App.vue 配置一个全局 loading。

    <div class="app">
        <keep-alive :include="keepAliveData">
            <router-view/>
        </keep-alive>
        <div class="loading" v-show="isShowLoading">
            <Spin size="large"></Spin>
        </div>
    </div>

同时设置 axios 拦截器。

 // 添加请求拦截器
 this.$axios.interceptors.request.use(config => {
     this.isShowLoading = true
     return config
 }, error => {
     this.isShowLoading = false
     return Promise.reject(error)
 })

 // 添加响应拦截器
 this.$axios.interceptors.response.use(response => {
     this.isShowLoading = false
     return response
 }, error => {
     this.isShowLoading = false
     return Promise.reject(error)
 })

这个拦截器的功能是在请求前打开 loading，请求结束或出错时关闭 loading。
如果每次只有一个请求，这样运行是没问题的。但同时有多个请求并发，就会有问题了。
举例：
假如现在同时发起两个请求，在请求前，拦截器 this.isShowLoading = true 将 loading 打开。
现在有一个请求结束了。this.isShowLoading = false 拦截器关闭 loading，但是另一个请求由于某些原因并没有结束。
造成的后果就是页面请求还没完成，loading 却关闭了，用户会以为页面加载完成了，结果页面不能正常运行，导致用户体验不好。
解决方案
增加一个 loadingCount 变量，用来计算请求的次数。

loadingCount: 0

再增加两个方法，来对 loadingCount 进行增减操作。

    methods: {
        addLoading() {
            this.isShowLoading = true
            this.loadingCount++
        },

        isCloseLoading() {
            this.loadingCount--
            if (this.loadingCount == 0) {
                this.isShowLoading = false
            }
        }
    }

现在拦截器变成这样：

        // 添加请求拦截器
        this.$axios.interceptors.request.use(config => {
            this.addLoading()
            return config
        }, error => {
            this.isShowLoading = false
            this.loadingCount = 0
            this.$Message.error('网络异常，请稍后再试')
            return Promise.reject(error)
        })

        // 添加响应拦截器
        this.$axios.interceptors.response.use(response => {
            this.isCloseLoading()
            return response
        }, error => {
            this.isShowLoading = false
            this.loadingCount = 0
            this.$Message.error('网络异常，请稍后再试')
            return Promise.reject(error)
        })

这个拦截器的功能是：
每当发起一个请求，打开 loading，同时 loadingCount 加1。
每当一个请求结束， loadingCount 减1，并判断 loadingCount 是否为 0，如果为 0，则关闭 loading。
这样即可解决，多个请求下有某个请求提前结束，导致 loading 关闭的问题。

作者：谭光志
链接：https://juejin.im/post/6895497352120008717
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

2.某些华为机型微信授权回调问题

就是在提交完订单后需要跳到微信授权页面然后在跳转回来。
结果就是进不去确认订单页 会停留在白屏状态。
原因：是因为好像是因为华为手机会自动清理存储在sessionStorage里的东西。后来放到localStorage也不行。
最后在是放在cookie中 这样就可以了

1.利用伪元素自定义input =radio 样式

自定义input type=radio 样式时候
appearance :none 这个属性 在一些iPhone 机型上有兼容问题 会出现两个接近重合的小圆圈 特别烦
效果ui图:

解决方案：不用appearance 属性，input改为display:none,新建一个i标签，并且用label标签包裹着Input和i标签

<label>
  <input class="radio_type" type="radio" name="type" id="radio" :checked="item.isDefault === 1"/>
 <i class="radio_li" :class="{checked: item.idCard === patient.idCard }"></i>
</label> 

.radio_type {
          box-sizing: border-box;
          width: 18px;
          height: 18px;
          opacity 0
        }
      .radio_li{
        position relative
      }
      .radio_li:before {
        box-sizing: border-box;
        content: '';
        width: 18px;
        height: 18px;
        border: 1px solid #E1E0DF;
        display: inline-block;
        border-radius: 50%;
        vertical-align: middle;
      }
      .radio_li.checked:before {
          box-sizing: border-box;
          content: '';
          width: 18px;
          height: 18px;
          border: 1px solid #2AD5D5;
          background:#2AD5D5;
          display: inline-block;
          border-radius: 50%;
          vertical-align: middle;
      }
      .radio_li.checked:after {
        box-sizing: border-box;
        content: '';
        width: 10px;
        height:5px;
        border: 2px solid white;
        border-top: transparent;
        border-right: transparent;
        text-align: center;
        display: block;
        position: absolute;
        top: 7.5px;
        left:4px;
        vertical-align: middle;
        transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
      }
      .radio_li.checked{
        color: #2AD5D5;
        // opacity 1
      }