随笔

使用node.js的process内置模块和fs文件模块创建了建议的命令行工具，能快速创建私人定制的h5项目(使用rem适配 + zepto.js + swiper.js + h5兼容代码)

js

技巧

• 对象合并技巧

  若字段相等则会都被后一个的值覆盖

  • Object.assign(obj1, obj2)参数为简单类型则深拷贝，引用类型则浅拷贝。
  • {...obj1, ...obj2}

• 数组转对象:

  • {...arr}

  • for(var key in arr){obj[key] = arr[key]}

• 深拷贝

  • 判断类型+创建空数据递归赋值(还是最靠谱)
  • JSON.parse(JSON.strighfy(obj)) ,若元素有函数等非JSON格式对象，如正则、Error、NaN，则会丢失或出错，Data类型会成为字符串

• 浅拷贝,除直接赋值外。元素为简单类型则深拷贝，引用类型则浅拷贝,本质上还是浅拷贝

  • 对象可用{...obj}，
  • 数组可用[...arr]、new Array(...arr)、Array.from(arr)，slice、concat

TypeScript

安装和编译

1. npm instaill -g typescript
2. tsc -v 查看安装
3. tsc hello.ts编译
4. tsc 编译当前目录下所有ts文件，可配置tsconfig.json => outDir输出目录，否则会在所有对应ts的路径下生成js
5. tsc --watch自动监听变化并编译

语法

类型检测

• 类型检测 v: t
• 联合类型 v: t1 | t2 表示可以是t1或者t2
• 交叉类型v: t1 & t2 表示t1和t2都要满足，若t1、t2有字段类型冲突，该字段为never
• 类型断言，当编译器根据类型检测判断结果类型可能多个，跟理想类型不符，就容易报错。但是开发者已人为断定结果的类型，知道自己在干嘛，有两种写法：
  • <t>v
  • (v as t)
• 参数或属性必定有值断言: v!: t
• 类型推断， ts在变量定义时若未声明类型检测，会自动推断出一个类型(未赋值为any)，当类型变化会报错

像new Boolean()这样的内置对象创建出来的值是包装类型，不属于基本类型boolean

基础类型

• boolean、number、string、undefined、null;

  undefined和null是所有类型的子类型，可以赋值给其他类型 ^ns

• Array；数组内所有元素类型检测:

  v: t[] 或 v: Array<t>(泛型)

• symbol

• enum枚举类型,支持基于数字和字符串的枚举:

  成员名为汉字可能值为undefined

1
2
3
4
5
6
7
8
9
10
11
12

enum Direction {
  NORTH,
  SOUTH,
  EAST,
  WEST = 3,
}
//数字枚举默认初始NORTH为0，SOUTH1这样递增，也可以像WEST一样设置初始值
//字符串枚举则必须手动设置初始值
let dir: Direction = Direction.NORTH;
//数字枚举支持成员值到成员名的反向映射:
let dirName = Direction[0]; // NORTH
let dirVal = Direction["NORTH"]; // 0

1
2
3
4
5
6
7
8
9
10

//加const修饰成为常量枚举
const enum Direction {
  NORTH,
  SOUTH,
  EAST,
  WEST,
}
let dir: Direction = Direction.NORTH;
//编译成es5后：使用内联语法，不会为枚举类型编译生成任何JS
let dir = 0 

还有异构枚举:数字和字符串的混合

注意 枚举类型的值并不能用变量动态获取，只能传定值。动态获取应该使用 对象 + 索引签名

• any 允许对此类型的值做任何操作无需任何检查，允许所有更改

• unknown 与any一样无需任何检查；但unknown类型变量只能赋值给unknown和any类型；由于类型未知，除赋值外禁止任何更改

• tuple元组类型 与数组类似，但用于有限数量的未命名属性的类型,必须提供每个属性的值。各个元素类型可不同，可通过push等方法新增未知类型元素

  1 2 3

  let v: [string, number] v = ['2', 2] //访问方式与数组一致

  • 元组和数组类型都可以通过数字索引访问其中一项的类型。还可以通过[number]获取到对应的联合类型(数组只有一项类型)

  1 2 3 4 5

  type arr = string[][1] //string type tuple = [number, string][1] //string type arr = string[][number] //string type tuple = [number, string][number] //number | string

• void表示没有任何类型，与any相反;严格模式下只能为undefined

  1 2 3 4 5

  // 声明函数返回值为void //定义函数的()后跟`: t`声明返回值类型 function warnUser(): void { console.log("This is my warning message"); }

