Study Nodejs「1」 - Zsm's blog

为什么学nodejs#

可能是后面要接手一些项目，或者是些javaspring烦了，学学nodejs玩，目前感觉nodejs的生态还是不错的

npm的生命周期#

第一开始也没想到这个还有生命周期的，就记录一下

1
"predev": "node prev.js",
2
"dev": "node index.js",
3
"postdev": "node post.js"

执行 npm run dev 命令的时候 predev 会自动执行他的生命周期是在dev之前执行，然后执行dev命令，再然后执行postdev，也就是dev之后执行运用场景例如npm run build 可以在打包之后删除dist目录等等 post例如你编写完一个工具发布npm，那就可以在之后写一个ci脚本顺便帮你推送到git等等

npx#

个人理解npx的作用是在命令行中运行node包中的可执行文件，而不需要全局安装这些包。哎，这样就不会全局包乱飞和包版本冲突了，就行python的虚拟环境隔离一样，但是又感觉和pipx有异曲同工之妙？

express#

目前体验是很爽的，把原生nodejs的http服务封装了，方便使用 (下面代码的风格都是module)

基本使用方法#

http服务

比较好玩的地方在于express是一个函数，同时监听端口的时候也不用像原生的一样了

1
//原生
2
const http = require('http');
3
const url = require('url');
4
const fs = require('fs');
5

6
http.createServer((req, res) => {
7

8
}).listen(3000,()=>{
9

10
});

1
import express from 'express';
2

3
const app = express()
4

5
app.listen(3000, () => console.log('Listening on port 3000'))

接口编写

编写get post 接口

1
app.get('/', (req, res) => {
2
    res.send('get')
3
})
4

5
app.post('/create', (req, res) => {
6
    res.send('post')
7
})

接受前端的参数他是无法直接接手json参数的，所以要用中间件

1
app.use(express.json())
2

3
app.get('/', (req, res) => {
4
    console.log(req.query) //get 用query
5
    res.send('get')
6
})
7

8
app.post('/create', (req, res) => {
9
    console.log(req.body) //post用body
10
    res.send('post')
11
})
12

13
//如果是动态参数用 params
14
app.get('/:id', (req, res) => {
15
    console.log(req.params)
16
    res.send('get id')
17
})

模块化#

全部东西写依托很难看和维护，express允许将路由处理程序拆分为多个模块，每个模块负责处理特定的路由。通过将路由处理程序拆分为模块，可以使代码逻辑更清晰，易于维护和扩展

例如文件结构

1
src
2
 --user.js
3
 --list.js
4
app.js

src/user.js

1
import express from 'express';
2

3
const router = express.Router();
4

5
router.post('/login', (req, res) => {
6
    res.json({
7
        code: 200,
8
        msg: '登录成功'
9
    })
10
});
11

12
router.post('/register', (req, res) => {
13
    res.json({
14
        code: 200,
15
        msg: '注册成功'
16
    })
17
});
18

19
export default router;

src/list.js

1
import express from 'express';
2

3
const router = express.Router();
4

5
router.get('/getall', (req, res) => {
6
    res.json({
7
        code: 200,
8
        msg: '获取成功',
9
        data: [{ id: 1 }]
10
    })
11
});
12

13
export default router;

app.js

1
import express from 'express';
2
import User from './src/user.js'
3
const app = express()
4
app.use(express.json())
5
app.use('/user', User)
6
app.get('/', (req, res) => {
7
    console.log(req.query)
8
    res.send('get')
9
})
10

11
app.get('/:id', (req, res) => {
12
    console.log(req.params)
13
    res.send('get id')
14
})
15

16
app.post('/create', (req, res) => {
17
    console.log(req.body)
18
    res.send('post')
19
})
20

21

22
app.listen(3000, () => console.log('Listening on port 3000'))

中间件#

中间件是一个关键概念。中间件是处理HTTP请求和响应的函数，它位于请求和最终路由处理函数之间，可以对请求和响应进行修改、执行额外的逻辑或者执行其他任务。

中间件函数接收三个参数：req（请求对象）、res（响应对象）和next（下一个中间件函数）。通过调用next()方法，中间件可以将控制权传递给下一个中间件函数。如果中间件不调用next()方法，请求将被中止，不会继续传递给下一个中间件或路由处理函数

拿log4js举例子

middleware/logger.js

1
import log4js from 'log4js';
2

