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打包工具整合到鼠标右键的方法
May 11 NodeJs
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
Nov 18 NodeJs
nodejs简单实现中英文翻译
May 04 NodeJs
简单实现nodejs上传功能
Jan 14 NodeJs
nodejs基础应用
Feb 03 NodeJs
nodejs实现邮件发送服务实例分享
Mar 29 NodeJs
NodeJs中express框架的send()方法简介
Jun 20 NodeJs
NodeJS实现图片上传代码(Express)
Jun 30 NodeJs
nodejs使用redis作为缓存介质实现的封装缓存类示例
Feb 07 NodeJs
详解从NodeJS搭建中间层再谈前后端分离
Nov 13 NodeJs
typescript nodejs 依赖注入实现方法代码详解
Jul 21 NodeJs
node快速搭建后台的实现步骤
Feb 18 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
中国的第一台收音机
2021/03/01 无线电
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
javascript动画浅析
2012/08/30 Javascript
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
使用jQuery实现返回顶部
2015/01/26 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
Vue函数式组件-你值得拥有
2019/05/09 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
Python处理Excel文件实例代码
2017/06/20 Python
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
python使用super()出现错误解决办法
2017/08/14 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
Python3 执行Linux Bash命令的方法
2019/07/12 Python
python实现在线翻译功能
2020/03/03 Python
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
大专生的学习自我评价
2013/12/04 职场文书
简历上的自我评价
2014/02/03 职场文书
七年级语文教学反思
2016/03/03 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书
导游词之西递宏村
2019/12/10 职场文书
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle