【Node教程】- 搭建静态文件服务器

通过前面的几篇介绍，我们这个教程算正式打开Node开发的大门，学习了环境搭建、然后为了提高各位看官的新趣粗略的介绍了Http模块、之后又了解了Node的模块。之前说过，我们将通过实例来学习Node，从这一篇开始，我们就将用实例来学习各个模块。
这一节我们将学习File System (文件系统)以及Path(路径))并结合之前学习的知识打造 🔨一个Node静态文件服务器

Node.js 文件系统

Node.js提供本地文件的读写能力，基本上类似 UNIX（POSIX）标准的文件操作API。所有的方法都有异步和同步的形式。例如读取文件内容的函数有异步的fs.readFile() 和同步的 fs.readFileSync()。

异步的方法函数最后一个参数为回调函数，回调函数的第一个参数包含了错误信息(error)，则第一个参数会是 null 或 undefined。

1.const fs = require('fs')
2./*异步读取
3. *==================================*/
4.fs.readFile('README.md', function (err, data) {
5.   if (err) {
6.     return console.error(err)
7.   }
8.   console.log("异步读取: " + data.toString())
9.})
10.console.log("程序执行完毕。")

结果：程序执行完毕。会被先打印出来

1./*同步读取
2. *==================================*/
3.const fs = require('fs')
4.const data = fs.readFileSync('README.md')
5.console.log("同步读取: " + data.toString())
6.
7.console.log("程序执行完毕。")

结果：程序执行完毕。后打印出来
强烈推荐大家是用异步方法，比起同步，异步方法性能更高，速度更快，而且没有阻塞

接下来我们一起来看看fs模块的常用方法

写入文件

1.fs.writeFile(file, data[, options], callback)

参数说明：

file - 文件名或文件描述符
data - 要写入文件的数据，可以是 String(字符串) 或 Buffer(流) 对象
options - 该参数是一个对象，包含 {encoding, mode, flag}。默认编码为 utf8, 模式为 0666 ， flag 为 ‘w’，*如果是一个字符串，则它指定了字符编码
callback - 回调函数

以追加模式往README.me写入字符串Hello Node.js

1.fs.writeFile('README.md', 'Hello Node.js', {flag: 'a+'}, (err) => {
2.  if (err) throw err
3.  console.log('It\'s saved!')
4.})

这里我们介绍下flags ：

Flag	描述
r	以读取模式打开文件。如果文件不存在抛出异常。
r+	以读写模式打开文件。如果文件不存在抛出异常。
rs	以同步的方式读取文件。
rs+	以同步的方式读取和写入文件。
w	以写入模式打开文件，如果文件不存在则创建。
wx	类似 ‘w’，但是如果文件路径存在，则文件写入失败。
w+	以读写模式打开文件，如果文件不存在则创建。
wx+	类似 ‘w+’，但是如果文件路径存在，则文件读写失败。
a	以追加模式打开文件，如果文件不存在则创建。
ax	类似 ‘a’，但是如果文件路径存在，则文件追加失败。
a+	以读取追加模式打开文件，如果文件不存在则创建。
ax+	类似 ‘a+’，但是如果文件路径存在，则文件读取追加失败。

打开文件

同步 fs.open(path, flags[, mode], callback)
异步fs.openSync(path, flags[, mode])

参数说明：

path - 文件的路径
flags - 文件打开的行为。具体值详见下文
mode - 设置文件模式(权限)，文件创建默认权限为 0666(可读，可写)
callback - 回调函数，带有两个参数如：callback(err, fd)

1.const fs = require("fs");
2.
3.fs.open('README.md', 'r+', function(err, fd) {
4.   if (err) {
5.       return console.error(err)
6.   }
7.  console.log("文件打开成功！")
8.})

读取文件

1.fs.read(fd, buffer, offset, length, position, callback)

参数说明：

fd - 通过 fs.open() 方法返回的文件描述符
buffer - 是数据将被写入到的 buffer
offset - 是 buffer 中开始写入的偏移量
length - 是一个整数，指定要读取的字节数
position - 是一个整数，指定从文件中开始读取的位置。如果 position 为 null，则数据从当前文件位置开始读取
callback - 回调函数，有三个参数err, bytesRead, buffer，err 为错误信息， bytesRead 表示读取的字节数，buffer 为缓冲区对象

