NodejsとHTMLを組み合わせる方法-フロントエンドQ&A-php.cn

NodejsとHTMLを組み合わせる方法

王林

リリース： 2023-05-18 15:06:08

オリジナル

1626 人が閲覧しました

フロントエンド開発テクノロジーの継続的な開発により、Node.js を使用してサーバーサイドアプリケーションを構築する開発者が増えています。 Node.js は、HTTP リクエストやデータベースとの対話などのタスクを処理する便利な方法を提供します。同時に、Node.js はサーバー側データをフロントエンド HTML ページに統合する便利な方法も提供します。この記事では、Node.js と HTML を組み合わせて Web アプリケーションを開発する方法を紹介します。

1. Node.js の概要

Node.js は、JavaScript 言語に基づいて開発された非常に人気のあるサーバーサイドプログラミング言語です。 Node.js の最大の利点は、JavaScript コードをサーバーサイドで直接実行できることであり、かつてはこの機能が注目を集めました。 Node.js には、Web サーバー開発だけでなく、コマンドラインツール、デスクトップアプリケーション、その他の分野にも幅広いアプリケーションシナリオがあります。

2. HTML の概要

HTML は、Web ページの作成に使用されるマークアップ言語です。 HTML は Web ページの基本構造とスタイル定義であり、ページのタイトル、段落、リンク、表、画像、ビデオ、その他の要素を定義できます。 HTML ページはブラウザーで解析してレンダリングでき、ユーザーはブラウザー上でページを表示して操作できます。

3. Node.js と HTML の結合

Node.js と HTML を結合するにはさまざまな方法がありますが、最も一般的な方法は、テンプレートエンジンを通じてサーバー側のデータを HTML に埋め込むことです。ページ。テンプレートエンジンは、動的 HTML ページを生成するツールであり、開発者がサーバー側で HTML ページを生成し、動的データを HTML ページに統合できるようにします。

Node.js とテンプレートエンジンを組み合わせた例を見てみましょう。まず、テンプレートエンジンライブラリをインストールする必要があります。ここでは、EJS テンプレートエンジンを使用することを選択します。

1. EJS テンプレートエンジンをインストールします

npm install ejs --save

ログイン後にコピー

2. 単純な Node.js プログラムを作成します

const express = require('express')
const app = express()
const port = 3000

app.set('view engine', 'ejs')

app.get('/', (req, res) => {
  res.render('index', { title: 'Hello World', message: 'Hello World from Node.js!' })
})

app.listen(port, () => {
  console.log(`Server is running on port ${port}.`)
})

ログイン後にコピー

このコードでは、Express フレームワークを使用して Web アプリケーションを作成します。 index という名前の EJS テンプレートファイルをルートパスにレンダリングします。テンプレートファイルでは、次に示すように、テンプレートタグを使用して動的データを挿入できます:

<html>
  <head>
    <title><%= title %></title>
  </head>
  <body>
    <h1><%= message %></h1>
  </body>
</html>

ログイン後にコピー

このテンプレートファイルでは、2 つのテンプレートタグを追加しました: <%= title %&gt ; はページのタイトルを表示するために使用され、<%= message %> はページのコンテンツを表示するために使用されます。これらのタグはサーバー側でレンダリングされ、テンプレートファイルに動的データが設定されます。

3. アプリケーションを起動します

node index.js

ログイン後にコピー

4. ページにアクセスします

ブラウザで http://localhost:3000 にアクセスすると、次の内容を含む単純なページが表示されます。サーバー側で設定した動的データ。

上記の手順により、Node.js と HTML を組み合わせて、単純な Web アプリケーションを作成することができました。実際の開発では、より多くのテンプレートエンジンとフレームワークを使用して、より複雑な機能を実装できます。

4. 概要

この記事では、Node.js と HTML を使用して Web アプリケーションを構築し、テンプレートエンジンを通じてサーバー側の動的データを HTML ページに埋め込む方法を紹介します。このアプローチは Web アプリケーション開発では非常に一般的であり、完全なアプリケーションを迅速に構築できます。実際の開発では、プロジェクトのニーズに合わせて適切なテンプレートエンジンとフレームワークを選択する必要があることに注意してください。

以上がNodejsとHTMLを組み合わせる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。