自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(189)
  • 收藏
  • 关注

原创 使用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 568

原创 前端项目代码规范 ----- 配置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 380

原创 ReactNative如何调用自定义的原生模块

在 MainApplication .java文件中, getPackages方法中注册该模块。然后在里面 添加自定义的原生模块。该模块必须实现ReactPackage。在 AppDelegate.m文件 ,

2023-12-07 10:05:35 589

原创 跨端的三种方案原理和对比(WebView,ReactNative,Flutter)

答: 第一代跨平台框架,代表者为:PhoneGap、微信小程序。WebView标签是一种用于在网页中嵌入浏览器窗口的HTML元素。它的底层原理是通过来实现网页的渲染和交互。在Android平台上,WebView使用的是Android系统提供的WebView组件,它基于WebKit引擎。答:因为WebView标签(或叫组件),本质上是原生平台提供的一个组件,对它的优化就不是很好。并且一个完整HTML5页面的展示要经历浏览器控件的三大过程,性能消耗要比原生开发增加N个数量级。这也就导致了很多无用的性能消耗。

2023-12-06 12:01:33 1582

原创 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 1534

原创 Vite与WebPack的对比,及解决了什么痛点,及什么是ESM?

ESM的来源与定义ESM是一种规范,这个规范里面包含有一些新的语法和概念,包括`import`和`export`关键字、模块作用域等,是在ES6引入,后逐渐被大部分浏览器所支持。所以,我们通常说的ESM,其实是指构成ESM规范的一系列的JavaScript特性或者API。ESM(ECMAScript Modules)是一种在 JavaScript 中使用模块化编程的标准。浏览器支持 ESM 是通过实现 JavaScript 的内置模块系统来实现的。

2023-04-23 16:10:11 1869 1

原创 个人使用CSDN的意图与文章质量的描述

2、后面会增加更新一些人生感悟的文章。因为,我本人非常喜欢这个csdn,够大够杂乱,编译又方便,非常适合做一个记录的地方。也是一个吐槽的地方,不会有现实的人认识我。1、因为输出文章的初衷是为了记录知识点,所以质量会层次不齐,并且带入很多个人的理解。给读者和自己理解和回看。

2023-04-15 19:16:13 94

原创 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 405

原创 枚举字典 管理(JS TS 前端)

【代码】枚举字典 管理。

2023-02-13 21:25:54 357

原创 联邦模块(概述,实战应用,基本原理,未来展望)

联邦模块还是一个比较新的特性,有优点也有缺点。网上的案例也不多,容易在上真正项目踩坑时,需要自己去研究解决。文章写得比较简陋,有许多深入的细节也没有写上,相信作为一篇入门的文章还是可以的。若你对这篇文章有何不懂或者意见,欢迎下方评论,你的意见与指导是我分享的最大动力。

2022-11-07 00:14:14 2839 1

原创 cookie和localstore和sessionstore区别

作为前段工程师,最近有一段面试被问到cookie、sessionStorage和localStorage的之间有什么区别?其实他们都是储存浏览器数据的,一个cookie是随HTTP事务一起被发送的,因此会浪费一部分发送cookie时使用的带宽,一个Web Storage浏览器数据,有分为localStorage和sessionStorage。相同点:cookie、sessionStorage和localStorage都用在客户端存储数据,每一个都有自己的存储和到期限制不同点:一、存储大小c

2021-10-03 12:25:39 3029

原创 field 在计算机中的意思

1.在数据库中,“field“指的是表中的一个列,它存储了特定类型的数据。例如,在一个学生表中,可能有“姓名”、“年龄”和”成绩”等字段。2.在编程语言中,“field"“是指类或结构体中的一个成员变量,它定义了对象的某个特定属性或状态。例如,在一个表示学生的类中,“姓名“和“年龄”可以是类的字段。3.在计算机图形学中,“field"指的是图像中的一个像素。"field"在计算机中的意思是指某个特定类型的数据存储单元,该单元可以是数据库中的列、编程语言中的成员变量、图像中的像素,或网络通信中的数据包字段。

2024-03-04 13:46:41 290

原创 即时通讯系统 — Go基础版

构建基础Server。

2024-02-25 17:26:53 449

原创 GO语言基础总结

