動態替換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>
新聞熱點
疑難解答
圖片精選
