一枚前端猿-CSDN博客

原创 nodejs http.get 方法可以 request 不行

使用 nodejs 提供的 https.request api 请求。但是发现不管怎么请求都是， socket hang up 意思就是断开了。刚开始一直怀疑是 options 参数里面不对，一直在调，后来用了 https.get 方法，发现可以。搜了一下，原来是 https.request 要添加一个 end 方法，才会发送请求。https.get 方法内其实自带了 end 。因此我们在使用 https.request 时要添加一个 end 。 const request = https.re

2022-02-07 18:40:55 932 1

原创 react 下拉选项自动滚动到可视区域

使用 useRef 和 Element.scrollIntoView 两个 api 即可实现自动滚动。const App = () => { const containerRef = useRef(null); const appleRef = useRef(null); const clickButton = () => { appleRef.current.scrollIntoView(); }; return ( <div> &

2021-07-06 20:13:20 840

原创 koa cluster 使用多进程

koa 使用多进程使用 nodejs 的 koa 框架作为后端服务时，为了充分利用服务器的核数，可以创建与cpu 数量相同的进程数。创建多进程中可以使用 child_process 也可以使用 cluster。但是创建了多个进程后还需要考虑负载均衡。因为 cluster 中自己做了负载均衡的算法： round-robin（新连接由主进程接受，然后由它选择一个可用的 worker 把连接交出去，说白了就是轮转法）所以使用 cluster这里创建进程时，让子进程监听同一端口。可能会问：多个子进程监听同一

2021-05-10 21:56:09 2152

原创 js 实现排列组合

组合：（不考虑顺序，无重复）//测试用例let dataArr = [1, 2, 3, 4, 5];function combination(dataArr, remainNum, currentArr) { if (remainNum === 0) { console.log(...currentArr); return; } for (let i = 0; i < dataArr.length + 1 - remainNum; i++) { curre

2021-04-07 14:22:44 1516

原创自己实现 koa 中间件的 app.use 和 next 函数

下面是我自己简单实现了一下 koa 的中间件运行函数//实现一个 koa 的函数function app() {}app.prototype.ctx = { name: "123",};app.prototype.callBack = [];const next = async function () { this.MiddleWareNum++; if (this.callBack[this.MiddleWareNum]) { await this.callBack

2021-03-28 22:59:04 844

原创前端如何转换 schema 和 xml

最近开发遇到一种场景：1.转换 xml 字符串到 schema ( json 对象)2.或者转换 json 对象到 xml 字符串在 nodejs 中已经有成熟的第三方库： xml2jshttps://www.npmjs.com/package/xml2js但是这个库是用于 nodejs 中的，如何在前端使用会报错。查看源代码发现，这个库中使用了 event 和 timers 这两个 nodejs 自带的库。这在前端是不能使用的。但是由找不到其他前端转换的第三方库解决方法：安装 even

2021-03-22 21:06:37 396

转载 Warning: Instance created by `useForm` is not connect to any Form element. Forget to pass `form` pro

在antd 中使用 form 报错Warning: Instance created by useForm is not connect to any Form element. Forget to pass form prop?解决方法，在 Modal 中添加属性 forceRender

2021-03-02 09:41:09 466

原创源码分析 vue-cli 中安装依赖

最近想要自己实现一个 cli看了 vue-cli 源码中安装依赖的部分源码文件 @vue/cli/lib/util/ProjectPackageManager.js 有一个 install 函数执行了 npm install 或者 yarn install async install () { return await this.runCommand('install', this.needsPeerDepsFix ? ['--legacy-peer-deps'] : []) }下

2021-02-27 17:47:38 350

原创 node 使用 download-git-repo 下载 github 代码

在执行 node 时，需要从 github 下载源码。就找到了网上了有一个库 download-git-repo ，可以用于从 github clone 或者下载代码。download-git-repo 文档 https://www.npmjs.com/package/download-git-repo下面代码用到了 download-git-repo 和 rimraf 两个第三方库npm install download-git-repo rimraf使用 clone 时，路径GitHub

2021-02-22 21:11:39 7048 6

原创 chrome 跨域主域名不同无法跨域携带 cookie samesite问题

背景：最近遇到了一个跨域无法携带 cookie 的问题。即我在前后端设置无误的情况下跨域，可以正常发送请求但是无法携带 cookie。最后经过一番搜索找到了问题的原因，并在此进行记录一下。什么是跨域？跨域是浏览器的一种保护措施。防止一些恶意网站将一些链接以某种形式嵌入在网站中，用户不经意间点击链接，其实就会向链接发送了一个请求。如果请求可以随意携带上 cookie ，那就存在了安全问题，比如使用用户的 cookie 进行一些购物操作等，在用户不知情的情况下进行恶意操作。因此浏览器限制了不同域名的请

2021-02-09 15:27:24 3520

原创从零开始搭建 web 聊天室（一）

本篇将介绍如何快速、简便地使用 socket.io 库搭建一个 web 在线聊天室。前端并没有使用任何框架。后端使用 express 框架搭建简易的后端。socket.io 库本质上是基于 websocket 上进行封装。改变了以往只能前端发送请求，后端才能返回给前端信息，这样的一问一答形式。实现了前后端双向通信，即后端也可以主动 push 信息到前端。websocket 尤其适用于在线聊天或者实时交互的场景。已经广泛用于直播平台、视频平台等。本篇实现：最基本的前后端信息交互。代码地址：https

2020-12-20 20:53:22 5129 4

原创 express 使用 redirect 对 ajax 无效页面不跳转

问题描述：自己在使用 express 的 redirect 时，并不进行跳转操作，但是前端是可以接收到整个后端将要跳转的整个页面的 html已经是301状态码，但是页面不跳转原因：使用 ajax 后，后端无法直接让前端进行页面跳转。需要前端进行状态码和后端返回的数据的判断，然后前端自己进行跳转页面。因为 ajax 是一个完整的请求和回掉的过程，header 头是不会变的。我们以前使用后端来让前端跳转原理是通过给浏览器发送一个特殊的 header 然后进行跳转。而 ajax 不会进行更改 head

2020-12-15 22:52:10 749

原创 express 解析 ajax post 数据 body 为空对象

问题描述：前端使用 jquery 的 ajax 向后端发送 post 数据并携带参数，但是 express 解析的 body 为空对象。代码：使用 express 框架解析前端 post 的数据时var express = require("express");var bodyParser = require("body-parser");var app = express();app.use(bodyParser.urlencoded({ extended: false }));ap

2020-12-14 23:07:07 2497 3

原创 c++中报错预处理器指令后有意外标记 - 应输入换行符

在复制粘贴别人的代码时，运行起来会有报错： warning C4067: 预处理器指令后有意外标记 - 应输入换行符 error LNK2019: 无法解析的外部符号 _main，该符号在函数 "int __cdecl invoke_main(void)" (?invoke_main@@YAHXZ) 中被引用因为中间复制粘贴过程中有一些乱码导致的解决方法：将代码复制到 word 里或者 txt 文件里再粘贴回来就可以正常运行...

2020-12-12 19:20:33 9490 3

原创你不知道的三种在for循环中使用setTimeout的方法

在 for 循环中使用 setTimeout 中可能会出现结果输出不符合预期：for (var i = 0; i < 5; i++) { setTimeout(() => { console.log(i); });}最后的输出结果：55555原因是 var 变量不存在块级作用域，这5次循环中 setTimeout 使用的 i 其实都是一个 i，而setTimeout 异步执行会在 for 循环之后执行。因此 setTimeout 获取的 i 都是最后执行完

2020-11-18 16:51:57 2250 1

原创 javascript 垃圾回收机制--分代式垃圾回收机制

以前对 javascript 的垃圾回收机制没有深入了解过。以为只是简单的标记清除法。即从根对象开始找它的引用，然后依次往后找它引用的引用，依次递归，将所有被引用的变量打上标记。然后在遍历完后，清除没有被标记的变量。具体文章可以参考 mdn：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Memory_Management但是 javascript 中 v8 引擎中的垃圾回收机制比这个要稍微复杂一些。什么是 v8 引擎javascri

2020-11-10 20:52:33 420

原创前端测试 jest 中判断函数由来

jest 中函数如何注入在以前使用 jest 的时候，就很好奇，jest 中判断函数是如何注入到文件中的。因为 test 文件并没有 require 引入所需要的测试的函数。例如：import React from "react";import List from "../List";import { shallow } from "enzyme";describe(`<List>`, () => { it("should render List", () => {

2020-11-10 16:59:58 315

原创 package.json 中的 bin 字段作用

我们在下载 npm 包后，查看 npm 包的 package.json 有些包会有 bin 字段例如我们常用的 webpack-cli 包那么 bin 字段有什么用呢？官方文档链接许多软件包都具有一个或多个要安装到 PATH 中的可执行文件。bin 字段是命令名到本地文件名的映射。在安装时，npm 会将文件符号链接到 prefix/bin 以进行全局安装或./node_modules/.bin/本地安装。当我们使用 npm 或者 yarn 命令安装包时，如果该包的 package.json 文

2020-11-05 19:45:33 9979

原创前端动画优化及性能检测

前端动画优化及性能检测工具使用前端使用动画可以分为两类：css 动画js 动画我们提倡能够使用 css 完成的动画尽量使用 css （即使用 animation 和 keyframes ）。因为处理 css 是浏览器渲染线程，并不会占用 js 线程，也不会被 js 线程所影响。因而会更加流畅。但是 css 动画在复杂的场景下并不能满足需求。一些复杂的动画需要通过 js 进行一些计算。如果使用 js 渲染动画可能会出现因为 js 线程忙于计算其他任务，而迟迟不到下一个事件循环导致动画得不到更新

2020-11-02 00:25:53 733 2

原创 react-native 小米手机和 mac 安装

设备：小米10（android）mac笔记本android studio先跟着 react-native 官网上的教程安装 android studio 和相应的 sdk之类的。之后想使用真机调试。踩坑如下：刚开始没有识别，是因为使用了usb线连在了扩展坞上。可能我买的扩展坞不是很好。之后换了电源上的 typeC to typeC 的线将手机和电脑直接连起来了，就有反应了，提示下载 Android File Transfer for mac 。然后去官网上下载完，手机启用 usb 调试设置文件传输

2020-10-21 11:27:10 236

原创 vue-loader 源码分析

先简介一下 webapck 中 loader 中的工作原理。webpack 是只识别 js 代码的。但是我们写的代码中有很多类型的文件，比如：.vue、.yaml、.json、.css、.tsx 等等这些后缀文件，这些文件都是不被 webpack 所识别的，因此需要在webapck 打包前进行“翻译”。loader 的作用就是“翻译”的作用，将非 js 文件进行转义成 js 代码，然后 webpack 才会识别。废话不多说，下面进入正题。下载 vue-loader 源码：yarn add vue-l

2020-10-19 11:32:55 1248

原创 Error: Cannot find module ‘webpack-cli/bin/config-yargs‘

今天在使用 webpack 创建项目，启动 webpack-dev-server 时，报了错：这个是 package.json 中创建的 scripts ： "scripts": { "start": "webpack-dev-server --config ./config/webpack.common.js " },下面是报错：Error: Cannot find module 'webpack-cli/bin/config-yargs'原因：webpack-cli 升级到了

2020-10-17 20:56:33 1936 1

原创 cookie二级域名和三级域名跨域实践

自己有一个二级域名 www.zlxdsl.cn，然后又绑定了一个三级域名 nice.www.zlxdsl.cn。在服务器端进行了配置，使得二级和三级域名能够分别导向不同的页面。具体的服务器配置是 centos7 apache在httpd.conf中配置 virtualhost<VirtualHost *:80> ServerName nice.www.zlxdsl.cn DocumentRoot "/var/www/nice" <Directory "/var/www/

2020-10-09 17:36:55 2587 2

原创前端多页面通信

原文地址：https://juejin.im/post/6844903811232825357以下仅供自己实践时做的笔记当两个页面同源时：使用 BroadcastChannel先使用express 服务器启动 web 服务器。然后浏览器中打开两个自己 express 的页面。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta na

2020-10-08 20:48:08 442

原创 css绘画扇形

css中绘画半圆形： <div class="semi-sector"></div> .semi-sector { height: 50px; width: 100px; border-radius: 50px 50px 0 0; /* border-radius 要等于圆的半径*/ background-color: red; }css绘画任意角度的扇形：思路：先画一个圆，然后再用 absolute 绝

2020-10-08 16:08:12 5074

原创 js实现promise.all promise.race promise.resolve

最近在准备面试，关于 promise 是面试的热点和考点。不定面试官心情好了就会让你写个 promise 的 api废话不多说，下面是我写的代码，如有不严谨之处希望指出。promise.all当所有 promise 全部 resolve 或者一个 reject 时，返回结果。function myPromiseAll(promiseArr) { let length = promiseArr.length; let resolvedNum = 0; let resultArr = []

2020-10-04 15:32:21 594

原创 ajax请求失败后重连和promiseIfy

记得在找实习时，被问到一个问题。前端发送请求失败后如何重新发送请求。以 ajax 为例： let num = 0; function ajaxReconnection() { $.ajax({ url: "http://localhost:3000", method: "GET", success: (result) => { console.log("这里输出result：", result);

2020-10-04 09:24:47 504

原创简单尝试 express 使用 websocket

node 使用 express 框架先安装 express 和 express-wsyarn add express express-ws服务端 server.jsvar express = require("express");var expressWs = require("express-ws");var app = express();expressWs(app); //将 express 实例上绑定 websock 的一些方法app.ws("/socketTest", fun

2020-10-04 00:18:23 3030

原创前端实现 ul 定位到某个 li 标签处

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <style> .b

2020-09-25 17:48:45 2538

原创 create react app 在start后不清空terminal

在运行 yarn start 或者 npm start 来启动 create-react-app 创建的项目时，会清空 terminal。而我们在进行调试时，往往需要在 webpack 中输出一些信息。但是 start 之后就清空了。解决方法：找到 node_modules/react-dev-utils/clearConsole.js 这个文件'use strict';function clearConsole() { if (process.env.REACT_APP_NO_CLEAR_C

2020-09-20 16:54:37 968

原创 react中使用create-react-app创建项目执行函数两次

React在严格模式下会执行两次render以帮助检查额外的副作用官网链接：https://reactjs.org/docs/strict-mode.html使用create-react-app创建的项目，默认会有StrictMode，删掉就好了

2020-09-10 16:38:36 487

原创 webpack打包html里面img后src为“[object Module]”问题

用 file-loader 中 esModule 默认为 true，把它修改成 false 就可以正常显示图片了 { test: /\.(png|jpg|gif|eot|woff|ttf|svg|webp|PNG)(\?\S*)?$/, use: [ { loader: "file-loader", options: { esModule: false, limit: 10240 } }, ], },...

2020-08-28 10:44:54 312

原创 ERROR in app.js from UglifyJs RangeError: Maximum call stack size exceeded

在使用webpack中的uglify时报错：ERROR in app.js from UglifyJsRangeError: Maximum call stack size exceeded看了一下 github 的 issues。https://github.com/mishoo/UglifyJS2/issues/414这是uglify的问题，因为uglify是递归调用的，当bundle.js文件特别大的时候就会超出栈的范围。解决方法：扩大栈的大小：node --stack_siz

2020-08-28 10:18:03 1115

原创 webpack中Module not found: Error: Can‘t resolve ‘@/pages/home.vue‘ in ‘/Users/Documents/react

在使用 webpack 进行 vue 项目搭建时，引入vue组件时出现了 Module not found 的问题。以前使用 vue-cli 脚手架帮我们配置好了 webpack 的配置。现在需要我们自己配置。先配置 webpack 中的 alias ：module.exports = { resolve: { // 以下配置会将没指定拓展名的文件按如下类型查找匹配 extensions: ["*", ".js", ".vue"], // 设置别名 alias:

2020-08-27 11:48:14 5680

原创 ERROR in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.ttf 1:0 Module parse failed:

在使用 webpack 搭建 vue 项目时，添加了element-ui 在启动 webpack-dev-server 后报错ERROR in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.ttf 1:0Module parse failed: Unexpected character '' (1:0)You may need an appropriate loader to handle this file type, c

2020-08-27 10:59:07 2704

空空如也

空空如也