Explication détaillée des étapes pour implémenter le HTML dynamique dans nodejs-js tutoriel-php.cn

Explication détaillée des étapes pour implémenter le HTML dynamique dans nodejs

php中世界最好的语言

Libérer： 2018-05-22 10:06:17

original

2076 Les gens l'ont consulté

Cette fois, je vais vous apporter une explication détaillée des étapes pour implémenter du html dynamique dans nodejs. Quelles sont les précautions pour implémenter du html dynamique dans nodejs. Voici des cas pratiques, jetons un coup d'œil.

Remplacement dynamique du contenu HTML

Fonctions et principes implémentés

Il combine les données du formulaire utilisateur avec HTML et affiche les données saisies par l'utilisateur à la position correspondante du HTML.

Principe : utilisez une expression régulière pour remplacer les données du modèle en HTML telles que le nom d'utilisateur {name}. Vous pouvez obtenir la valeur du nom soumis par l'utilisateur et utiliser

<.>Replace (expression régulière, valeur) remplace les données du modèle d'origine et les envoie au client.

2. Méthodes et modules principalement utilisés

2.1 Module d'opération de fichier var fs=require("fs"); >

Méthode :

2.1.1 Méthode de lecture de fichiers asynchrone

fs.readFile(path,callback);

Copier après la connexion

Description du paramètre :

path : le chemin du fichier (

inclut le fichier

nom) callback : la fonction de rappel

après la lecture du fichier

fichier Les données lues, obtenues à partir de cette méthode, seront automatiquement renseignées

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

Copier après la connexion

2.2 Module de traitement des données var querystring=require("querystring");

Méthode :2.2.1 Convertir la chaîne en objet

querystring.parse(post);

Copier après la connexion

2.3 Méthode principale de demande de publication

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

Copier après la connexion

3. Code de base 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;

Copier après la connexion

4.modèle html

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

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

Copier après la connexion

Lecture recommandée

Explication détaillée de la façon d'utiliser la fonction asynchrone dans js

le nœud construit le serveur, écrit l'interface, ajuste interface, cross Explication détaillée des méthodes de domaine

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!