前端学习 node 快速入门 系列 —— 初步认识 node

其他章节请看:

前端学习 node 快速入门 系列

初步认识 node

node 是什么

node(或者称node.js)是 javaScript(以下简称js) 运行时的一个环境。不是一门语言。

以前 js 只能运行在浏览器中,浏览器中的 js 包含:bom(例如 window)、dom(例如 document)、ecmascript、js 引擎;现在 js 也可以运行在 node 中,node 中的 js 包含:ecmascript(服务端不操作页面,所以不需要 bom 和 dom)和 js 引擎。

我们编写的 js 只是一些字符串文本,只有 js 引擎才能识别和处理它们;js 引擎有很多种,chrome v8引擎是目前最好的,而且开源;node 的作者就是基于 chrome v8开发了一个 js 运行时环境。

node 能做什么

  • 写 web 服务器后台(java,php 能做的,node也能做)
  • 做项目构建工具,例如 webpack、vue-cli 都是用 node 写的
  • 做命令行工具,例如 hexo(一款快速、简洁且高效的博客框架)就是用 node 写的
  • 用于桌面开发

安装 node

进入 node 官网,来到下载页面,下载对应平台的 node 即可。我的是 windows 平台,下载后傻瓜式(一路 next)安装即可。安装成功后配置一下环境变量(将 nodejs 的安装目录配置到 path 中),接着打开命令行工具,输入 node --version,如果能输出 node 的版本说明安装成功。

node 有当前发布版本和长期支持版。前者包含最新特性,可用于学习,后者更稳定。下载页面也有node 以往的版本的入口,可以从中下载特定版本的 node。

hello-world

创建一个 js 文件,内容输入 console.log('hello world'),保存文件后,在命令行中输入 node file-name 就运行了我们的第一个程序。

$ node 1.js 
hello world

我们在浏览器中,通常会通过 F12 打开开发者工具,输入一些测试语句,例如 Array.isArray(1),node 也有类似的环境。在命令行中输入 node 回车,即可进入。请看示例(我的终端是Git Bash):

$ node
Welcome to Node.js v12.18.1.
Type ".help" for more information.
> console.log(1+1)
2
undefined
> Math.max(1,3,5,7,-1)
7
> Array.isArray(1)
false
> window
Uncaught ReferenceError: window is not defined
> document
Uncaught ReferenceError: document is not defined
> typeof fs
'object'
> typeof http
'object'
>

如果需要退出控制台,按 Ctrl + c 即可。

最简单的读写文件

需求:读取某个文件的内容并输出到控制台;将一段代码写入某文件

这里我们只需要使用 node 的内置模块 fs(文件系统)中的两个方法 readFile()writeFile() 方法。

先实现读取文件。打开 readFile() 的 api,复制里面的代码,微调,保存在 2.js 中:

// 导入内置模块 fs
const fs = require('fs')
// 读取 1.js
// 1.js 中的内容是:console.log('hello world')
fs.readFile('1.js', (err, data) => {
    if (err) throw err;
    console.log(data.toString()); // {1}
});

在命令行中运行该文件:

$ node 2
console.log('hello world')

如果不调用 toString() 方法(行{1}),则输出的是十六进制 <Buffer 63 6f 6e 73 6f 6c 65 2e 6c 6f 67 28 27 68 65 6c 6c 6f 20 77 6f 72 6c 64 27 29>

也可以指定编码来让它正常输出,就像这样:

...
fs.readFile('1.js', 'utf8', (err, data) => {
    if (err) throw err;
    console.log(data);
});
// 输出:console.log('hello world')

写文件就很简单了,找到 writeFile() 对应的api,微调,代码如下:

const fs = require('fs')
const data = 'console.log(1+2)'
fs.writeFile('1.js', data, (err) => {
  if (err) throw err;
  console.log('The file has been saved!');
});

再次运行 $ node 2,然后验证 1.js 文件的内容是否已改成 console.log(1+2)

:本系列教程只讲大概5个内置核心模块,不会详细讲解 node 的 API,API 是讲不完的。在node 以往的版本中有每个版本对应的API文档。本系列教程选用的API文档是node 12.18.1

最简单的服务器

需求:启动一个服务器,通过浏览器访问能显示 Hello-World

将以下代码保存在一个 js 文件中,用 node 运行后会启动一个服务器。

const http = require('http')
const listenCallback = () => { 
    console.log('服务启动成功')
}
const requestCallback = () => {
    console.log('已接到您的请求...')
}

const server = http.createServer() // {1}
server.listen('3000', listenCallback) // {2}
server.on('request', requestCallback) // {3}

浏览器输入 http://localhost:3000/ 即可访问这个服务器。服务器接收到请求,会触发 requestCallback 回调,这个简单的服务器由于没有实现响应请求的功能,所以我们会看到浏览器会一直转圈圈,等待服务器的返回。

$ node 3.js
服务启动成功
// 浏览器访问服务器后输出
已接到您的请求...

Tip:服务器就是一台 24 小时不断电的电脑,服务器上可能有多个应用,所以需要端口号来定位具体的应用;我们的浏览器与服务器通信时,浏览器也会开启一个端口;我们测试可以使用 3000、5000 这些没被占用的端口号。

首先通过 http.createServer(行{1})创建一个服务器,接着通过行 server.listen(行{2})启动 HTTP 服务器以侦听连接,最后通过 server.on(行{3})给服务器注册 request 事件的回调。