• object、Object、和{}

  • object表示非原始类型

  • Object所有 Object 类的实例的类型,由以下两个接口定义:

    • Object 接口定义了 Object.prototype 原型对象上的属性；

      1 2 3 4 5 6 7 8 9

      interface Object { constructor: Function; toString(): string; toLocaleString(): string; valueOf(): Object; hasOwnProperty(v: PropertyKey): boolean; isPrototypeOf(v: Object): boolean; propertyIsEnumerable(v: PropertyKey): boolean; }

    • ObjectConstructor 接口定义了 Object 类的属性

      1 2 3 4 5 6 7 8 9 10 11

      interface ObjectConstructor { /** Invocation via `new` */ new(value?: any): Object; /** Invocation via function calls */ (value?: any): any; readonly prototype: Object; getPrototypeOf(o: any): any; // ··· } declare var Object: ObjectConstructor;

  • {}一个空对象，访问其属性会报错，但仍可使用Object接口上的所有方法

• never永不存在值的类型: 总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值。可以赋值给任何类型^ns

Freshness: 对于对象类型，若对字面量进行类型检测，不允许已定义类型外的属性存在。如果不使用字面量而事先定义，则允许

vue3新特性

• 更好的支持typescript

• 使用proxy+Reflect代替defineProperty实现响应式

  由于proxy和Reflect的方法一一对应，由proxy监听拦截对应操作，Reflect来完成并返回对应的默认行为,

  • 将条件判断和实际行为优雅的区分,
  • proxy性能更好
  • 数组也可以深度响应(proxy和Reflect都可以操作数组)

• 重写虚拟dom实现和Tree-Shaking

• vue3组件的模板可以不只有一个根标签

• 将不会支持 IE11

vue-cli3 4.5.0以上

生命周期

除了beforeDestroy和destroyed已经改名了不能用， vue2的其他生命周期在vue3同样可用，但vue3都有对应的组合API可以在setup中代替。vue2和vue3生命周期对比： 以下右边的生命周期也可以去掉on可以跟vue2一样option方式定义生命周期

• beforeCreate和created => setup
• beforeMount => onBeforeMount
• mounted => onMounted
• beforeUpdate => onBeforeUpdate
• updated => onUpdated
• beforeDestroy => onBeforeUnmount
• destroyed => onUnmounted
• errorCaptured => onErrorCaptured

经过测试同样生命周期定义在setup中都比vue2的方式快，优先级更高

js

• for...in循环内部出错时，不会报错，但是会停止后续所有代码进行。

  这次同事使用for...in循环遍历一个多级对象。他直接使用obj.xx.prop 根据部分属性内的prop属性来判断属性的类型，但是有的属性比如xx为undefined。

  一般我们知道，使用直接使用undefined.prop也就是对undefined使用.操作符是会直接报错的。但是在for...in循环内却没有任何提示，只会中断代码进程，造成意外bug

  1 2 3 4

  //直接在循环内抛出错误也一样不会提示 for (let key in values) { throw Error('err') }

  解决方法:

  • 相同情况避免使用for...in遍历
  • 每次在for...in循环内套一层try...catch捕获错误，后续代码也能继续，但是麻烦

• toFixed、Math.round都不是真正的四舍五入，而是使用银行家舍入法，当舍去的位数值为5，且5前的位数是偶数，则不会进位

  1 2 3 4 5 6 7 8

  1.255.toFixed(2) //1.25 //完美四舍五入 //Number.EPSILON表示 1与Number可表示的大于1的最小的浮点数之间的差值 function toFixed(num, place) { const step = Math.pow(10, place); return Math.round((num + Number.EPSILON) * step) / step; }

vue

• vue中使用sass，安装node-sass@4.14.1,sass-loader@8.0.2。这两个版本稳定，其他兼容问题多

  • node-sass需要与sass-loader版本匹配

  • node-sass@4.14对应sass-loader@8.x

    • node-sass@4.13对应sass-loader@7.x

  • node-sass还要与node版本相配，否则会报Error:Can't find Python executable "python"。与node版本匹配如下表:

  NodeJS	Minimum node-sass version	Node Module
  Node 14	4.14+	83
  Node 13	4.13+	79
  Node 12	4.12+	72
  Node 11	4.10+	67
  Node 10	4.9+	64
  Node 8	4.5.3+	57

• vue中使用swiper,安装vue-awesome-swiper@3可以完美使用,新版使用swiper6，出现设置autoplay不生效的问题

  • 另外使用时swiper-slide内容添加点击事件，在设置loop后第二轮过后点击事件不生效。原来loop会新增swiper-slide实现无缝，但vue中就没有绑定到所有元素上:

  添加配置属性on监听点击:

  1 2 3 4 5 6 7

  on: { //用tab点击事件，click有明细延迟 tap: function() { //this.realIndex得到当前点击准确索引，传给methods中的点击处理方法 _this.clickHandler(this.realIndex) } }

  • 而且由于图片数量和路径由接口数据决定，导致初始化计算错误，轮播的loop无缝失效。给轮播父级加上v-if="picArr.length"即可

• better-scroll

  • 实例方法scrollTo动画滚动到指定位置
  • 实例方法refresh重新计算滚动高度,

• 新版observeDom: true监视元素变化，自动计算滚动高度

• 全局常量挂载到window上后可在组件内复用，但除开组件这种加载顺序靠后的，像vuex内就获取不到(因为执行时还未完成挂载)。混入的内容是依附组件的，也能获取到

• 在vue-cli3中，通过路径跳转本地的文件，必须将本地文件放到public目录下，放到assets会找不到文件

• vue生产环境需要配置vue.config.js=>productionSourceMap: false，打包后不生成map文件(用于查找报错位置)，节省空间

• vue-cli3打包开启gzip压缩文件(需要服务端开启gzip才有效):

  1. npm i compression-webpack-plugin@5 -D 不加@5默认安装最新版7.1，会报错

  2. vue.config.js中配置：

     1 2 3 4 5 6 7 8 9 10 11 12

     const CompressionPlugin = require("compression-webpack-plugin") configureWebpack: { plugins: [ new CompressionPlugin({ //需要压缩的文件正则 test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png$|\.gif$|\.webp$|\.svg$/, // test: /\.(js|css)(\?.*)?$/i, threshold: 10240,//文件大小大于这个值时启用压缩 deleteOriginalAssets: false//压缩后保留原文件 }) ] }

• 使用eslint + prettier规范代码格式老报错:

  除了在vue.config.js中取消规范:lintOnSave:false, 还可以:

  先命令行npm run lint规范代码,如果报错且没有修改成功，可以修改package.json script=>lint: "vue-cli-service lint"改为"eslint --fix --ext .js,.vue src" 之后。

  此时多数格式问题都被规范了，但定义的全局常量CONST挂载到了window，eslint确报错这个常量未定义。需要在package.json的eslintConfig中:

  1 2 3 4

  >//配置全局常量 >"globals": { "CONST": true >}

  • 配置eslint不以分号结尾（eslint + prettier时无效,原因后文的注意）：

    1 2	//第一个参数2改为1报错改为警告,为0表示关闭规则。注意关闭后默认会要分号 "semi": [2, "never"]

  • 不需要规范的文件/目录，在根目录创建.eslintignore文件声明:

    1	/src/assets/font

nginx归纳

Nginx 是一款高性能的web和反向代理的服务器，同时也是一个 IMAP/POP3/SMTP 代理服务器。其特点是空间内存占用少，并发能力强，也是当下使用最为广泛的，特别是在分布式架构中发挥着重要的作用。

官方下载地址

特性

• 反向代理；

• 负载均衡；

• 电子邮件代理服务器

基本使用

下述nginx命令在nginx.exe目录下执行。如果提示找不到nginx，可以使用相对路径./nginx

• 启动方式:

  • 直接点击nginx.exe
  • 命令行 - start nginx

• 重启:

  • 直接重启： nginx -s reopen

  • 重新加载nginx配置文件，并优雅重启： nginx -s reload

• 关闭:

  • 优雅退出(处理完所有请求后退出) nginx -s quit
  • 强制退出: nginx -s stop

nginx变量: Nginx常用变量大全 (timd.cn)

Node.js

模块化

CommonJS

node实现commonjs的模块化规范

• require(path)导入 path是文件夹路径时，会找其中package.json的main属性指向的文件作为入口，否则会找index.js

  注意: require的参数不能是纯变量，可以是字符开头拼接变量

• module.exports/exports.xx导出整个对象或属性

通常ESmodule可以将CommonJS作为默认导入，反之不行。因为CommonJS是同步加载(运行时)，而ESmodule要先进行异步静态分析(编译时)

内置模块

path

• linux、mac等系统路径以/分隔，而windows有的以\分割，直接写死发布到linux等系统下就会有问题。以下方法用于进行路径拼接
  • path.join纯粹拼接，不处理
  • path.resolve拼接前会将相对路径解析为对应绝对路径再拼接。若后面的参数为绝对路径，会忽略之前的参数；相对路径会进行解析拼接。

fs

• fs.open获取文件描述符。通过描述符也可以用内置模块操作对应文件

• 读取写入文件时，可以传配置项flag设置读写方式。读取文件时若不传配置项encoding设置编码格式，默认会返回buffer

• fs.readdir读取文件夹目录，配置区分文件类型后才可通过isDirectory/isFile方法判断目录还是文件

• 写入JSON格式文件时，所有内容挤在一行很丑，可以在序列化时:

  1 2	//JSON.stringify第三个参数可添加缩进规则 JSON.stringify(curConfig, null, '\t')

events

事件触发器,vue等框架的事件总线思想由此而来

events是一个类，下面称为EventEmitter，实例称为emitter

• emitter.on/addListener监听自定义方法
• emitter.once监听自定义方法，只监听一次
• emitter.emit触发自定义方法
• emitter.off取消监听
• EventEmitter.eventNames获取当前监听的事件名
• EventEmitter.listeners获取当前事件名对应的事件个数
• EventEmitter.removeAllListeners移除所有事件

http

• 监听127.0.0.1本地回环地址时，只能捕获127.0.0.1和localhost，不会捕获向本地网络ip的请求。而监听0.0.0.0(默认)监听ipv4所以地址并根据端口找到所有应用程序，可以捕获127.0.0.1、localhost、本地ip三种。

• 请求参数req(http监听请求的第一个参数)：

  原生node中，req没有body属性。框架内部是通过监听req的data事件获取请求的body。req.setEncoding()可以先预设请求编码。参数：utf-8 - 字符串，binary - 二进制(文件)等。默认情况下req的data事件返回buffer

• 请求头headers参数：

  • connection: keep-alive在不同web服务会默认有不同的保持连接时间(除非主动断开)。node服务默认是5s
  • accept-encoding告知服务器客户端文件的压缩格式

• res.satatusCode设置响应状态码

• res.writeHead(statusCode: number, headers: obj)设置响应头的同时也可设置状态码

• res.setHeader(key, val)设置某一个header项

http模块也可以发送请求。在游览器中axios通过xhr封装请求，在node中axios通过http模块封装。

• http模块发送请求的回调参数res不直接返回响应结果，需要监听data事件:

  1	res.on('data', (data) => {...})

• http.request方法发送请求时，返回一个clientRequest实例req，需要调用req.end()表示请求设置完毕才能发出。http.get则不需要

url

• url.parse解析get请求

querystring

• querystring.parse解析get请求参数

promise封装

内置模块方法都可使用promise的方式使用了，有两种用法:

• 模块.promises.fn 调用promise封装的内置模块方法,

• require("模块/promises")，该内置模块所有异步方法都会是promise方式了

可能与回调方式返回的数据结构不同，需要查看文档对应类

• 基于 promise 的 API 不使用数字文件描述符。 而是，基于 promise 的 API 使用 FileHandle 类

用fileHandle写入文件时出现了operation not permitted, write错误，用路径却成功。猜测因为此 fs.open调用时未设置可写入的flag参数 ，于是设置为"a+"成功。得出结论: fs.open需要设置flag确保可进行读写操作

还要注意，fileHandle写入后再用fileHandle读取不到内容。猜测由于文件被写入状态更新，导致第一次open获取的fileHandle失效, 于是重新fs.open获取，再用新获取的fileHandle尝试成功。得出结论: 写入等更新文件的操作后需要重新获取fileHandle才能继续操作

全局类

Buffer

本质上是存放8位2进制的数组，因此可通过索引操作其中一项。默认会被解析位16进制。

字母、数字占1字节，普通中文(‘utf8’占3字节、’utf16le‘占2字节)

• 字符串转buffer：

  1 2	//new Buffer(str)已不推荐 const buffer = new Buffer.from(str)

• 数组转buffer

  1	const buffer = Buffer.concat(arr)

• buffer转字符串

  1 2	//toString默认'utf8'编码。编码解码格式必须一致 const str = buffer.toString()

• Buffer.alloc(size, fill, encoding) 创建一个预期的buffer

  • size为buffer预期的长度，使用最多
  • fill填充每一项的默认值，默认是0
  • encoding每一项字符串编码，默认’ust8’

fs.readFile不设置编码格式则默认拿到文件的buffer

创建buffer时不会频繁申请内存，默认会先申请8kb内存，填充的数据大于4kb时再申请新的内存

npm

package.json属性

• scripts 运行脚本，可使用npm run key执行对应命令行指令。有几个特定的key执行时不需要加run: start、restart、test、stop

• engines指定node和npm版本，不符合会报错。还可指定操作系统os（很少用）

• browserslist指定webpack打包后js游览器兼容情况，否则需要使用polyfills

指令

• npm i --production只安装package.json中生产环境依赖

版本规范

npm包遵从semver规范x-y-z:

• x 主版本号。不兼容的api修改
• y次版本号。向下兼容的功能性新增
• z修订号。向下兼容的问题修正
• 先行版本号和版本编译元数据可以追到到上面三个之后

版本号前缀^、~

• ^主版本号不变，其他安装最新版
• ~主次版本号不变，修订号安装最新版

包上传

• npm login 登录必须是npm的源，不能是淘宝镜像源，设置镜像后登录时需要切换回去:

  1 2	npm config set registry https://registry.npmjs.org/ npm cache clean --force

• package.json => keywords中的关键字，可以从npm搜索到这个包

• npm publish

• npm unpublish packageName@version --force删除已发布的包

自实现脚手架工具

目录划分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

│  .gitignore
│  index.js 
│  package-lock.json
│  package.json
│  
└─libs
    ├─config 
    │      global.js 
    │      
    ├─core 
    │  └─command 
    │          create.js
    │          
    └─utils 

│  .gitignore
│  index.js //入口
│  package-lock.json
│  package.json
│
└─libs
    ├─config
    │      global.js //配置，如git地址
    │
    ├─core
    │  └─command //指令
    │          addcpn.js
    │          addpage.js
    │          create.js
    │
    ├─template //ejs文件模板
    │  └─vue
    │          cpn.ejs
    │          router.ejs
    │          store.ejs
    │
    └─utils //工具
            tool.js

初始化

• 使用shebang/hashbang。在入口js文件顶部加上一行#!/usr/bin/env node，也可以写node的绝对路径，但不同系统有兼容问题。执行文件时会在当前用户环境找node执行。
• package.json的bin属性对象添加"key"(指令名): "入口js路径"
• 然后npm link将配置的指令名放入环境变量，才可全局使用此指令执行入口文件。npm发布后进行全局安装效果相同。
• 使用commander管理指令: npm i commander 。后面统称导入的commander为prg
  • prg.version(版本号, 指令) 参数都是字符串。版本号可以从package.json中动态获取，相对路径必须要加./；多个指令用,分隔，且超过两个后面的无效，设置指令后默认-V --version会失效。
  • prg.parse(process.argv) 通过指令解析执行上面定义的相关进程

修改文件后需要npm unlink删除node目录下node_modules和cmd相关文件重新npm link

npm link时，由于用cnpm安装会多出许多包，并且cnpm包命名的规则可能导致link过程报错，并且node_modules出现模块丢失。

出现这个问题可以用npm安装; 或者用npm安装一次后保留package-lock.json文件(锁住版本)，再用cnpm即可

commander指令

• prg.options("-选项1 --选项2... <必须参数名> [可选参数名]", 描述)设置指令选项。就可通过prg.选项2获取到参数，新版(7.2.0)通过program.opts()获取参数。还可通过 prg.on('option:选项2', callback(参数))监听指令。只能监听到一个参数

• 创建指令

  1 2 3 4 5 6

  //...表示有多个相关参数 program.command("create <单个参数名> [可选参数名...]") .description("指令描述") .action((arg1, arg2) => { ... })

下载模板

使用download-git-repo从git上下载项目模板

1
2

//path需要查看官方指定的格式:
download(path, targetDir, options, callback)

node的util模块可以导入{ promisify }，将回调方式的方法包装成为promise方式

• 从github拉取: download(github:owner/project-name#branch, projectName)
• 从gitlab拉取: download(direct:gitlab地址/owner/project-name.git#branch, projectName)

options中clone: true会拉取模板git信息,但由于权限问题非公开账号很容易failed 128；使用clone: true方式网址最后最好加上后缀.git。

加载动画

使用三方库ora

1
2
3
4
5

const ora = require("ora")
const spinner = ora("downloading...") //加载文本
spinner.start() //开始
spinner.succeed("项目创建成功！") //成功
spinner.fail("下载失败") //失败

命令行指令

使用node子进程模块child_process的spawn或exec方法在子进程执行npm命令安装依赖，并运行项目。

1
2
3
4
5
6
7

const cp = spawn(cmd指令, [arg1, arg2...], {cwd: "需要cd进的目录"})
//在windows系统(process.platform === "win32")不会识别.cmd文件，指令后需要加上`.cmd`,其他系统不用加。
//例如: spawn("npm.cmd", ["run", "serve"], {cwd: "./demo1"})

//将子进程的打印和错误信息也展示在主进程中
cp.stdout.pipe(process.stdout) 
cp.stderr.pipe(process.stderr)

项目运行成功后可以使用三方插件open打开游览器，但无法灵活操作跟选择端口；建议在项目模板webpack的配置运行时自动打开游览器

命令行选择

三方库inqurer实现命令行选择

创建组件和页面

计划使用ejs动态生成页面和组件文件，指令如下:

• addcpn cpnName添加组件
• addpage pageName添加页面组件和路由

需要四个ejs模板: 组件文件、router、store、types。在需要动态变化的地方使用<%= data.xx %>

• ejs.renderFile(path, dataObj, options, callback) 根据ejs模板渲染对应的文件，在回调中通过fs写入文件。写入前要通过fs.exists判断路径是否存在（path.dirname逐级找到父级目录判断），否则需要mkdir创建。

• 组件默认在components目录下创建，可以增加-d参数选项设置存放路径

• 添加页面时生成页面组件文件和对应的路由配置，模板项目中在对路由进行了工程化处理，汇总所有页面下的router.js生成路由配置:

  1 2 3 4 5 6 7

  //'@/view'为项目存放页面的目录 const files = require.context('@/views', true, /router\.js$/) const routes = files.keys().map(key => { //注意require内可以解析代码，但不能放变量 const page = require('@/views' + key.replace('.', '')) return page.default })

阻塞和非阻塞

阻塞、非阻塞 => 对于被调用者

同步、异步 => 对应调用者

非阻塞IO时，libuv线程池负责进行轮询和其他方式，等待结果后将回调放入队列由事件循环接管。而非主线程轮询大大消耗性能

Stream

流，读写文件时，二进制数据(字节)源源不断被读写到程序中，这一连串字节数据就是流。

可以控制文件比较细节的操作，如读取位置、大小。而非普通的fs.readFile这样直接一次性读取完

所有流都是EventEmitter的实例

node有四种基本流类型：

• Writable: 可写入数据的流(fs.createWriteStream)
• Readable: 可读取数据的流(fs.createReadStream)
• Duplex: 可写入又可读取的流(net.Socket)
• Transform: 写入和读取时可修改/转换数据的流(zlib.createDeflate())

流方法返回流对象(reader、writer……)，可以细化操作对应的文件数据。并且可以用on方法监听事件:

• open: 开始传输

• data: 监听获取每次传输的数据

• close: 传输结束

写入时必须手动调用end或close，不会自动关闭

• reader.pipe(writer) 可将读取流中的数据直接放到写入流写入。windows系统若写入失败，创建writer时flage设置为r+即可

文件上传

原生node实现文件上传处理

• 需要设置req.setEncoding("binary")，否则默认通过utf8对文件数据编码导致错误。

• 要去除数据首尾多余信息，将剩余二进制数据写入文件。去除信息如下：

  • 头部通过Content-Type分割截取

  • 去除尾部boundary要先通过res.headers['content-type']截取到值，并在二进制数据中去除(在二进制数据尾部，boundary首尾会多出--)。

    头部也有boundary，但已经在上一步截去了不用管。

    boundary后面可能还有信息需要除去，这时boundary末尾没有--

  • 头部的空格\r\n会导致文件错误，用正则\s匹配去除

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

    const http = require("http"); const fs = require("fs"); const qs = require("querystring") http.createServer((req, res) => { if (req.method === "POST" && req.url === "/upload") { let data = ""; req.setEncoding("binary"); req.on("data", (fd) => { data += fd; }) const boundary = req.headers["content-type"].split("; ")[1].replace("boundary=", "") req.on("end", () => { const valCT = qs.parse(data, "\r\n", ": ")["Content-Type"]; //获取文件名和后缀 const beforeCT = data.split(valCT)[0]; const preName = qs.parse(beforeCT, "; ", "=")["filename"].split("\"")[1]; const suffix = preName.split(".")[1]; //头部的\r\n不能保留,用\s匹配去掉 const afterCT = data.split(valCT)[1].replace(/^\s\s*/, ""); const boundaryIndex = afterCT.indexOf(`--${boundary}`); //去除文件尾部空格 const file = afterCT.substring(0, boundaryIndex).replace(/\s\s*$/, "");; const afterFile = afterCT.substring(boundaryIndex) //解析formdata文件外其他参数 const params = qs.parse(afterFile, "form-data; name=", "\r\n\r\n") for(let key in params) { const val = params[key]; const subIndex = val.indexOf("\r\n"); //去除key中的 " 和value中其他字符 params[key.replace(/\"/g, "")] = val.substring(0, subIndex); delete params[key]; } let setName = preName; //参数params中有setName可以设置保存的文件名 params.setName && (setName = `${params.setName}.${suffix || "png"}`) fs.writeFile(`./${setName}`, file, "binary", err => { if (err) return; res.end("上传成功") }) }) } }).listen("8866", () => { console.log("server start..."); })

其他

whistle

基于node的抓包工具, 官方文档

• 安装 SwitchyOmega设置代理到whistle的主机，默认127.0.0.1，端口8899

• 手机与PC同一wifi下并设置代理: 电脑的ip地址与8899端口

• w2 start启动whistle后，新建rules:

  1	接口地址 127.0.0.1

• w2 run调试模式开启，可以看到插件console

• 默认只能拦截http，拦截https请求，需要进行如下操作，参考 whistle——抓包https请求的解决办法 ：

  1. 添加rules时使用: 接口地址 filter://intercept
  2. 点击最上方工具栏的https，取消 Capture TUNNEL CONNECTs 勾选后下载安装证书到PC(需要添加到受信任的机构)。然后再勾选Capture TUNNEL CONNECTs，下载到手机上安装

旧版支持ESM

旧版的node并不支持esmodule，需要进行以下操作:

1. 在package.json中增加type: 'mode'
2. 13.2.x之前还需要在执行node命令时加上--experimental-modules

express

express核心是中间件，中间件的本质就是回调函数

express-generator是exporess脚手架: express [projectName]创建项目

基本使用

• 中间件的回调函数有三个参数: req、res、next。回调中可以：

  1. 修改req和res
  2. 完成请求响应
  3. next()调用栈中的下一个中间件

  如果当前中间件中没有完成响应请求(如res.end())，则必须执行next，否则请求将被挂起

• 有两种应用中间件的方式

  • app/router.use()
    • app/router.use(callback)可以匹配任何情况
  • app/router.use(path, callback)只匹配路径，不关心方法
  • app/router.method() method比如get、post。
    • app/router.method(path, callback) 同时匹配路径和对应方法。
    • app/router.method(path, callback1, callback2...) 注册多个中间件，但callback1后面的中间件要执行也必须next()

• 同时调用res.end和next并不会报错。res.end只是结束响应周期，但还是可以next执行下一个中间件；只是后面的中间件内不能再res.end调用响应

中间件获取body

• 根据content-type判断是否要处理请求体, 监听req的data事件获取拼接请求体。不处理则直接next()
• 在req的end事件中解析完整的请求体并挂载到req.body并next()
• 数据应该挂载到req上，传入next会被当做错误信息直接返回给客户端错误页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

const createApp = require("express");
const qs = require("querystring")

const app = createApp();
app.use((req, res, next) => {
  if (req.headers["content-type"] === "application/x-www-form-urlencoded") {
    const data = [];

    req.on("data", d => data.push(d));

    req.on("end", () => {
      const body = Buffer.concat(data).toString();
      req.body = qs.parse(body);
      next();
    })
    return;
  }
  next();
})

app.post("/login", (req, res) => {
  console.log("拿到body:", req.body);
  res.end("welcomeback pluto~")
}) 

app.listen(8222, () => {
  console.log("express start...");
})

body-parser解析请求体的方法类似，并提供多种content-type的处理，更加完善。这里我只处理了自己最常用的urlencoded

工作中更多使用body-parser, 之前需要npm i body-parser；Express 4.16.0已经内置了body-parser。路由上方添加两行代码即可:

1
2
3
4
5

//解析json
app.use(express.json())
//解析urlencoded  extended: true表示使用三方qs解析, 否则用内置的querystring
app.use(express.urlencoded({extended: false}))
//之后中间件req.body即可获取

multer

可用于处理formData类型的数据，一般用于文件上传。前面我们用原生node实现，过程比较繁琐，开发当然用multer。

• multer本身是一个函数，返回的实例下面称作upload。该函数可传入以下参数:

  • dest或storage dest:string可指定存放文件的目录。storage:obj 可以对文件存放做更多控制，storage可配置如下：

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

    let upload = multer({ //multer.diskStorage指定磁盘存放 storage: multer.diskStorage({ //指定存放目录 destination: function (req, file, cb) { //cb第一个参数有值代表错误 cb(null, './uploads/'); }, //指定文件名(若未指定filename，每个文件将设置为一个随机文件名，并且没有扩展名) filename: function (req, file, cb) { //originalname中有扩展名 var changedName = Date.now() + '-' + file.originalname; cb(null, changedName); } }) })

  • fileFilter:fn 文件过滤器，控制哪些文件可以被接受

  • limits:obj: 限制上传的数据

  • preservePath: 保存包含文件名的完整文件路径

• multer实例upload有如下方法可返回中间件回调：

  • single(fieldname) 单文件上传。 只接受以 fieldname 为name的数据并且只能传一个文件。文件的信息保存在 req.file ，文本保存在req.body

  • array(fieldname[, maxCount]) 多文件上传。接受一个以 fieldname 为name的文件数组。可以配置 maxCount 来限制上传的最大数量。这些文件的信息保存在 req.files ，文本保存在req.body

  • fields(fields) 只接收满足 fieldsname和数量的文件。接受指定 fields 的混合文件。这些文件的信息保存在 req.files。

    fields 应该是一个对象数组，应该具有 name 和可选的 maxCount 属性。

  • none() 只接受文本域。如果任何文件上传到这个模式，将发生 “LIMIT_UNEXPECTED_FILE” 错误。这和 upload.fields([]) 的效果一样

  • any()接收任何方式（文本和文件）。文件保存在req.files，文本保存在req.body

避免app.use全局方式注册multer的中间件，这样恶意用户可以上传文件到一个你没有预料到的路由。最好只在处理文件上传的路由的中间件前注册

morgan

三方中间件，记录请求日志

需要注册morgan(type, opts)作为中间件，参数如下：

• type: 设置日志格式
  • "combined"打印到文件中(一般是log文件)
  • "dev"打印到控制台
• opts: 配置对象参数:
  • stream 设置写入文件流如: fs.createWriteStream(path, opts)，打印到文件中才需要此参数

开始发现日志的时间和实际的时间不对应，可能是时区问题，可以通过morgan.token和morgan.format自定义时区和格式

1
2
3
4
5
6
7
8
9
10

// 自定义token
morgan.token('localDate',function getDate(req) {
  let date = new Date();
  return date.toLocaleString()
})

// 自定义format，其中包含自定义的token
morgan.format('combined', ':remote-addr - :remote-user [:localDate]] ":method :url HTTP/:http-version" :status :res[content-length] ":referrer" ":user-agent"');

app.use(morgan("combined", {stream: fs.createWriteStream("./access.log", {flags: "a"})}));

url传参

除了上述通过手动解析、body-parser、multer等方式可以用req.body获取请求体中的参数外,还可以直接在路由上获取参数:

• params 类似vue-router中的动态路由，node中通过url/:id预设params参数，客户端请求时url为url/1 ，就可以拿到req.params.id为1，而且参数不传会报错

• query 客户端在url末尾?后所传的参数(url?id=1&name=qq), req.query接收。express已经解析为对象

响应数据

• res.status()设置响应状态码
• res.type() 设置响应的header。res.end()不能传二进制之外的数据，传统方式要通过res.type("application/json")设置json格式的content-type，再res.end(json字符串)
• res.json(obj | array)直接返回content-type为json格式的数据，不用手动设置type和转换字符串，可直接返回数组、对象

路由

express.Router创建路由实例router，拥有完整的中间件和路由管理系统，专门处理路由相关逻辑，不必全部冗余在app.js中。

使用router注册各路由相关中间件，再导出到app.js， 通过app.use(router)统一注册到app中, 也可以app.use(path, router)以path开始的路由才会匹配对应router

静态资源

中间件express.static(root)可指定root作为静态资源根路径开启静态资源服务，从服务根路径即可访问对应root下的静态资源

错误处理

• next传递参数会跳到后面注册的拥有**四个参数(err, req, res, next)**的中间件，err就是next传来的参数

• 没有错误的情况下，不应该向next传参

• next不传参是不会到有四个参数的中间件的

根据上述特性，可以在最后注册四个参数的中间件集中处理错误信息。错误时只需向next传递错误信息

koa

koa导出的是一个类，可通过new创建app。

中间件

koa中，中间件只有app.use()注册方式，并且与express相比：

• 不能传path ,
• 一个app.use不可以传多个中间件。

中间件有两个参数:

• ctx 上下文对象，其中有request和response
  • ctx.response没有end方法，只需要将响应数据放到context.response.body中。当所有中间件进行完毕，会将body的内容响应给客户端。
• dispatch 类似于next

express和koa中间件在同步情况下都是洋葱圈模型，next后的逻辑在后面中间件执行后进行

但在异步情况下，express没有办法在之前的中间件调用next之后，获取后面中间件拿到的异步数据。

而koa中使用koa-compose整合中间件调用时，dispatch函数对中间件进行了promise等处理，异步情况下可以使用await、generator等方案(所有涉及的中间件都要处理)待后续next拿到数据再进行。在异步情况下也能保持洋葱圈模型。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

router.post("/test", async(ctx, next) => {
  ctx.msg = "aa"
  await next()
  ctx.body = ctx.msg //aabbcc
}, async (ctx, next) => {
  ctx.msg += "bb"
  await next()
}, async (ctx, next) => {
  await fn()
  function fn() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        ctx.msg += "cc"
        resolve()
      }, 1000)
    })
  }
})

路由

社区三方koa-router是使用最多的koa路由管理工具

• koa-router导入一个构造函数，通过new创建router。构造函数可以传配置:

  • prefix:string 定义路由前缀

• 支持通过router.method(path, cb1, cb2...)方法注册路由(post、get、put……)

  • 第一个参数path。如果构造函数传入了prefix会以prefix开头。完全匹配prefix则传"/"
  • 后面参数传中间件。与express一样，可以传入多个

• 最后通过app.use(router.routes())添加到app

• 还可通过app.use(router.allowedMethods())将路径可匹配但方法匹配不到的请求返回状态码跟Method Not Allowed，而不全是Not Found

• 在koa中，普通app.use不能传path，也就无法自动获取路径中的params参数。使用koa-router后经过封装，可以用ctx.request.params获取

请求参数

• 请求body数据(urlencoded、json)通过koa-bodyparser解析: app.use(bodyParser())。通过ctx.request.body获取

• formData类型数据使用koa-multer处理，用法与express中的multer相似。安装时有两个依赖可以选择:

  • koa-multer 是在express的multer封装了一层，因此数据结果不在ctx.request.body，而在ctx.req.body

  • @koa/multer，需要先安装multer。结果用ctx.request.body获取，推荐这种

代理上下文

在koa中，将response和request对象的一些属性通过delegate代理到上下文ctx中更加便于操作，在koa源码context.js中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

/**
 * Response delegation.
 */

delegate(proto, 'response')
  .method('attachment')
  .method('redirect')
  .method('remove')
  .method('vary')
  .method('has')
  .method('set')
  .method('append')
  .method('flushHeaders')
  .access('status')
  .access('message')
  .access('body')
  .access('length')
  .access('type')
  .access('lastModified')
  .access('etag')
  .getter('headerSent')
  .getter('writable');

/**
 * Request delegation.
 */

delegate(proto, 'request')
  .method('acceptsLanguages')
  .method('acceptsEncodings')
  .method('acceptsCharsets')
  .method('accepts')
  .method('get')
  .method('is')
  .access('querystring')
  .access('idempotent')
  .access('socket')
  .access('search')
  .access('method')
  .access('query')
  .access('path')
  .access('url')
  .access('accept')
  .getter('origin')
  .getter('href')
  .getter('subdomains')
  .getter('protocol')
  .getter('host')
  .getter('hostname')
  .getter('URL')
  .getter('header')
  .getter('headers')
  .getter('secure')
  .getter('stale')
  .getter('fresh')
  .getter('ips')
  .getter('ip');

因此，通常我们可以类似下面方式: (还有其他的代理内容见上文源码)

• ctx.body相当于ctx.response.body设置响应数据。

  注意与ctx.request.body请求体区分开

• ctx.status相对于ctx.response.status设置响应状态码

• ctx.query相当于ctx.request.query

router路由中，也可用ctx.params代替ctx.request.params

multer中，也可用ctx.files代替ctx.request.files等

都是经过代理封装

静态资源

koa-static指定静态资源服务，与express.static用法相似:

1
2

const staticAssets = require("koa-static")
app.use(staticAssets("./uploads"))

错误处理

• 路由中抛出错误事件:

  1 2	//路由中可由ctx.app拿到app ctx.app.emit("error", new Error("错误信息"), ctx)

• app监听错误事件:

  1 2 3 4 5 6

  app.on("error", (err, ctx) => { ctx.body = { code: 0, message: err.message } })

下面案例都以'http://api.com'为服务端接口地址

webpack代理跨域

此方式都有共同的底层包http-proxy-middleware

代理跨域本质上请求发送(接收)之前加入中间层服务器(服务器与服务器之间不存在跨域)，将请求代理成本域

反向代理：正向代理隐藏真实客户端，反向代理隐藏真实服务端

Vue-cli 2.x

• config->index.js->dev中：

  1 2 3 4 5 6 7 8 9 10

  proxyTable: { '/api': { target: 'http://api.com', //接口源地址 changeOrigin: true, //是否跨域 secure: true, pathRewrite: { '^/api': '' //路径重写 } } },

vue-vben-admin是开源的中后台模板，使用最新的前端主流技术开发：vue3 + vite2 + ts

vite.config.ts

“test start…”

“testSomething”

“promise START”

“===END===”

“return testSomething”

“testAsync”

“promise RESOLVE”

“hello async”

“test end…”