1.const fs = require("fs");
2.let buf = new Buffer(1024)
3.fs.open('README.md', 'r+', function(err, fd) {
4.   if (err) {
5.       return console.error(err)
6.   }
7.  fs.read(fd, buf, 0, buf.length, 0, function(err, bytes){
8.      if (err){
9.         console.error(err);
10.      }
11.      console.log(bytes + "  字节被读取")
12.      // 仅输出读取的字节
13.      if(bytes > 0){
14.         console.log(buf.slice(0, bytes).toString())
15.      }
16.   })
17.})

现在我们就可以从README.md中读取出1kb的数据

读取目录

readdir方法用于读取目录，返回一个所包含的文件和子目录的数组。

1.fs.readdir(path[, options], callback)

同步版本：

1.fs.readdirSync(path[, options])

我们来写个遍历目录的方法吧！这是个同步的(同步版本简单点)

遍历目录时一般使用递归算法，否则就难以编写出简洁的代码。递归算法与数学归纳法类似，通过不断缩小问题的规模来解决问题，目录是一个树状结构，在遍历时一般使用深度优先+先序遍历算法

1.function travel(dir, callback) {
2.    fs.readdirSync(dir).forEach(function (file) {
3.        var pathname = path.join(dir, file)
4.
5.        if (fs.statSync(pathname).isDirectory()) {
6.            travel(pathname, callback)
7.        } else {
8.            callback(pathname)
9.        }
10.    })
11.}

该函数以某个目录作为遍历的起点。遇到一个子目录时，就先接着遍历子目录。遇到一个文件时，就把文件的绝对路径传给回调函数。回调函数拿到文件路径后，就可以做各种判断和处理了：

1.travel(__dirname, function (pathname) {
2.    console.log(pathname)
3.})

接下来，大家可以试着去实现异步遍历，原理都是一样的

关于File System (文件系统)的更多API请自行查看Node中文网，

Path模块

path 模块提供了一些工具函数，用于处理文件与目录的路径，path 模块的默认操作会根据 Node.js 应用程序运行的操作系统的不同而变化。比如，当运行在 Windows 操作系统上时，path 模块会认为使用的是 Windows 风格的路径

常用方法介绍

path.join([...paths])方法用于连接路径

1.path.join('foo', "bar");
2.// 返回: '/foo/bar'
3.
4.path.join('foo', {}, 'bar')
5.// 抛出 TypeError: path.join 的参数必须为字符串

path.resolve() 方法会把一个路径或路径片段的序列解析为一个绝对路径方法用于将相对路径转为绝对路径

1.path.resolve('/foo/bar', './baz')
2.// 返回: '/foo/bar/baz'
3.
4.path.resolve('/foo/bar', '/tmp/file/')
5.// 返回: '/tmp/file'
6.
7.path.resolve('wwwroot', 'static_files/png/', '../gif/image.gif')
8.// 如果当前工作目录为 /home/myself/node，
9.// 则返回 '/home/myself/node/wwwroot/static_files/gif/image.gif'

path.extname() 方法返回 path 的扩展名，即从 path 的最后一部分中的最后一个 .（句号）字符到字符串结束

1.path.extname('index.html')
2.// 返回: '.html'
3.
4.path.extname('index.coffee.md')
5.// 返回: '.md'

关于Path (路径)的更多API请自行查看Node中文网

上面介绍了fs与path模块的几个常用API，在使用时我们应该经常查看API文档，上面所学习的方法已经足够打造一静态文件服务器了，下面我们就一起开完成这个小案例吧。

Node静态文件服务器

这个静态文件服务器大致是这样的：浏览器发送URL，服务端解析URL，对应到硬盘上的文件。如果文件存在，返回200状态码，并发送文件到浏览器端，我们要实现的功能如下：

主页显示当前目录下的文件和文件夹
点击链接可以打开文件或者文件夹

有图有真相，话不多说看图：

Alt text

现在我们来一步一步实现这个小项目

1.首先起一个http服务器

我们先来初始化工作：

新建文件夹file-server
npm init初识初识化生成package.json
新建index.js文件

现在我们在index.js文件中起一个服务器：

1.const http = require('http')
2.
3.const hostname = '127.0.0.1'
4.const port = 3000
5.
6.const server = http.createServer((req, res) => {
7.  res.statusCode = 200
8.  res.setHeader('Content-Type', 'text/plain')
9.  res.end('Hello World\n')
10.})
11.
12.server.listen(port, hostname, () => {
13.  console.log(`服务器运行在 http://${hostname}:${port}`)
14.})

还记得我们第一节让大家自己如了解的supervisor工具吗？它可以实现监测文件修改并自动重启应用

