Detailed explanation of the steps to implement dynamic html in nodejs-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Detailed explanation of the steps to implement dynamic html in nodejs

php中世界最好的语言

May 22, 2018 am 10:06 AM

html javascript nodejs

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

Copy after login

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

Copy after login

2.2 Data processing module var querystring=require("querystring");

Method:

##2.2.1 Convert string into object

querystring.parse(post);

Copy after login

2.3 Post request main method

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

Copy after login

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(&#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;

Copy after login

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>

Copy after login

I believe I have read it You have mastered the method in the case of this article. For more exciting information, please pay attention to other related articles on the php Chinese website!