静态资源处理器

图构理解 : 

 

问题分析 : 

原因 : 由于我们无法事先得知一个.html文件中会引用多少个静态资源（.png, .css, .js..),

           所以，我们不能像处理某个页面一样去处理它们。

解决办法 : 

1. 把所有的静态资源(.html,.png,.css,.js)全放在一个指定的目录里

2. 收到用户的请求之后，去指定的目录下去找对应的文件

        找到,把内容读出来返回给用户

        找不到,报404

文件结构 : 

 代码 : 

// 1. 导入模块
const http = require('http')
const path = require('path')
const fs = require('fs')


// 2. 创建服务
const server = http.createServer((req, res) => {
  // 如果直接http://localhost:8085 ===> req.url 就是 /,这时，希望它去加载 /index.html
  // 判断
  // if (req.url === '/') {
  //   req.url = '/index.html'
  // } else {
  //   req.url = req.url
  // }
  const url = req.url === '/' ? '/index.html' : req.url

  // 拼接地址
  const filePath = path.join(__dirname, 'public', url)
  console.log('要读取的文件地址是', filePath);
  // filePath => C:\Users\25573\Desktop\node\day03\homework\静态资源处理器\public\public\index.html

  const obj = {
    ".png": "image/png",
    ".jpg": "image/jpg",
    ".html": "text/html;charset=utf8",
    ".js": "application/javascript;charset=utf8",
    ".css": "text/css;charset=utf8"
  }

  // 读入文件
  fs.readFile(filePath, (err, data) => {
    if (err) {
      // ===================
      if (req.url === 'api/getList') {
        const data = {
          list: [{ name: '神荼', age: 20 }, { name: '郁垒', age: 21 }],
          message: '成功',
          qwer: 200
        }
        // 设置响应头
        res.setHeader('content-type', "application/json;charset=utf-8")
      } else {
        // 失败返回
        res.statusCode = 404
        res.end('not found')
      }
      // ===================
    } else {
      // 获取后缀名 extName
      const extName = path.extname(filePath)
      // console.log('本次请求的资源', extName, filePath)

      // 利用策略资源 对象 if设置响应头
      if (obj[extName]) {
        res.setHeader('content-type', obj[extName])
      }
      res.end(data)
    }
  })

})


// 3. 启动服务
server.listen(1002, () => {
  console.log('1002静态资源处理器启动......');
})

终端命令 :