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

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

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

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

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

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

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

简单代码如下。

核心代码，创建http服务器

这个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();

public目录下面是我模拟的一些静态资源

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 1][]![20190517231424182.png][]

当这很简单，比如缓存，加密（摘要），多语言等还没有处理，仅仅是一个基础服务器。

[浏览器缓存][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190517231321123.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190517231340736.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls,size_16,color_FFFFFF,t_70
[20190517231424182.png]: /images/20220130/3238ef4d55104d62b450d12528a50443.png
[Link 1]: https://blog.csdn.net/wust_cyl/article/details/90322678