[JavaScript知识库]统一处理静态资源

批量处理请求?

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

解决办法：

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

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

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

  • 找不到，报404。

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

目录如下

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

参考代码如下：

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

// 策略模式：出现一一对应关系的时候，通过对象来优化代码
// .png --> 'image/png'
// .html --> 'text/html;charset=utf8'
// .js --> 'application/javascript;charset=utf8'
// .css --> 'text/css;charset=utf8'

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
      // 拼接完整路径；若 req.url 要访问的文件在public能找到，就读出来，返回
      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(8088, () => {
  console.log('服务器已经在8082端口启动成功啦！');
})

常见的几种文件类型及content-type

• .html：res.setHeader('content-type', 'text/html;charset=utf8')

• .css：res.setHeader('content-type', 'text/css;charset=utf8')

• .js：res.setHeader('content-type', 'application/javascript;charset=utf8')

• .png：res.setHeader('content-type', 'image/png')

• .json：res.setHeader('content-type', 'application/json;charset=utf-8'?

?