Dieses Mal werde ich Ihnen die Schritte zum Implementieren von dynamischem HTML in NodeJS ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Implementierung von dynamischem HTML in NodeJS?
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>
Empfohlene Lektüre
Ausführliche Erklärung zur Verwendung der Async-Funktion in jsKnoten erstellt Server, schreibt Schnittstelle, passt sich an Schnittstelle, Cross Detaillierte Erläuterung der DomänenmethodenDas obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum Implementieren von dynamischem HTML in NodeJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
