自制替换模板

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. USACO2018 DEC (Gold) (dp，容斥+哈希，最短路)

    \(T1\) 传送门 解题思路 傻逼\(dp\)..直接\(ST\)表处理最大值\(O(n^2)\)艹过了. 代码 #include<bits/stdc++.h> using namesp ...

  2. SpringCloud 教程 （三）高可用的服务注册中心

    一.准备工作 Eureka can be made even more resilient and available by running multiple instances and asking ...

  3. npm install 成功安装依赖后，运行跑不起来怎么办？

    最近接手公司的项目,由于代码历史悠久,据说已经最少经历过了6个人的手,查看gitee提交的年限,竟然是1-2年前的代码,好吧.这个锅总得有人接,既然是架构师,就要勇于面对挑战,今天把我解决的方法记录起 ...

  4. 如何降低Vue.js项目中Webpack打包文件的大小？

    https://blog.csdn.net/maray/article/details/50988500?utm_source=blogxgwz0 import Blur from ‘vux/src/ ...

  5. 关于scroll,client,innear,avail,offset等的理解

    在写实例理解scrollWidth,clientWidth,innearWidth,availWidth及offsetWidth等的时候,意外的又发现了margin值合并的问题,在这里同时记录下 1. ...

  6. codeforces 657C - Bear and Contribution [想法题]

    题目链接: http://codeforces.com/problemset/problem/657/C ----------------------------------------------- ...

  7. 007-Spring Boot-@Enable*注解的工作原理-EnableConfigurationProperties、ImportSelector、ImportBeanDefinitionRegistrar

    一.@Enable* 启用某个特性的注解 1.EnableConfigurationProperties 回顾属性装配 application.properties中添加 tomcat.host=19 ...

  8. JSPDF 原理

    Jspdf是一个将html内容生成pdf文件的库,原理是对输入浏览器的文字或二进制图片进行base64编码转换,以pdf中应有的形式组织,最终以data uri scheme, data:applic ...

  9. 深入理解webpack（二） webpack-dev-server基本配置

     摘要:webpack-dev-server是一个使用了express的Http服务器,它的作用主要是为了监听资源文件的改变,该http服务器和client使用了websocket通信协议,只要资源文 ...

  10. 阶段1 语言基础+高级_1-2 -面向对象和封装_14private关键字的作用及使用

    新建一个类Person代表人 创建demo03Person类去调用Person这个类 年龄设置为负数.虽然可以设置为负数.但是这个数值不合理 外部访问这个age就会报错 负数设置不进来.正数也设置不了 ...