1.$ supervisor --harmony index.js
2.Running node-supervisor with
3.  program '--harmony 7.js'
4.  --watch '.'
5.  --extensions 'node,js'
6.  --exec 'node'
7.
8.Starting child process with 'node --harmony 7.js'
9.Watching directory '/Users/mac/development/node/src/lesson4' for changes.
10.Press rs for restarting the process.
11.服务器运行在 http://127.0.0.1:3000

🚩现在我们这个服务器跑了起来，而且每次更该文件后不需要手动重启服务。

2.处理URL请求

1.const http = require('http')
2.const url = require('url') //引入url模块
3.
4.const hostname = '127.0.0.1'
5.const port = 3000
6.
7.const server = http.createServer((req, res) => {
8.  if(req.url == '/favicon.ico') return //不响应favicon请求
9.  // 获取url->patnname 即文件名
10.  let pathname = path.join(__dirname, url.parse(req.url).pathname)
11.  pathname = decodeURIComponent(pathname) // url解码，防止中文路径出错
12.  console.log(pathname) // .../node-abc/lesson4/file-server/ 请求的pathname
13.})
14.
15.server.listen(port, hostname, () => {
16.  console.log(`服务器运行在 http://${hostname}:${port}`)
17.})

3. 读取文件发送给浏览器

接下来我们就运用本节所讲的文件系统的知识来处理文件,

记得上面引入fs和path模块
1.先来处理文件夹：

1.....
2.  if(req.url == '/favicon.ico') return //不响应favicon请求
3.  // 获取url->patnname 即文件名
4.  let pathname = path.join(__dirname, url.parse(req.url).pathname)
5.  pathname = decodeURIComponent(pathname) // url解码，防止中文路径出错
6.  console.log(pathname) // .../node-abc/lesson4/file-server/ 请求的pathname
7.
8.  /**
9.   * 判断文件是否是文件夹
10.   * 是：返回文件列表
11.   * 否：读取文件内容
12.   */
13.   // stat方法的参数是一个文件或目录，它产生一个对象，该对象包含了该文件或目录的具体信息。我们往往通过该方法，判断正在处理的到底是一个文件，还是一个目录，这儿使用的是它的同步版本
14.    if(fs.statSync(pathname).isDirectory()){
15.        // 设置响应头
16.        res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'})
17.        fs.readdir(pathname, (err, files)=>{
18.            res.write('<ul>')
19.            files.forEach((item)=>{
20.                // 处理路径
21.                let link = path.join(url.parse(req.url).pathname, item)
22.                res.write(`<li><a href="${link}">${item}</a></li>`)
23.            })
24.            res.end('</ul>')
25.        })
26.    }
27....

我们先用fs.statSync(pathname).isDirectory()来判断是否为文件夹，是则给浏览器返回当前文件夹下的文件列表，请求/直返回：

Alt text

此处我们新建了个test文件夹放了一些文件作为测试文件

2.文件处理

因为我们的服务器同时要存放html, css, js, png, gif, jpg等等文件。并非每一种文件的MIME类型都是text/html的，所以这里我们引入了mime模块，来处理mime支持

1.const mime = require('mime');
2.
3.// mime 2.x lookup 更名为 getType
4.mime.lookup('/path/to/file.txt');         // => 'text/plain'
5.mime.lookup('file.txt');                  // => 'text/plain'
6.mime.lookup('.TXT');                      // => 'text/plain'
7.mime.lookup('htm');                       // => 'text/html'
8.//具体使用移步官网

这儿用到了前面讲的文件读取：

1.else{
2.  // 以binary读取文件
3.  fs.readFile(pathname, 'binary', (err, data)=>{
4.    if(err){
5.      res.writeHead(500, { 'Content-Type': 'text/plain'})
6.      res.end(JSON.stringify(err))
7.      return false
8.    }
9.    res.writeHead(200, {
10.      'Content-Type': `${mime.lookup(pathname)};charset:UTF-8`
11.    })
12.    res.write(data, 'binary')
13.    res.end()
14.  })
15.}

如果路径不是文件夹，就读取具体的文件，这儿我们以二进制(binary)编码读取，你也可以试试UTF-8比较他们的区别。

到此我们这个Node静态文件服务器就算搭建完成👏👏👏，当然了还有许多优化的地方如：缓存、Gzip、页面美化等等…在此就不做介绍了，请自行搜索了解。

总结：

这一节我们了解了fs模块，path模块。并运用这些知识搭建一简单的文件服务器

一切学问最重要的是融会贯通,要把它转变成自身的学问.