自制替换模板

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. express 和 pm2 建立博客

    前置知识 node.js 相关 服务器相关 在本地参照 express 官网的例子写成后, 上传服务器. 服务器安装 pm2 ,实用 pm2 保护进程. 注意静态文件实用的方法 app.use(exp ...

  2. bat语法

    注释 :: 注释无回显 rem 注释有回显 关闭和开启回显 :: 关闭回显 @echo off echo abc :: 开启回显 echo on echo 查看命令帮助说明 rd /? 目录操作 创建 ...

  3. 关于MonoBehaviour的单例通用规则

    长久以来,对于基于MonoBehaviour的单例总是心有梗结,总觉得用得很忐忑,今天,终于有时间思考和总结了下,理清了想通了.代码和注释如下: 其中GameLogic是我们自己的控制游戏生命周期的管 ...

  4. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_04 IO字节流_11_字节输入流一次读取多个字节

    参数带字节数组的 把字节数组转换为字符串 文件里面有ABCDE 再来读取一次 再来读取一次.读取的结果是ED 再来读取,-1到时输出了.但是还是把ED读取出来了. 原理 第一步创建流对象 第二部创建数 ...

  5. 《图解设计模式》读书笔记8-3 STATE模式

    目录 State模式 示例程序 实现的功能 不使用&使用状态模式对比 示例程序的类图 代码 角色和类图 角色 类图 拓展思路 分而治之 依赖于状态的处理 谁来管理状态迁移 易于增加新状态 实例 ...

  6. 常用模块random/os/sys/time/datatime/hashlib/pymysql等

    一.标准模块 1.python自带的,import random,json,os,sys,datetime,hashlib等 ①.正常按照命令:打开cmd,执行:pip install rangdom ...

  7. centos6.5搭建禅道

    linux用一键安装包 简介:本文介绍如何在linux下面使用禅道一键安装包搭建禅道的运行环境. 一.安装 二.如何访问数据库 linux一键安装包内置了XXD.apache, php, mysql这 ...

  8. 【python+selenium自动化】图像识别技术在UI自动化测试中的实际运用

    引言: 目前在图像识别方面的自动化测试框架有很多,其中比较有名的是airtest,主要做手机端的游戏自动化测试(http://airtest.netease.com/) 因为没有实际把airtest运 ...

  9. idea注册

    1:要先得到一个注册码 http://idea.lanyus.com/ 2:之后需要在引导下 修改文件 使用前请将“0.0.0.0 account.jetbrains.com”添加到hosts文件中

  10. js导入外部文件