自制替换模板

template.js

var fs = require('fs')

var http = require('http')

var server = http.createServer()

var wwwDir = 'D:/vuejs/nodejs/day2'

server.on('request', function (req, res) {

	var url = req.url

	fs.readFile('./template.html', function ( err, data ) {

		if (err) {

			return res.end('404 Not fount!!!!')

		}

		//1. 得到路径下所有文件名和目录名

			//fs.readdir('路径',function (err, data) {})

		//2. 将得到的文件名和目录名替换到template.html中

			//2.1 在template.html 中需要替换的位置预留特殊标记

			//2.2 根据 files 生成 Html 内容

		fs.readdir(wwwDir, function (error , files) {

			if (error) {

				return res.end('Can not find www dir.')

			}

			var content = ''

			files.forEach(function (item) {

				 content += `

				 	<tr>

						<td>${item}</td>

						<td>删 | 改</td>

					</tr>

				 `

			})

			data = data.toString()

			//console.log(data.replace( 'replacestring', content ));

			data = data.replace( 'replacestring', content )

			res.end( data )

		})

	})

})

server.listen(3000, function () {

	console.log('runing.....')

})

　　

template.html

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<title>213</title>

</head>

<body>

	<table>

		<tr>

			<td>文件名</td>

			<td>操作</td>

		</tr>

		replacestring

	</table>

</body>

</html>

ART-TEMPLATE 模板

github 网址:      https://aui.github.io/art-template/docs/installation.html

安装 :

npm install art-template --save

使用:

　　1. 在需要使用的文件模块中加载 art-template

　　2. 只需要使用 require 方法加载就可以了: require('art-template')

var template = require('art-template')

var fs = require('fs')

var http = require('http')

var server = http.createServer()

server.on('request', function (req, res) {

	var url = req.url

	var tplStr = fs.readFile( './tplStr.html', function (err, data) {

		if (err) {

			res.end(err)

		}

		data = data.toString()

		var ret = template.render( data , {

			name: 'Jason',

			age : 18,

			province: '北京市',

			hobbies: ['写代码','唱歌','打游戏']

		})

		res.end(ret)

	})

})

server.listen(3000, function () {

	console.log('runing.....')

})

　　

tplStr.html  页面代码

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<title>tplStr</title>

</head>

<body>

	<p> 大家好, 我叫 {{ name }}, </p>

	<p> 我今年 {{ age }} 岁了, </p>

	<p> 我来自 {{ province }}, </p>

	<p> 我喜欢 {{ each hobbies }} {{ $value }} {{ /each }} </p>

</body>

</html>

　

例子2:

文件夹:

    heedback

    ---public

    -----css

    -----img

    -----js

    -----lib

    ---views

    -----index.html

    -----post.html

    -----404.html

    ---app.js

　　

app.js  代码

var http = require('http')

var fs   = require('fs')

var template = require('art-template')

var url  = require('url')

var comments = [

	{

		name: '张三',

		message: '今天天气不错',

		dateTime: '2019-10-16'

	},

	{

		name: '张三2',

		message: '今天天气不错',

		dateTime: '2019-10-16'

	},

	{

		name: '张三3',

		message: '今天天气不错',

		dateTime: '2019-10-16'

	},

	{

		name: '张三4',

		message: '今天天气不错',

		dateTime: '2019-10-16'

	},

	{

		name: '张三5',

		message: '今天天气不错',

		dateTime: '2019-10-16'

	}

]

