这次给大家带来nodejs实现动态html步骤详解,nodejs实现动态html的注意事项有哪些,下面就是实战案例,一起来看一下。
动态替换html内容
1.实现的功能及原理
实现了将,用户表单的数据,与html相结合,将用户输入的数据,显示到html对应的位置。
原理:通过正则表达式,替换html中的模板数据 如用户名{name},可以通过拿到用户提交的name的值value,通过
replace(正则表达式,value)的方式替换掉原模板数据,并输出到客户端。
2.主要用到的方法和模块
2.1文件操作模块 var fs=require(fs);
方法:
2.1.1 异步读取文件的方法
fs.readfile(path,callback);
参数说明:
path:文件的路径(包含文件名称)
callback:文件读取完毕的回调函数
文件读取的数据,从该方法获得,会自动填充
callback:function(err,data){
if(err){
//读取文件错误的逻辑
}else{
//对数据的操作,如打印
console.log(data);
}
}
2.2 数据处理模块 var querystring=require(querystring);
方法:
2.2.1 将字符串转换成对象
querystring.parse(post);
2.3 post请求主要方法
监听有post数据上传的方法:request.on('data',funcation(chunk){
//chunk post数据碎片
});
监听post数据上传完毕的方法:request.on('end',function(){
//相关逻辑
});
3.核心代码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模板
<!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>
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读
js中async函数使用方法详解
node搭建服务器,写接口,调接口,跨域方法详解
以上就是nodejs实现动态html步骤详解的详细内容。