Heim > Artikel > Web-Frontend > So implementieren Sie dynamisches HTML mit NodeJS

So implementieren Sie dynamisches HTML mit NodeJS

php中世界最好的语言Original: 2018-05-30 11:05:062207Durchsuche

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);

Parameterbeschreibung:

Pfad: der Pfad der Datei (

enthält den Dateinamen

) Rückruf: die

Rückruffunktion nach Abschluss des Dateilesens

Dateilesen Die Mit dieser Methode erhaltene Daten werden automatisch in

callback:function(err,data){
 if(err){
 //读取文件错误的逻辑
 }else{
 //对数据的操作，如打印
 console.log(data);
 }
 }

2.2 Datenverarbeitungsmodul var querystring=require("querystring");

Methode eingefügt :2.2.1 String in Objekt konvertieren

querystring.parse(post);

2.3 Post-Request-Hauptmethode

 监听有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(&#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-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>

Ich glaube, ich habe es gesehen Ich habe die Methode in diesem Artikel gemeistert. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie man $emit und $on in Vue bedient, um mit Eltern-Kind- und Geschwisterkomponenten zu kommunizieren

So verwenden Sie die JS-Ereignisbindung und das Ereignisflussmodell

Das 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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So installieren Sie Node.js und starten den lokalen DienstNächster Artikel：So installieren Sie Node.js und starten den lokalen Dienst

In Verbindung stehende Artikel

Mehr sehen