踩坑实录(Third Day)

临近年关,同事们该回家的也都回家了,所以我对工作的欲望不是很强烈,所以就主要是自己学习了一下,在 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 ,在我的注视下,它竟然奇迹般的成功了,很不可思议,我猜这东西应该不是很难,所以百度没有提供相关的经验吧。

声明:

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/378159.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Flutter开发模仿百度云盘创建文件夹功能Draggable和DragTarget的混合使用

使用LongPressDraggable和DragTarget写了个类似于百度云盘管理文件和文件夹的功能(为了避免和列表的滑动手势冲突,所以采用LongPressDraggable而不是Draggable): 1、拖拽文件到文件夹中 2、拖拽两个文件可以合并成一个新的文件夹…

flask+pyinstaller实现mock接口,并打包到exe运行使用postman验证

flask代码 from flask import Flask, request, jsonifyapp Flask(__name__)app.route("/login", methods[POST]) def login():username request.json.get("username").strip() # 用户名password request.json.get("password").strip() # 密…

Git介绍和常用命令说明

目录 一、Git概述 1.1 Git是什么 1.2 Git有什么用 1.3 Git仓库介绍 二、Git下载与安装 三、Git代码托管服务(远程仓库) 四、Git常用命令 4.1 设置用户信息 4.2 获取Git仓库 4.2.1 本地初始化Git仓库 4.2.2 从远程仓库克隆 4.3 本地仓库操作 …

【Spring源码解读!底层原理进阶】【下】探寻Spring内部:BeanFactory和ApplicationContext实现原理揭秘✨

🎉🎉欢迎光临🎉🎉 🏅我是苏泽,一位对技术充满热情的探索者和分享者。🚀🚀 🌟特别推荐给大家我的最新专栏《Spring 狂野之旅:底层原理高级进阶》 &#x1f680…

Mongodb启动为Windows服务开机自启动

