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