Dieses Mal zeige ich Ihnen, wie Sie NodeJS zum Implementieren von dynamischem HTML verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung von NodeJS zum Implementieren von dynamischem HTML?
Dynamischer Ersatz von HTML-Inhalten
1. Implementierte Funktionen und Prinzipien
Es kombiniert die Benutzerformulardaten mit HTML und zeigt die vom Benutzer eingegebenen Daten an der entsprechenden HTML-Position an.
Prinzip: Verwenden Sie regulären Ausdruck, um die Vorlagendaten in HTML zu ersetzen, z. B. den Benutzernamen {Name}. Sie können den Wert des vom Benutzer übermittelten Namens abrufen und
Replace (regulärer Ausdruck, Wert) ersetzt die ursprünglichen Vorlagendaten und gibt sie an den Client aus.2. Hauptsächlich verwendete Methoden und Module
2.1 Dateioperationsmodul var fs=require("fs"); >
Methode:2.1.1 Asynchrone Dateilesemethode
fs.readFile(path,callback);
Pfad: der Pfad der Datei (
enthält den Dateinamen Rückruffunktion nach Abschluss des DateilesensDateilesen Die Mit dieser Methode erhaltene Daten werden automatisch in
callback:function(err,data){
if(err){
//读取文件错误的逻辑
}else{
//对数据的操作，如打印
console.log(data);
}
}
Methode eingefügt :2.2.1 String in Objekt konvertieren
querystring.parse(post);
监听有post数据上传的方法:request.on('data',funcation(chunk){
//chunk post数据碎片
});
监听post数据上传完毕的方法:request.on('end',function(){
//相关逻辑
});
3. Kerncode 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-Vorlage<!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>
Empfohlene Lektüre:
Wie man $emit und $on in Vue bedient, um mit Eltern-Kind- und Geschwisterkomponenten zu kommunizierenSo verwenden Sie die JS-Ereignisbindung und das EreignisflussmodellDas obige ist der detaillierte Inhalt vonSo implementieren Sie dynamisches HTML mit NodeJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
