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>
效果: