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);
path : le chemin du fichier (
inclut le fichiernom) callback : la fonction de rappel
après la lecture du fichierfichier Les données lues, obtenues à partir de cette méthode, seront automatiquement renseignées
callback:function(err,data){
if(err){
//读取文件错误的逻辑
}else{
//对数据的操作，如打印
console.log(data);
}
}
Méthode :2.2.1 Convertir la chaîne en objet
querystring.parse(post);
监听有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('{'+arr[i]+'}','g');
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œursComment utiliser la liaison d'événements JS, modèle de flux d'événementsCe 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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
