搜索
您的当前位置:首页nodejs实现动态html步骤详解

nodejs实现动态html步骤详解

2023-11-30 来源:恩希娱乐
导读所谓动态写入方法就是源文件代码中原来没有内容或者需要重新改变此处的要显示的文字或内容,需要用JavaScript代码来实现。动态写入是一种很常见常用的方法。1、用innerHTML写入html代码:<div id="abc"></div><script>document.getElementById("abc").innerHTML="要写入的文字或内容"</script>2、append

这次给大家带来nodejs实现动态html步骤详解,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>

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读

js中async函数使用方法详解

node搭建服务器,写接口,调接口,跨域方法详解

小编还为您整理了以下内容,可能对您也有帮助:

如何用js动态写入html代码?15

所谓动态写入方法就是源文件代码中原来没有内容或者需要重新改变此处的要显示的文字或内容,需要用JavaScript代码来实现。动态写入是一种很常见常用的方法。
1、用innerHTML写入html代码:
<div id="abc"></div>
<script>document.getElementById("abc").innerHTML="要写入的文字或内容"</script>
2、appendChild() 方法:
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<button onclick="myFunction()">点击向列表添加项目</button>
<script>
function myFunction(){
var node=document.createElement("LI");
var textnode=document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
</script>

如何用js动态写入html代码?15

所谓动态写入方法就是源文件代码中原来没有内容或者需要重新改变此处的要显示的文字或内容,需要用JavaScript代码来实现。动态写入是一种很常见常用的方法。
1、用innerHTML写入html代码:
<div id="abc"></div>
<script>document.getElementById("abc").innerHTML="要写入的文字或内容"</script>
2、appendChild() 方法:
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<button onclick="myFunction()">点击向列表添加项目</button>
<script>
function myFunction(){
var node=document.createElement("LI");
var textnode=document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
</script>

如何用js在特定位置动态添加html?除了innerHTML。。

js在特定位置动态添加html可以利用HTML DOM appendChild() 方法。

例子:

var div1 = document.createElement("div");

div1.id = "div1";

var div2 = document.createElement("div");

div2.id ="div2";

document.body.appendChild(div1);

div1.appendChild(div2);

appendChild()定义和用法:

appendChild() 方法向节点添加最后一个子节点。

提示:如果您需要创建包含文本的新段落,请记得添加到段落的文本的文本节点,然后向文档添加该段落。

您也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。

从一个列表向另一个列表中移动列表项:

var node=document.getElementById("myList2").lastChild;

document.getElementById("myList1").appendChild(node);

五分钟速成!用nodejs将doc文件转成html

经常有一些将doc文件转换成HTML的需求,比如说明、协议之类的。虽然有 https://word2cleanhtml.com/ 这种神器,像下图这样

可以直接将doc内容粘贴到剪贴板上,即可得到对应的html。但是,复制粘贴也是个体力活,如果一天突然要做10个这样的文档,可能真的要抓狂了。基于此目的,一起来做个脚本一键傻瓜式生成HTML吧。

首先,我们脚本的主角是 mammoth ,这个东西可以读取doc文档,并把内容给转换出来。
准备工作就是安装示例文档里的两个依赖

文档里给的转换html的示例是这样的。

可以试一试,会发现做出来的html效果会生成strong、p、tr、td这种标签,套上head、body、css之后页面就非常完整了,可是一些特殊的效果,比如说下划线u就没有。
怎么让他们出现呢?可以直接在文档里搜下划线的英文Underline,找到这条说明

原来在转换的过程中,下划线被忽略了,文档里也给了解决方法。可以显式地设置下划线转换成的标签去让下划线生效,像这样。

然后,我发现,生成的页面没有带class样式。其实在doc文档里面,有些行是居中效果的,如何做到居中效果在页面里也生效呢?
我们在template里写一个.center样式,然后options里试一试这个功能。

以下是完整的生成脚本。

这样一来,就算一天十个文档也是分分钟的事情了。

五分钟速成!用nodejs将doc文件转成html

经常有一些将doc文件转换成HTML的需求,比如说明、协议之类的。虽然有 https://word2cleanhtml.com/ 这种神器,像下图这样

可以直接将doc内容粘贴到剪贴板上,即可得到对应的html。但是,复制粘贴也是个体力活,如果一天突然要做10个这样的文档,可能真的要抓狂了。基于此目的,一起来做个脚本一键傻瓜式生成HTML吧。

首先,我们脚本的主角是 mammoth ,这个东西可以读取doc文档,并把内容给转换出来。
准备工作就是安装示例文档里的两个依赖

文档里给的转换html的示例是这样的。

可以试一试,会发现做出来的html效果会生成strong、p、tr、td这种标签,套上head、body、css之后页面就非常完整了,可是一些特殊的效果,比如说下划线u就没有。
怎么让他们出现呢?可以直接在文档里搜下划线的英文Underline,找到这条说明

原来在转换的过程中,下划线被忽略了,文档里也给了解决方法。可以显式地设置下划线转换成的标签去让下划线生效,像这样。

然后,我发现,生成的页面没有带class样式。其实在doc文档里面,有些行是居中效果的,如何做到居中效果在页面里也生效呢?
我们在template里写一个.center样式,然后options里试一试这个功能。

以下是完整的生成脚本。

这样一来,就算一天十个文档也是分分钟的事情了。

NodeJs可以直接返回一个html页面嘛?

nodejs 动态返回html页面给浏览器 1.需求说明 做一个H5视频播放页面,根据手机扫不同的二维码进行播放对应的视频。 2.实现思路 用nodejs做后端服务,根据url传入的参数查找对应的视频,...

NodeJs可以直接返回一个html页面嘛?

nodejs 动态返回html页面给浏览器 1.需求说明 做一个H5视频播放页面,根据手机扫不同的二维码进行播放对应的视频。 2.实现思路 用nodejs做后端服务,根据url传入的参数查找对应的视频,...

nodejs 怎么把html文件

var http = require("http"),
url = require("url"),
path = require("path"),
fs = require("fs");

http.createServer(function (req, res) {
var pathname=__dirname+url.parse(req.url).pathname;
if (path.extname(pathname)=="") {
pathname+="/";
}
if (pathname.charAt(pathname.length-1)=="/"){
pathname+="index.html";
}

path.exists(pathname,function(exists){
if(exists){
switch(path.extname(pathname)){
case ".html":
res.writeHead(200, {"Content-Type": "text/html"});
break;
case ".js":
res.writeHead(200, {"Content-Type": "text/javascript"});
break;
case ".css":
res.writeHead(200, {"Content-Type": "text/css"});
break;
case ".gif":
res.writeHead(200, {"Content-Type": "image/gif"});
break;
case ".jpg":
res.writeHead(200, {"Content-Type": "image/jpeg"});
break;
case ".png":
res.writeHead(200, {"Content-Type": "image/png"});
break;
default:
res.writeHead(200, {"Content-Type": "application/octet-stream"});
}

fs.readFile(pathname,function (err,data){
res.end(data);
});
} else {
res.writeHead(404, {"Content-Type": "text/html"});
res.end("<h1>404 Not Found</h1>");
}
});

}).listen(8080, "127.0.0.1");

console.log("Server running at http://127.0.0.1:8080/");

nodejs 怎么把html文件

var http = require("http"),
url = require("url"),
path = require("path"),
fs = require("fs");

http.createServer(function (req, res) {
var pathname=__dirname+url.parse(req.url).pathname;
if (path.extname(pathname)=="") {
pathname+="/";
}
if (pathname.charAt(pathname.length-1)=="/"){
pathname+="index.html";
}

path.exists(pathname,function(exists){
if(exists){
switch(path.extname(pathname)){
case ".html":
res.writeHead(200, {"Content-Type": "text/html"});
break;
case ".js":
res.writeHead(200, {"Content-Type": "text/javascript"});
break;
case ".css":
res.writeHead(200, {"Content-Type": "text/css"});
break;
case ".gif":
res.writeHead(200, {"Content-Type": "image/gif"});
break;
case ".jpg":
res.writeHead(200, {"Content-Type": "image/jpeg"});
break;
case ".png":
res.writeHead(200, {"Content-Type": "image/png"});
break;
default:
res.writeHead(200, {"Content-Type": "application/octet-stream"});
}

fs.readFile(pathname,function (err,data){
res.end(data);
});
} else {
res.writeHead(404, {"Content-Type": "text/html"});
res.end("<h1>404 Not Found</h1>");
}
});

}).listen(8080, "127.0.0.1");

console.log("Server running at http://127.0.0.1:8080/");

Nodejs中怎么获取HTML中一个form下的所有POST数据?

首先获取http,并创建一个web服务,监听本地端口1337,这个可以修改,任何未被占用的端口都可以用,并坚挺data事件和end事件,整个文件保存为app.js

写一个html5网页,这个网页中的内容如下面所示,目标是获取这个表单中的name 和age数据,action是服务器地址和端口,文件名index.html

可以用浏览器来打开这个端口,如下图中所示,对浏览器无要求,基本上常用的浏览器都可以打开

在命令行中运行服务,node app.js,然后在第三步中的html页面上点击提交按钮。这时命令行中的显示如下,这样就得到了表单中post的数据,完成了html中数据从前端到后台的过程

同时 网页跳到如下所示

下面这里贴上测试代码

////////////////app.js///////

var http = require('http');

var server = http.createServer(function(req,res){

 if(req.url!=="/favicon.ico"){

  req.on('data',function(data){

   console.log("服务器接收到的数据: "+decodeURIComponent(data));

  });

  req.on("end",function(){

   console.log('客户端请求数据全部接收完毕');

  });

  }

 res.end();

}).listen(1337,"localhost",function(){

 console.log("listened");

});

////////////////index.html///////

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>Nodejs的data事件与end事件的回调函数测试用页面</title>

</head>

<body>

 <form id= "form1" action = "http://localhost:1337/" method = "post">

 姓名:<input type = 'text' name = "name" value ="dragon"><br/>

 年龄:<input type = "number" name = "age" value ="25">

 <input type = "submit" value =" 提交"/> 

 </form>

</body>

</html>

nodejs怎么把html以源码的形式在网页中显示了,而不是解析它

可以通过设置输出到浏览器的'Content-Type的值为text/html即文本类型的html即可实现将html代码发送到浏览器中解释,而如果设置的值为text/plain则值会显示为文本而不会被浏览器渲染。

代码实例如下:

const http = require('http');

const hostname = '127.0.0.1';

const port = 3000;

const server = http.createServer((req, res) => {

  res.statusCode = 200;

  res.setHeader('Content-Type', 'text/html');

  res.end("<p style='color:red;font-size:30px;'>hello world</p>");

});

server.listen(port, hostname, () => {

  console.log(`服务器运行在 http://${hostname}:${port}/`);

});

运行的结果如下:

恩希娱乐还为您提供以下相关内容希望对您有帮助:

如何用js动态写入html代码?

1、用innerHTML写入html代码:&lt;div id="abc"&gt;&lt;/div&gt; &lt;script&gt;document.getElementById("abc").innerHTML="要写入的文字或内容"&lt;/script&gt; 2、appendChild() 方法:&lt;ul id="myList"&gt;&lt;li&gt;Coffee&lt;/li&gt;&lt;li&gt;Tea&lt;/li&gt;...

五分钟速成!用nodejs将doc文件转成html

首先,我们脚本的主角是 mammoth ,这个东西可以读取doc文档,并把内容给转换出来。准备工作就是安装示例文档里的两个依赖 文档里给的转换html的示例是这样的。可以试一试,会发现做出来的html效果会生成strong、p、tr、td这...

如何在创建的nodejs服务器下运行html

首先实现一个处理静态资源的函数,其实就是对本地文件的读取操作,这个方法已满足了上面说的静态资源的处理。//处理静态资源 function staticResHandler(localPath, ext, response) { fs.readFile(localPath, "binary", func...

NodeJs可以直接返回一个html页面嘛?

nodejs 动态返回html页面给浏览器 1.需求说明 做一个H5视频播放页面,根据手机扫不同的二维码进行播放对应的视频。 2.实现思路 用nodejs做后端服务,根据url传入的参数查找对应的视频,...

html代码复用各种方法

使用步骤:1.安装gulp-ejs(NodeJs上)2.新建gulpfile.js,配置 gulp-file-include:var gulp = require('gulp');//引入gulp var ejs  = require('gulp-ejs');//引入gulp-ejs gulp.task('ejs', function() {...

nodejs内置模块有哪些

需要分别实现服务端和客户端的逻辑: 先创建一个服务端的node.js脚本index_server.js var app = require('http').createServer(handler)//创建服务器app, io = require('socket.io').listen(app)//引用socket.io模块监听app, fs ...

nodejs获取渲染过js的html

1、服务器端渲染:后台把数据按照格式拼成html字符串(服务器端模板引擎最终也干的是这个,不过是更优雅而已),最终生成完整html文件。2、客户端渲染:html文件只包含静态的内容,客户端打开html后再发起ajax请求去后台请求数据...

如何用nodejs请求json并生成html内容

服务器用nodejs写,创建一个服务器监听具体url并用回调函数处理,返回json数据

Nodejs中怎么获取HTML中一个form下的所有POST数据?

可以用浏览器来打开这个端口,如下图中所示,对浏览器无要求,基本上常用的浏览器都可以打开 在命令行中运行服务,node app.js,然后在第三步中的html页面上点击提交按钮。这时命令行中的显示如下,这样就得到了表单中post的...

前后端分离方案以及技术选型

浏览器请求前端页面时,会先经过NodeJS服务端,由NodeJs去读取前端页面,并执行异步后端API,获取到数据后进行页面数据绑定,渲染等工作,完成一个最终的html然后返回浏览器,最后浏览器进行展示。 服务端渲染应用的运行流程: 1.用户通过浏览...

Top