Node.js를 사용하여 온라인 쇼핑몰의 장바구니 기능을 개발하는 방법-JS 튜토리얼-php.cn

Node.js를 사용하여 온라인 쇼핑몰의 장바구니 기능을 개발하는 방법

WBOY

풀어 주다： 2023-11-08 09:18:27

원래의

1336명이 탐색했습니다.

Node.js를 사용하여 온라인 쇼핑몰의 장바구니 기능을 개발하는 방법

Node.js를 활용한 온라인 쇼핑몰 장바구니 기능 개발

오늘날의 인터넷 시대에 전자상거래는 사람들이 쇼핑하는 주요 수단 중 하나가 되었습니다. 완전한 장바구니 기능은 온라인 쇼핑몰에서 매우 중요합니다. 이는 사용자에게 편리한 쇼핑 경험을 제공하고 사용자 전환율을 향상시킬 수 있습니다. 이 기사에서는 Node.js를 사용하여 온라인 쇼핑몰의 장바구니 기능을 개발하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

환경 준비
먼저 컴퓨터에 Node.js와 npm이 설치되어 있는지 확인하세요. 공식 웹사이트 https://nodejs.org/에서 최신 Node.js 버전을 다운로드하여 설치할 수 있습니다.
프로젝트 만들기
명령줄 도구를 열고 원하는 디렉터리로 이동한 후 다음 명령을 실행하여 새 Node.js 프로젝트를 만듭니다.

mkdir online-store
cd online-store
npm init -y

로그인 후 복사

이 명령은 online-store라는 폴더를 만들고 생성합니다. 프로젝트의 종속성 및 기타 관련 정보를 기록하기 위한 package.json 파일입니다.

종속성 설치
프로젝트 루트 디렉터리에서 다음 명령을 실행하여 필요한 종속성 패키지를 설치하세요.

npm install express express-session body-parser ejs --save

로그인 후 복사

이러한 종속성 패키지에는 Express 프레임워크, Express-Session, Body Parser 및 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');
});

로그인 후 복사

이 코드는 Express 프레임워크를 사용하여 간단한 서버를 만들고 EJS 템플릿 엔진과 디렉터리를 설정합니다. 정적 파일.

경로 만들기
장바구니 관련 경로를 생성하려면 app.js 파일에 다음 코드를 추가하세요.

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('/');
});

로그인 후 복사

이 코드는 홈페이지를 표시하고 항목을 장바구니에 추가하는 논리를 처리하는 데 사용되는 4개의 경로를 정의합니다. 장바구니. , 장바구니 페이지를 표시하고 장바구니에 담긴 품목을 확인하세요.

뷰 템플릿 작성
프로젝트 루트 디렉토리에 views라는 폴더를 생성하고 그 안에 index.ejs라는 파일을 생성합니다. 다음 코드를 추가하세요.

<!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>

로그인 후 복사

이 보기 템플릿은 홈페이지를 표시하는 데 사용되며 장바구니에 항목을 추가하고 장바구니를 보고 장바구니를 확인할 수 있는 링크를 제공합니다.

장바구니 기능 구현
app.js 파일에 다음 코드를 추가하여 장바구니 기능을 구현하세요.

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 });
});

로그인 후 복사

이 코드는 요청을 통해 장바구니에 항목을 추가하고 장바구니 페이지 및 결제에 표시합니다. 페이지 장바구니에 담긴 품목입니다.

장바구니 뷰 작성
views 폴더에 cart.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>

로그인 후 복사

이 뷰 템플릿은 장바구니에 담긴 품목 목록을 표시하고 결제 쇼핑을 제공하는 데 사용됩니다. 링크를 장바구니에 담으세요.

결제 뷰 작성
views 폴더에 checkout.ejs라는 파일을 생성하고 다음 코드를 추가하세요.

<!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>

로그인 후 복사

이 뷰 템플릿은 장바구니 결제 후 페이지를 표시하고 결제 링크를 제공하는 데 사용됩니다.

프로젝트 실행
명령줄 도구에 프로젝트 루트 디렉터리를 입력하고 다음 명령을 실행하여 서버를 시작하세요.

node app.js

로그인 후 복사

그런 다음 브라우저에서 http://localhost:3000을 방문하면 간단한 온라인 화면을 볼 수 있습니다. 쇼핑몰 페이지. "장바구니에 추가" 버튼을 클릭하면 장바구니에 품목을 추가할 수 있으며 장바구니 페이지 및 결제 페이지에서 장바구니에 담긴 품목을 확인할 수 있습니다.

요약
이 글에서는 Node.js를 활용하여 온라인 쇼핑몰용 장바구니 기능을 개발하는 방법을 소개합니다. Express 프레임워크를 사용하면 간단한 서버를 빠르게 구축하고 EJS 템플릿 엔진을 사용하여 뷰를 렌더링할 수 있습니다. 장바구니 기능은 Express-Session을 사용하여 구현되며 노드 세션은 장바구니 데이터를 저장하는 데 사용됩니다. 이 글이 Node.js를 사용하여 온라인 쇼핑몰의 장바구니 기능을 개발하는 방법을 이해하는 데 도움이 되기를 바랍니다.

위 내용은 Node.js를 사용하여 온라인 쇼핑몰의 장바구니 기능을 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!