Node.jsを使用してオンライン注文機能を実装するWebプロジェクト-jsチュートリアル-php.cn

欢迎来到我们的餐厅

我们的菜单如下：

ホームページ

ウェブフロントエンド

jsチュートリアル

Node.jsを使用してオンライン注文機能を実装するWebプロジェクト

王林

Nov 08, 2023 am 11:27 AM

nodejs オンライン注文ウェブプロジェクト

Node.jsを使用してオンライン注文機能を実装するWebプロジェクト

現代人のペースの速いライフスタイルに対応するために、ますます多くのレストランがオンライン注文サービスを導入し始めており、顧客はより便利かつ迅速に予約、注文、支払いを行うことができます。この記事では、Node.js を使用して簡単なオンライン注文 Web プロジェクトを実装する方法を紹介し、コード例を示します。

環境構成

まず、Node.js と npm パッケージマネージャーをインストールする必要があります。公式 Web サイトからインストールパッケージをダウンロードするか、パッケージマネージャーを使用してインストールできます。インストールが完了したら、コマンドラインツールを開き、次のコマンドを入力してバージョンを確認します。

node -v //输出node版本号
npm -v //输出npm版本号

ログイン後にコピー

プロジェクトの初期化

npm パッケージマネージャーを使用してプロジェクトを初期化し、package.json ファイルを生成します。

npm init -y

ログイン後にコピー

依存モジュールのインストール

プロジェクトのルートディレクトリで、npm を使用して Express フレームワークとその他の必要なモジュールをインストールします。

npm install express body-parser ejs --save

ログイン後にコピー

その中で、Express は Node.js で一般的に使用される Web アプリケーションフレームワークであり、Web サーバーを簡単かつ迅速に作成できます。body-parser は、クエリ文字列、フォームデータを含む HTTP リクエスト本文の処理に使用されます。、など; ejs は、動的ページをレンダリングするためのテンプレートエンジンです。

サーバーの作成

ユーザーが Web アプリケーションにアクセスするには、サーバーを作成する必要があります。プロジェクトのルートディレクトリで、新しい server.js ファイルを作成し、次のコードを記述します。

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

app.listen(port, function() {
  console.log(`listening on port ${port}`);
});

ログイン後にコピー

このコードは、Express アプリケーションを作成し、ポート 3000 をリッスンします。次のコマンドを実行してサーバーを起動します。

node server.js

ログイン後にコピー

ブラウザに http://localhost:3000 と入力すると、サーバーが起動したことを示す「Cannot GET /」ページが表示されます。

ページの作成

ユーザーが食べ物を注文できるようにするには、いくつかの Web ページを作成する必要があります。プロジェクトのルートディレクトリに、ページを保存するための新しいビューフォルダーを作成します。 Index.ejs ファイルを作成し、次のコードを記述します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>在线点餐</title>
</head>
<body>
  <h1 id="欢迎来到我们的餐厅">欢迎来到我们的餐厅</h1>
  <h2 id="我们的菜单如下">我们的菜单如下：</h2>
  <ul>
    <% for(var i = 0; i < menu.length; i++) { %>
      <li><%= menu[i].name %> - <%= menu[i].price %>元</li>
    <% } %>
  </ul>
</body>
</html>

ログイン後にコピー

このコードは、ejs テンプレートエンジンを使用してメニューページをレンダリングします。このうちmenuは動的変数であり、コード実行時にサーバーからデータを取得します。

ルート処理

ページにメニューデータを表示するには、ルーティング処理関数を記述する必要があります。 server.js に次のコードを追加します:

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

app.get('/', function(req, res) {
  const menu = [
    {name: '鸡蛋炒饭', price: 12},
    {name: '牛肉面', price: 15},
    {name: '鱼香肉丝', price: 18},
    {name: '红烧肉', price: 30},
  ];
  res.render('index', {menu: menu});
});

ログイン後にコピー

このコードは、ルート処理関数を GET リクエストにバインドします。ルートルート / にアクセスすると、サーバーはメニューデータを送信し、index.ejs をレンダリングします。 template. を作成し、データをテンプレートエンジンに渡して、最終的に HTML ページを生成します。

CSS スタイルの追加

ページを美しくするには、いくつかの CSS スタイルを追加する必要があります。ルートディレクトリに新しいパブリックフォルダーを作成し、style.css ファイルを作成します。次のコードを追加します:

body {
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  margin-top: 50px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
}

ログイン後にコピー

このコードは、ページをより美しくするために背景色、フォント、配置、その他のスタイルを定義します。

テンプレートファイルを変更する

HTML ページを CSS スタイルファイルにリンクするには、テンプレートファイルを変更する必要があります。次のコードをindex.ejs ファイルに追加します。

<link rel="stylesheet" href="/style.css" />

ログイン後にコピー

このコードは、パブリックフォルダー内の style.css ファイルを参照し、ページスタイルを追加するようにブラウザーに指示します。

概要

この記事では、Node.js、Express、および ejs テンプレートエンジンを使用してオンライン注文 Web プロジェクトを実装する方法を紹介し、コード例を示します。この記事を通じて、読者はプロジェクトの初期化、依存モジュールのインストール、サーバーの作成、ページの作成、ルーティングの処理、CSS スタイルの追加、その他の操作の方法を学ぶことができます。読者は、これらのコードに基づいて、より完全なオンライン注文システムをさらに開発できます。

以上がNode.jsを使用してオンライン注文機能を実装するWebプロジェクトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

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

7910

Java チュートリアル

1652

CakePHP チュートリアル

1411

Laravel チュートリアル

1303

PHP チュートリアル

1248

Related knowledge

Eclipseプロジェクトの保存場所 May 05, 2024 pm 07:36 PM

Eclipse プロジェクトが保存される場所は、プロジェクトの種類とワークスペースの設定によって異なります。 Java プロジェクト: ワークスペース内のプロジェクトフォルダーに保存されます。 Web プロジェクト: ワークスペースのプロジェクトフォルダーに保存され、複数のサブフォルダーに分割されます。その他のプロジェクトタイプ: ファイルはワークスペース内のプロジェクトフォルダーに保存され、編成はプロジェクトタイプによって異なる場合があります。ワークスペースの場所は、デフォルトでは「<ホームディレクトリ>/workspace」にあり、Eclipse の設定を通じて変更できます。プロジェクトの保存場所を変更するには、プロジェクトを右クリックし、プロパティの [リソース] タブを選択します。

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のグローバル変数とは何ですか Apr 21, 2024 am 04:54 AM

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

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と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 は大規模なエンタープライズアプリケーションに適しています。