http

	.createServer(function (req, res) {

		//使用 url.parse 方法将路径解析为一个方便操作的对象, 第二个参数为true 将查询字符串转为对象

		var parseObj = url.parse(req.url, true)

		//var url = req.url

		//单独获取不包含查询字符串的路径部分

		var pathname = parseObj.pathname

		if (pathname === '/') {

			fs.readFile('./views/index.html', function (err, data) {

				if ( err ) {

					return res.end('404 Not Found.')

				}

				var htmlStr = template.render( data.toString(), {

					comments: comments

				})

				res.end(htmlStr)

			})

		} else if ( pathname === '/post' ) {

			fs.readFile('./views/post.html', function (err, data) {

				if (err) {

					return res.end('404 Not found.')

				}

				res.end(data)

			})

		} else if ( pathname.indexOf('/public/') === 0 ) {

			// /public/css/main.css

			// 统一处理:

			// 		如果请求路径是以 /public/ 开头的,则我认为你要获取 public 中的某资源

			// 		把请求路径当文件路径来直接进行读取

			fs.readFile( '.' + pathname, function (err, data) {

				if ( err ) {

					return res.end('404 Not Found')

				}

				res.end(data)

			})

		} else if ( pathname === '/pinglun' ) {

			//console.log( parseObj )

			//res.end(JSON.stringify(parseObj.query))

			var comment = parseObj.query

			comment.dateTime = '2019-11-02 17:17:17'

			//comments.push(comment)

			comments.unshift(comment)

			//服务器让客户端重定向

			//	1. 状态码设置为302 临时重定向

			//		statusCode

			//	2. 在响应投中通过 Location 告诉客户端往哪重定向

			//		setHeader

			res.statusCode = 302

			res.setHeader( 'Location', '/' )

			res.end()

		} else {

			fs.readFile('./views/404.html', function (err, data) {

				if (err) {

					return res.end('404 Not found.')

				}

				res.end(data)

			})

		}

	})

	.listen(3000, function () {

		console.log('running....')

	})

　

views/index.html  代码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>留言本</title>

  <!--

    浏览器收到 HTML 响应内容之后，就要开始从上到下依次解析，

    当在解析的过程中，如果发现：

      link

      script

      img

      iframe

      video

      audio

    等带有 src 或者 href（link） 属性标签（具有外链的资源）的时候，浏览器会自动对这些资源发起新的请求。

   -->

   <!--

      注意：在服务端中，文件中的路径就不要去写相对路径了。

      因为这个时候所有的资源都是通过 url 标识来获取的

      我的服务器开放了 /public/ 目录

      所以这里的请求路径都写成：/public/xxx

      / 在这里就是 url 根路径的意思。

      浏览器在真正发请求的时候会最终把 http://127.0.0.1:3000 拼上

      不要再想文件路径了，把所有的路径都想象成 url 地址

    -->

  <link rel="stylesheet" href="/public/lib/bootstrap/bootstrap.css">

</head>

<body>

  <div class="header container">

    <div class="page-header">

      <h1>Example page header <small>Subtext for header</small></h1>

      <a class="btn btn-success" href="/post">发表留言</a>

    </div>

  </div>

  <div class="comments container">

    <ul class="list-group">

      {{each comments}}

      <li class="list-group-item">{{ $value.name }}说：{{ $value.message }} <span class="pull-right">{{ $value.dateTime }}</span></li>

      {{/each}}

    </ul>

  </div>

</body>

</html>

　　

views/post.html  代码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <link rel="stylesheet" href="/public/lib/bootstrap/bootstrap.css">

</head>

<body>

  <div class="header container">

    <div class="page-header">

      <h1><a href="/">首页</a> <small>发表评论</small></h1>

    </div>

  </div>

  <div class="comments container">

    <!--

      以前表单是如何提交的？

      表单中需要提交的表单控件元素必须具有 name 属性

      表单提交分为：

        1. 默认的提交行为

        2. 表单异步提交

        action 就是表单提交的地址，说白了就是请求的 url 地址

        method 请求方法

            get

            post

     -->

    <form action="/pinglun" method="get">

      <div class="form-group">

        <label for="input_name">你的大名</label>

        <input type="text" class="form-control" required minlength="2" maxlength="10" id="input_name" name="name" placeholder="请写入你的姓名">

      </div>

      <div class="form-group">

        <label for="textarea_message">留言内容</label>

        <textarea class="form-control" name="message" id="textarea_message" cols="30" rows="10" required minlength="5" maxlength="20"></textarea>

      </div>

      <button type="submit" class="btn btn-default">发表</button>

    </form>

  </div>

</body>

</html>

　　

views/404.html 代码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<body>

  <h1>抱歉!  您访问的页面失联啦...</h1>

