recherche

Maison >interface Web >js tutoriel >Explication détaillée des étapes pour implémenter le HTML dynamique dans nodejs

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

php中世界最好的语言
php中世界最好的语言original
2018-05-22 10:06:172149parcourir

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);
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);
 }
 }
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);
2.3 Méthode principale de demande de publication

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

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;

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>

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Étapes détaillées pour installer Node.js et démarrer le service localArticle suivant：Étapes détaillées pour installer Node.js et démarrer le service local

Articles Liés

Voir plus