Node.jsを使ってオンラインモールのショッピングカート機能を開発する方法-jsチュートリアル-php.cn

Node.jsを使ってオンラインモールのショッピングカート機能を開発する方法

WBOY

リリース： 2023-11-08 09:18:27

オリジナル

1337 人が閲覧しました

Node.jsを使ってオンラインモールのショッピングカート機能を開発する方法

Node.js を使用してオンラインモールのショッピングカート機能を開発する方法

今日のインターネット時代では、電子商取引は主要な手段の 1 つになりました。買い物をする人々。オンラインショッピングモールにとって、充実したショッピングカート機能は非常に重要であり、ユーザーに便利なショッピング体験を提供し、ユーザーのコンバージョン率を向上させることができます。この記事では、Node.jsを使ってオンラインモールのショッピングカート機能を開発する方法と具体的なコード例を紹介します。

環境の準備
まず、Node.js と npm がコンピューターにインストールされていることを確認します。最新バージョンの Node.js は、公式 Web サイト https://nodejs.org/ からダウンロードしてインストールできます。
プロジェクトの作成
コマンドラインツールを開き、任意のディレクトリに移動し、次のコマンドを実行して新しい Node.js プロジェクトを作成します。コマンドは、online-store という名前のフォルダーを作成し、その中にプロジェクトの依存関係やその他の関連情報を記録するための package.json ファイルを生成します。

依存関係のインストール

プロジェクトルートディレクトリで次のコマンドを実行して、必要な依存関係パッケージをインストールします:

```
mkdir online-store
cd online-store
npm init -y
```
ログイン後にコピー
これらの依存関係パッケージには、Express フレームワーク Express が含まれています。 - セッション、ボディパーサー、および EJS テンプレートエンジン。

サーバーの作成

プロジェクトのルートディレクトリに app.js という名前のファイルを作成し、次のコードを追加します。

```
npm install express express-session body-parser ejs --save
```
ログイン後にコピー
このコードは Express を使用します。シンプルなサーバーを作成し、EJS テンプレートエンジンと静的ファイル用のディレクトリをセットアップします。

ルートの作成

app.js ファイルに次のコードを追加して、ショッピングカート関連のルートを作成します:

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

app.set('view engine', 'ejs');
app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(session({
  secret: 'my-secret-key',
  resave: false,
  saveUninitialized: true
}));

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

ログイン後にコピー

このコードは 4 つのルートを定義します。ホームページの表示、ショッピングカートに製品を追加するロジックの処理、ショッピングカートページの表示、およびショッピングカート内の製品のチェックアウトに使用されます。

ビューテンプレートの作成

プロジェクトのルートディレクトリに views という名前のフォルダーを作成し、その中にindex.ejs という名前のファイルを作成します。次のコードを追加します。

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

app.post('/add-to-cart', (req, res) => {
  // 处理添加商品到购物车的逻辑
});

app.get('/cart', (req, res) => {
  // 显示购物车页面
});

app.get('/checkout', (req, res) => {
  // 结算购物车中的商品
});

app.get('/success', (req, res) => {
  req.session.message = '订单支付成功！';
  res.redirect('/');
});

ログイン後にコピー

このビューテンプレートは、ホームページを表示するために使用され、ショッピングカートへの商品の追加、ショッピングカートの表示、およびショッピングカートをチェックアウトするためのリンクを提供します。

ショッピングカート関数を実装する

app.js ファイルに次のコードを追加して、ショッピングカート関数を実装します:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Online Store</title>
</head>
<body>
  <h1>Welcome to Online Store!</h1>
  <% if (message) { %>
    <p><%= message %></p>
  <% } %>
  <form action="/add-to-cart" method="post">
    <input type="hidden" name="product" value="Product A">
    <button type="submit">Add to Cart</button>
  </form>
  <a href="/cart">View Cart</a>
  <a href="/checkout">Checkout</a>
</body>
</html>

ログイン後にコピー

このコードは、リクエストを通じて商品を追加します。ショッピングカートに移動し、ショッピングカートページとチェックアウトページにショッピングカート内の商品を表示します。

ショッピングカートビューの作成

ビューフォルダーに cart.ejs という名前のファイルを作成し、次のコードを追加します:

app.post('/add-to-cart', (req, res) => {
  const product = req.body.product;
  req.session.cart = req.session.cart || [];
  req.session.cart.push(product);
  res.redirect('/');
});

app.get('/cart', (req, res) => {
  const cart = req.session.cart || [];
  res.render('cart', { cart });
});

app.get('/checkout', (req, res) => {
  const cart = req.session.cart || [];
  req.session.cart = [];
  res.render('checkout', { cart });
});

ログイン後にコピー

このビューテンプレートはリストを表示します。ショッピングカート内の製品の数を確認し、チェックアウトショッピングカートへのリンクを提供します。

チェックアウトビューの書き込み

ビューフォルダーに checkout.ejs という名前のファイルを作成し、次のコードを追加します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Shopping Cart</title>
</head>
<body>
  <h1>Your Shopping Cart</h1>
  <% if (cart.length > 0) { %>
    <ul>
      <% cart.forEach(product => { %>
        <li><%= product %></li>
      <% }) %>
    </ul>
  <% } else { %>
    <p>Your shopping cart is empty.</p>
  <% } %>
  <a href="/checkout">Checkout</a>
</body>
</html>

ログイン後にコピー

このビューテンプレートが使用されますページを表示しますチェックアウトカートの後に支払いリンクが表示されます。

プロジェクトを実行します

コマンドラインツールでプロジェクトのルートディレクトリを入力し、次のコマンドを実行してサーバーを起動します:

```
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Checkout</title>
</head>
<body>
  <h1>Checkout</h1>
  <% if (cart.length > 0) { %>
    <ul>
      <% cart.forEach(product => { %>
        <li><%= product %></li>
      <% }) %>
    </ul>
    <p>Thank you for your order!</p>
  <% } else { %>
    <p>Your shopping cart is empty.</p>
  <% } %>
  <a href="/success">Pay Now</a>
</body>
</html>
```
ログイン後にコピー
次に、http:/ にアクセスします。 / ブラウザで /localhost:3000 、シンプルなオンラインモールページが表示されます。「カートに追加」ボタンをクリックすると、ショッピングカートに商品が追加され、ショッピングカートページおよびチェックアウトページでショッピングカート内の商品が表示されます。

概要

この記事では、Node.js を使用してオンラインモールのショッピングカート機能を開発する方法を紹介します。 Express フレームワークを使用すると、簡単なサーバーをすばやく構築し、EJS テンプレートエンジンを使用してビューをレンダリングできます。ショッピングカート機能は Express-Session を使用して実装され、ノードセッションはショッピングカートデータの保存に使用されます。この記事が、Node.js を使用してオンラインモールのショッピングカート機能を開発する方法を理解するのに役立つことを願っています。

以上がNode.jsを使ってオンラインモールのショッピングカート機能を開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。