初识Node使用模板引擎实现Apach

原理：

1.使用fs.readdir得到 wwwDir 目录列表中的文件名和目录名
2.如何将得到的文件名和目录名替换到 template.html 中
- 2.1 在 template.html 中需要替换的位置预留一个特殊的标记（就像以前使用模板引擎的标记一样）
- 2.2 根据 files 生成需要的 HTML 内容
3.发送解析替换过后的响应数据

1.安装node_modules

npm install art-template

2.渲染template页面

这个页面是直接拿的www下的html


<html dir="ltr" lang="zh" i18n-processed=""><head><meta charset="utf-8"><meta name="google" value="notranslate"><style>h1 {border-bottom: 1px solid #c0c0c0;margin-bottom: 10px;padding-bottom: 10px;white-space: nowrap;}table {border-collapse: collapse;}th {cursor: pointer;}td.detailsColumn {-webkit-padding-start: 2em;text-align: end;white-space: nowrap;}a.icon {-webkit-padding-start: 1.5em;text-decoration: none;}a.icon:hover {text-decoration: underline;}a.file {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMAAAAAAABupgeRAAABHUlEQVR42o2RMW7DIBiF3498iHRJD5JKHurL+CRVBp+i2T16tTynF2gO0KSb5ZrBBl4HHDBuK/WXACH4eO9/CAAAbdvijzLGNE1TVZXfZuHg6XCAQESAZXbOKaXO57eiKG6ft9PrKQIkCQqFoIiQFBGlFIB5nvM8t9aOX2Nd18oDzjnPgCDpn/BH4zh2XZdlWVmWiUK4IgCBoFMUz9eP6zRN75cLgEQhcmTQIbl72O0f9865qLAAsURAAgKBJKEtgLXWvyjLuFsThCSstb8rBCaAQhDYWgIZ7myM+TUBjDHrHlZcbMYYk34cN0YSLcgS+wL0fe9TXDMbY33fR2AYBvyQ8L0Gk8MwREBrTfKe4TpTzwhArXWi8HI84h/1DfwI5mhxJamFAAAAAElFTkSuQmCC ") left top no-repeat;}a.dir {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAd5JREFUeNqMU79rFUEQ/vbuodFEEkzAImBpkUabFP4ldpaJhZXYm/RiZWsv/hkWFglBUyTIgyAIIfgIRjHv3r39MePM7N3LcbxAFvZ2b2bn22/mm3XMjF+HL3YW7q28YSIw8mBKoBihhhgCsoORot9d3/ywg3YowMXwNde/PzGnk2vn6PitrT+/PGeNaecg4+qNY3D43vy16A5wDDd4Aqg/ngmrjl/GoN0U5V1QquHQG3q+TPDVhVwyBffcmQGJmSVfyZk7R3SngI4JKfwDJ2+05zIg8gbiereTZRHhJ5KCMOwDFLjhoBTn2g0ghagfKeIYJDPFyibJVBtTREwq60SpYvh5++PpwatHsxSm9QRLSQpEVSd7/TYJUb49TX7gztpjjEffnoVw66+Ytovs14Yp7HaKmUXeX9rKUoMoLNW3srqI5fWn8JejrVkK0QcrkFLOgS39yoKUQe292WJ1guUHG8K2o8K00oO1BTvXoW4yasclUTgZYJY9aFNfAThX5CZRmczAV52oAPoupHhWRIUUAOoyUIlYVaAa/VbLbyiZUiyFbjQFNwiZQSGl4IDy9sO5Wrty0QLKhdZPxmgGcDo8ejn+c/6eiK9poz15Kw7Dr/vN/z6W7q++091/AQYA5mZ8GYJ9K0AAAAAASUVORK5CYII= ") left top no-repeat;}a.up {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAmlJREFUeNpsU0toU0EUPfPysx/tTxuDH9SCWhUDooIbd7oRUUTMouqi2iIoCO6lceHWhegy4EJFinWjrlQUpVm0IIoFpVDEIthm0dpikpf3ZuZ6Z94nrXhhMjM3c8895977BBHB2PznK8WPtDgyWH5q77cPH8PpdXuhpQT4ifR9u5sfJb1bmw6VivahATDrxcRZ2njfoaMv+2j7mLDn93MPiNRMvGbL18L9IpF8h9/TN+EYkMffSiOXJ5+hkD+PdqcLpICWHOHc2CC+LEyA/K+cKQMnlQHJX8wqYG3MAJy88Wa4OLDvEqAEOpJd0LxHIMdHBziowSwVlF8D6QaicK01krw/JynwcKoEwZczewroTvZirlKJs5CqQ5CG8pb57FnJUA0LYCXMX5fibd+p8LWDDemcPZbzQyjvH+Ki1TlIciElA7ghwLKV4kRZstt2sANWRjYTAGzuP2hXZFpJ/GsxgGJ0ox1aoFWsDXyyxqCs26+ydmagFN/rRjymJ1898bzGzmQE0HCZpmk5A0RFIv8Pn0WYPsiu6t/Rsj6PauVTwffTSzGAGZhUG2F06hEc9ibS7OPMNp6ErYFlKavo7MkhmTqCxZ/jwzGA9Hx82H2BZSw1NTN9Gx8ycHkajU/7M+jInsDC7DiaEmo1bNl1AMr9ASFgqVu9MCTIzoGUimXVAnnaN0PdBBDCCYbEtMk6wkpQwIG0sn0PQIUF4GsTwLSIFKNqF6DVrQq+IWVrQDxAYQC/1SsYOI4pOxKZrfifiUSbDUisif7XlpGIPufXd/uvdvZm760M0no1FZcnrzUdjw7au3vu/BVgAFLXeuTxhTXVAAAAAElFTkSuQmCC ") left top no-repeat;}html[dir=rtl] a {background-position-x: right;}#parentDirLinkBox {margin-bottom: 10px;padding-bottom: 10px;}#listingParsingErrorBox {border: 1px solid black;background: #fae691;padding: 10px;display: none;}</style><title id="title">{{ title }}</title>
</head><body><div id="listingParsingErrorBox">糟糕！Google Chrome无法解读服务器所发送的数据。请<a href="http://code.google.com/p/chromium/issues/entry">报告错误</a>，并附上<a href="LOCATION">原始列表</a>。</div><h1 id="header">D:\Movie\www\ 的索引</h1><div id="parentDirLinkBox" style="display:none"><a id="parentDirLink" class="icon up"><span id="parentDirText">[上级目录]</span></a></div><table><thead><tr class="header" id="theader"><th onclick="javascript:sortTable(0);">名称</th><th class="detailsColumn" onclick="javascript:sortTable(1);">大小</th><th class="detailsColumn" onclick="javascript:sortTable(2);">修改日期</th></tr></thead><tbody id="tbody">{{each files}}<tr><td data-value="apple/"><a class="icon dir" href="/D:/Movie/www/apple/">{{$value}}/</a></td><td class="detailsColumn" data-value="0"></td><td class="detailsColumn" data-value="1509589967">2017/11/2 上午10:32:47</td></tr>{{/each}}</tbody></table>
</body></html>

3.完成index.js


var http = require('http')
var fs = require('fs')
var template = require('art-template')var server = http.createServer()var wwwDir = 'E:/www'server.on('request', function (req, res) {var url = req.urlfs.readFile('./template.html', function (err, data) {if (err) {return res.end('404 Not Found.')}fs.readdir(wwwDir, function (err, files) {if (err) {return res.end('Can not find www dir.')}    var htmlStr = template.render(data.toString(), {title: 'www',files: files,}    res.end(htmlStr)})})
})
server.listen(3000, function () {console.log('running...')
})

初识Node使用模板引擎实现Apach相关推荐

node+ejs模板引擎的应用
前言: 最近在开发一个关于后台管理系统的基础开发平台,解释一下就是不管什么管理系统都有一些相同的功能,但是又有一些细节不一样,这个基础平台就是实现对于基础功能可以进行快速开发,主要有自定义的生成功能代 ...
node中模板引擎、模块导出、package.json简介
在node.js中使用引擎模板: art-template不仅在浏览器可以使用,也可以在node中使用,并且模板引擎起早诞生于服务器领域,在node中使用模板引擎: 1.安装:在一个文件目录下执行命令 ...
Node.js模板引擎： Jade入门
Jade是Node.js的一个模板引擎,它借鉴了Haml的很多地方,所以语法上和Haml比较相近.并且,Jade也支持空格. 1.标签在Jade里,一行开头的任何文本都被默认解释成HTML标签.并且 ...
源于 Node.js的HTML 模板引擎Jade的一个hello world项目
Jade 是一个高性能的模板引擎,它深受 Haml 影响,它是用 JavaScript 实现的,并且可以供 Node 使用.其使用也是非常简单易学的. 我们现在看一下如何用Jade做一个最简单的nod ...
node --- 在express中配置使用模板引擎(art-template)
下载依赖: npm install --save art-template express-art-template 配置: // app.js const express = require(&qu ...
Jade —— 源于 Node.js 的 HTML 模板引擎
2013-12-11 发布 Jade -- 源于 Node.js 的 HTML 模板引擎开源项目介绍 web 模板引擎 node.js jade 207.8k 次阅读 · 读完需要 69 分钟 ...
Node.js「四」—— 路由 / EJS 模板引擎 / GET 和 POST
本文为 Node.js 系列笔记第四篇.文章参考:nodejs 教程:<深入浅出 Node.js>:阮一峰 nodejs 博客: Node.js v16.13.0 文档文章目录一.路由 ...
Node 简介、模块、模板引擎、NPM、文件操作、缓冲区、文件流、网络操作、Express框架
一.Node简介 1.1 客户端的JavaScript是怎样的问题答什么是 JavaScript 脚本语言运行在浏览器中一般用来做客户端页面的交互(Interactive) JavaScri ...
Node.js 动手实现简单的模板引擎（列表渲染）
准备HTML模板文件index.html <!DOCTYPE html> <html lang="en"> <head><meta cha ...

初识Node使用模板引擎实现Apach

原理：

1.安装node_modules

2.渲染template页面

3.完成index.js

初识Node使用模板引擎实现Apach相关推荐

最新文章

热门文章