【vue2】近期bug收集与整理01

简介: bug收集与整理

1登陆token的问题

流程:收集检验-发请求-存入vuex-token本地化

通常我处理登录业务的时候流程是:给登录的那个按钮注册一个点击事件,点击的时候调用store中的actions触发请求,再调用mutations将我们的一个token进行本地化的存储。

思路是这样的没问题,可我们存的时候对于存token的位置,就需要注意下了。当我点击登录的时候需要将在发送的时候将token存入请求头中。

可有时候当我忘记写之后,查看network会提示我没有登录,为什么点击登录的时候没有登录呢?

(见下图)

bd446fa695b144a795487adc0ed454f9.png

检查可知,我在发送请求的时候没有在请求拦截器中将token存入请求头中

c72383ab471f47e4a0f5a1fa99fce5ea.png

写入请求重新发送请求查看:

cc3eb1cbbeff41fba878bf738daf07a5.png

这个时候我们的登录业务就完成啦!

2.组件没找到的原因

我们组件使用的三步:导入、注册、引用。当我将这个组件导入时,下意识加上了{ } ,结果提示我组件导入失败。检查可知是我的注册的组件引入问题。当我把{ }删除之后就好了

a0a54e8e2b574b06ba5dce24dc3e4c3b.png

3.父传子,子接收错误

父传值给其他可以写三个参数type(类型),required(是否必须使用),default(默认值),下图为required写成了require

09ddd06ffb6b4fd09b266219eb1bff97.png

4.tree组件的使用

Tree组件 | Element

d0fe72fd58b0416bafbe8800337faa48.png

这是官网的逻辑,下面的这个例子也是基于这个思想整合而成的。

逻辑:当pid与id相等的时候就把包含pid的这一项当作id这一项的子集

分析请求我们的一级数据与二级数据有什么特征,经分析得知:当pid与id相等的时候就把包含pid的这一项当作id这一项的子集。

  1. 传进来一个数组对象,定义一个空数组与对象来接收我们传递的值
  2. 遍历形参每一项遍历给每一项添加一个children空数组
  3. 将每一项的id拿出来作为我们对象的键,每一个item作为值
  4. 遍历我们的形参将有pid的项目收集(就是说它一定是某一项的子集)
  5. 根据pid与id关系,将有pid的项目将它加入我们的children中
  6. 如果没有pid则就是一级的
export function treeListData(list) {
// 1.定义列表与对象
  const treeList = []
  const obj = {}
  list.forEach(item => {
    if (!item.children) {
      item.children = []
    }
    obj[item.id] = item
  })
  console.log(obj, 'obj')// 遍历形参list每一项,将每一项的item.id中作为键,每一个item作为值
  // 循环
  list.forEach(item => {
  // 2.判断依据有pid就是父项,有就提取出来,并且把这一项添加到上级的children中
    const fatherItem = obj[item.pid]
    if (fatherItem) {
      fatherItem.children.push(item)
    } else {
      treeList.push(item)// 没有pid为最大的
    }
  })
  return treeList
}

5.nextTick处理组件缓存数据未清空的问题

拿页面中常见的弹窗来说,我们会封装一个dialog组件套起来我们form表单数据。当我正常收集/渲染数据关闭之后,第二次点开发现数据依旧是上次写/渲染的数据。解决办法:

1.给数组绑定一个v-if属性,当我关闭时将弹窗改为false,这样做是可以,可频繁的创建组件/销毁组件会影响性能。

2.给组件使用$nextTick,当我们获取到了数据再发送数据即可,这样就避免大量的新增销毁组件

cde96d5bf5c44a17a3b62fd878390778.png

6.给自定义组件绑定click点击事件失败

因为在自定义组件上注册的事件触发的是组件自定义的事件,需要加上.native修饰符

17573d2385564880860158de8c77f395.png

7.中英文键值的转换

在我们学习js的过程中,有的时候我们接收发送给后端的数据,需要我们提供一个对象,并且对象中的键与值都是中文,而我们这边只有键与值均为中文的对象数据与一份键的英文对应表。此时我们怎么将我们的中午的键值根据对应表转换成英文键,中文值呢?当然使用我们js中的方法啦!(Object.keys()、map()、foreach()等),好了,我们开始我的的案例讲解。

1.中文的键值对象

