ホームページ > 記事 > ウェブフロントエンド > Node.jsを使用してオンライン注文機能を実装するWebプロジェクト

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

王林オリジナル: 2023-11-08 11:27:28615ブラウズ

現代人のペースの速いライフスタイルに対応するために、ますます多くのレストランがオンライン注文サービスを導入し始めており、顧客はより便利かつ迅速に予約、注文、支払いを行うことができます。この記事では、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>欢迎来到我们的餐厅</h1>
  <h2>我们的菜单如下：</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 サイトの他の関連記事を参照してください。

json css html npm express String public JS http

声明：

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

前の記事：Node.js を使用してシンプルなソーシャルメディアプラットフォームを構築する方法次の記事：Node.js を使用してシンプルなソーシャルメディアプラットフォームを構築する方法

続きを見る