recherche

Maison  >  Article  >  interface Web  >  Comment implémenter du HTML dynamique à l'aide de nodejs

Comment implémenter du HTML dynamique à l'aide de nodejs

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

Cette fois, je vais vous montrer comment utiliser nodejs pour implémenter du html dynamique. Quelles sont les précautions pour utiliser nodejs pour implémenter du html dynamique. 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 via

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>
</html>

Lecture recommandée :

Comment utiliser $emit et $on en vue pour communiquer avec les composants parent-enfant et frères et sœurs


Comment utiliser la liaison d'événements JS, modèle de flux d'événements

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：Comment installer Node.js et démarrer le service localArticle suivant：Comment installer Node.js et démarrer le service local

Articles Liés

Voir plus