API签名实现无登录鉴权

分类：前端开发,笔记碎片2023-06-19阅读：(2202)标签：none

在一些业务需求中，我们可能会遇到一些免登录的接口请求，但这些接口又是不能随便哪个都能请求的。为了安全，通常API采用请求数据附带签名的方式来校验请求是否合法。实现原理：前后端双方共同约定一个签名的加密方式，前端按约定的签名加密方式组装签名内容，再加密，最后在请求的时候把加密的签名连同接口请求数据一起发送给后端。后端也按约定的签名加密方式生成一个同样的加密签名，然后把生成的签名和前端请求带过来...

大文件切片上传

分类：前端开发2023-06-19阅读：(2149)标签：javascript, nodejs

大文件上传我们在开发过程中遇到上传文件的时候，如果文件比较大，就发现上传很慢，还经常上传失败，失败的原因是超时。因为我们的请求有设置超时时长，超过这个时间如果接口还没有返回结果，这次请求就会因超时失败。解决思路将文件切片，分割成多个小文件上传，前端都上传完后通知服务端，在服务端再把所有切片合并成一个文件。服务端接收到的切片文件那么多，要怎么区分并把同一个文件的所有切片合并起来呢？通过文件命名...

React 18 新特性

分类：前端开发2023-06-19阅读：(2480)标签：javascript, react

React 18 新特性React 18是React框架的最新版本，引入了一些新的特性和改进。以下是一些主要的特性：渐进式升级：React 18采取了渐进式升级的方式，允许开发者逐步采用新特性而不需要一次性重写整个应用程序。这种灵活性使得在现有项目中引入React 18变得更加容易。React Server Components（服务器组件）：这是React 18最引人注目的新特性之一。服务...

React useEffect的使用

分类：前端开发2023-06-19阅读：(1873)标签：javascript, react

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。熟悉Class类组件的生命周期的话，我们可以理解为useEffect就是componentDidMount, componentDidUpdate和componentWillUnMount这三个生命周期函数的组合；useEffect是组件第一次渲染和每次更新...

踩坑React Hooks闭包问题

分类：前端开发2023-06-19阅读：(1981)标签：javascript

情景回顾：订单列表统计数量的展示是通过websocket推送的数据来展示的。将随送的数量经过计算后用redux存到store里。问题出现在第一次推送订单数量后不会展示，刷新一下页面才展示。经过打断点排查，发现每次从props里拿的计算好的订单数量都是0。似乎props里订单数量没有更新。但store里明明是更新了的。看了下代码，感觉问题估计出在闭包问题上。useEffect(()=>{...

PC端canvas绘制签名

分类：前端开发2023-06-19阅读：(1720)标签：javascript, canvas

在PC端用canvas绘制签名，主要就是用鼠标绘制笔迹，生成图片上传，用到mouse事件和File对象。笔迹的绘制，我们需要考虑的点就是线条的粗细，锯齿问题。如果对PS熟悉，我们就知道，圆角放大到像素点后，就会看到还是有很多的小锯齿，只是这些小锯齿有的透明，有的半透明。缩小后看起来就是比较圆润流畅的。对此，我们可以通过对canvas线条添加少量的阴影来模拟处理边缘的半透明锯齿，以此达到笔迹路...

div在contenteditable可编辑状态下去掉粘贴内容样式

分类：前端开发2023-02-02阅读：(3924)标签：none

HTML里除了input，textarea可以输入内容外，div在添加了 contenteditable="true" 后也具有编辑功能，而且还支持样式渲染。也正是由于div可编辑状态下也支持样式的渲染，当我们复制了一段文本内容要粘贴到div编辑框里的时候，会发现粘贴的内容会带样式，检查元素也会看到div里有多余的带样式的标签。即使看似复制的是纯文本，粘贴进去的内容也会有...

js实现本地图片预览

分类：前端开发2022-11-10阅读：(2426)标签：javascript

在上传图片的时候，通常想在本地先预览一下，看看选择的图片有没有问题，没问题再上传到服务器，避免服务器上产生冗余的文件，浪费资源。本地图片预览，可以通过window.URL.createObjectURL(file) 或者 FileReader来实现 ，随着浏览器的不断升级及标准更新，各主流浏览器也都支持这两个API了。URL.createObjectURL()URL.createObject...

react额外的Hooks: useMemo和useCallback

分类：前端开发2022-09-02阅读：(2808)标签：javascript, react

平时在用Hooks写react组件时，最常用的就是 useSate, useEffect, useRef。还有一些不常用的Hooks也需要熟悉，在优化提高渲染效率的时候有用。useMemoconst memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);返回一个 memoized 值。把“创建”函数和依赖项...

js九宫格抽奖

分类：前端开发2022-08-10阅读：(2537)标签：js

H5营销活动常用抽奖功能，通常为转盘或九宫格的方式。可以通过配置来设置奖品及奖品中奖概率。流程为前端展示动效交互，在点击开始抽奖后，转盘开始转起来，同时请求后端接口获取奖品结果，再根据结果调整转盘转动到具体位置。示例为简单H5九宫格抽奖。 <div class="container"> <p>九宫格抽奖</p> ...