- 博客(195)
- 收藏
- 关注
RSS订阅
原创 使用Nest.js抽取一个CMS系统模板
技术栈：前端是 antd + react + cra，后端是 nest + typeorm，数据库是 mysql + redis，API 文档用 swagger 生成，部署用 docker compose + pm2，网关使用 nginx。输入守卫 , 输入输出拦截器， 封装context对象，把cookie提取到ctx对象上，输出时，把data封装到一个统一的输出对象上。基于 RBAC 实现权限控制 （ Role Based Access Control，基于角色的权限控制 ）
2024-04-03 11:15:46
604
原创 前端项目代码规范 ----- 配置eslint规范，增加Git工作流规范
另外，在package.json执行 "lint:fix": "prettier --write . && eslint --fix . && stylelint --fix \"**/*.{css,less,scss}\"", 这样的脚本，它会全局扫描怎么办呢？1、 像上面的lint-staged ，在第一层配置了 lint-staged 这个配置， 必然下面会有对应的包。----- 关于 package.json 的一些工程化知识 ----，eslint ，stylelint 这些文件。
2024-03-06 17:00:03
426
原创 ReactNative如何调用自定义的原生模块
在 MainApplication .java文件中， getPackages方法中注册该模块。然后在里面 添加自定义的原生模块。该模块必须实现ReactPackage。在 AppDelegate.m文件 ，
2023-12-07 10:05:35
635
原创 跨端的三种方案原理和对比（WebView，ReactNative，Flutter）
答： 第一代跨平台框架，代表者为：PhoneGap、微信小程序。WebView标签是一种用于在网页中嵌入浏览器窗口的HTML元素。它的底层原理是通过来实现网页的渲染和交互。在Android平台上，WebView使用的是Android系统提供的WebView组件，它基于WebKit引擎。答：因为WebView标签（或叫组件），本质上是原生平台提供的一个组件，对它的优化就不是很好。并且一个完整HTML5页面的展示要经历浏览器控件的三大过程，性能消耗要比原生开发增加N个数量级。这也就导致了很多无用的性能消耗。
2023-12-06 12:01:33
1788
原创 React Swiper.js使用（详细版）3D聚焦特效，自定义导航按钮等
1、 通过直接引入less文件 重新定义 swiper-button-prev等类 或 :global ，自定义导航按钮 / 进度条样式2、 防止冲突，swiper2-button-prev swiper-button-prev 通过在前端定义前缀，避免多个swiper.js使用 navigation={{ nextEl: '.swiper-button-next',top: unset;left: 50%;left: 0px;top: 50%;&::after {
2023-10-26 16:36:09
1732
原创 Vite与WebPack的对比，及解决了什么痛点，及什么是ESM？
ESM的来源与定义ESM是一种规范，这个规范里面包含有一些新的语法和概念，包括`import`和`export`关键字、模块作用域等，是在ES6引入，后逐渐被大部分浏览器所支持。所以，我们通常说的ESM，其实是指构成ESM规范的一系列的JavaScript特性或者API。ESM（ECMAScript Modules）是一种在 JavaScript 中使用模块化编程的标准。浏览器支持 ESM 是通过实现 JavaScript 的内置模块系统来实现的。
2023-04-23 16:10:11
1992
1
原创 个人使用CSDN的意图与文章质量的描述
2、后面会增加更新一些人生感悟的文章。因为，我本人非常喜欢这个csdn，够大够杂乱，编译又方便，非常适合做一个记录的地方。也是一个吐槽的地方，不会有现实的人认识我。1、因为输出文章的初衷是为了记录知识点，所以质量会层次不齐，并且带入很多个人的理解。给读者和自己理解和回看。
2023-04-15 19:16:13
100
原创 Web Components 技术分析
HTML Imports 则允许开发人员以模块化的方式组织和导入 Custom Elements 和 HTML Templates。Shadow DOM 可以让开发人员将样式和行为封装到自定义元素内部，并且不影响其周围的 Web 页面。customElements.define() 方法，将 MyElement 类注册为自定义元素。Custom Elements 可以让开发人员创建自定义的 HTML 标签。HTML Templates 可以存储 HTML 片段，以便在需要时引用。
2023-04-14 19:23:20
446
原创 联邦模块（概述，实战应用，基本原理，未来展望）
联邦模块还是一个比较新的特性，有优点也有缺点。网上的案例也不多，容易在上真正项目踩坑时，需要自己去研究解决。文章写得比较简陋，有许多深入的细节也没有写上，相信作为一篇入门的文章还是可以的。若你对这篇文章有何不懂或者意见，欢迎下方评论，你的意见与指导是我分享的最大动力。
2022-11-07 00:14:14
3400
1
原创 cookie和localstore和sessionstore区别
作为前段工程师，最近有一段面试被问到cookie、sessionStorage和localStorage的之间有什么区别？其实他们都是储存浏览器数据的，一个cookie是随HTTP事务一起被发送的，因此会浪费一部分发送cookie时使用的带宽，一个Web Storage浏览器数据，有分为localStorage和sessionStorage。相同点：cookie、sessionStorage和localStorage都用在客户端存储数据，每一个都有自己的存储和到期限制不同点：一、存储大小c
2021-10-03 12:25:39
3188
原创 Spring 系列
Spring Session 和标准的 HTTP Session 在功能和特点上有许多不同，虽然它们解决的问题领域有很多重叠之处。
2024-07-21 23:53:28
424
原创 Lombok
Lombok 是一个 Java 库，用于减少 Java 中的样板代码（boilerplate code）。通过在 Java 类上使用注解，Lombok 自动生成构造函数、getter、setter、equals、hashCode、toString 方法等。这样可以极大地简化代码，提升开发效率，并提高代码的可读性和可维护性。
2024-07-21 23:50:48
228
原创 linux 或 mac 系统的操作指令
是 "list open files" 的缩写。在 Unix 和类 Unix 操作系统（如Linux和macOS）中，几乎所有的东西都被表示为文件，是强制终止进程的命令。
2024-07-18 17:53:18
299
原创 Redis五大基本数据类型
如果成员已经存在于集合中，则不会重复添加。命令用于返回一个或多个集合的交集，即只返回同时存在于所有指定集合中的成员。有序集合算是Redis中比较特殊的一种数据类型，有序集合里的每个元素都带有一个score属性，通过该score属性进行排序。，类似于`key = {{field, value}, {field, value}}`。: 向有序集合添加一个或多个成员，或者更新已经存在成员的分数。: 根据成员分数从小到大，返回指定区间内的成员。: 根据成员分数从大到小，返回指定区间内的成员。哈希的键值本身是一个。
2024-07-02 15:05:39
379
原创 SQL练习
查询所有同学的学生编号、学生姓名、选课总数、 所选的课分别是 、 所有课程的总成绩。使用 max 是因为这里 是分组查询 GROUP BY ， 应该对数据进行聚合。函数连接所有选过的课程名称，通过指定。来定义课程名称之间的分隔符。确保课程名称按字典顺序排序。确保课程名称的唯一性，
2024-06-13 23:31:01
170
原创 mysql 相关
如果显示 mysqld 1985 username 18u IPv4 0x405f158e91054d89 0t0 TCP localhost:33060 (LISTEN) 证明连接成功。1、 连接报错 public key retrieval is not allowed。因为，mysql驱动有地方没设置为true，导致只允许一个地方连接mysql .2、 mac 笔记本检查mysql 是否启动。
2024-06-12 22:25:24
337
原创 field 在计算机中的意思
1.在数据库中，“field“指的是表中的一个列，它存储了特定类型的数据。例如，在一个学生表中，可能有“姓名”、“年龄”和”成绩”等字段。2.在编程语言中，“field"“是指类或结构体中的一个成员变量，它定义了对象的某个特定属性或状态。例如，在一个表示学生的类中，“姓名“和“年龄”可以是类的字段。3.在计算机图形学中，“field"指的是图像中的一个像素。"field"在计算机中的意思是指某个特定类型的数据存储单元，该单元可以是数据库中的列、编程语言中的成员变量、图像中的像素，或网络通信中的数据包字段。
2024-03-04 13:46:41
408
原创 useEffect 和 useLayoutEffect的区别
useEffect和useLayoutEffect作为组件的副作用，本质上是一样的。共用一套结构来存储effect链表。整体流程上都是先在render阶段，生成effect，并将它们拼接成链表，存到fiber.updateQueue上，最终带到commit阶段被处理。他们彼此的区别只是最终的执行时机不同，一个异步一个同步，这使得useEffect不会阻塞渲染，而useLayoutEffect会阻塞渲染。简单总结： 都是在render函数执行后执行，useLayoutEffect是在DOM渲染阶段前，useE
2024-01-09 13:42:05
557
原创 微前端框架对比，css，js隔离方案对比，跟Ifream对比
参考：聊聊 QianKun JS 沙箱的那些事 - 知乎Web Components 技术分析_mtwebcomponents怎么实现转码的逻辑-CSDN博客介绍 - qiankunMicroApp
2024-01-05 12:22:36
444
原创 React Hook 原理，及如何使用Hook
Q1 ： 为什么 hook 不能在循环，条件或嵌套函数中调用Hook？A1： 因为这跟React的渲染函数和React Hook的实现原理有关，如果在循环，条件或嵌套函数中调用hook，会影响到了React自身记录的Hook顺序，会导致组件状态（值）不一致问题。Q2： 为什么组件内，刷新了一次后，useState 仍然能保持最新的值，而不是回到初始值？
2024-01-05 01:01:09
1194
原创 antd pro 生成的框架的权限控制分析
背景 ：npm i @ant-design/pro-cli -g pro create myapp 生成框架 ， 当我们不登录，直接进入其他页面，它就会退出去登录页面，那么它是如何做的呢？总结： 当在routes对某个路由配置 access字段时，就要对两个位置进行配置（config只要配置一次就不算了） 分别是 access.ts文件，app的getInitState钩子函数。用Umi官网的生成简单框架就够了，请求，路由，layout自己配，根据项目的复杂度再渐进式的去增加功能。
2023-10-30 13:43:06
299
原创 为什么引入SVG文件，给它定义属性不生效原理分析
背景： 我使用antd 的Icon组件引入SVG图片，但给svg图片定义styles样式时，不生效，为什么呢？我们平时用antd组件库的 < ArrowRightOutlined style={{color: 'red '}}>时为什么会生效呢，但我图一这样定义就不生效呢？
2023-10-18 20:39:25
630
原创 css 特别样式记录
这段代码神奇的地方在于， 本来容器的宽度只有1200px，如果不给img赋予宽度100%，那么图片 会超出盒子，如果给了img赋予了宽度100%，多个图片会根据自己图片大小的比例，去分完那1200px，如图二。
2023-10-17 17:13:57
349
原创 总结改变和获取 url 的方法 （包括 umi，react-router，原生）
xxx=aa&yyy=bb 这种形式，并不能供我们正常调用，通常我们可能会用正则进行进一步截取，钩子函数返回动态路由的匹配参数键值对对象；子路由中会集成父路由的动态参数。
2023-10-13 16:07:17
538
原创 useTransition 和 useDeferredValue 初体验
例如用户点击一个选项卡，但改变了主意并点击另一个选项卡，他们可以在不等待第一个重新渲染完成的情况下完成操作。
2023-09-12 18:59:26
691
原创 如何更改node版本？
nvm use 14.14.0 # 切换为 v14.14.0。nvm install 14.14.0 # 安装 v14.14.0。node -v # 查看 切换是否成功。
2023-09-10 02:05:15
171
原创 大文件并发上传（前端）
后面客户端每次上传时，把文件hash拿去后端匹配下，看之前是否上传过，如果是，返回分片的index，就知道上次传到哪一片了。如何实现：给整个文件做个hash，传每一个分片的时候，把文件名hash传上。可继续优化的点（ 百G时）： 增加Web Worker 线程 计算单独切片。做断电功能才需要下面的优化： ，用于计算hash，当文件大时。简单实现大文件上传比较详细的文章，记录一下。缺点是： 没有断点续流功能。
2023-09-06 23:18:25
390
原创 mobx和redux的区别？如何选择？
Redux通常适用于大型应用程序，而MobX更适合小到中型应用程序，这是因为它们在设计理念和使用方式上有一些区别，这些区别在不同规模和复杂度的应用中产生了影响： 下面是在MobX中直接修改状态的示例： 下面是在redux中直接修改状态的示例：Redux知识点总结_initialstate redux_一路向阳~负责的男人的博客-CSDN博客
2023-09-05 18:40:35
689
原创 Docker 使用归纳总结 （进行时）
用本地目录作为数据卷挂载到容器的 /var/lib/mysql 目录，这个是 mysql 保存数据的目录。在 windows 下就是 D://xxx/xx 的形式。（另一个 33060 端口是 mysql8 新加的管理 mysql server 的端口，这里用不到）通过 Docker Desktop 查询下 MySQL 的镜像：（需要科学上网），pull下来后。如果我们不加这个环境变量，直接运行容器，会发现容器会这样提示，还是要你输入这个变量值。
2023-08-21 00:36:07
103
原创 nest的核心概念
Nest 的实现原理就是通过装饰器给 class 或者对象添加元数据，然后初始化的时候取出这些元数据，进行依赖的分析，然后创建对应的实例对象就可以了。Nest框架是一个基于Node.js的框架，它使用了TypeScript来提供强类型支持，并将类型定义与代码编译紧密结合。不知道大家有没有感觉很神奇，只是通过装饰器声明了一下，然后启动 Nest 应用，这时候对象就给创建好了，依赖也给注入了。请求进来 --- 中间件 --- 守卫 --- 拦截器 --- 通道 --- 处理（con。
2023-07-30 17:39:12
292
原创 微信（支付）二维码的生成（前端方向）
2、生成完二维码后，一直轮询后端，把第二个字段 订单号/token带上，后端返回状态确认是否已经扫了二维码，或者支付是否成功。后端通过 签名 app id 等 调用微信的api生成 二维码，然后发给前端。前端一直轮询，等后端接收到了微信发过来的扫码成功信息后，给前端返回已扫码等信息。然后通过 QR url 生成 QR code（二维码），用某个库去生成。全栈的微信（支付，登录）二维码的数据流是怎样的呢？可以去看微信的开发者文档。1、发起请求，获取微信二维码的 QR code。以csdn的微信登录为例子。
2023-06-13 02:09:59
1491
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人