原生Node实现静态目录

一个朋友让我实现静态资源托管，之前写的都是直接通过Express或Koa框架实现的，一行代码就可以解决

app.use('/img', express.static(path.join(__dirname, './img')));

恰好最近在看原生node，于是我自己试着实现了一个简单的静态资源托管，同时也为下篇懒加载文章做铺垫

首先，项目需要在node环境下运行服务器，搭建配置node参照这篇文章

新建server.js文件执行node代码，在server.js中引入等会要用到的模块http和fs（filesystem）

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

在server中创建http服务并且监听1024端口

let server = http.createServer((req, res) => {
    
})
server.listen(1024, () => {
    console.log('服务开启！')
})

然后新增方法同步读取文件内容并返回读取结果

function readFile (filePath) {
    return new Promise((resolve, reject) => {
        fs.readFile(filePath, "binary", (err, data) => {
            if(err) {
                reject(err);
                return
            }
            resolve(data)
        })
    })
}

最后，在http服务中对请求的url做判断，并调用读取文件的函数

    if(req.url.indexOf('/static/') !== - 1) {//判断请求路径是否包含static目录（简单判断）
        console.log('获取静态文件')
        readFile('.' + req.url).then((data) => {
            res.write(data, "binary");
            res.end();
        })
    } else {
        console.log('其他接口')
        res.write("other");
        res.end();
    }

完整的server.js文件

const http = require('http');
const fs = require('fs');
let server = http.createServer((req, res) => {
    if(req.url.indexOf('/static/') !== - 1) {
        console.log('获取静态文件')
        readFile('.' + req.url).then((data) => {
            res.write(data, "binary");
            res.end();
        })
    } else {
        console.log('其他接口')
        res.write("other");
        res.end();
    }
})

function readFile (filePath) {
    return new Promise((resolve, reject) => {
        fs.readFile(filePath, "binary", (err, data) => {
            if(err) {
                reject(err);
                return
            }
            resolve(data)
        })
    })
}

server.listen(1024, () => {
    console.log('服务开启！')
})

server.js完成后，在server目录下创建img文件夹，并放几个静态文件

通过node server.js或node server启动服务器

在浏览器输入框输入url，我这里是：http://127.0.0.1:1024/static/1.jpg和http://127.0.0.1:1024/static/1.txt

显示出相关资源后就算完成了