踩坑实录(Third Day)

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

此为第三篇(2024 年 02 月 07 日)

问题一

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

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

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

  • 解题思路:

    控制台报出的错误已经很明显了,就是需要接受一个字符串类型的参数,但是得到了 null ,那我们就需要把后端所有返回 null 的属性值,全部替换成空字符串('')即可。

    js 复制代码
    // 在这里我写了一个工具类,工具类暴露出一个 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 ,在我的注视下,它竟然奇迹般的成功了,很不可思议,我猜这东西应该不是很难,所以百度没有提供相关的经验吧。

声明:

作者只记录自己在公司踩过的坑,以及提供自己的解决思路,如果有误请联系作者进行修改,不接受以任何形式的诋毁谩骂。如果有更好的方案也可以联系作者进行讨论,互相学习。

如需转载请注明文章来源。

相关推荐
Csvn5 小时前
useRef 的 5 个冷门但救命的高级用法
前端
小小小小宇5 小时前
Harness Engineering 与 AI 联动
前端
鱼人5 小时前
HTML5 页面性能优化大全
前端
ping某5 小时前
专栏-null 和 undefined 到底是什么?
前端·javascript·后端
用户900463370405 小时前
5MB vs 4KB vs 无限大:浏览器存储谁更强?
前端
小小小小宇5 小时前
Harness Engineering 全解析与应用
前端
牧艺6 小时前
cos-design v3.0:从 15 个 Demo 到 49 个组件的视觉特效库
前端·视觉设计
lichenyang4536 小时前
ASCF 架构升级总览:WebRuntimePage 为什么要变薄
前端
道友可好6 小时前
从今天开始:你的第一个 Harness Engineering 实践
前端·人工智能·后端
Linsk6 小时前
组件 = 模板 + 业务逻辑
java·前端·vue.js