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服务器(1):一个简单nodejs服务器例子
Dec 18 NodeJs
Nodejs学习笔记之Global Objects全局对象
Jan 13 NodeJs
nodejs redis 发布订阅机制封装实现方法及实例代码
Dec 15 NodeJs
async/await与promise(nodejs中的异步操作问题)
Mar 03 NodeJs
nodejs实现邮件发送服务实例分享
Mar 29 NodeJs
nodejs入门教程二:创建一个简单应用示例
Apr 24 NodeJs
用Nodejs搭建服务器访问html、css、JS等静态资源文件
Apr 28 NodeJs
webpack打包nodejs项目的方法
Sep 26 NodeJs
NodeJs入门教程之定时器和队列
Mar 08 NodeJs
nodejs 递归拷贝、读取目录下所有文件和目录
Jul 18 NodeJs
nodeJS与MySQL实现分页数据以及倒序数据
Jun 05 NodeJs
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
May 30 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
一个用于网络的工具函数库
2006/10/09 PHP
php include和require的区别深入解析
2013/06/17 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
php查询内存信息操作示例
2019/05/09 PHP
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
jquery事件preventDefault()方法用法实例
2015/01/16 Javascript
Node.js Sequelize如何实现数据库的读写分离
2016/10/23 Javascript
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
2018/05/08 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
python 生成不重复的随机数的代码
2011/05/15 Python
Python pickle模块用法实例
2015/04/14 Python
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
Python出现segfault错误解决方法
2016/04/16 Python
Python实现选择排序
2017/06/04 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
公司面试感谢信
2014/02/01 职场文书
工作所在部门证明
2014/09/21 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
2014年后勤管理工作总结
2014/12/01 职场文书
公司禁烟通知
2015/04/23 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
志愿服务心得体会
2016/01/15 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
使用tensorflow 实现反向传播求导
2021/05/26 Python
详细了解MVC+proxy
2021/07/09 Java/Android
十大最帅动漫男主 碓冰拓海上榜,第一是《灌篮高手》男主角
2022/03/18 日漫