统一管理静态资源(使用http模块)

前言

从服务器获取html文件之后，如果这个html文件中还引用了其它的外部资源（图片，样式文件等），则浏览器会重新再发请求。由于我们无法事先得知一个.html文件中会引用多少个静态资源（.png, .css, .js…），所以，我们不能像处理某个页面一样去处理它们。

解决办法

1. 把所有的静态资源(.html,.png,.css,.js)全放在一个指定的目录里统一管理；
2. 然后使用server.js来启动web服务器,
-收到用户的请求之后，去指定的目录下去找对应的文件.
- 找到，把内容读出来返回给用户。
- 找不到，报404。
3. 文件目录如下：

4. sever.js参考代码

// 完成server.js代码
// http://localhost:8082/index.html   <----- public/index.html
// http://localhost:8082/style.css   <----- public/style.css

const http = require('http')
const path = require('path')
const fs = require('fs')

    // “策略模式”
    // .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 server = http.createServer((req, res)=>{
    // 如果直接http://localhost:8085 ===> req.url 就是 /,这时，希望它去加载 /index.html
    const url = req.url === '/' ? '/index.html' : req.url

    // 如果 req.url 要访问的文件在public能找到，就读出来，返回
    const filePath = path.join(__dirname,'public', url)

    // console.log('要读取的文件地址是',filePath )
    fs.readFile(filePath,(err, data)=>{
        if(err){
            res.statusCode = 404
            res.end('not found')
        } else {
            // 获取后缀名
            const extName = path.extname(filePath)
            console.log('本次请求的资源', extName, filePath)

            // 设置响应头中的content-type
            if(obj[extName]) {
                res.setHeader('content-type', obj[extName])
            }
            res.end(data)
        }
    }
})
server.listen(8085)