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

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라는 파일을 생성합니다. 다음 코드를 추가하세요.

    Online Store 
  Welcome to Online Store!
 <% if (message) { %> <%= message %>
 <% } %>    
 View Cart Checkout

로그인 후 복사

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

장바구니 기능 구현
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라는 파일을 생성하고 다음 코드를 추가하세요.

    Shopping Cart 
  Your Shopping Cart
 <% if (cart.length > 0) { %>  <% cart.forEach(product => { %> <%= product %>
 <% }) %> 
 <% } else { %> Your shopping cart is empty.
 <% } %> Checkout

로그인 후 복사

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

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

    Checkout 
  Checkout
 <% if (cart.length > 0) { %>  <% cart.forEach(product => { %> <%= product %>
 <% }) %> 
 Thank you for your order!
 <% } else { %> Your shopping cart is empty.
 <% } %> Pay Now

로그인 후 복사

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

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

node app.js

로그인 후 복사

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

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

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