Nodejs サーバーを使用して HTML ファイルを読み取り、フロントエンドにレンダリングする方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Nodejs サーバーを使用して HTML ファイルを読み取り、フロントエンドにレンダリングする方法

php中世界最好的语言

May 28, 2018 pm 03:50 PM

javascript nodejs サーバ

今回は、nodejsサーバーを使用してHTMLファイルを読み取り、フロントエンドにレンダリングする方法を説明します。nodejsサーバーを使用してHTMLファイルを読み取り、フロントエンドにレンダリングするための注意事項は何ですか。実際のケースですので、見てみましょう。

1. 3 つのバックアップページをそれぞれ実装するだけです。

コードスニペット:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
.center {
  margin: auto;
  width: 60%;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>
</head>
<body>
<h2>元素居中对齐</h2>
<p>水平居中块级元素 (如 p), 可以使用 margin: auto;</p>
<p class="center">
 <p><b>注意: </b>使用 margin:auto 无法兼容 IE8, 除非 !DOCTYPE 已经声明。</p>
</p>
</body>
</html>

ログイン後にコピー

notFount.htmlページ

<!DOCTYPE HTML>
<html>
<head>
<script>
</script>
<style>
.center {
  margin: auto;
  width: 60%;
  border: 3px solid #73AD21;
  padding: 10px;
	color:red;
}
</style>
</head>
<body>
<p class ="center" >404 Not Fount</p>
</body>
</html>

ログイン後にコピー

2. 作成したnodejsサーバーページを変更して、異なるアドレスからのリクエストに対する異なる応答ページを作成します。

URLアドレス判定に定義したHTMLページを読み込むためのファイル読み込みコードを追加します。

ステートメント

ファイルシステムオブジェクト:

// 声明文件操作系统对象 
  var fs = require('fs');

ログイン後にコピー

ファイルコンテンツの読み取りとページへのレンダリングを実装します

if(url ==='/'){ 
  //response.writeHead(响应状态码，响应头对象): 发送一个响应头给请求。 
  response.writeHead(200,{'Content-Type':'text/html'}) 
  // 如果url=‘/' ,读取指定文件下的html文件，渲染到页面。 
  fs.readFile('./practice/login.html','utf-8',function(err,data){ 
  if(err){ 
  throw err ; 
  } 
  response.end(data); 
  }); 
}

ログイン後にコピー

完全なコード:

	/**
		
	1.使用 HTTP 服务器与客户端交互，需要 require('http')。
		声明http协议
	*/
	var http = require('http');
	
	
	// 声明文件操作系统对象
	var fs = require('fs');
	/**
	2.获取服务器对象
		1.通过 http.createServer([requestListener]) 创建一个服务
		requestListener <Function>
		返回: <http.Server>
		返回一个新建的 http.Server 实例。
		对于服务端来说，主要做三件事：
		1.接受客户端发出的请求。
		2.处理客户端发来的请求。
		3.向客户端发送响应。
	*/
	
	var server = http.createServer();
	/**
	3.声明端口号，开启服务。
		server.listen([port][, host][, backlog][, callback])
		port <number> ：端口号
		host <string> ：主机ip
		backlog <number> server.listen() 函数的通用参数
		callback <Function> server.listen() 函数的通用参数
		Returns: <net.Server>
		启动一个TCP服务监听输入的port和host。
		如果port省略或是0，系统会随意分配一个在'listening'事件触发后能被server.address().port检索的无用端口。
		如果host省略，如果IPv6可用，服务器将会接收基于unspecified IPv6 address (::)的连接，否则接收基于unspecified IPv4 address (0.0.0.0)的连接
	
	*/
	server.listen(9001, function(){
		 console.log('服务器正在端口号：9001上运行......');
	})
	
	
	/**
	4.给server 实例对象添加request请求事件，该请求事件是所有请求的入口。
		任何请求都会触发改事件，然后执行事件对应的处理函数。
	
		server.on('request',function(){
			 console.log('收到客户端发出的请求.......');
		});
	*/
	
	/**
	5.设置请求处理函数。
		请求回调处理函数需要接收两个参数。
		request ：request是一个请求对象，可以拿到当前浏览器请求的一些信息。
			eg：请求路径，请求方法等
		response： response是一个响应对象，可以用来给请求发送响应。
	
	*/
	server.on('request',function(request,response){
		
		var url = request.url;
		if(url ==='/'){
			//response.writeHead(响应状态码，响应头对象): 发送一个响应头给请求。
			response.writeHead(200,{'Content-Type':'text/html'})
			// 如果url=‘/' ,读取指定文件下的html文件，渲染到页面。
			fs.readFile('./practice/login.html','utf-8',function(err,data){
				if(err){
					throw err ;
				}
				response.end(data);
			});
		
		}else if(url === '/login'){
			response.writeHead(200,{'Content-Type':'text/html'});
			// 如果url=‘/' ,读取指定文件下的html文件，渲染到页面。
			fs.readFile('./practice/login.html','utf-8',function(err,data){
				if(err){
					throw err ;
				}
				response.end(data);
			});
		}else if(url === '/index'){
			response.writeHead(200,{'Content-Type':'text/html'});
			// 如果url=‘/' ,读取指定文件下的html文件，渲染到页面。
			fs.readFile('./practice/index.html','utf-8',function(err,data){
				if(err){
					throw err ;
				}
				response.end(data);
			});
		}else{
			response.writeHead(200,{'Content-Type':'text/html'});
			// 如果url=‘/' ,读取指定文件下的html文件，渲染到页面。
			fs.readFile('./practice/notFount.html','utf-8',function(err,data){
				if(err){
					throw err ;
				}
				response.end(data);
			});
		}
		
	});

ログイン後にコピー

最終効果:

nodejsサーバーを開き、アドレスバーに次のように入力します。 127.0.0.0.1:9001 または 127.0.0.0.1:9001/login

アドレスバーに「127.0.0.0.1:9001/index

」と入力します。アドレスバーに「127.0」と入力します。 0.0.1: 9001/その他のコンテンツ

この記事の事例を読んだ後は、この方法を習得したと思います。さらにエキサイティングなコンテンツについては、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

Webpack + React 開発環境を構築する方法

React ファミリーバケット環境を構築する方法

以上がNodejs サーバーを使用して HTML ファイルを読み取り、フロントエンドにレンダリングする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7517

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

Nodejs はバックエンドフレームワークですか? Apr 21, 2024 am 05:09 AM

Node.js は、高いパフォーマンス、スケーラビリティ、クロスプラットフォームサポート、豊富なエコシステム、開発の容易さなどの機能を備えているため、バックエンドフレームワークとして使用できます。

Nodejsをmysqlデータベースに接続する方法 Apr 21, 2024 am 06:13 AM

MySQL データベースに接続するには、次の手順に従う必要があります。 mysql2 ドライバーをインストールします。 mysql2.createConnection() を使用して、ホストアドレス、ポート、ユーザー名、パスワード、データベース名を含む接続オブジェクトを作成します。 connection.query() を使用してクエリを実行します。最後に connection.end() を使用して接続を終了します。

Nodejs インストールディレクトリ内の npm ファイルと npm.cmd ファイルの違いは何ですか? Apr 21, 2024 am 05:18 AM

Node.js インストールディレクトリには、npm と npm.cmd という 2 つの npm 関連ファイルがあります。違いは次のとおりです。拡張子が異なります。npm は実行可能ファイルで、npm.cmd はコマンドウィンドウのショートカットです。 Windows ユーザー: npm.cmd はコマンドプロンプトから使用できますが、npm はコマンドラインからのみ実行できます。互換性: npm.cmd は Windows システムに固有ですが、npm はクロスプラットフォームで使用できます。使用上の推奨事項: Windows ユーザーは npm.cmd を使用し、他のオペレーティングシステムは npm を使用します。

Nodejsのグローバル変数とは何ですか Apr 21, 2024 am 04:54 AM

Node.js には次のグローバル変数が存在します。グローバルオブジェクト: グローバルコアモジュール: プロセス、コンソール、require ランタイム環境変数: __dirname、__filename、__line、__column 定数: unknown、null、NaN、Infinity、-Infinity

NodejsとJavaの間に大きな違いはありますか? Apr 21, 2024 am 06:12 AM

Node.js と Java の主な違いは、設計と機能です。イベント駆動型とスレッド駆動型: Node.js はイベント駆動型で、Java はスレッド駆動型です。シングルスレッドとマルチスレッド: Node.js はシングルスレッドのイベントループを使用し、Java はマルチスレッドアーキテクチャを使用します。ランタイム環境: Node.js は V8 JavaScript エンジン上で実行され、Java は JVM 上で実行されます。構文: Node.js は JavaScript 構文を使用し、Java は Java 構文を使用します。目的: Node.js は I/O 集中型のタスクに適しており、Java は大規模なエンタープライズアプリケーションに適しています。

Nodejs はバックエンド開発言語ですか? Apr 21, 2024 am 05:09 AM

はい、Node.js はバックエンド開発言語です。これは、サーバー側のビジネスロジックの処理、データベース接続の管理、API の提供などのバックエンド開発に使用されます。

Nodejsプロジェクトをサーバーにデプロイする方法 Apr 21, 2024 am 04:40 AM

Node.js プロジェクトのサーバーデプロイメント手順: デプロイメント環境を準備します。サーバーアクセスの取得、Node.js のインストール、Git リポジトリのセットアップ。アプリケーションをビルドする: npm run build を使用して、デプロイ可能なコードと依存関係を生成します。コードをサーバーにアップロードします: Git またはファイル転送プロトコル経由。依存関係をインストールする: サーバーに SSH で接続し、npm install を使用してアプリケーションの依存関係をインストールします。アプリケーションを開始します。node Index.js などのコマンドを使用してアプリケーションを開始するか、pm2 などのプロセスマネージャーを使用します。リバースプロキシの構成 (オプション): Nginx や Apache などのリバースプロキシを使用して、トラフィックをアプリケーションにルーティングします。

NodejsとJavaのどちらを選択しますか? Apr 21, 2024 am 04:40 AM

Web 開発において Node.js と Java にはそれぞれ長所と短所があり、どちらを選択するかはプロジェクトの要件によって異なります。 Node.js はリアルタイムアプリケーション、迅速な開発、マイクロサービスアーキテクチャに優れており、Java はエンタープライズグレードのサポート、パフォーマンス、セキュリティに優れています。

See all articles

Nodejs サーバーを使用して HTML ファイルを読み取り、フロントエンドにレンダリングする方法

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック