nodejs 简单实现动态html的方法

2019-11-19 13:52:01

字体：大中小

来源：转载

供稿：网友

动态替换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></html>

以上这篇nodejs 简单实现动态html的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：安装Node.js并启动本地服务的操作教程

下一篇：nodeJS服务器的创建和重新启动的实现方法