class-transform 执行两次 debug
没有什么技术含量, 只是记录一下过程。
具体问题在这里
nestjs - class-transfrom @Transform execute twice and return null - Stack Overflow
1. vscode debug
在这里打一个断点, vscode attach端口。请求对应接口。 vscode 会自动中断于断点处
调试
查看调用堆栈。 发现被调用了两次 class-transfrom。 第二次调用的时候是 nest 调用的, 但是nest 并没有依赖 class-transfrom。所以就想到了是不是做了一层全局的序列化。 到main.ts 里面找到了相关代码。 去掉全局序列化就行了。
1app.useGlobalInterceptors(new ClassSerializerInterceptor(app.get(Reflector)));
naive ui Tree 组件实现增删
# 图片预览
代码
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100<template> <n-tree block-line :data="treeData" :selectable="false" :default-expand-all="true" /></template><script lang="ts" setup>import { h, ref } from 'vue'import { TreeO ...
quill 编辑器图像处理
如何找到对应位置的源码。 目前我是无法直接找到的, 我是通过搜索网上的答案或者 debugger 才能够对应源码, 我做不到短时间内了解一个库的完全流程,所以看我文章的人也不必焦虑。慢慢debugger 了解部分源码就行
quill 为什么粘贴图片时为 base64项目使用的版本是1.3.7
quilljs/quill at 1.3.7 (github.com)
https://github.com/quilljs/quill/blob/0148738cb22d52808f35873adb620ca56b1ae061/modules/clipboard.js#L60
1this.quill.root.addEventListener('paste', this.onPaste.bind(this));
https://github.com/quilljs/quill/blob/0148738cb22d52808f35873adb620ca56b1ae061/modules/clipboard.js#L108
1234567891011121314 ...
开发一个 vue 的 eslint 插件
# 需求
vue template里面的事件名只能已on 开头
实现效果
实现步骤创建调试程序和 eslint 插件程序创建调试程序
我创建的文件夹名称为eslint-demo
1pnpm create vue
创建eslint 插件程序
我创建的文件夹名称为v-on-name-sartwith-on
首先安装eslint 脚手架
123pnpm i -g yopnpm i -g generator-eslint
生成 Eslint 插件工程。
1yo eslint:plugin
为插件创建一条规则,执行如下命令:
1yo eslint:rule
文件目录参考
link 插件在v-on-name-sartwith-on 这个项目里面执行
1pnpm link --global
在eslint-demo 这个项目里面执行(注意, 这里的名称是package.json 里面的名称)
12pnpm link --global eslint-plugin-v-on-handler-name-style
编写代码eslint-demo项目 App.vue
12345678 ...
获取视频关键帧
要点指定视频的时间,等 oncanplay 事件可以后就用 canvas 画图片
知识点
10次请求文件。 但是network 显示了39次请求
这是一个HTTP响应头的示例,表示响应的内容长度、内容范围和内容类型。下面是对每个部分的解释:
Content-Length: 2076689900 这指示响应主体的长度,以字节为单位。在这种情况下,响应主体的长度是2076689900字节。
Content-Range: bytes 0-2076689899/2076689900 这表示服务器正在返回的是整个资源(视频)的一部分,而不是完整的资源。其中 “bytes 0-2076689899” 表示返回的是从字节0到2076689899范围的内容,总共2076689900字节。最后的 “/2076689900” 表示整个资源的长度。
Content-Type: video/mp4 这指示响应主体的媒体类型是视频,具体地说是MP4格式的视频。
js控制range 范围
1234567891011121314151617var xhr = new XMLHttp ...
No title
基于Element Tree 组件和vue-contextmenujs 实现文件夹树插件版本号
1234{ "vue-contextmenujs": "^1.4.9", "element-ui": "^2.4.5",}
实现效果
完整代码123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146 ...
Hello World
最近从vscode切换到了webstorm, 但是苦于webstorm没有live-server插件不太方便,下面说一说webstorm怎么使用live-server
,主要原理就是下载live-server这个npm包
玩过前端开发的都应该知道有局部安装和全局安装两种方式吧。你可以自由选择
安装live-server很简单,我是用yarn全局安装yarn global add live-server
使用live-server如果你是全局安装的l, 然后直接在终端输入live-server显示命令行无效, 那么就是没有添加到环境变量, 自行搜索npm 全局安装包在那, yarn的全局安装包位置是bin文件夹, 也有可能你自定义了名字。哎呀,怎么都是自行搜索呢?🙃 因为我懒啊
使用npm脚本运行也是很简单,在package.json 里面自行添加一个scripts就行
12345{ "scripts": { "dev": "live-server" },}
结束了live-s ...
一些产品的标准
# 卫生纸 与 纸巾纸
纸巾纸执行的国家标准为:GB 15979(卫生标准)和GB/T 20808(产品标准)。
卫生纸的执行标准为:GB/T20810-2018。
https://weibo.com/3911558393/Mcqe91SlO
一次 vue 跨组件通信方法的选择
![](https://s2.loli.net/2022/09/12/vr3YeTIqUOztoFp.png)
需求分析这是一个对话框页面。分为
对话列表
对话输入
角色选择
三个组件
对话列表(1)依赖对话输入(2)和角色选择(3)两个模块的内容。
在对话列表里面点击编辑的时候。 2 和 3 的内容也需要对应改变。
这样就形成了相互依赖
第一次尝试 - props使用 props 传值。1 是父组件,2和3是子组件。设计一个 editId 用来表示是否在编辑某段话。如果editId 为0就表示新增。看起来挺简单也是挺符合要求的,但是写着写着,要处理的边界条件太多。props 一大堆。加上所有的状态都保存在1里面。导致代码十分长。不易于分辨。遂放弃这种方式
第二次尝试 - eventBus由于没有事先在脑海里理清哪里需要传值。 一上来就写代码。导致后面越来越多的 on 和 emit。无法辨别值究竟是从哪里传过来的。又又放弃。
最后一次 - pinia也就是用仓库的方式进行数据渲染。把状态, 事件什么的全丢 store 里面去。 这样方便管理多了。
1234567891011121 ...
下载抖音表情包
首先进入抖音的网站, 打开控制台, 找到表情包对应的请求。
1https://www.douyin.com/aweme/v1/web/emoji/list?device_platform=webapp 后面还有一大串不重要的信息
看到里面的emoji_list 字段, 右键点击复制object,这样你就可以得到一个json串。
接下来我们就可以写代码下载, 一顿啪啪啪, 下载 request 库(node的, 不是python的)
再一顿啪啪啪,
1234567891011121314151617const request = require('request')const dataFile = require('./data.json') // 在浏览器里面复制的json串放到了这个文件里面const data = dataFile.map((item) => { return { name: item.display_name.slice(1, -1), // 去除括号 ur ...