当前位置：首页 > article >正文

踩坑实录（Third Day）

article 2024/11/18 8:17:59

临近年关，同事们该回家的也都回家了，所以我对工作的欲望不是很强烈，所以就主要是自己学习了一下，在 B 站看看视频，自己敲代码，所以今天没遇到什么坑，但是可以分享一下之前踩到的两个坑。
此为第三篇（2024 年 02 月 07 日）

问题一

问题背景：解决控制台报错的时候发现了一个错误，主要是针对后端返回数据与前端所需要的不一致。在使用 Element UI 这个组件库的时候，会使用到一些组件，比如表格、表单等，这些后台管理系统中常用的组件，在使用这些组件的时候，往往需要我们绑定一些数据，这些数据大多是后端返回的，前端直接渲染即可。

问题描述：前端组件期望接受一个参数，这个参数是一个字符串，但是后端返回的却是 null ，很多情况下都是这样，所以控制台就报出一个错误，大致意思就是：期望得到一个字符串，但是得到了一个 null 。虽然不影响渲染和使用，但是在控制台报错，使我这个强迫症患者很难受，于是也就一并解决了。

因为我是做前端开发的，所以这里咱们就不写 demo 了，这个问题也很通俗易懂，直接开始我们的解题思路分享吧~~~

解题思路：

控制台报出的错误已经很明显了，就是需要接受一个字符串类型的参数，但是得到了 null ，那我们就需要把后端所有返回 null 的属性值，全部替换成空字符串（‘’）即可。
```
// 在这里我写了一个工具类，工具类暴露出一个 formdate 方法，对返回数据进行以一个格式化
export default {
    formdate: function(data) {
        return JSON.parse(JSON.stringfy(data).replaceAll(/null/, '""'))
    }
}
```
在这里我的思路是：
1. 先将接收到的数据传递到 formdate 方法中，然后将传递过来的数据通过 JSON.stringfy() 方法转换成 JSON 字符串。
2. 然后采用字符串的 replaceAll() 方法将字符串中的所有 null 转换为空字符串。
3. 最后，通过 JSON.parse() 方法解析刚才的字符串，并返回。
这样我们在使用的时候，就可以将后端的返回数据通过包裹一层 formdate 方法，来达到将 null 换成字符串的需求。

当然，解决方案并不只是这一种，大家有其他思路的也可以分享在评论区。

问题二

问题背景：今天闲着无聊，自己构建了一个 Vue3 的项目，在这个过程中，遇到了一个错误，百度了一下，没有找当相关的经验，不是很难，但是还是想跟大家分享一下。

问题描述：在构建 Vue3 应用的时候，想着使用 Eslint 对代码进行格式化校验，于是下载完 Eslint 之后，使用 npx eslint --init 的初始化 Eslint 配置的时候，控制台报了好长一串错误，我人都麻了。。。

报错信息如下：

以前没有见过这个报错，霎时间有点不知所措，赶紧去百度，但是找了半个小时，并没有找到相关的解决方案，于是抱着自己试一试的心态，猜测可能是因为当前电脑用户没有权限，于是乎，使用管理员打开了 power shell ，输入 npx eslint --init ，在我的注视下，它竟然奇迹般的成功了，很不可思议，我猜这东西应该不是很难，所以百度没有提供相关的经验吧。