临近年关,同事们该回家的也都回家了,所以我对工作的欲望不是很强烈,所以就主要是自己学习了一下,在 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/, '""'))} }
在这里我的思路是:
-
先将接收到的数据传递到 formdate 方法中,然后将传递过来的数据通过 JSON.stringfy() 方法转换成 JSON 字符串。
-
然后采用字符串的 replaceAll() 方法将字符串中的所有 null 转换为空字符串。
-
最后,通过 JSON.parse() 方法解析刚才的字符串,并返回。
这样我们在使用的时候,就可以将后端的返回数据通过包裹一层 formdate 方法,来达到将 null 换成字符串的需求。
-
当然,解决方案并不只是这一种,大家有其他思路的也可以分享在评论区。
问题二
问题背景:今天闲着无聊,自己构建了一个 Vue3 的项目,在这个过程中,遇到了一个错误,百度了一下,没有找当相关的经验,不是很难,但是还是想跟大家分享一下。
问题描述:在构建 Vue3 应用的时候,想着使用 Eslint 对代码进行格式化校验,于是下载完 Eslint 之后,使用
npx eslint --init
的初始化 Eslint 配置的时候,控制台报了好长一串错误,我人都麻了。。。
-
报错信息如下:
以前没有见过这个报错,霎时间有点不知所措,赶紧去百度,但是找了半个小时,并没有找到相关的解决方案,于是抱着自己试一试的心态,猜测可能是因为当前电脑用户没有权限,于是乎,使用管理员打开了 power shell ,输入 npx eslint --init
,在我的注视下,它竟然奇迹般的成功了,很不可思议,我猜这东西应该不是很难,所以百度没有提供相关的经验吧。
声明:
作者只记录自己在公司踩过的坑,以及提供自己的解决思路,如果有误请联系作者进行修改,不接受以任何形式的诋毁谩骂。如果有更好的方案也可以联系作者进行讨论,互相学习。
如需转载请注明文章来源。