nodejs實作動態html步驟詳解-js教程-PHP中文網

首頁

web前端

js教程

nodejs實作動態html步驟詳解

php中世界最好的语言

May 22, 2018 am 10:06 AM

html javascript nodejs

這次帶給大家nodejs實作動態html步驟詳解，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(&#39;{&#39;+arr[i]+&#39;}&#39;,&#39;g&#39;);
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>

登入後複製

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！