搭建code server简单的介绍一下code server吧 Run VS Code on any machine anywhere and access it in the browser. 在你的服务器或者机器上安装code server，可以在浏览器上使用vscode。简单点来说就是一个web版的vscode。 这是项目地址 github地址 在github中介绍了三种安装方式 - 使用安装脚本进行安装 手动安装 使用一键部署 宝塔 + docker这种方式比较简单，安装前提是你已经安装宝塔并在宝塔面板里面安装了docker管理器，首先是在docker管理器里面添加镜像codercom/code-server:latest。点击获取，（TIP：文件较大） 下载完成后，点击docker管理器的容器列表里面的添加容器，选择下载好的镜像，选择下载好的codeserver镜像，选择自己喜欢的端口（官方是8080端口）一定要选择环境变量，也可以在容器中重新配置环境 使用安装包的方式比较麻烦， 不推荐先在服务器里面下载github上面的relase文件，然后解压到随意一个目录 ...

ElForm 里的 ElTree 校验流程123<el-form-item prop="permissionIds"> <el-tree ref="treeRef" show-checkbox node-key="id" :default-expand-all="true" :default-checked-keys="detail.permissionIds" :data="permissionList" :props="treeProps" @check="onPermissionCheck" ></el-tree></el-form-item> img图片1 点击 tree 组件。触发了这些事件。 从 ElCheckBox 开始看起 Che ...

JS Date操作1const weekDay = new Date(date.setDate(1)).getDay() // 这个月的第一天是星期几const monthLen = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate() // 本月一共多少天 获取一周的日期123getDate(offset: number) { const current = new Date(); const weekDay = current.getDay(); const dayMilliseconds = 24 * 60 * 60 * 1000; // 一天多少毫秒 const flagTimestamp = current.setHours(0, 0, 0, 0) + offset * 7 * dayMilliseconds; const dateAry = [...new Array(7).keys()] .map((i: number) => new Date(flagTimestamp ...

Nest JS 权限控制 rabc 0 的一种实现文章更多的是在于记录。有看不懂的评论 2.1 RBAC 0 https://juejin.cn/post/6844904109863075853#heading-3 最简单的用户、角色、权限模型。这里面又包含了2种： 用户和角色是多对一关系，即：一个用户只充当一种角色，一种角色可以有多个用户担当。 用户和角色是多对多关系，即：一个用户可同时充当多种角色，一种角色可以有多个用户担当。 jwt依赖包 @nestjs/jwt passport-jwt 构建 jwt 策略 这是用来对 token 进行处理的。他会在 request jwt.strategy.ts 12345678import { Injectable } from '@nestjs/common';import { ConfigService } from '@nestjs/config';import { PassportStrategy } from '@n ...

Vue defineReactive核心原理 123456789101112function defineReactive(target, key, value) { Object.defineProperty(target, key, { get() { console.log('getter key = ', key) return value }, set(newV) { console.log(`setter ${key} = ${value}`) if (newV === value) return value = newV return value } })} 对于数组和对象有不同的处理方式， 外面套一层 1234567891011function Observer(value) { if (Array.isArray(value)) ...

Vue-Challenges2. ref 全家桶https://github.com/webfansplz/vuejs-challenges/blob/main/questions/2-ref-family/README.zh-CN.md 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061<script setup lang="ts">import { ref, Ref, reactive, isRef, unref, toRef } from "vue"const initial = ref(10)const count = ref(0)// Challenge 1: Update reffunction update(value) { count.value = value}/** * Challenge 2: Ch ...

Web： 一个跨页面动画的 API我目前知道的跨页面动画需要用到 JS。通过 FLIP思想来做。 现在看到了一个新的 API。copy 过来给大家看看https://developer.chrome.com/docs/web-platform/view-transitions/#api-reference Smooth and simple transitions with the View Transitions API Published on Tuesday, August 17, 2021 • Updated on Tuesday, November22, 2022 Jake Archibald Jake Archibald Human boy working on web standards atGoogle Website Twitter This feature was previously called “Shared ElementTransitions”, and is sometimes referred to as “page transitions”. The ...

class-transform 执行两次 debug没有什么技术含量， 只是记录一下过程。 具体问题在这里 [nestjs class-transfrom @Transform execute twice and return null -Stack Overflow](https://stackoverflow.com/questions/75673361/class-transfrom-transform-execute-twice-and-return-null) 1. vscode debug 在这里打一个断点, vscode attach端口。请求对应接口。 vscode会自动中断于断点处 调试 查看调用堆栈。 发现被调用了两次 class-transfrom。 第二次调用的时候是nest 调用的， 但是nest 并没有依赖class-transfrom。所以就想到了是不是做了一层全局的序列化。 到main.ts里面找到了相关代码。 去掉全局序列化就行了。 1app.useGlobalInterceptors(new ClassSerializerInterceptor ...

element scrollBar 使用项目架构 1{ "dependencies": { "element-ui": "^2.4.5", "vue": "^2.6.11", }, "devDependencies": { "@vue/cli-plugin-typescript": "^4.5.0", "typescript": "~3.9.3", }} 定义 ScrollBar组件的 .d.ts123456import type { ElementUIComponent } from 'element-ui/types/component';declare class ElScrollbar extends ElementUIComponent & ...