动态替换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的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
暂无评论...
更新日志
2024年11月27日
2024年11月27日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]