为什么只这一个接口502呢？
前言前几天遇到了一个没见过的bug，在此记录一下。前几天，新写了一个页面，里面有get请求、json参数的post请求、form参数的post请求，然后把这个项目打包出来的dist放入node中。更新到线上以后，发现仅有json参数的post请求出现nginx 502报错，其他接口都正常。 解决问题的思路刚开始搜索了一下nginx 502，没发现什么有用信息。 首先是发现其他get接口都正常，点击按钮时这个post接口报错，当时就有点懵。然后检查了同一个项目另一个post接口，发现另一个post接口也正常。所以，推理得json类型参数的post请求有问题。 本地环境，这个json参数的请求没问题，测试环境是用dist+nginx部署的，这个请求也没问题。线上环境是dist+node部署，所以就定位到了http-proxy-middleware这个库。 在node+dist项目中，如果接口就是这个node的就不用代理了，但如果前端代码中请求了别的项目的接口，就需要用http-proxy-middleware添加代理配置。 搜索http-proxy-middleware...
一个看起来只有2个字长度却有8的字符串引起的bug
前言我们有一个需求，用户的昵称如果长度超过6就截取前6个字符并显示…。今天，测试突然提了一个bug，某个用户的昵称只显示了…，鼠标hover的时候又显示2个字的昵称。刚看到这个问题的时候我也是一头雾水。 找出原因在看到这个现象后，我发现其他昵称都显示正常，但实在摸不着头脑这到底是怎么回事。然后查看了一下其他2个字的昵称是没问题的，然后通过console.log发现这个昵称居然长度有8，走了截取的分支。然后通过google发现这里面应该包含了零宽字符。其实，第一时间就应该想到这个字符串不对劲的，但完全忘记了零宽字符的存在，走了不少弯路。 在查找的过程中发现，Array.from可以查看字符串的真实长度，除了emoji。 不过Array.from并不能解决我的问题。 使用正则匹配unicode码点过滤零宽字符在网上找了个方法来过滤掉这些看不见的字符，最常见的解决方案就是下面这行代码。 1str.replace(/[\u200b-\u200f\uFEFF\u202a-\u202e]/g,...
canvas之measureText测量文本
前言这篇文章讲的是关于canvas的一个方法：measureText，这个方法接受一个字符串参数，返回关于这个字符串的宽度和水平线到顶部或底部的距离等等。主要涉及的知识点有：获取文本宽度、文本在垂直方向的对齐方式、基线、行高。 获取字符串宽度1234567<canvas id="canvas" width="200" height="200"></canvas><script> const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); context.font = '16px Microsoft YaHei'; ...
第一次开发node接口-干货总结
技术栈：node + express + mongoosegit地址，可直接使用。 nodemon 热更新使用nodemon启动项目，可以在修改代码时不用重新启动。 12// 安装npm i nodemon 安装之后，修改启动命令， 123456// package.json{ "scripts": { "start": "nodemon index.js" }} 中间件body-parserbody-parser解析请求参数，使我们可以通过req.body.xx访问参数。 123// index.jsvar bodyParser = require('body-parser');app.use(bodyParser.json()); cookie-parsercookie-parser解析请求携带的cookie，使我们可以通过req.cookies访问cookie。 1const email =...
从0到1实现一个npm库
项目的目录结构首先创建一个空项目， 12npm create vue@lastestnpm i 然后把components从src中挪到根目录下，把src改名为examples，修改index.html中main.ts的路径。具体的项目结构如下所示： components examples node_modules public index.html package.json vite.config.ts 导出组件在components/index.ts中定义导出的组件。以下代码是导出单个组件， 123456789101112// components/index.tsimport { App } from 'vue';import MyButton from './Button';const MyButtonPlugin = { install: (app: App) => { app.component('MyButton', MyButton); ...
我的第一篇源码阅读之fetch-event-source
前言终于遇到一个简单的库来学习它的源码了。这个项目只有2个主要文件，代码加起来不到500行，是真的很mini了。客户端向服务端发起请求用xhr或fetch，客户端与服务端双向通信用websocket，而服务端主动发起请求用sse。chatGPT就是用sse回复提问的。window中有一个叫EventSource的构造函数。一个EventSource实例会对服务器开启一个持久化的连接，以text/event-stream格式发送事件，此连接会一直保持开启直到通过调用EventSource.close()关闭。但使用EventSource时只能把参数加到url后面，而且也不能像fetch请求那样设置header等参数。借助fetch-event-source这个库就可以像发起fetch请求一样发起服务器单向通信请求。 目录结构 入口文件index.ts是入口文件，里面只有2行代码，导出了fetch.ts和parse.ts中部分变量和方法。 12export { fetchEventSource, FetchEventSourceInit,...
用canvas实现一个简单的画板
1.画板的功能 修改画笔颜色； 修改画笔粗细； 橡皮擦； 重置画板； 撤销上一步； 保存成图片； 2.所需知识Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。ctx.moveTo(x, y) 将一个新的子路径的起始点移动到(x，y)坐标ctx.lineTo(x, y) 使用直线连接子路径的终点到x，y坐标 3.一步步实现第一步，实现基本功能，可以画出来鼠标路径；12345678910111213141516171819202122232425262728293031323334353637383940414243444546<canvas id="myCanvas" width="400" height="400"></canvas>class Board { constructor(id) { this.canvas = document.getElementById(id); ...
.png)
element-plus自动按需引入
前言：使用unplugin-vue-components后，可以实现按需引入，而且也不用再使用import引入需要的组件，直接使用<el-button>等组件就可以。 1.安装npm包1npm i unplugin-vue-components unplugin-auto-import -D 2.配置vue.config.js（这里是vuecli配置方法，其他脚手架需要参考文档） 12345678910111213141516const AutoImport = require('unplugin-auto-import/webpack')const Components = require('unplugin-vue-components/webpack')const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')module.exports =...
服务端主动推送消息Server-client events(SSE)
前言众所周知，用http可以实现从客户端请求服务端的消息，用websocket可以实现客户端和服务器的双向通信，但用SSE实现服务端主动推送的比较少。SSE相当于http的优点是可以由服务端主动推送消息。SSE相当于websocket的优点是断开连接后可以自动重连。 使用场景 消息统一推送 数据实时更新 代替轮询 使用方法node的话，可以用阮老师的例子node实现SSE python可以参考下面的代码 12345678910111213141516171819202122232425262728from flask import Flask, Responseimport timeimport jsonapp = Flask(__name__)def message_to_send(): time.sleep(5) return json.dumps({"message": "hello"})@app.route("/stream")def stream(): def...
刮刮乐效果原来如此简单
1.刮刮乐（橡皮擦）效果的核心apictx.globalCompositeOperation = type; 设置要在绘制新形状时应用的合成操作的类型。我们这里需要用到的类型是 destination-out此属性的详细信息：MDN文档 2.基础版刮刮乐功能canvs 覆盖在图片上 <style> body { margin: 0; } img { width: 400px; height: 300px; left: 200px; position: absolute; z-index: -1; } canvas { margin-left: 200px; } </style> ...
