nodejs 简单实现动态html的方法


Posted in NodeJs onMay 12, 2018

动态替换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的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
Nov 20 NodeJs
轻松创建nodejs服务器(9):实现非阻塞操作
Dec 18 NodeJs
Nodejs抓取html页面内容(推荐)
Aug 11 NodeJs
Nodejs高扩展性的模板引擎 functmpl简介
Feb 13 NodeJs
NodeJS配置HTTPS服务实例分享
Feb 19 NodeJs
nodejs搭建本地服务器轻松解决跨域问题
Mar 21 NodeJs
原生nodejs使用websocket代码分享
Apr 07 NodeJs
nodejs 如何手动实现服务器
Aug 20 NodeJs
nodejs中express入门和基础知识点学习
Sep 13 NodeJs
NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法
Oct 17 NodeJs
用Electron写个带界面的nodejs爬虫的实现方法
Jan 29 NodeJs
Nodejs封装类似express框架的路由实例详解
Jan 05 NodeJs
nodeJS服务器的创建和重新启动的实现方法
May 12 #NodeJs
Nodejs 和 Electron ubuntu下快速安装过程
May 04 #NodeJs
nodejs 日志模块winston的使用方法
May 02 #NodeJs
详解redis在nodejs中的应用
May 02 #NodeJs
nodejs读取并去重excel文件
Apr 22 #NodeJs
nodeJS模块简单用法示例
Apr 21 #NodeJs
NodeJS安装图文教程
Apr 19 #NodeJs
You might like
PHP 字符串分割和比较
2009/10/06 PHP
使用phpQuery采集网页的方法
2013/11/13 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
js arguments.callee的应用代码
2009/05/07 Javascript
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
2014/02/19 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
js+html5实现canvas绘制简单矩形的方法
2015/06/05 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
plupload+artdialog实现多平台上传文件
2016/07/19 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
JS实现星星海特效
2019/12/24 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
实例解析Python中的__new__特殊方法
2016/06/02 Python
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
python实现三维拟合的方法
2018/12/29 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
商务英语应届生自我鉴定
2013/12/08 职场文书
消防安全标语
2014/06/07 职场文书
详解分布式系统中如何用python实现Paxos
2021/05/18 Python