naive ui Tree 组件实现增删图片预览
image-20230518225145921
代码
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859<template> <n-tree block-line :data="treeData" :selectable="false" :default-expand-all="true" /></template><script lang="ts" setup>import { h, ref } from 'vue'import { TreeOption, NButton, NTree } from 'nai ...
nest 记录 (一)起步
中文文档地址 nest 版本 8.X https://docs.nestjs.cn/8
确保安装了nodejs 版本大于10.13.0。我用的是14.17.6 和 16.15.1 。通过nvm 进行切换
非必要步骤安装 @nestjs/cli 和 yarn不过我的文章里面会用到, 还是推荐安装一下的
构建新项目123nest new 项目名字// example nest nest yuque
运行程序
1yarn start:dev
为啥要加 dev 。来到 package.json ,可以发现多了一个 --watch 的参数。这个就是用来监听文件改动进行自动编译(类似与工程化前端的热更新)。nest的具体原理好像也是 webpack 热更新。(这里打个疑问号, 我没有探究过)
1{ "scripts": { "start": "nest start", "start:dev": "nest start --watch" ...
nest 记录(三)统一返回格式需要用到管道
12345678import { CallHandler, ExecutionContext, Injectable, NestInterceptor } from '@nestjs/common';import { Observable } from 'rxjs';import { map } from 'rxjs/operators';@Injectable()export class TransformInterceptor implements NestInterceptor { intercept(context: ExecutionContext, next: CallHandler): Observable<any> { return next.handle().pipe( map((data) => ({ ...
nest 记录(二)module controller service这三层是基本的,没有什么要记录的,多写就知道了。
swragger1yarn add @nestjs/swagger @nestjs/platform-express
12345// main.tsimport { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';async function bootstrap() { const app = await NestFactory.create(AppModule); app.setGlobalPrefix('api'); // start 构建文档 const options = new DocumentBuilder() .setTitle('api文档') .setVersion('1.0') .build(); con ...
nest 记录(四)message wall 这个项目的后端写完了。没有很大的拓展空间。于是想起来写一个博客,博客GITHUB地址 https://github.com/abigmiu/blog
把这几天的nest遇到的问题记录一下。(文章里面删除了部分代码。完整代码请查看git仓库) > 发现以前上传的代码都没有记录下来,原来是电脑配置git的时候邮箱弄错了。 嗳,少了好多绿色小方块
文件上传首先生成一个resource
file.controller.ts
1234567891011121314import { FileInterceptor } from '@nestjs/platform-express'; // 引入express的文件处理模块(只能识别formData)import { UploadDto } from './dto/upload.dto';import { ConfigService } from '@nestjs/config'; ...
nest 配置文件
Controller:传统意义上的控制器,提供 api接口,负责处理路由、中转、验证等一些简洁的业务;
Service:又称为 Provider, 是一系列服务、repo、工厂方法、helper的总称,主要负责处理具体的业务,如数据库的增删改查、事务、并发等逻辑代码;
Module:负责将 Controller 和 Service 连接起来,类似于 namespace的概念;
配置文件process.env.NODE_ENV是自定义的,需要配置, 安装cross-env配置
修改 package.json里面的 scripts
1"scripts": { "start:dev": "cross-env NODE_ENV=development nest start --watch", "start:debug": "nest start --debug --watch", "start:prod": "cro ...
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 ...

