溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹怎么在nodejs 中實現動態html，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
動態替換html內容
1.實現的功能及原理
實現了將，用戶表單的數據，與html相結合，將用戶輸入的數據，顯示到html對應的位置。
原理：通過正則表達式，替換html中的模板數據 如用戶名{name},可以通過拿到用戶提交的name的值value，通過
replace（正則表達式，value）的方式替換掉原模板數據，并輸出到客戶端。
2.主要用到的方法和模塊
2.1文件操作模塊 var fs=require("fs");
方法：
2.1.1 異步讀取文件的方法
fs.readFile(path,callback);
參數說明:
path:文件的路徑（包含文件名稱）
callback:文件讀取完畢的回調函數
文件讀取的數據，從該方法獲得，會自動填充
callback:function(err,data){
if(err){
//讀取文件錯誤的邏輯
}else{
//對數據的操作，如打印
console.log(data);
}
}2.2 數據處理模塊 var querystring=require("querystring");
方法:
2.2.1 將字符串轉換成對象
querystring.parse(post);
2.3 post請求主要方法
監聽有post數據上傳的方法:request.on('data',funcation(chunk){
//chunk post數據碎片
});
監聽post數據上傳完畢的方法:request.on('end',function(){
//相關邏輯
});3.核心代碼requestHandler.js
/*
請求處理
* */
//加載node非阻塞線程模塊
//var exec=require("child_process").exec;
//加載queryString模塊和文件上傳模塊
var http = require("http");
var formidable = require('formidable');
var fs = require("fs");
var path = require("path");
var querystring=require("querystring");
function login(request, response) {
var post="";
//監聽post發送請求
request.on('data',function (chunk) {
post += chunk;
});
//數據接收完畢
request.on('end',function(){
post=querystring.parse(post);
/*替換的數據模板字段*/
var arr=["name","password"];
function recall (data) {
dataStr = data.toString();
//遍歷模板字段
for (var i = 0; i < arr.length; i++) {
//全局替換
var re=new RegExp('{'+arr[i]+'}','g');
dataStr=dataStr.replace(re,post[arr[i]]);
}
response.writeHead(200, {"Content-Type": "text/html"});
response.write(dataStr);
response.end();
}
fs.readFile("login.html",function (err,data) {
recall(data);
});
});
}
function index (request, response) {
fs.readFile("login.html",function (err,data) {
if (err) {
throw err.toString();
} else{
response.writeHead(200, {"Content-Type": "text/html"});
response.write(data);
response.end();
}
})
}
exports.login = login;
exports.index=index;4.html模板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
用戶名:{name}<br />
<!--
{name},{password}為要替換的模板字段
-->
密 碼:{password}<br />
<form action="/login" method="post">
<input type="text" name="name" /><br />
<input type="password" name="password" /><br />
<input type="submit" value="提交"/>
</form>
</body>
</html>關于怎么在nodejs 中實現動態html就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
