This time I will bring you a detailed explanation of the steps to implement dynamic html in nodejs. What are the precautions for implementing dynamic html in nodejs. The following is a practical case, let's take a look.
Dynamic replacement of html content
1. Function and principle of implementation
It realizes the combination of user form data and html, and displays the data input by the user to the corresponding position of html.
Principle: Through regular expression, to replace the template data in html such as user name {name}, you can get the value of the name submitted by the user, through
replace (regular expression, value) replaces the original template data and outputs it to the client.
2. Mainly used methods and modules
2.1 File operation module var fs=require("fs");
Method:
2.1.1 Method of reading files asynchronously
fs.readFile(path,callback);
Parameter description:
path: The path of the file ( includes the file name)
callback: The callback function after file reading is completed
File reading The data obtained from this method will be automatically filled in
callback:function(err,data){ if(err){ //读取文件错误的逻辑 }else{ //对数据的操作,如打印 console.log(data); } }
2.2 Data processing module var querystring=require("querystring");
Method:
##2.2.1 Convert string into objectquerystring.parse(post);
2.3 Post request main method
监听有post数据上传的方法:request.on('data',funcation(chunk){ //chunk post数据碎片 }); 监听post数据上传完毕的方法:request.on('end',function(){ //相关逻辑 });
3. Core code 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.html template
<!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>
Detailed explanation of how to use async function in js
node builds the server, writes the interface, adjusts the interface, and crosses Detailed explanation of domain methods
The above is the detailed content of Detailed explanation of the steps to implement dynamic html in nodejs. For more information, please follow other related articles on the PHP Chinese website!