ホームページ > 記事 > ウェブフロントエンド > Nodejsを使用して動的HTMLを実装する方法
Nodejsを使用して動的HTMLを実装する方法
- php中世界最好的语言オリジナル
- 2018-05-30 11:05:062196ブラウズ
今回は、nodejsを使用して動的HTMLを実装する方法と、nodejsを使用して動的HTMLを実装する際の注意点について説明します。実際のケースを見てみましょう。
HTMLコンテンツの動的置換
1.実装された機能と原理
は、ユーザーフォームデータとHTMLの組み合わせを実現し、ユーザーが入力したデータを対応するHTMLの場所に表示します。 原則:正規表現を使用して、ユーザー名{name}などのHTML内のテンプレートデータを置き換えると、ユーザーが送信した名前の値を取得し、それを
replace (正規表現, 値) に置き換えることができます。オリジナルのテンプレートデータを作成し、クライアントに出力します。2.主に使用するメソッドとモジュール
2.1 ファイル操作モジュール var fs=require("fs");
メソッド:
2.1.1 ファイルを非同期で読み込む方法fs.readFile(path,callback);
パラメータの説明:
path: ファイルのパス(ファイル名を含む) callback: ファイルが読み取られた後の
コールバック関数このメソッドから取得された、ファイルから読み取られたデータ、自動的にFillされます
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リクエストのメインメソッド
监听有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 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>
</html> この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、お支払いください。 PHP 中国語 Web サイトの他の関連記事にも注目してください。
推奨読書:
vue で $emit と $on を操作して親子コンポーネントや兄弟コンポーネントと通信する方法 JS イベント バインディングとイベント フロー モデルの使用方法以上がNodejsを使用して動的HTMLを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。