:初次接触 Node 的 api 可能会不太适应。笔者就有这种感受,首先 http.createServer() 方法没有示例,只说返回的是 http.Server 的实例;其次 server.listen() 的语法是从 http.Server 的父类 net.Server 中才找到 server.listen([port[, host[, backlog]]][, callback]);最后 .on() 到底是谁的方法?最初只在 http.Server 中找到 Event: 'request',是告诉我 server 这个对象支持哪些事件吗,最终在源码(我用的编辑器是vscode,直接点进去,就可以看到对应的源码,源码是用 typescript 写的)中发现了下面的线索:

// createServer() 方法返回 Server
function createServer(requestListener?: RequestListener): Server; // {1}

// Server 中有 addListener() 和 on()
class Server extends events.EventEmitter {
    ...
    addListener(event: string, listener: (...args: any[]) => void): this; // {2}
    ...
    on(event: string, listener: (...args: any[]) => void): this; // {3}
    ...
}

createServer() 方法返回 Server,在 class Server 中 定义了 on() 方法。

此外,addListener()(行{2})和 on()(行{3})好像只是方法名不同,用 node 的控制台做如下测试,发现 on() 应该是 addListener() 的别名。

D:\>node
Welcome to Node.js v12.18.1.
> http.createServer().on === http.createServer().addListener
true
>

现在只差最后一步:给浏览器返回数据。需要用到下面两个方法:

response.write(chunk[, encoding][, callback])

  • 这发送了响应主体的一部分。可以多次调用此方法以提供身体的连续部分

response.end([data[, encoding]][, callback])

  • 此方法向服务器发出信号,指示所有响应头和主体已发送。该服务器应认为此消息已完成。必须在每个响应上调用方法response.end()

接着添加服务器响应功能,将 Hello World 输出到浏览器页面。需要改动的代码只有 requestCallback() 方法,请看示例:

...
const requestCallback = (req, res) => {
    res.write('Hello World')
    res.end()
}
...

到此,这个需求就做完了。

我们在此基础上稍微扩展一下。

后端传给前端的通常是 json 数据,模拟如下:

...
const requestCallback = (req, res) => {
    const data = {
        status: 200,
        message: '成功',
        data: {}
    }
    res.write(data)
    res.end()
}
...

浏览器访问后,发现 node 控制台报错,提示只能传 String 或 Buffer 类型的数据,再次修改为 res.write(JSON.stringify(data)),重启 node(每次修改完 node 代码都需要重新重启 node,后续不在重复说明),浏览器访问页面显示 {"status":200,"message":"鎴愬姛","data":{}}中文乱码了。

虽然 write() 方法中默认编码是 utf8,但浏览器的编码默认是根据操作系统来,在中文操作系统中浏览器的编码是 gbk,服务器和客户端编码格式不同,于是乱码了。

既然浏览器的编码是 gbk,那我将服务器这边编码指定为 gbk 是否就不会乱码?修改代码为 res.write(JSON.stringify(data), 'gbk'),结果浏览器页面出不来了,浏览器控制台输出了一个错误信息:net::ERR_INVALID_CHUNKED_ENCODING

网上说 node 不支持 gbk,再次修改代码为 res.write(JSON.stringify(data), 'base64'),访问页面,没有了错误信息,直接触发了一个下载。

node 到底支持哪些编码,又在哪里声明的?

突然想到文档中说 write() 方法只支持 String 和 Buffer两种数据,于是在 Buffer 中看到 Buffer.isEncoding() 方法,作用是:如果 encoding 是支持的字符编码的名称,则返回true;否则返回false。

$ Buffer.isEncoding('utf-8')
true
$ Buffer.isEncoding('gbk')
false
$ Buffer.isEncoding('base64')
true
$

在 Buffer 源码中找到了支持的字符编码,请看:

// Buffer class
type BufferEncoding = "ascii" | "utf8" | "utf-8" | "utf16le" | "ucs2" | "ucs-2" | "base64" | "latin1" | "binary" | "hex";

既然不能把 node 的编码改为 gbk,那么我们就把浏览器的编码改成 node 的编码 utf8,请看代码:

...
const requestCallback = (req, res) => {
    ...
    /*
    Content-type,决定浏览器以什么形式,什么编码读取这个文件

    格式:Content-Type:type/subtype;parameter
        type:主类型,任意的字符串,如text,如果是*号代表所有;
        subtype:子类型,任意的字符串,如html,如果是*号代表所有,用“/”与主类型隔开;
        parameter:可选参数,如charset,boundary等。

    文件扩展名与 Content-type 对应关系可以在 w3school 中查阅
    */
    res.setHeader('Content-type', 'text/html;charset=utf8') // {1}
    res.write(data)
    ...
}
...

新增 res.setHeader()(行{1}),通过设置 Content-type 决定浏览器用什么编码读取这个文件。若只输入 charset=utf8,经测试,仍旧乱码。

如果给浏览器返回一段 html 字符串,浏览器会有什么表现?请看下面测试:

// 提示:end() 如果指定了data,则等效于调用 write(data),然后调用 end()

// test1:浏览器输出:hello world 浣犲ソ 
res.end('<h1>hello world 你好</h1>') 

// test2:浏览器输出:hello world 你好 
res.setHeader('Content-type', 'text/html;charset=utf8')
res.end('<h1>hello world 你好</h1>')

// test3:浏览器输出:<h1>hello world 你好</h1>
res.setHeader('Content-type', 'text/plain;charset=utf8')
res.end('<h1>hello world 你好</h1>')

test1 表明,node 不显式声明 Content-type,如果给浏览器返回 html 字符串,浏览器也能自动识别并渲染出来,效果与 test2 相同。

其他章节请看:

前端学习 node 快速入门 系列

posted @ 2021-03-07 21:02  彭加李  阅读(1088)  评论(0编辑  收藏  举报