注意:mongodb的安装目录不应有中文,如果有,服务启动的路径会出现乱码,导致找不到对应的文件 1.安装好mongoDB 2.创建data目录,并在其中创建db目录和log目录 3.在log目录中创建mongodb.log文件 4.打开cmd(用…

创建本地yum源并安装tree命令(openEuler-20.03-LTS-SP3)

步骤 1:下载ISO镜像 首先,您需要从提供的URL下载ISO镜像文件: cd /opt wget https://mirrors.dotsrc.org/openeuler/openEuler-20.03-LTS-SP3/ISO/x86_64/openEuler-20.03-LTS-SP3-x86_64-dvd.iso步骤 2:挂载ISO镜像 接下来&am…

简易计算器的制作(函数指针数组的实践)

个人主页(找往期文章包括但不限于本期文章中不懂的知识点): 我要学编程(ಥ_ಥ)-CSDN博客 前期思路(菜单的制作等):利用C语言的分支循环少量的函数知识写一个猜数字的小游戏-CSDN博客 计算器的制作其实与游…

vuecli3 执行 npm run build 打包命令报错:TypeError: file.split is not a function

问题 今天有个项目在打包的时候遇到了一个问题,就是执行 npm run build 命令的时候报错了,如下: 解决 我排查了一下,模拟代码如下:在打包的时候用了 MinChunkSizePlugin const webpack require("webpack"…

2024阿里云GPU服务器租用价格表(包月/按小时/学生价)

阿里云GPU服务器租用价格表包括包年包月价格、一个小时收费以及学生GPU服务器租用费用,阿里云GPU计算卡包括NVIDIA V100计算卡、T4计算卡、A10计算卡和A100计算卡,GPU云服务器gn6i可享受3折优惠,阿里云百科aliyunbaike.com分享阿里云GPU服务器…

Docker容器监控-CIG

目录 一、CIG说明 1. CAdvisor 2. InfluxDB 3. Grafana 二、环境搭建 1. 创建目录 2. 编写 docker-compose.yml 3. 检查并运行容器 三、进行测试 1. 查看 influxdb 存储服务 是否能正常访问 2. 查看 cAdvisor 收集服务能否正常访问 3. 查看 grafana 展现服务&#…

波纹扩散效果

<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>波纹扩散</title><style>body {disp…

学习 Redis 基础数据结构,不讲虚的。

学习 Redis 基础数据结构&#xff0c;不讲虚的。 一个群友给我发消息&#xff0c;“该学的都学了&#xff0c;怎么就找不到心意的工作&#xff0c;太难了”。 很多在近期找过工作的同学一定都知道了&#xff0c;背诵八股文已经不是找工作的绝对王牌。企业最终要的是可以创造价…

DePIN+GameFi+顶级电竞团队,GAIMIN如何颠覆Web3游戏赛道

DePIN带动互联网进入去中心化时代 自从智能合约和去中心化应用DApp普及之后&#xff0c;越来越多的从业者开始将目光放在区块链对互联网的升级和改造之上&#xff0c;这里主要进行了三类&#xff0c;第一类是通过节点的去中心化来实现的&#xff0c;这样确保了基础设施的分散&a…

双指针专题2 数组元素的目标和

数组元素的目标和 C代码实现: #include<iostream> using namespace std; const int N1000000;int a[N],b[N]; int main(){int n,m,x;cin>>n>>m;cin>>x;for(int i0;i<n;i){cin>>a[i];}for(int j0;j<m;j){cin>>b[j];}for(int i0,jm-1…

Java利用阿里云OSS/本地存储实现文件上传功能

目录 1、简介 2、本地存储 3、阿里云OSS 3.1、准备 3.2、入门 3.3、项目实施 3.4、注意 4、图片删除 &#x1f343;作者介绍&#xff1a;双非本科大三网络工程专业在读&#xff0c;阿里云专家博主&#xff0c;专注于Java领域学习&#xff0c;擅长web应用开发、数据结构和…

零基础学编程系列,从入门到精通,中文编程开发语言工具下载,编程构件容器件之控制面板构件用法

零基础学编程系列&#xff0c;从入门到精通&#xff0c;中文编程开发语言工具下载&#xff0c;编程构件容器件之控制面板构件用法 一、前言 编程入门视频教程链接 https://edu.csdn.net/course/detail/39036 编程工具及实例源码文件下载可以点击最下方官网卡片——软件下载…

vite项目配置根据不同的打包环境使用不同的请求路径VITE_BASE_URL,包括报错解决

vite环境配置可以看官方文档&#xff1a;环境变量和模式 | Vite 官方中文文档 创建环境配置文件 在项目根目录下面创建.env和.env.production文件&#xff0c;.env是开发环境使用的&#xff0c;.env.production是生产环境使用的。 .env文件&#xff1a; # 基本环境 VITE_APP…

敏捷产品是双轨开发而非双轨制

长话短说&#xff1a; 如果你以前听说过“双轨开发”这个术语&#xff0c;本文将解释它的来源和含义。以下是要点 开发工作侧重于可预测的结果和可保证的质量 探索工作侧重于快速学习和快速验证 探索和发展被可视化为两条轨道&#xff0c;因为这是两种工作&#xff0c;两种思…

Leetcode3020. 子集中元素的最大数量

Every day a Leetcode 题目来源&#xff1a;3020. 子集中元素的最大数量 解法1&#xff1a;哈希 枚举 用一个哈希表统计数组 nums 中的元素及其出现次数。 暴力枚举数组中的数&#xff0c;作为 x&#xff0c;然后不断看 x2,x4,⋯ 在数组中的个数。直到个数不足 2 个为止&a…

微信小程序新手入门教程四:样式设计

WXSS (WeiXin Style Sheets)是一套样式语言&#xff0c;用于描述 WXML 的组件样式&#xff0c;决定了 WXML 的组件会怎么显示。 WXSS 具有 CSS 大部分特性&#xff0c;同时为了更适合开发微信小程序&#xff0c;WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比&#xff0c;WXSS …
最新文章