집 >웹 프론트엔드 >JS 튜토리얼 >nodejs에서 동적 HTML을 구현하는 단계에 대한 자세한 설명

nodejs에서 동적 HTML을 구현하는 단계에 대한 자세한 설명

php中世界最好的语言원래의: 2018-05-22 10:06:172148검색

이번에는 nodejs에서 동적 html을 구현하는 단계에 대해 자세히 설명하겠습니다. 동적 html을 구현하기 위한 nodejs의 주의 사항은 무엇입니까?

html 콘텐츠의 동적 대체

1. 구현된 기능 및 원리

는 사용자 양식 데이터와 html의 조합을 구현하고, 사용자가 입력한 데이터를 해당 html 위치에 표시합니다.

원리: 정규식을 사용하여 사용자 이름 {name}과 같은 HTML의 템플릿 데이터를 바꾸면 사용자가 제출한 이름의 값을 가져와서

replace(정규식, 값)로 바꿀 수 있습니다. 원본 템플릿 데이터를 클라이언트에 출력합니다.

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");

Method:

2.2.1 문자열을 객체로 변환

querystring.parse(post);

2.3 사후 요청 기본 메소드

 监听有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(&#39;{&#39;+arr[i]+&#39;}&#39;,&#39;g&#39;);
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 template

<!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>

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 비용을 지불하세요. PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!