nodejs 简单实现动态html的方法

 更新时间:2018年05月12日 10:56:43   作者:insist-improve  
今天小编就为大家分享一篇nodejs 简单实现动态html的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

动态替换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中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法

    在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法

    这篇文章主要介绍了在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 如何使用Node写静态文件服务器

    如何使用Node写静态文件服务器

    这篇文章主要介绍了如何使用Node写静态文件服务器,文章围绕主题展开详细的内容介绍,具有一定的参考价值,感兴趣的小伙伴可以参考一下
    2022-09-09
  • 一文详解nodejs的path模块使用

    一文详解nodejs的path模块使用

    这篇文章主要为大家介绍了nodejs的path模块使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • Node.js 文件夹目录结构创建实例代码

    Node.js 文件夹目录结构创建实例代码

    下面小编就为大家带来一篇Node.js 文件夹目录结构创建实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 详解Puppeteer前端自动化测试实践

    详解Puppeteer前端自动化测试实践

    这篇文章主要介绍了详解Puppeteer前端自动化测试实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • node中的Express框架详解

    node中的Express框架详解

    这篇文章主要介绍了node中的Express框架,框架是为了规范开发流程,降低开发难度,提高开发效率而制定的一套共人们使用的功能模块或者是编程的约定,需要的朋友可以参考下
    2023-04-04
  • node解析修改nginx配置文件操作实例分析

    node解析修改nginx配置文件操作实例分析

    这篇文章主要介绍了node解析修改nginx配置文件操作,结合实例形式分析了node.js使用nginx-conf解析修改nginx配置文件的相关操作技巧,需要的朋友可以参考下
    2019-11-11
  • 总结Node.js中9种fs模块文件操作方法(文件夹递归删除知识)

    总结Node.js中9种fs模块文件操作方法(文件夹递归删除知识)

    这篇文章主要介绍了总结Node.js中9种fs模块文件操作方法(文件夹递归删除知识),文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的朋友可以参考一下
    2022-07-07
  • Express 框架中使用 EJS 模板引擎并结合 silly-datetime 库进行日期格式化的实现方法

    Express 框架中使用 EJS 模板引擎并结合 silly-datetime

    这篇文章主要介绍了Express 框架中使用 EJS 模板引擎并结合 silly-datetime 库进行日期格式化的实现方法,结合具体实例形式分析了express框架引入EJS模版以及导入 silly-datetime 库的格式化方法传递给EJS模版使用的相关操作技巧,需要的朋友可以参考下
    2023-05-05
  • 使用node打造自己的命令行工具方法教程

    使用node打造自己的命令行工具方法教程

    这篇文章主要介绍了使用node打造自己的命令行工具方法教程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03

最新评论