nodejs 模板引擎

自制替换模板

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 模板引擎的更多相关文章

nodejs 模板引擎ejs的使用
1.test.ejs文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
nodejs 模板引擎jade的使用
1.test.jade文件 html head style body div.box div#div1 div aaa div(class="aaa left-warp active&quo ...
nodejs 模板引擎jade的简单使用(2)
1.jade html head style body div.box div#div1 div aaa div(class="aaa left-warp active") div ...
nodejs 模板引擎ejs的简单使用
ejs1.js /** * Created by ZXW on 2017/11/9. */ var ejs=require('ejs'); ejs.renderFile("},functio ...
nodejs 模板引擎jade的简单使用
1.jade html head style script body div ul li li jade1.js var jade=require('jade'); var str=jade.rend ...
nodejs 模板引擎ejs的简单使用（3）
1.ejs <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...
nodejs 模板引擎ejs的简单使用（2）
test.ejs <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
学习篇：NodeJS中的模板引擎：jade
NodeJS 模板引擎作用:生成页面在node常用的模板引擎一般是 1.jade --破坏式的.侵入式.强依赖(对原有的html体系不友好,走自己的一套体系)2.ejs --温和的.非侵入式的.弱依 ...
前端笔记之NodeJS（三）Express&ejs模板引擎&请求识别
一.Express框架 1.1基本使用创建http服务器特别麻烦,express框架解决了这个的问题. Express在node界的地位,就相当于jQuery在DOM界的地位.jQuery的核心就是 ...

随机推荐

Laya layout算法
/** * <p>重置对象的 <code>X</code> 轴(水平方向)布局.</p> * @private */ public function r ...
CF704D Captain America
http://codeforces.com/problemset/problem/704/D 题解对于两种颜色的染色,我们可以把它看做选择问题. 比如说红色的代价小,所以我们尽可能多的染红色. 然后 ...
180128-----Java面试题
1 不用第三个变量,交换两个的值 a=1;b=2;a=a+b;b=a-b;a=a-b; 2 Java动态代理用什么实现? 反射
Oracle传输数据到Sqlserver
通过Sqlserver的SSIS工具实现数据传输
db2用户权限赋值
 [root@localhost ~]# userad ...
用 MuGo 搭建 Go Engine 在 KGS 对战
MuGo 是一个开源的 Go Engine,下棋能力大概在 10k - 2k 左右. 用 MuGo 搭建 Go Engine 并在 KGS 对战的步骤如下: 1. 安装 TensorFlow 因为 M ...
Java 关键字列表
字描述 abstract 抽象方法,抽象类的修饰符 assert 断言条件是否满足 boolean 布尔数据类型 break 跳出循环或者label代码段 byte 8-bit 有符号数据类型 ca ...
【MM系列】SAP MM模块-组织结构第二篇
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP MM模块-组织结构第二篇 ...
JQ判断div是否隐藏
1. $("#tanchuBg").css("display") 2. $("#tanchuBg").is(":visible ...
react-redux --》react中最好用的状态管理方式
一.Redux与组件 react-redux是一个第三方插件使我们在react上更方便的来使用redux这个数据架构 React-Redux提供connect方法,用于从UI组件生成容器组件,conn ...

nodejs 模板引擎

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

随机推荐

热门专题