前端学习 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 快速入门 系列