统一处理静态资源

问题分析

由于我们无法事先得知一个.html文件中会引用多少个静态资源（.png, .css, .js....），所以，我们不能像处理某个页面一样去处理它们。

我们的解决办法是：

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

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

• 找到，把内容读出来返回给用户。

• 找不到，报404。

目录如下：

|-public
|-public/index.html
|-public/stye.css
|-public/1.png
|-server.js

在上面的目录结构中，我们把所有的静态资源全放在public下面，然后使用server.js来启动web服务器。

参考代码

const http = require('http')
const fs = require('fs')
const path = require('path')
const obj = {
    ".png":"image/png",
    ".jpg":"image/jpg",
    ".html":"text/html;charset=utf8",
    ".js":"application/javascript;charset=utf8",
    ".css":"text/css;charset=utf8"
}
const sever = http.createServer((req, res)=> {
       //如果直接http://localhost:8085 ===> req.url 就是 /,这时，希望它去加载 /index.html
      const url = '/' ? './index.html' : req.url
      const filePath = path.join(__dirname, 'public', url)
      fs.readFile(filePath, (err, data)=> {
            if(err) {
               res.statusCode = 404
               res.end('not found')
            } else {
               //获取后缀名
               const extName  = path.extName(filePath)
               //设置响应头中的content-type
               if(obj[extName]) {
                  res.setHeader('content-type', obj[extName])
               }    
               res.end(data)
            }
      }
})
sever.listen(9087)