自制替换模板

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. A - Biorhythms (第三周)

    A - Biorhythms 链接:https://vjudge.net/contest/154063#problem Description 人生来就有三个生理周期,分别为体力.感情和智力周期,它们 ...

  2. sed的一些应用

    1. sed 使用变量进行替换,注意使用参数 r 时,需要放在参数 i 的前面 下面这个例子是用2.txt中的版本号替换docker-compose.yml中的版本号,其中变量UPGRADE_NAME ...

  3. CDQ求子矩阵的和

    Description维护一个W*W的矩阵,初始值均为S.每次操作可以增加某格子的权值,或询问某子矩阵的总权值.修改操作数M<=160000,询问数Q<=10000,W<=20000 ...

  4. Python发送邮件（常见四种邮件内容）

    Python发送邮件(常见四种邮件内容) 转载 2017年03月03日 17:17:04   转自:http://lizhenliang.blog.51cto.com/7876557/1875330 ...

  5. CopyOnWriteArrayList 源码分析

    CopyOnWriteArrayList CopyOnWriteArrayList 能解决什么问题?什么时候使用 CopyOnWriteArrayList? 1)CopyOnWriteArrayLis ...

  6. Html mate标签的常见功能

    一.常用的功能 1.禁止屏幕缩放 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, us ...

  7. 链表两数相加(add two numbers)

    问题 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来表示它 ...

  8. css-sprite 雪碧图的使用,合并多张小图,背景图片当按钮的设置

    背景图片基础: 使用background-image来设置背景图片 语法: background-image:url(相对与css的路径) 如果背景图片大于元素,默认会显示图片的左上角 如果背景图片和 ...

  9. Java代码执行过程概述

    Java代码经历三个阶段:源代码阶段(Source) -> 类加载阶段(ClassLoader) -> 运行时阶段(Runtime) 首先我们来理清一下Java代码整个执行过程, 让我们对 ...

  10. F. Fixing Banners

    http://codeforces.com/gym/102394/problem/F F. Fixing Banners time limit per test 1 second memory lim ...