Detaillierte Erläuterung der Schritte zum Implementieren von dynamischem HTML in NodeJS-js-Tutorial-php.cn

Detaillierte Erläuterung der Schritte zum Implementieren von dynamischem HTML in NodeJS

php中世界最好的语言

Freigeben： 2018-05-22 10:06:17

Original

2076 Leute haben es durchsucht

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Methode eingefügt :2.2.1 String in Objekt konvertieren

querystring.parse(post);

Nach dem Login kopieren

2.3 Post-Request-Hauptmethode

 监听有post数据上传的方法:request.on('data',funcation(chunk){
 //chunk post数据碎片
 });
 监听post数据上传完毕的方法:request.on('end',function(){
 //相关逻辑
 });

Nach dem Login kopieren

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;

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Ausführliche Erklärung zur Verwendung der Async-Funktion in js

Knoten erstellt Server, schreibt Schnittstelle, passt sich an Schnittstelle, Cross Detaillierte Erläuterung der Domänenmethoden

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