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

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

王林オリジナル: 2023-11-08 15:42:271168ブラウズ

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

インターネットの普及とモバイルデバイスの発展により、多くの人が食品を注文することを好み始めています。実店舗に行って食べ物を注文する代わりに、インターネットを通じて。ユーザーのニーズに応えるために、多くのレストランもオンライン注文プラットフォームを立ち上げ始めています。

この記事では、Node.js を使用してオンライン注文機能を備えたシンプルな Web プロジェクトを構築する方法と、具体的なコード例を紹介します。

開発環境の準備
まず、最新バージョンの Node.js がインストールされていることを確認します。ターミナルまたはコマンドラインウィンドウで次のコマンドを実行すると、インストールが成功したかどうかを確認できます。
```
node -v
```
これにより、現在インストールされている Node.js のバージョン番号が表示されます。インストールされていない場合は、Node.js 公式 Web サイトにアクセスしてダウンロードしてインストールできます。

次に、Visual Studio Code や Atom などの適切なコードエディターがインストールされていることを確認します。
プロジェクトフォルダーの作成
コンピューター上の適切な場所を選択し、プロジェクトコードを保存するためのフォルダーを作成します。コマンドラインまたはターミナルで、フォルダーに移動し、次のコマンドを実行してプロジェクトを初期化します。
```
npm init -y
```
これにより、プロジェクトの基本情報が含まれる package.json という名前のファイルが作成されます。そして依存関係。
必要な依存関係をインストールする
プロジェクトフォルダーで次のコマンドを実行して、必要な依存関係をインストールします:
```
npm install express body-parser ejs --save
```
これにより、Express、body -parser、およびejs モジュールを作成し、package.json ファイルの dependency に追加します。

プロジェクトファイル構造の作成
プロジェクトフォルダー内に、次のディレクトリとファイル構造を作成します。

- public
  - css
    - main.css
- views
  - index.ejs
- server.js

server.js 内に、次のコードを追加します:

const express = require('express');
const bodyParser = require('body-parser');
const ejs = require('ejs');

const app = express();

app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: true }));

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

app.get('/', (req, res) => {
  res.render('index');
});

app.post('/order', (req, res) => {
  const { name, items } = req.body;
  // 处理订单逻辑
  res.send('订单提交成功！');
});

app.listen(3000, () => {
  console.log('服务器已启动，监听端口3000');
});

上記の操作を完了すると、プロジェクトファイル構造は次のようになります:

- public
  - css
    - main.css
- views
  - index.ejs
- server.js
- package.json

フロントエンドページを作成する
Open index.ejs ファイルに HTML と CSS コードを記述して、簡単な注文ページを作成します。サンプルコードは次のとおりです。

<!DOCTYPE html>
<html>
  <head>
    <title>在线订餐</title>
    <link rel="stylesheet" type="text/css" href="/css/main.css">
  </head>
  <body>
    <h1>在线订餐</h1>
    <form action="/order" method="post">
      <input type="text" name="name" placeholder="姓名">
      <input type="checkbox" name="items" value="item1"> 餐点1
      <input type="checkbox" name="items" value="item2"> 餐点2
      <input type="checkbox" name="items" value="item3"> 餐点3
      <button type="submit">提交订单</button>
    </form>
  </body>
</html>

プロジェクトの実行
ターミナルまたはコマンドラインで、プロジェクトフォルダーに移動し、次のコマンドを実行してサーバーを起動します。
```
node server.js
```
すべてが正常で、ターミナルにサーバーが開始されたというメッセージが表示されるはずです。

次に、ブラウザを開いてアドレスバーに http://localhost:3000 と入力して注文ページにアクセスします。

名前を入力し、ご希望の食事を選択してください。注文を送信するボタンをクリックすると、注文が正常に送信されたことを示すメッセージがページに表示されます。

これまでのところ、Node.js を使用してオンライン食品注文機能を備えた単純な Web プロジェクトを構築することができました。

概要
この記事では、Node.js を使用してオンライン注文機能を備えた簡単な Web プロジェクトを構築する方法を詳しく紹介します。プロジェクトファイル構造を作成し、依存関係をインストールし、基本的なルーティングページとフロントエンドページを作成することにより、簡単なオンライン注文機能を実装できます。もちろん、これは単なる入門レベルの例であり、さらに拡張して最適化することができます。

この記事が、Node.js Web 開発の理解とオンライン注文機能の実装に少しでも役立つことを願っています。 Node.js を使用した Web プロジェクトの開発が成功することを祈っています。

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

json css html express JS visual studio visual studio code http atom

声明：

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

前の記事：Node.jsを使用したデータ視覚化のためのWebプロジェクト次の記事：Node.jsを使用したデータ視覚化のためのWebプロジェクト

続きを見る