日常开发问题汇总

键.

已于 2023-12-22 14:13:16 修改

阅读量149

点赞数

文章标签：前端

于 2023-10-26 14:45:47 首次发布

本文链接：https://blog.csdn.net/beekim/article/details/134055456

版权

2023.10.26

1.生产环境代码校验更严格产生的问题

发版时出现的问题：
点击报错或提交没有反应
在这里插入图片描述
排查：
点击保存后控制台network没有发起请求，定位问题在前端代码，查看代码发现，代码执行到这一行就没往下执行了

这个结果匪夷所思，细看代码后发现是下面代码的问题：

在这里插入图片描述

然后重新打了个有log信息的生产包重新发版测试：
点击保存后发现是下面的这几个table组件报的错，证实了问题
在这里插入图片描述
最后重新分析代码：

这几个table组件都加了key值，每次执行更新信息的操作就会刷新组件，导致保存时第一次给组件的数据被重置，保存调用的还是原来的组件而报错。

2.串头像

在新入职或修改员工信息后，员工头像串了

排查发现nas盘存的源文件头像是对的，阿里云的不对，说明问题出在阿里云。
在这里插入图片描述
阿里云在传头像时，如果文件名字相同会用新的文件替换老文件。再分析后台文件上传的逻辑得出：

简单来说：就是我们上传生成文件名字有冲突，给的随机数的有相同情况。

阿里云存储规则：文件名相同以最新为准。

例如：第一次张三：头像7492.png
           第二次李四：头像7492.jpg

李四的就把张三的覆盖了。

2023.11.17

forEach 和 for of 遍历请求接口返回数据问题

如下代码：
在遍历数组roomUserIds时，需要用其中的userId去查询用户信息，并将返回的信息push到rawUsers数组中。使用forEach遍历时，获取不到遍历完后的数据

let rawUsers = [];
roomUserIds.forEach( async (userId) => {
  console.log(userId)
  //查询用户信息的接口
  // const promise = firestoreService.getUser(userId);
  let temp = await axios.get('/api/getUserData', { params: { id: userId } });
  let promise = temp.data;
  this.rawUsers.push(promise);
});
// let temp2 = await axios.get('/api/getUserData');
// rawUsers = temp2.data.data;
console.log('!!!!!', rawUsers);

this.allUsers = [...this.allUsers, ...rawUsers];

在这里插入图片描述

改成for of

let rawUsers = [];
 for (const userId of roomUserIds) {
   //查询用户信息的接口
   // const promise = firestoreService.getUser(userId);
   let temp = await axios.get('/api/getUserData', { params: { id: userId } });
   let promise = temp.data;
   rawUsers.push(promise);
 }
 // let temp2 = await axios.get('/api/getUserData');
 // rawUsers = temp2.data.data;
 console.log('!!!!!', rawUsers);

 this.allUsers = [...this.allUsers, ...rawUsers];

在这里插入图片描述

2023.12.22 css3改变爷级元素的兄弟的盒子样式

参考：https://www.jianshu.com/p/5872856fb5e6?v=1671681730072
先用父级元素的兄弟来测试：

<style>
    .granpa:has(.child:hover)~.bro {
        color: red;
        font-size: 20px;
    }
</style>

<body>
    <div class="granpa">
        <div class="child">孙子</div>
    </div>
    <div class="bro">爷爷的兄弟</div>
</body>

效果：
在这里插入图片描述

键.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
日常开发问题汇总

发版时出现的问题：点击报错或提交没有反应排查：点击保存后控制台network没有发起请求，定位问题在前端代码，查看代码发现，代码执行到这一行就没往下执行了这个结果匪夷所思，细看代码后发现是下面代码的问题：然后重新打了个有log信息的生产包重新发版测试：点击保存后发现是下面的这几个table组件报的错，证实了问题最后重新分析代码：这几个table组件都加了key值，每次执行更新信息的操作就会刷新组件，导致保存时第一次给组件的数据被重置，保存调用的还是原来的组件而报错。
复制链接

扫一扫