创建一个静态服务器

图例

---

问题分析

由于我们无法事先得知一个.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 path = require('path')
const fs = require('fs')

//obj
const obj = {
        ".png": "image/png",
        ".jpg": "image/jpg",
        ".html": "text/html;charset=utf8",
        ".js": "application/javascript;charset=utf8",
        ".css": "text/css;charset=utf8"
    }
    //创建服务
    // req 请求过程, res 响应结果
const server = http.createServer((req, res) => {
        console.log('res')
            //当地址栏地址为/时  默认地址是index.html
        const url = req.url === '/' ? 'index.html' : req.url
            //拼接地址
        const filePath = path.join(__dirname, 'publie', url)
    })
    //读入文件

fs.readFile(filePath, (err, data) => {
    if (err) {
        req.statusCode = 404
        res.end('not found')
    } else {
        //将地址的后缀文件名截取
        const extName = path.extname(filePath)
            //当obj存在 给响应头设置一个该后缀名所需要的请求体
        if (obj[extname]) {
            //设置响应头为 obj中对应类型
            res.setHeader('content-type', obj[extName])
        }
        res.end(data)
    }
})
server.listen(8080)