服务器统一处理静态资源

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

我们的解决办法是：

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

• 然后使用server.js来启动web服务器

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

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

  • 找不到，报404。

---

看一下代码~

//统一处理静态资源

//1、加载模块
const http = require('http')
const fs = require('fs')
const path=require('path')

//策略模式
const obj = {
    '.html': 'text/html;charset=utf8',
    '.jpg': 'image/jpg',
    ".png":"image/png",
    '.css': 'text/css;charset=utf8',
    '.js': 'application/javascript',
    '.ico': 'image/ico'
}

//2、创建服务
const server = http.createServer((req, res) =>
{
 
//http://localhost:8088/ 省略index.html
const url = req.url === '/' ? 'index.html' : req.url
//获取绝对地址    
const filePath = path.join(__dirname, 'public', url)
    
//如果 req.url要访问的文件在public能找到，就读出来，返回
    fs.readFile(filePath, (err, data) => {
        if (err) {
            //filePath地址读取错误，返回404 not found
            res.statusCode = 404
            res.end('not found')
        } else {
            //地址读取成功

            //设置响应头中的content-type
            // 获取后缀名
            const extName = path.extname(filePath)
            console.log('本次请求的资源', extName, filePath)

            if (obj[extName]) {
                
                res.setHeader('content-type', obj[extName])
            }
            //请求结束 设置响应体
            res.end(data)
    }
})
})

//3、启动服务
server.listen(8088, () => {
    console.log('服务器启动')
})