多态: 定义一个父类的指针(接口),然后把指针指向子类的实例,再调用这个父类的指针,然后子类的方法被调用了,这就是多态现象。

2024-02-23 18:17:03 235

原创 React底层原理分析(简单大白话版本)

diff算法深度优先遍历堆排序链表,栈操作react合成事件。

2024-01-16 14:05:51 1370

原创 useEffect 和 useLayoutEffect的区别

useEffect和useLayoutEffect作为组件的副作用,本质上是一样的。共用一套结构来存储effect链表。整体流程上都是先在render阶段,生成effect,并将它们拼接成链表,存到fiber.updateQueue上,最终带到commit阶段被处理。他们彼此的区别只是最终的执行时机不同,一个异步一个同步,这使得useEffect不会阻塞渲染,而useLayoutEffect会阻塞渲染。简单总结: 都是在render函数执行后执行,useLayoutEffect是在DOM渲染阶段前,useE

2024-01-09 13:42:05 530

原创 微前端框架对比,css,js隔离方案对比,跟Ifream对比

参考:聊聊 QianKun JS 沙箱的那些事 - 知乎Web Components 技术分析_mtwebcomponents怎么实现转码的逻辑-CSDN博客介绍 - qiankunMicroApp

2024-01-05 12:22:36 425

原创 React Hook 原理,及如何使用Hook

Q1 : 为什么 hook 不能在循环,条件或嵌套函数中调用Hook?A1: 因为这跟React的渲染函数和React Hook的实现原理有关,如果在循环,条件或嵌套函数中调用hook,会影响到了React自身记录的Hook顺序,会导致组件状态(值)不一致问题。Q2: 为什么组件内,刷新了一次后,useState 仍然能保持最新的值,而不是回到初始值?

2024-01-05 01:01:09 1131

原创 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 254

原创 为什么引入SVG文件,给它定义属性不生效原理分析

背景: 我使用antd 的Icon组件引入SVG图片,但给svg图片定义styles样式时,不生效,为什么呢?我们平时用antd组件库的 < ArrowRightOutlined style={{color: 'red '}}>时为什么会生效呢,但我图一这样定义就不生效呢?

2023-10-18 20:39:25 566

原创 css 特别样式记录

这段代码神奇的地方在于, 本来容器的宽度只有1200px,如果不给img赋予宽度100%,那么图片 会超出盒子,如果给了img赋予了宽度100%,多个图片会根据自己图片大小的比例,去分完那1200px,如图二。

2023-10-17 17:13:57 343

原创 总结改变和获取 url 的方法 (包括 umi,react-router,原生)

xxx=aa&yyy=bb 这种形式,并不能供我们正常调用,通常我们可能会用正则进行进一步截取,钩子函数返回动态路由的匹配参数键值对对象;子路由中会集成父路由的动态参数。

2023-10-13 16:07:17 452

原创 常用设计模式总结 + 实例

【代码】常用设计模式总结 + 实例。

2023-09-17 00:37:50 223

原创 useTransition 和 useDeferredValue 初体验

例如用户点击一个选项卡,但改变了主意并点击另一个选项卡,他们可以在不等待第一个重新渲染完成的情况下完成操作。

2023-09-12 18:59:26 448

原创 如何更改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 159

原创 大文件并发上传(前端)

后面客户端每次上传时,把文件hash拿去后端匹配下,看之前是否上传过,如果是,返回分片的index,就知道上次传到哪一片了。如何实现:给整个文件做个hash,传每一个分片的时候,把文件名hash传上。可继续优化的点( 百G时): 增加Web Worker 线程 计算单独切片。做断电功能才需要下面的优化: ,用于计算hash,当文件大时。简单实现大文件上传比较详细的文章,记录一下。缺点是: 没有断点续流功能。

2023-09-06 23:18:25 372

原创 mobx和redux的区别?如何选择?

Redux通常适用于大型应用程序,而MobX更适合小到中型应用程序,这是因为它们在设计理念和使用方式上有一些区别,这些区别在不同规模和复杂度的应用中产生了影响: 下面是在MobX中直接修改状态的示例: 下面是在redux中直接修改状态的示例:Redux知识点总结_initialstate redux_一路向阳~负责的男人的博客-CSDN博客

2023-09-05 18:40:35 569

原创 Egg知识点总结 (待写)

待写。

2023-08-30 07:36:17 63

