nestjs swagger 定义 response在 swagger 中定义 response 需要新建一个 class。但是从数据库里面查询出来的数据有些不需要返回。所以可以通过class-transform进行清除
12345678910111213141516171819202122232425// response classimport { ConsoleLogger } from '@nestjs/common';import { ApiProperty } from '@nestjs/swagger';import { Exclude, Expose, Transform } from 'class-transformer';@Exclude()export class IBookDetailResponse { constructor(data: Partial<IBookDetailResponse>) { ...
quill 编辑器图像处理
如何找到对应位置的源码。 目前我是无法直接找到的,我是通过搜索网上的答案或者 debugger 才能够对应源码,我做不到短时间内了解一个库的完全流程,所以看我文章的人也不必焦虑。慢慢debugger了解部分源码就行
quill 为什么粘贴图片时为base64
项目使用的版本是1.3.7
quilljs/quillat 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
123onPaste(e ...
react 项目部署github生成page点击setting 里面的 setting 页面,复制箭头的网址
项目下载gh-pages1yarn add gh-pages -D
在package.json 的 scripts 里面加上下面的一句话, dist是你编译后的文件夹名字(相对目录), 以及添加一个homepage字段,就是刚刚复制的网址
1"scripts": {"deploy": "gh-pages -d dist"}
编译注意, 这里打包的相对路径要改一下,默认是’/‘, 要改成’./’,以vite打包工具为例
12export default defineConfig({ plugins: [react()], base: './'})
运行 yarn build 进行编译, 默认是打包到dist文件夹,如果你修改了打包位置, 上面的deploy命令最后一个参数也要随着修改
提交运行 yarn deploy, gh-p ...
ts is 类型保护1234567function isString(test: any): test is string{ return typeof test === "string";}function example(foo: any){ if(isString(foo)){ console.log("it is a string" + foo); console.log(foo.length); // string function // 如下代码编译时会出错,运行时也会出错,因为 foo 是 string 不存在toExponential方法 console.log(foo.toExponential(2)); } // 编译不会出错,但是运行时出错 console.log(foo.toExponential(2));}example("hello world");
h ...
ts 将某个类型转为可选的1234export interface ClientModel { idCardFront: string;}export interface NewInter extends Omit<ClientModel, 'idCardFront'> { idCardFront?: string;}
vue 权限控制的思考我们的项目一般来说分为三个部分 - 路由控制 - 组件控制 - 接口控制
但是公司的后端是只处理了接口。针对接口进行控制。
在这样的前提下, 对权限控制进行一下梳理
路由控制一般来说在 route 的 mate 里面添加权限。 然后 beforeEach的时候对权限进行判断。没有对应的权限就跳到404页面
组件控制在网络中搜索,一般都是用自定义指令进行处理。 但是这样有一个问题。他需要挂载后然后移除子元素
我认为可以用 v-if 来省略这个问题
伪代码
123456789101112131415161718192021222324<template> <template v-if="hasPermission"> <slot></slot> </template></template><script lang="ts">export default { prop: { perm ...
vue3 延迟显示 loading仓库地址 https://github.com/abigmiu/vue-delay-loading
用途: 在 x 秒后显示 loading
比如 x = 300
现在请求一个接口。 用时500ms
就会在 300 - 500 这个时间段显示 loading
如果用时 200ms, 就不会显示 loading
用法:
123456789101112<script setup lang="ts">import { ref } from 'vue'const loading = ref(true)setTimeout(() => { loading.value = false}, 5000);</script><template> <div> <div v-loading:2000="loading"></div> </div></tem ...
webpack5 多页面打包配置确定页面结构123456├── package-lock.json├── package.json├── postcss.config.js├── src 代码├── tsconfig.json└── webpack.config.js webpack配置文件
12345src├── assets 静态资源├── models ts 定义├── pages 页面└── scripts 一些工具函数
123456789src/pages├── course│ ├── index.html│ ├── index.ts│ └── style.scss├── course-intro│ ├── index.html│ ├── index.ts│ └── style.scss
步骤1. 安装 webpack1npm install webpack webpack-cli -D
配置package.json.
- ...
webstorm使用live-server最近从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就行
1{ "scripts": { "dev": "live-server" }, ...
一次 vue 跨组件通信方法的选择
需求分析这是一个对话框页面。分为
对话列表
对话输入
角色选择
三个组件
对话列表(1)依赖对话输入(2)和角色选择(3)两个模块的内容。
在对话列表里面点击编辑的时候。 2 和 3 的内容也需要对应改变。
这样就形成了相互依赖
第一次尝试 - props使用 props 传值。1 是父组件,2和3是子组件。设计一个 editId用来表示是否在编辑某段话。如果editId为0就表示新增。看起来挺简单也是挺符合要求的,但是写着写着,要处理的边界条件太多。props一大堆。加上所有的状态都保存在1里面。导致代码十分长。不易于分辨。遂放弃这种方式
第二次尝试 - eventBus由于没有事先在脑海里理清哪里需要传值。一上来就写代码。导致后面越来越多的 on 和emit。无法辨别值究竟是从哪里传过来的。又又放弃。
最后一次 - pinia也就是用仓库的方式进行数据渲染。把状态, 事件什么的全丢 store里面去。 这样方便管理多了。
1234567891011121314151617181920212223242526272829import { ...
