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>