分类 技术 下的文章

node-http-proxy 是一个可编程的，支持 websocket 的 HTTP 代理库。它适合实现反向代理和负载均衡器的组件。

安装

npm install http-proxy --save

核心概念

const httpProxy = require('http-proxy')

const proxy = httpProxy.createProxyServer(options)

proxy 是一个对象，其中包含四个方法

  • web: req, res, [options] 用来代理常规的 HTTP(s) 请求
  • ws: req, socket, head, [options] 用来代理 websocket 请求
  • listen: port 用来监听端口，并启动 webserver
  • close: [callback] 用来关闭端口监听和 webserver

如果没有调用 proxy.listen 方法的话，上面的操作并不会创建一个 webserver。

// 代理请求
http.createServer((req, res) => {
  
  proxy.web(req, res, { target: 'https://xxx.com' })
  
  proxy.on('error', err => {})
  // 也可以把错误处理函数作为 web 方法的第四个参数传递
})

当请求被代理时，它遵循两个不同的管道，这两个管道可以对 req 和 res 对象做一些转换。第一个管道（incoming）负责创建和操作将客户端连接到目标的流。第二个管道（outgoing）负责创建和操作流，该流从目标将数据返回到客户端。

安装 Express

mkdir express-playground
cd express-playground

npm init -y
npm i express

Hello world

import express from 'express'

const app = express()

app.get('/', (req, res) => {
    res.send('Hello, world')
})

app.listen(3000, () => {
    console.log('http://127.0.0.1:3000')
})

请求参数

属性描述
app对 app 对象的引用
hostnameHost 请求头定义的主机名
ip客户端 ip
methodHTTP 方法
protocol请求协议
path请求路径
query查询字符串参数
params路径参数
body包含在请求体的数据
cookies请求携带的 cookies
signedCookies请求携带的签名的 cookies

服务端向客户端发送响应

res.send()

send 方法，如果传入的是字符串，则会自动将 Content-Type 设置为 text/html；如果传入的是数组或对象，则会将 Content-Type 设置为 application/json，并会将数组或对象解析为 JSON 格式。

send 方法调用完毕后会自动关闭连接。

另一种发送响应的方式是 res.end()，参数必须是字符串或 Buffer 类型，它不会主动设置 Content-Type。

设置 HTTP 状态码

res.status(404)
// do something

res.status(404).end()

res.status(404).send('Not Found')

res.sendStatus(404)
// 相当于 res.status(404).send('Not Found')

发送 JSON 响应

res.json({ username: 'tom' })

Cookie 管理

获取 cookie（TODO）

设置 cookie

// 设置 cookie
res.cookie('sessionId', 'xxx')

// 配置选项
res.cookie('sessionId', 'xxx', {
  domain: '.flaviocopes.com',
  path: '/administrator',
  secure: true,
  expires: new Date(Date.now() + 900000),
  httpOnly: true
})

清除 cookie

res.clearCookie('sessionId')

处理 HTTP header

获取 header

// 一个对象，包含所有请求头，key 为小写字母 + 下划线的组合
res.headers

// 获取指定的请求头
res.header('Content-Type')

设置 header

res.set('Content-Type', 'text/html')

// 针对于 Content-Type 标头的快捷设置方式
res.type('html') // text/html
res.type('json') // application/json
res.type('application/json') // 同上
res.type('png')  // image/png

重定向

// 302 临时重定向
res.redirect('/xxx')

// 301 永久重定向
res.redirect(301, '/xxx')

// 重定向到 Referrer 标头值
res.redirect('back')

路由

TODO

模板引擎

TODO

中间件

TODO

静态文件服务

app.use(express.static('public'))

向客户端发送文件（文件下载）

res.download('./file.txt')

// 自定义文件名
res.download('./file.txt', '好康的.mp4')

// 文件发送后的回调
res.download('./file.txt', '好康的.mp4', err => {
    if (err) {}
    else {}
})

session 会话

TODO

表单验证

TODO

参考资料

使用 nginx -h 命令查看 nginx 命令行参数：

nginx version: nginx/1.20.1
Usage: nginx [-?hvVtTq] [-s signal] [-p prefix]
             [-e filename] [-c filename] [-g directives]

Options:
  -?,-h         : this help
  -v            : show version and exit
  -V            : show version and configure options then exit
  -t            : test configuration and exit
  -T            : test configuration, dump it and exit
  -q            : suppress non-error messages during configuration testing
  -s signal     : send signal to a master process: stop, quit, reopen, reload
  -p prefix     : set prefix path (default: /usr/share/nginx/)
  -e filename   : set error log file (default: /var/log/nginx/error.log)
  -c filename   : set configuration file (default: /etc/nginx/nginx.conf)
  -g directives : set global directives out of configuration file
  • -p: 设置 nginx 路径前缀，即保存服务器文件的目录

antd 版本：v3+

a-select-option 用法：

<a-select v-model:value="value">
  <a-select-option value="jack">Jack</a-select-option>
  <a-select-option value="lucy">Lucy</a-select-option>
  <a-select-option value="disabled" disabled>Disabled</a-select-option>
  <a-select-option value="Yiminghe">yiminghe</a-select-option>
</a-select>

这种方法可以自定义 option 内容，但是需要 v-for 手动遍历渲染 a-select-option。

options 数组用法：

<template>
  <a-select v-model:value="value" :options="options">
    <template #option={ label, value, 其他 options 数组对象中的属性 }>
      <!-- 自定义 option -->
    </template>
  </a-select>
</template>

<script lang="ts">
const options = [
  { label: '苹果', value: 'apple' },
  { label: '香蕉', value: 'banana' },
]
</script>

这种用法不需要手动遍历，直接在 option 插槽自定义即可。

在自定义下拉框内容的场景下也可以自定义 option 的展示，需要和 option 插槽配合：

<template>
  <a-select
    v-model:value="value"
    :options="options"
  >
    <template #dropdownRender="{ menuNode: menu }">
      <!-- option 节点 -->
      <v-nodes :vnodes="menu" />
      <!-- 自定义内容 -->
    </template>
    <template #option={ label, value, 其他 options 数组对象中的属性 }>
      <!-- 自定义 option -->
    </template>
  </a-select>
</template>

<script lang="ts">
const options = [
  { label: '苹果', value: 'apple' },
  { label: '香蕉', value: 'banana' },
]
</script>
  1. 1
  2. 2