Comment implémenter du HTML dynamique à l'aide de nodejs-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-05-30 11:05:06

original

2193 Les gens l'ont consulté

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

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

Copier après la connexion

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!