踩坑实录(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 ,在我的注视下,它竟然奇迹般的成功了,很不可思议,我猜这东西应该不是很难,所以百度没有提供相关的经验吧。

声明:

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

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

相关推荐
m0_736034856 分钟前
1.28笔记
前端·chrome·笔记
IT陈图图11 分钟前
构建 Flutter × OpenHarmony 跨端带文本输入对话框示例
开发语言·javascript·flutter
丝斯201113 分钟前
AI学习笔记整理(63)——大模型对齐与强化学习
人工智能·笔记·学习
奔跑的web.5 小时前
TypeScript 装饰器入门核心用法
前端·javascript·vue.js·typescript
阿蒙Amon6 小时前
TypeScript学习-第1章:入门
javascript·学习·typescript
winfredzhang6 小时前
实战复盘:如何用 HTML+JS+AI 打造一款“影迹”智能影视管理系统
javascript·html·json·加载·搜索·保存·电影接口
集成显卡6 小时前
Lucide Icons:一套现代、轻量且可定制的 SVG 图标库
前端·ui·图标库·lucide
pas1366 小时前
37-mini-vue 解析插值
前端·javascript·vue.js
十里-7 小时前
vue.js 2前端开发的项目通过electron打包成exe
前端·vue.js·electron
奥特曼_ it8 小时前
【数据分析+机器学习】基于机器学习的招聘数据分析可视化预测推荐系统(完整系统源码+数据库+开发笔记+详细部署教程)✅
笔记·数据挖掘·数据分析