3
// 配置 log4js
4
log4js.configure({
5
  appenders: {
6
    out: {
7
      type: 'stdout', // 输出到控制台
8
      layout: {
9
        type: 'colored' // 使用带颜色的布局
10
      }
11
    },
12
    file: {
13
      type: 'file', // 输出到文件
14
      filename: './logs/server.log', // 指定日志文件路径和名称
15
    }
16
  },
17
  categories: {
18
    default: {
19
      appenders: ['out', 'file'], // 使用 out 和 file 输出器
20
      level: 'debug' // 设置日志级别为 debug
21
    }
22
  }
23
});
24

25
// 获取 logger
26
const logger = log4js.getLogger('default');
27

28
// 日志中间件
29
const loggerMiddleware = (req, res, next) => {
30
  logger.debug(`${req.method} ${req.url}`); // 记录请求方法和URL
31
  next();
32
};
33

34
export default loggerMiddleware;

app.js

1
import express from 'express';
2
import User from './src/user.js'
3
import loggerMiddleware from './middleware/logger.js';
4
const app = express()
5
app.use(loggerMiddleware)

防盗链#

防盗链一般主要就是验证host 或者 referer，手动添加一个白名单

1
import express from 'express';
2

3
const app = express();
4

5
const whiteList = ['localhost']
6

7
const preventHotLingking = (req, res, next) => {
8
    const referer = req.get('referer')
9
    if (referer) {
10
        const { hostname } = new URL(referer)
11
        if (!whiteList.includes(hostname)) {
12
            res.status(403).send('403 Forbidden')
13
            return
14
        }
15
    }
16
    console.log(referer)
17
    next();
18
}
19

20
app.use(express.static('static'))
21

22
app.listen(3000, () => {
23
    console.log('Server is running on port 3000');
24
});

跨域问题#

跨域资源共享（Cross-Origin Resource Sharing，CORS）是一种机制，用于在浏览器中实现跨域请求访问资源的权限控制。当一个网页通过 XMLHttpRequest 或 Fetch API 发起跨域请求时，浏览器会根据同源策略（Same-Origin Policy）进行限制。同源策略要求请求的源（协议、域名和端口）必须与资源的源相同，否则请求会被浏览器拒绝，所以我们在做前后端分离的项目的时候百分百遇到

一般解决方法#

举个小例子发送请求

1
fetch('http://localhost:3000/info').then(res=>{
2
    return res.json()
3
}).then(res=>{
4
    console.log(res)
5
})

写个普通的get接口

1
import express from 'express'
2
const app = express()
3
app.get('/info', (req, res) => {
4
    res.json({
5
        code: 200
6
    })
7
})
8
app.listen(3000, () => {
9
    console.log('http://localhost:3000')
10
})

这个时候就会报错，因为跨域了，解决方法就是设置响应头(我这里是5500端口)

1
app.use('*',(req,res,next)=>{
2
    res.setHeader('Access-Control-Allow-Origin','http://localhost:5500')
3
    next()
4
})

请求头#

Accept：指定客户端能够处理的内容类型。
Accept-Language：指定客户端偏好的自然语言。
Content-Language：指定请求或响应实体的自然语言。
Content-Type：指定请求或响应实体的媒体类型。
DNT (Do Not Track)：指示客户端不希望被跟踪。
Origin：指示请求的源（协议、域名和端口）。
User-Agent：包含发起请求的用户代理的信息。
Referer：指示当前请求的源 URL。
Content-type: application/x-www-form-urlencoded | multipart/form-data | text/plain

那么我们需要支持的时候就写

‘Access-Control-Allow-Headers’,‘Content-Type’

请求方法支持#

默认情况下，CORS 仅允许 GET、POST、HEAD和OPTIONS 方法。如果需要支持其他方法，需要设置 Access-Control-Allow-Methods 头。比如需要支持patch

‘Access-Control-Allow-Methods’,‘POST,GET,OPTIONS,DELETE,PATCH’

自定义响应头#

自定义响应头是指在响应中添加自定义的 HTTP 头。自定义响应头可以用于传递额外的信息，例如自定义的错误码、自定义的响应消息等。

1
app.get('/info', (req, res) => {
2
    res.set('zsm', '1')
3
    res.json({
4
        code: 200
5
    })
6
})

那么前端接收的方法也很简单

1
 fetch('http://localhost:3000/info').then(res=>{
2
    const headers = res.headers
3
    console.log(headers.get('zsm'))
4
    return res.json()
5
}).then(res=>{
6
    console.log(res)
7
})

我们只需要去接收读取就行了，但是发现是null 这是因为后端没有抛出该响应头所以后端需要增加抛出的一个字段

1
app.get('/info', (req, res) => {
2
    res.set('zsm', '1')
3
    res.setHeader('Access-Control-Expose-Headers', 'zsm')
4
    res.json({
5
        code: 200
6
    })
7
})

a ctfer on the load