原生Node实现静态目录

本文最后更新于:6 个月前

一个朋友让我实现静态资源托管,之前写的都是直接通过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.jpghttp://127.0.0.1:1024/static/1.txt

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