在上一节中，我们是手动写死了返回的html内容，但实际上我们应该读取某个与url匹配的htm文件，并将这些html代码以字符串的方式发送给客户端，这一节我们就来学习，如何读取文件并返回其资源内容。

写在前面

当然，由于现在前端框架的存在，都已经是单页面复应用了，路由都是前端在做的，一般只需要向后端请求一个页面即可，其他的都是通过数据来请求的，不需要像本章节一样一个页面请求一个文件，这是很老套的做法了，但我们还是有必要了解一下Node模块的使用和响应请求的方式。

1.核心思路

image.png

2.基本实现步骤

image.png

image.png

完整实例

  1. // 在上一节中，我们是手动写死了返回的html内容，但实际上我们应该读取某个与url匹配的htm文件
  2. // 并将这些html代码以字符串的方式发送给客户端，这一节我们就来学习，如何读取文件并返回其资源内容。
  4. // 1.导入所需的模块，导入我们学习的全部三个模块
  5. const path = require('path')
  6. const fs = require('fs')
  7. const http = require('http')
  9. // 2.创建web服务器
  10. http.createServer((req, res) => {
  12.   // 3.将资源的请求 url 地址映射为文件的存放路径
  13.   // 3.1 获取客户端请求的url地址:
  14.   // pages/index.html
  15.   // pages/about.html
  16.   const url = req.url
  17.   // 3.2 把请求的url地址，通过path和dirname映射为存放路径
  18.   // const fpath = path.join(__dirname, url)
  20.   // 5.优化资源请求路径  需求：用户不希望url中还包括 pages这一层目录，太长了
  21.   // 5.1 当用户请求 / 时，手动指定首页路径，修改3.2的代码如下：
  22.   let fpath = ''
  23.   if (url === '/') {
  24.     fpath = path.join(__dirname, './pages/index.html')
  25.   } else {
  26.     // 5.2 如果请求的路径部位/，则动态拼接文件路径
  27.     fpath = path.join(__dirname, './pages', url)
  28.     // 如果还想省略扩展名
  29.     // fpath = path.join(__dirname, './pages', (url + '.html'))
  30.   }
  33.   // 4.读取文件的内容并响应给客户端
  34.   fs.readFile(fpath, 'utf8', (err, data) => {
  35.     // 4.1如果读取失败，则返回默认的404
  36.     if (err) return res.end('404 Not Found')
  37.     // 4.2 文件读取成功，将读取的内容回应给客户端
  38.     res.end(data)
  39.   })
  41. }).listen(80, () => {
  42.   console.log('服务器已启动在http://localhost');
  43. })