Node.js를 사용하여 온라인 쇼핑몰의 장바구니 기능을 개발하는 방법
- WBOY원래의
- 2023-11-08 09:18:271268검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!