创建一个静态资源服务器

1.准备工作

新建一个项目文件夹  起名 xxx

打开项目文件夹 写入想要访问的文件

 打开编辑器 创建一个js文件 里面写代码实现效果

 2.在static.js里写代码

// 导入 三个内置模块 http fs path 
// 导入
const http = require('http')
const fs = require('fs')
const path = require('path')
// 调用内置模块 http的createServer() 方法 创建服务 
// createServer()两个参数 req res
// req 代表请求 res 代表响应

const server = http.createServer((req,res)=>{
    // 我们可以打印出来 内容过多 就不展示了
    // console.log(req);
    // console.log(res);
    // Uniform Resource Locator，统一资源定位符。我们需要了解的概念
    // 我们需要得到url来判断请求的是个什么文件 以便后面做判断
    // 为什么需要判断 我们当我们输入不同的文件名要显示不同的内容
    // 通过req.url 拿到用户输入的url 
    const url = req.url
    console.log(url);
    // 加判断 url 
    if(url==='/index.html'){
        // 通过 fs当前读取文件 注意文件路径使用拼接写法
        fs.readFile(path.join(__dirname,'index.html'),(err,data)=>{
            // 响应的状态 通过 res.statusCode设置 
            res.statusCode = 200
            // 设置响应头 为什么设置响应头 文件类型很多 浏览器要知道我们要访问什么类型的文件 该怎么给我们展示、
            // 一般浏览器会自动识别文件类型 当然我们可以自己设置 通过 setHeader()
            res.setHeader('content-type','text/html')
            // 响应体 就是我们访问这个服务器给我们展示的内容 我们之前已经通过fs得到 拿来用就可以 注意类型
            // 可以接受 buffer 字符串 
            res.end(data)
        })
        
    }else if(url==='/imgs/a.jpg'){
        fs.readFile(path.join(__dirname,'imgs/a.jpg'),(err,data)=>{
            res.statusCode = 200
            // 设置响应头
            // res.setHeader('content-type','text/css ;charset=utf8')
            res.setHeader('content-type', 'image/jpg')
            res.end(data) 
        })
    }else if(url==='/js/index.js'){
        fs.readFile(path.join(__dirname,'js/index.js'),(err,data)=>{
            res.statusCode = 200
            // 设置响应头
            res.setHeader('content-type', 'application/javascript;charset=utf8') 
            res.end(data) 
        })
    }else if(url==='/index.css'){
        fs.readFile(path.join(__dirname,'index.css'),(err,data)=>{
            res.statusCode = 200
            // 设置响应头
            res.setHeader('content-type', 'text/css;charset=utf8') 
            res.end(data) 
        })
    }
    
    else{
        res.statusCode = 404
        res.end('ok')
    }
})
// 启动服务 注意端口的设置 [0，65535] 
server.listen(8088, function() {
            console.log('服务器启动成功，请在http://localhost:8088中访问....');
});
我们可以通过这个地址访问这里面的内容

我们会发现什么问题？

当我们把css js 引入到html文件中 如果我们没用读取css js 文件 html文件就不会有css样式和js的效果  所以就会有二次解读的问题 我们必须把每个文件读取一遍 如果我们有一百张图片 我们需要写一百次esle if 不停的读取 非常麻烦 

同时还有响应头的问题 不同的文件设置不同的响应头 

怎么解决

我们将所有读取的文件放在同一文件夹下 通过拼接地址找到对应的文件读取 

// 导入
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 server = http.createServer((req,res)=>{
    // 当我们只输入地址 就可以显示内容
    // 如果直接http://localhost:8008 ===> req.url 就是 /,这时，希望它去加载 /index.html
    const url = req.url === '/' ? '/index.html' : req.url
    const file = path.join(__dirname,'jihe',url)
    fs.readFile(file,(err,data)=>{
        // 错误读取不到 
        if(err){
            res.statusCode = 404
            res.end('no found')
        }else{
            // 获取后缀名 通过后缀名判断响应头
            const extName = path.extname(file)
            // console.log('本次请求的资源', extName, file)
            if(obj[extName]) {
                res.setHeader('content-type', obj[extName])
            }
            res.end(data)
        }
    })
})
server.listen(8008, function() {
    console.log('服务器启动成功，请在http://localhost:8008中访问....');
});

flie打印的内容因为我将css js文件已经已经引入到html里 在读取html文件时也会读取它带的文件

常见的几种文件类型及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')