arrList: [
        { 入职日期: 44505, 姓名: '老张', 工号: '9002', 手机号: '13800866258', 聘用形式: 2, 转正日期: 44821, 部门: '开发部' },
        { 入职日期: 44505, 姓名: '老王', 工号: '9008', 手机号: '13800866328', 聘用形式: 3, 转正日期: 44891, 部门: '人事部' },
        { 入职日期: 44505, 姓名: '老程', 工号: '9005', 手机号: '13800866952', 聘用形式: 1, 转正日期: 44892, 部门: '人事部' }]
    }

2.我们中英文键值对应表

const mapInfo = {
        '入职日期': 'timeOfEntry',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName',
        '聘用形式': 'formOfEmployment'
      }

思路:

       找出所有的中文key

       得到对应的英文key

       拼接一个新对象: 英文key:每一项的中文值

transExcel(results) {
      const mapInfo = {
        '入职日期': 'timeOfEntry',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName',
        '聘用形式': 'formOfEmployment'
      }
      return results.map(item => {
        const enObj = {}// 存放英文键,中文值
        const zhKeys = Object.keys(item)// 得到的是每一项的键(中文)
        zhKeys.forEach(zhKey => {
          const enKey = mapInfo[zhKey]// 遍历mapInfo的键,得到英文的值
          if (enKey === 'timeOfEntry' || enKey === 'correctionTime') {
            enObj[enKey] = formatExcelDate(item[zhKey])
          } else {
            enObj[enKey] = item[zhKey]
          }
        })
        return enObj
      })
    },

效果检查:

e8c72115269e46ea90614af4830f9e52.png




相关文章
|
XML JSON API
高效使用 Postman:如何正确传递 Query、Path 和 Body 参数
Postman 作为一个功能强大的工具,极大地简化了 API 测试和调试的过程,提供了发送请求和检查响应的直接方法。本文将着重介绍如何在 Postman 中高效地处理请求参数,以提高 API 测试和开发的便利性。
|
数据安全/隐私保护
3分钟部署 雾锁王国(Enshrouded) 联机服务
通过计算巢快速部署雾锁王国(Enshrouded)联机服务
3分钟部署 雾锁王国(Enshrouded) 联机服务
|
监控 数据安全/隐私保护 网络虚拟化
ensp命令练习及交换机 和个路由器的基本命令
ensp命令练习及交换机 和个路由器的基本命令
740 0
|
监控 JavaScript 前端开发
影刀RPA(初级)(二)
影刀RPA(初级)(二)
8458 2
|
9月前
|
人工智能 物联网 Python
VMix:即插即用!字节联合中科大推出增强模型生成美学质量的开源适配器,支持多源输入、高质量视频处理
VMix 是一款创新的即插即用美学适配器,通过解耦文本提示和交叉注意力混合控制,显著提升图像生成的美学质量,支持多源输入和高质量视频处理。
329 11
VMix:即插即用!字节联合中科大推出增强模型生成美学质量的开源适配器,支持多源输入、高质量视频处理
|
7月前
|
存储 运维 Kubernetes
容器数据保护:基于容器服务 Kubernetes 版(ACK)备份中心实现K8s存储卷一键备份与恢复
阿里云ACK备份中心提供一站式容器化业务灾备及迁移方案,减少数据丢失风险,确保业务稳定运行。
|
9月前
|
存储 机器学习/深度学习 人工智能
昇腾AI行业案例(六):基于 PraNet 的医疗影像分割
欢迎学习《基于 PraNet 的医疗影像分割》实验。在本实验中,你将深入了解如何运用计算机视觉(CV)领域的 AI 模型,搭建一个高效精准的医疗影像分割系统,专注于息肉分割任务,并利用开源数据集对模型效果加以验证。
222 1
|
11月前
|
安全 调度
什么是用户态和内核态?
【10月更文挑战第29天】用户态和内核态是操作系统中两个不同的运行级别和权限状态,它们相互配合,共同构成了操作系统的运行基础,为计算机系统的稳定运行和应用程序的高效执行提供了保障。
1083 31
|
11月前
|
前端开发
css3超酷tab选项卡式页面切换特效
这是一款效果不错的Tab选项卡式css3全屏页面切换特效。该特效使用CSS Transitions和:target伪类完成。
|
机器学习/深度学习 存储 Linux
linux中强大且常用命令:find、xargs、grep
linux中强大且常用命令:find、xargs、grep
809 9