webfront

AntV G2理念：的空间通道与非空间通道、编码映射与图例配置

https://www.zhoulujun.cn — 2025-12-20 21:48:26

我为什么从echarts叛变到antV G2，是因为我被其洗脑：有被称为可视化圣经的《The Grammar of Graphics》作理论支撑，将可视化理论与web

AntV G2 的 transform.fold（宽表 → 窄表转换）

https://www.zhoulujun.cn — 2025-12-11 17:16:25

数据库层面：什么是窄表？什么是宽表？在数据库中，窄表和宽表是两种设计思想，分别指的是列数少或者列数多的表格。窄表是指只包含少量列（

数据可视化BI宽表到窄表转换方案探索：如AntV G2 transform.fold

https://www.zhoulujun.cn — 2025-12-11 17:25:47

我们一般直接slelect * form xx_table 查询出来直接表格展示没有问题，但是希望用折线图、柱状图等图表形式展示，就需要转换。当然，我们用UNION ALL VALUES 去改变输出，但是如果纯前端呢？用图表数据集自带的transform也是方式之一

DI框架的依赖解析本质：从JavaSpring到NestJS看DI实践

https://www.zhoulujun.cn — 2025-12-05 15:59:43

几乎所有现代框架（Spring Boot、ASP NET Core、NestJS、Laravel、Quarkus、Micronaut 等）都把 DI 作为一等公民，正是因为它是从根本上提升软件可维护性的基石。“不要在类内部创建依赖，而是让外部把依赖传进来”。

Nestjs AOP：adapters decorators filters guards intercreptors pipes

https://www.zhoulujun.cn — 2025-12-03 17:27:34

NestJS 的架构本质：基于 AOP（面向切面编程）和依赖注入，通过 “关注点分离” 构建分层、可扩展的服务端框架。这些组件围绕HTTP 请

Chrome devtool请求API替换,charles与fiddler不香了？

https://www.zhoulujun.cn — 2025-10-11 19:40:05

我们产品上线，发想的bug，希望在本地调试，如果直接导入数据来测试，肯定很烦！所以我们一般直接替换接口或者做接口映射来调试，特别是前

对比react-beautiful-dnd,react-sortable-hoc,react-dnd,pragmatic-drag-and-drop

https://www.zhoulujun.cn — 2025-09-21 22:12:56

就我个人而已，更加喜欢dnd-kit，因为现代化设计，灵活性第一。支持移动端，交互可以完全定制。但是，作为企业级的@atlaskit pragmatic-drag-and-drop（Atlassian 新一代拖拽方案，替代 react-beautiful-dnd）

typescript从类型推断到类型断言、类型守卫

https://www.zhoulujun.cn — 2020-02-12 10:52:00

TS类型魔法类型推断：类型推断就是TypeScript会根据上下文自动帮我们推算出变量或方法的类型，比如：letflag; 推断为any类型断言：有些情

nestjs基于Fastify平台，接入JWT用户登录认证避坑指北

https://www.zhoulujun.cn — 2025-04-14 09:53:22

nestjs常用的passport是基于express 框架，

mysql主键id/uid抉择：从 UUID 到 UUIDv7演化之路

https://www.zhoulujun.cn — 2022-02-25 13:22:00

直接让id主键存储 uid 字符串，或者使用直接把id 改为uid，是否ok呢？user_auto_key,user_uuid,user_random_key 又有何区别呢？

nestjs如实连接mysql，并使用TypeORM

https://www.zhoulujun.cn — 2025-04-11 14:46:39

nestjs使用msyql案例与nestjs使用TypeORM连接mysql使用案例，参考配置

nestjs使用swagger生成文档：装饰器使用总结

https://www.zhoulujun.cn — 2022-02-22 14:38:00

swagg使用起来很简单constapp=awaitNestFactory create(AppModule,newFastifyAdapter(),);constconfig=newDocumen

class-transformer用法/装饰器总结

https://www.zhoulujun.cn — 2022-02-17 14:18:00

默认情况（无特殊配置）：不加 @Expose，属性默认会返回给前端，除非显式用 @Exclude 排除！启用 excludeExtraneousValues: true 时：必须加 @Expose，否则属性不会返回给前端。

react18/19渲染优化

https://www.zhoulujun.cn — 2025-03-13 11:39:51

草稿中………………参考文章：【React Hooks原理 - useTransition】 https: blog csdn net weixin_44273311 article details 14071862

react19走起！无Signal，坚守不可变数据与单向数据流！

https://www.zhoulujun.cn — 2025-03-03 09:40:57

React推崇的是不可变数据和单向数据流，强调组件的纯函数特性，这样虽然可能在性能上有损耗，但代码更可预测，易于调试。react坚守不可变数据与单向数据流，核心在于调试和并发渲染！

Remix全栈框架React Router v7

https://www.zhoulujun.cn — 2025-02-27 09:32:40

React 18 引入了并发渲染（Concurrent Rendering），这一特性极大地提升了应用的性能和用户体验。然而，React 18 也带来了许多新的挑

puppeteer生成pdf文件分页如何优化：css page-break

https://www.zhoulujun.cn — 2021-09-24 17:20:00

用puppeteer将html文件转成pdf，生成文件分页不尽人意，甚至但直接从一行文本中间分开，如何优化呢？很多时候，我希望分页有我自己的控制，

敏捷项目管理框架Scrum:对比TSP角色和职责

https://www.zhoulujun.cn — 2023-05-17 16:46:00

如今在神州，普通宣传敏捷开发，具体参看《开发模型的理解：瀑布模型增量式迭代敏捷开发——笔记》scrum团队管理Scrum 采用最多（自认

Puppeteer截图/生成PDF乱码：alpine linux中文字体如何解决？

https://www.zhoulujun.cn — 2025-01-26 17:07:19

Puppeteer在生成PDF与截图的时候，发现中文全身乱码。中文好了，繁体是乱码是因为linux上，默认没有中文字体支持，特别是像alpine这种魔改

Puppeteer set LocalStorage/SessionStorage

https://www.zhoulujun.cn — 2025-01-26 16:04:05

Puppeteer设置cookie 有官方的方法，参考《Puppeteer setCookie设置踩坑》但是，我们现在很多设置在localstorage与sessionstorage里面，