原创 Docker 使用归纳总结 (进行时)

用本地目录作为数据卷挂载到容器的 /var/lib/mysql 目录,这个是 mysql 保存数据的目录。在 windows 下就是 D://xxx/xx 的形式。(另一个 33060 端口是 mysql8 新加的管理 mysql server 的端口,这里用不到)通过 Docker Desktop 查询下 MySQL 的镜像:(需要科学上网),pull下来后。如果我们不加这个环境变量,直接运行容器,会发现容器会这样提示,还是要你输入这个变量值。

2023-08-21 00:36:07 96

原创 ES6 类的语法

总结:1、2、

2023-08-11 18:17:13 40

原创 nest的核心概念

Nest 的实现原理就是通过装饰器给 class 或者对象添加元数据,然后初始化的时候取出这些元数据,进行依赖的分析,然后创建对应的实例对象就可以了。Nest框架是一个基于Node.js的框架,它使用了TypeScript来提供强类型支持,并将类型定义与代码编译紧密结合。不知道大家有没有感觉很神奇,只是通过装饰器声明了一下,然后启动 Nest 应用,这时候对象就给创建好了,依赖也给注入了。请求进来 --- 中间件 --- 守卫 --- 拦截器 --- 通道 --- 处理(con。

2023-07-30 17:39:12 246

原创 微信(支付)二维码的生成(前端方向)

2、生成完二维码后,一直轮询后端,把第二个字段 订单号/token带上,后端返回状态确认是否已经扫了二维码,或者支付是否成功。后端通过 签名 app id 等 调用微信的api生成 二维码,然后发给前端。前端一直轮询,等后端接收到了微信发过来的扫码成功信息后,给前端返回已扫码等信息。然后通过 QR url 生成 QR code(二维码),用某个库去生成。全栈的微信(支付,登录)二维码的数据流是怎样的呢?可以去看微信的开发者文档。1、发起请求,获取微信二维码的 QR code。以csdn的微信登录为例子。

2023-06-13 02:09:59 1363

原创 支付密码输入框 (react + antd)

【代码】支付密码输入框 (react + antd)

2023-06-12 17:22:37 424

原创 写一个滑块组件

【代码】写一个滑块组件。

2023-04-19 14:54:07 139

原创 webpack Proxy原理 和 跨域的解决方案

跨域的产生:详细的就不写了,就单纯写为什么下面的案例会跨域,假如 3001端口请求3000端口段都的资源,就会产生跨域。跨域的产生是浏览器的问题(安全策略),所以,配置proxy也必然是针对浏览器的。配置proxy就能解决,是因为,增加一层 中间服务器,把请求发给中间服务器,服务器帮你发给 3000端口,当接收到3000端口返回数据后,中间服务器再帮发给3000端口。跟webpack的一样。webpack: 就是上面的。

2023-04-15 20:13:17 1006

原创 mobx 比较完整的运用

老是忘记,这里顺便记一下,如何初始化一个 mobx的子store,数据对应上面的内容。老是忘记,这里顺便记一下,如何初始化一个 mobx的store,数据对应上面的内容。

2023-03-11 19:58:23 178

原创 前端纯函数和副作用概念,且在react上的体现详解

副作用是在计算结果的过程中,系统状态的一种变化,或者与外部世界进行的可观察的交互。个人理解:导致这个函数相同的输入,会产生不一样的输出,就是副作用//纯的在不纯的版本中,checkAge的结果将取决于minimum这个可变变量的值。换句话说,全局作用域下的minimum改变之后,会影响checkAge的结果。在纯的版本中,minimum值被限定在函数作用域中,外部无法直接修改,所以函数结果只会和参数age有关。

2023-02-27 12:42:35 698

原创 react native 路由组件(prop)类型定义

【代码】react native 路由组件(prop)类型定义。

2023-02-16 15:28:24 181

原创 base64编码 和 url编码

因为 url里 / +?这些具有特殊意思,所以不能直接base64编码,因此,发明了url编码,又叫百分号编码。我们的url 通常会看到一大堆 %2014%3A47%3A00 , 那这些代表什么意思呢?

2023-02-14 14:56:04 99

原创 axios 请求类型接口 如何写

【代码】axios 请求类型接口 如何写。

2023-02-13 20:19:51 68

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除