自制替换模板
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>