引入模板引擎(handlebars)

cnpm i handlebars

结构大概是这样子的,新建模板dir.tpl文件和route.js

dir.tpl

<!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 files}}

        <a href="{{../dir}}/{{this}}">{{this}}</a>

    {{/each}}

</body>

</html>

route.js

const fs =require('fs')

const path = require('path')

const Handlebars = require('handlebars')

const promisify = require('util').promisify;

const stat = promisify(fs.stat)

const readdir = promisify(fs.readdir);

const config = require('../config/defaultConfig')

const tplPath = path.join(__dirname,'../template/dir.tpl')

const source = fs.readFileSync(tplPath);

const template = Handlebars.compile(source.toString())

module.exports=async function(req,res,filePath){

    try{

        const stats =await stat(filePath)

        if(stats.isFile()){

            res.statusCode = 200

            res.setHeader('content-Type','text/plain')

            fs.createReadStream(filePath).pipe(res);

            // fs.readFile(filePath,(err,data)=>{

            //     res.end(data)

            // });

        }else if(stats.isDirectory()){

            //所有异步调用必须用await

            const files =await readdir(filePath);

            res.statusCode = 200

            res.setHeader('content-Type','text/html')

            const dir = path.relative(config.root,filePath)

            const data = {

                title:path.basename(filePath),

                // dir:config.root,

                dir:dir?`/${dir}`:'',

                files

            }

            res.end(template(data));

        }

    }catch(ex){

        console.error(ex);

        res.statusCode = 404

        res.setHeader('content-Type','text/plain')

        res.end(`${filePath} is not a directory or file\n ${ex.error}`)

    }

}

app.js

const http = require('http');

const chalk = require('chalk')

const  path = require('path')

const conf = require('./config/defaultConfig.js');

const route = require('./helper/route')

const server = http.createServer((req,res)=>{

    const url = req.url;

    //拿到文件路径

    const filePath = path.join(conf.root,req.url)

    route(req,res,filePath)

});

server.listen(conf.port,conf.hostname,()=>{

    const addr = `http://${conf.hostname}:${conf.port}`;

    console.log(`Server started at ${chalk.green(addr)}`);

})

NodeJS4-4静态资源服务器实战_优化引入模板引擎的更多相关文章

  1. NodeJS4-5静态资源服务器实战_优化压缩文件

    浏览器控制台看一下RequestHeader有一个Accept-Encoding,而RespondHeaders中也会有一个Content-Encoding和他进行对应. Accept-Encodin ...

  2. NodeJS4-3静态资源服务器实战_优化成近似同步写法

    实例3 上面有点回调,优化成近似同步的写法 route.js const fs =require('fs') const promisify = require('util').promisify; ...

  3. NodeJS4-8静态资源服务器实战_构建cli工具

    Cli(command-line interface),中文是 命令行界面,简单来说就是可以通过命令行快速生成自己的项目模板等功能(比较熟悉的是vue-cli脚手架这些),把上述写的包做成Cli工具. ...

  4. NodeJS4-7静态资源服务器实战_缓存

    浏览器发出一个请求,服务器解析出响应的结果返回给浏览器. 缓存是怎么工作的? 用户发起请求,浏览器检查本地是否存在缓存,如果第一次请求没有缓存,那就向服务器发起请求,服务器协商缓存的内容并且返回响应, ...

  5. NodeJS4-9静态资源服务器实战_发到npm上

    登录->publish一下 ->上npm官网查看 -> 安装全局 //登录 npm login //推上去npm npm publish //全局安装 npm i -g 你的文件名

  6. NodeJS4-2静态资源服务器实战_实现获取文件路径

    实例2 : 实现获取文件路径,判断是文件还是文件夹,如果是文件夹就显示里面的列表文件,如果是文件就显示里面的内容 defaultConfig.js module.exports={ root:proc ...

  7. NodeJS4-1静态资源服务器实战_实现访问获取里面的内容

    .gitignore 匹配模式前 / 代表项目根目录 匹配模式最后加 / 代表是目录 匹配模式前加 ! 代表取反 * 代表任意一个字符 ? 匹配任意一个字符 ** 匹配多级目录 统一代码风格配置可以用 ...

  8. NodeJS4-6静态资源服务器实战_range范围请求

    range范围请求:向服务器发起请求可以申明我想请求判断内容的范围,从多少个字节到多少个字节,一次要求把所有的内容拿回来,服务器在得到相应的请求之后,从拿到对应的文件,拿到对应的字节返回给客户端.要实 ...

  9. 使用Node.js搭建静态资源服务器

    对于Node.js新手,搭建一个静态资源服务器是个不错的锻炼,从最简单的返回文件或错误开始,渐进增强,还可以逐步加深对http的理解.那就开始吧,让我们的双手沾满网络请求! Note: 当然在项目中如 ...

随机推荐

  1. 【阿里巴巴-高德-汽车事业部】【内推】Java技术专家、前端技术专家、C++技术专家（长期招聘）

    简历接收邮箱:yx185737@alibaba-inc.com 邮件请备注来自CSDN 一.Java技术专家 职位描述 研究汽车智能化和在线服务前沿技术,从事在线数据服务和车联网服务的设计和研发 负责 ...

  2. ubuntu 16.04源码编译OpenCV教程 | compile opencv on ubuntu 16.04

    本文首发于个人博客https://kezunlin.me/post/15f5c3e8/,欢迎阅读! compile opencv on ubuntu 16.04 Series Part 1: comp ...

  3. Rust 入门 (二)

    我认为学习计算机语言,应该先用后学,这一节,我们来实现一个猜数字的小游戏. 先简单介绍一个这个游戏的内容:游戏先生成一个1到100之间的任意一个数字,然后我们输入自己猜测的数字,游戏会告诉我们输入的数 ...

  4. Django--导出项目依赖库requirements.txt

    虚拟环境下: 1.导出项目依赖库: pip freeze > requirements.txt 2.使用 pip 一次性安装项目的所有依赖项,方法是在命令行中输入:  pip install - ...

  5. C#Windows Forms (Demo.SYS)--xdd

    private void Show_background_picture()//随机更换背景 { ";//默认值 Random ran = new Random(); , );//返回一个1 ...

  6. Batch Normalization详解

    目录 动机 单层视角 多层视角 什么是Batch Normalization Batch Normalization的反向传播 Batch Normalization的预测阶段 Batch Norma ...

  7. kubelet组件部署

    目录 前言 创建 kubelet bootstrap kubeconfig 文件 查看kubeadm为各个节点创建的token 查看各 token 关联的 Secret 创建和分发kubelet参数配 ...

  8. shell脚本介绍、shell脚本结构和执行、date命令用法、shell脚本中的变量

    7月11日任务 20.1 shell脚本介绍20.2 shell脚本结构和执行20.3 date命令用法20.4 shell脚本中的变量 20.1 shell脚本介绍 1.shell脚本语言是linu ...

  9. 关于ios沙盒

    沙盒下主要有四个文件夹:document,caches,tmp,library document 的路径  程序运行时生成的文件,这个文件不要存比较放大的文件,比如音频,视频类,因为这里的东西会被上传 ...

  10. vue实例化过程

    我们在用vue进行开发项目时,是否存在疑惑,new Vue(xxx)的过程中,究竟发生了什么?定义的数据,是如何绑定到视图上的?本篇主要介绍在实例化vue时,主要做了哪些事,文章比较长,主要篇幅内容为 ...