引入模板引擎(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. 扛把子组20191017-5 alpha week 2/2 Scrum立会报告+燃尽图 04

    此作业要求参见[https://edu.cnblogs.com/campus/nenu/2019fall/homework/9801] 一.小组情况 队名:扛把子 组长:迟俊文 组员:宋晓丽 梁梦瑶 ...

  2. 从零开始在ubuntu上配置深度学习开发环境

    从零开始在ubuntu上配置深度学习开发环境 昨天一不小心把原来配置好的台式机的开发环境破坏了,调了半天没有调回来,索性就重装一次ubuntu系统.这篇文章主要记录一个简单的.‘傻瓜式’教程. 一.U ...

  3. 新闻实时分析系统-Kafka分布式集群部署

    Kafka是由LinkedIn开发的一个分布式的消息系统,使用Scala编写,它以可水平扩展和高吞吐率而被广泛使用.目前越来越多的开源分布式处理系统如Cloudera.Apache Storm.Spa ...

  4. SQL SERVER中SELECT和SET赋值相同点与不同点

    SELECT和SET在SQL SERVER中都可以用来对变量进行赋值,但其用法和效果在一些细节上有些不同. 1. 在对变量赋值方面,SET是ANSI标准的赋值方式,SELECT则不是.这也是SET方式 ...

  5. html background-image 图片打开失败的原因

    写网页的时候遇到一个问题,在样式表里面引用background-image,没有出现效果.查了一下是提取图片的路径不对,记录下遇到问题以及解决方法. 1.系统自带url 引号问题 这个最坑,以为系统就 ...

  6. Java方法之定义形式及可变参数

    目录 Java方法之定义形式及可变参数 方法调用 使用static修饰的方法 没有static修饰的方法 方法的定义格式 无参无返 无参有返 有参无返 有参有返 形参个数可变的方法 采用数组形参来定义 ...

  7. 10-kubernetes serveraccount RBAC

    目录 认证安全 serviceAccountName 和 userAccount serviceaccount 创建 使用admin 的SA 测试 URL访问kubernetes资源 APIserve ...

  8. SimpleXML使用详解

    SimpleXML使用详解 介绍 SimpleXML提供了一种简单,直观的方法来处理XML.它只有一个单一类型的类,三个函数和六个方法. 使用SimpleXML SimpleXMLElement 类是 ...

  9. 移动端开发语言的未来的猜想#华为云&#183;寻找黑马程序员#【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...

  10. 下一代容器架构已出，Docker何去何处？看看这里的6问6答！！

    我猜很多人一看这个标题已经感觉很懵逼了,什么?下一代容器都出来了,我还没学Docker呢!!! 咳咳~~在这里我给大家做一个保证,下一代容器目前也只是各个公司在测试阶段,Github上面也有很多Iss ...