</body>

</html>

　　

nodejs 模板引擎的更多相关文章

  1. nodejs 模板引擎ejs的使用

    1.test.ejs文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  2. nodejs 模板引擎jade的使用

    1.test.jade文件 html head style body div.box div#div1 div aaa div(class="aaa left-warp active&quo ...

  3. nodejs 模板引擎jade的简单使用(2)

    1.jade html head style body div.box div#div1 div aaa div(class="aaa left-warp active") div ...

  4. nodejs 模板引擎ejs的简单使用

    ejs1.js /** * Created by ZXW on 2017/11/9. */ var ejs=require('ejs'); ejs.renderFile("},functio ...

  5. nodejs 模板引擎jade的简单使用

    1.jade html head style script body div ul li li jade1.js var jade=require('jade'); var str=jade.rend ...

  6. nodejs 模板引擎ejs的简单使用（3）

    1.ejs <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  7. nodejs 模板引擎ejs的简单使用（2）

    test.ejs <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  8. 学习篇：NodeJS中的模板引擎：jade

    NodeJS 模板引擎作用:生成页面 在node常用的模板引擎一般是 1.jade --破坏式的.侵入式.强依赖(对原有的html体系不友好,走自己的一套体系)2.ejs --温和的.非侵入式的.弱依 ...

  9. 前端笔记之NodeJS（三）Express&ejs模板引擎&请求识别

    一.Express框架 1.1基本使用 创建http服务器特别麻烦,express框架解决了这个的问题. Express在node界的地位,就相当于jQuery在DOM界的地位.jQuery的核心就是 ...

随机推荐

  1. spring学习笔记之---JDBC Template

    JDBC  Template(简化持久化操作) (一)创建项目 (1)Maven配置 <dependencies> <dependency> <groupId>ju ...

  2. 高通camera基本代码架构【转】

    本文转载自:http://blog.sina.com.cn/s/blog_c0de2be70102vyn1.html 1  camera基本代码架构 高通平台对于camera的代码组织,大体上还是遵循 ...

  3. 【洛谷P1310 表达式的值】

    题目链接 题目描述 对于1 位二进制变量定义两种运算: 运算的优先级是: 先计算括号内的,再计算括号外的. “× ”运算优先于“⊕”运算,即计算表达式时,先计算× 运算,再计算⊕运算.例如:计算表达式 ...

  4. uid auid euid的区别

    关于euid suid guid,参考这篇很好的文章 uid auid euid的区别? initially: 最初地, 一开始地 jackson had initially bloodied his ...

  5. day47—JavaScript事件基础应用

    转行学开发,代码100天——2018-05-02 1.事件对象 JavaScript中事件对象通常用定义变量ev或event表示.为了兼顾浏览器兼容问题,定义事件对象为 var oEvent = ev ...

  6. 【运维相关】MongoDB那些坑

    前言 某个早期技术债务项目线上有一个mongoDB服务,用途很简单,存一些文件而已.不过用户那边突然报个bug说上边的图片丢失了,起初没当回事认为是代码遇到错了,直到后来看了用户详细的bug复现后,登 ...

  7. bp文件错误消除

    代码文件报错, error: unused parameter 'data' [-Werror,-Wunused-parameter]‘ 按提示在cflags中加入: "-Wunused-p ...

  8. 红米note2 刷机 注意问题：

    其他的百度都有,用刷线宝刷 红米note2 刷机   注意问题: 关机状态线下,链接电脑,按着音量下键不松手,按电源键开机后松开,即进入刷机模式. 其中,红米,红米1s移动,红米note移动3g/联通 ...

  9. 合并流SequenceInputStream

    合并流 SequenceInputStream概述 SequenceInputStream类可以将多个输入流串流在一起,合并为一个输入流,因次,该流也称为合并流. SequenceInputStrea ...

  10. OpenResty json 删除转义符

    OpenResty 中删除 json 中的转义符 cjson 在 encode 时  “/” 会自动添加转义符 “\”: 在 decode 时也会自动将转义符去掉.工作中有个特殊需求,需要手工删除转义 ...