NodeJS -- 一个简单的静态资源服务器-蒲公英云

NodeJS -- 一个简单的静态资源服务器

女爷i 2022-01-30 03:49 483阅读 0赞

我们的目标是创建一个静态服务器，我们可以指定主机，端口，和根目录，如果访问的是文件夹，那么就显示文件目录，如果是文件，那么就显示出来。

思路：我们使用http模块创建一个服务器，我们从req.url获取pathname,然后和根目录合成文件路径，通过fs.stat模块来判断文件是文件夹还是文件。

如果是文件夹，那么通过fs.readdir读取所有文件的文件名，通过handlebars模板html来简单展示。

如何是文件，那么读取文件（比如我们可以创建一个可读流然后pipe(res)，我们需要简单的利用mime模块来获取文件的文件类型，然后设置Content-type.）

对于如何修改主机，端口，文件目录，我们使用yargs，来获取命令行里面的参数，然后在创建http服务器时，设置这些参数。

简单代码如下。

核心代码，创建http服务器

const path = require("path");
const fs = require("fs");
const http = require("http");
const url = require("url");
const { promisify } =  require("util"); 
const mime = require("mime");
const handlebars = require("handlebars"); //用户生成模板html
const chalk = require("chalk"); //用于命令行显示颜色
const config = require("./config/config"); //基础配置项s
const stat = promisify(fs.stat); //返回一个用promise改写的fs.stat
const readdir = promisify(fs.readdir);//读取文件夹
class Server {
    constructor (argv = {}) {
        const source = fs.readFileSync(path.resolve(__dirname, "..", "./template/index.html"), { encoding: "utf8" });
        this.template = handlebars.compile(source); //编译一下模板html
        this.config = Object.assign({}, config, argv)
    }
    start () { //开启服务器
        const server = http.createServer(this.server.bind(this));
        server.listen(this.config.port, () => {
            console.log(`${chalk.red(""+this.config.host+":"+this.config.port)}服务器${chalk.green('已经启动')}`)
        })
    }
    async server (req, res) { //异步函数
        const { pathname } = url.parse(req.url); //获取请求路径
        if (pathname === "/favicon.ico") return ; //
        const filename = path.join(this.config.root, pathname);
        try {
            const status = await stat(filename); //获取文件的状态
            if (status.isDirectory()) { //如果是文件夹，那么就显示所有文件 使用模板html
                let dir =  await readdir(filename); //获取文件 使用
                dir.forEach((file, index, arr) => {
                    arr[index] = {
                        url: path.join(pathname, file),
                        name: file
                    }
                });
                res.setHeader("Content-Type", "text/html");
                let html = this.template({ title: "当前文件夹如下", file: dir });
                res.write(html);
                res.end();
            } else { //如果是文件 那么就读处理显示
                res.setHeader("Content-Type", mime.getType(filename)); //设置Content-type属性
                fs.createReadStream(filename).pipe(res); 
            }
        } catch (err) { //读取文件状态出现问题情况
            console.log(err);
        }
    }
}
module.exports = Server;

这个config的导出基础配置项

module.exports = {
    host: "localhost",
    port: 8080,
    root:  process.cwd()
}

这是模板HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{
   {title}}</title>
</head>
<body>
    {
   {#each file}}
    <ul>
        <li ><a href={
   {url}}>{
   {name}}</a></li>
    </ul>
    {
   {/each}}
</body>
</html>

这是启动的文件。

//使用yargs 来获取命令行的参数
const Server = require("../src/app");
const yargs = require("yargs");
const argv = yargs.option("d", {
    alias: "root", //别名 -d -root 一样
    demand: true,
    description: "根目录",
    default: process.cwd() //默认值
}).option("p", {
    alias: "port", //端口  
    demand: true,
    description: "端口",
    default: 8080 //默认值
}).option("o", {
    alias: "host", //主机
    demand: true,
    description: "主机",
    default: "localhost" //默认值
}).usage("node app.js -d / -p 8080 -o localhost") //用法格式
.example("node app.js -d / -p 8080 -o localhost", "设置/为根目录 8080为端口 localhost为主机")
.argv;
new Server(argv).start();