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(三)--- Node.js模块
May 25 NodeJs
轻松创建nodejs服务器(6):作出响应
Dec 18 NodeJs
nodejs URL模块操作URL相关方法介绍
Mar 03 NodeJs
NodeJS创建基础应用并应用模板引擎
Apr 12 NodeJs
nodejs搭建本地http服务器教程
Mar 13 NodeJs
nodejs中sleep功能实现暂停几秒的方法
Jul 12 NodeJs
详解nodejs的express如何自动生成项目框架
Jul 12 NodeJs
Nodejs实现文件上传的示例代码
Sep 26 NodeJs
Nodejs中怎么实现函数的串行执行
Mar 02 NodeJs
nodejs同步调用获取mysql数据时遇到的大坑
Mar 02 NodeJs
用Nodejs实现在终端中炒股的实现
Oct 18 NodeJs
nodejs使用Sequelize框架操作数据库的实现
Oct 21 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 fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
js判断变量是否空值的代码
2008/10/26 Javascript
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
再论Javascript的类继承
2011/03/05 Javascript
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
创建自己的jquery表格插件
2015/11/25 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
django实现用户注册实例讲解
2019/10/30 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
竞争与合作演讲稿
2014/05/12 职场文书
学校节能减排倡议书
2014/05/16 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
护士个人年度总结范文
2015/02/13 职场文书
法律服务所工作总结
2015/08/10 职场文书
环保建议书作文400字
2015/09/14 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript