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 id="Welcome-to-Online-Store">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 id="Your-Shopping-Cart">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 id="Checkout">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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7467
15
1376
52
77
11
46
19
18
20
nodejs와 tomcat의 차이점
Apr 21, 2024 am 04:16 AM
Node.js와 Tomcat의 주요 차이점은 다음과 같습니다. 런타임: Node.js는 JavaScript 런타임을 기반으로 하는 반면 Tomcat은 Java Servlet 컨테이너입니다. I/O 모델: Node.js는 비동기식 비차단 모델을 사용하는 반면 Tomcat은 동기식 차단 모델을 사용합니다. 동시성 처리: Node.js는 이벤트 루프를 통해 동시성을 처리하는 반면 Tomcat은 스레드 풀을 사용합니다. 애플리케이션 시나리오: Node.js는 실시간, 데이터 집약적, 동시성 애플리케이션에 적합하고 Tomcat은 기존 Java 웹 애플리케이션에 적합합니다.
nodejs와 vuejs의 차이점
Apr 21, 2024 am 04:17 AM
Node.js는 서버측 JavaScript 런타임인 반면, Vue.js는 대화형 사용자 인터페이스를 생성하기 위한 클라이언트측 JavaScript 프레임워크입니다. Node.js는 백엔드 서비스 API 개발, 데이터 처리 등 서버 측 개발에 사용되고, Vue.js는 단일 페이지 애플리케이션, 반응형 사용자 인터페이스 등 클라이언트 측 개발에 사용됩니다.
nodejs는 백엔드 프레임워크인가요?
Apr 21, 2024 am 05:09 AM
Node.js는 고성능, 확장성, 크로스 플랫폼 지원, 풍부한 생태계, 개발 용이성 등의 기능을 제공하므로 백엔드 프레임워크로 사용할 수 있습니다.
nodejs를 mysql 데이터베이스에 연결하는 방법
Apr 21, 2024 am 06:13 AM
MySQL 데이터베이스에 연결하려면 다음 단계를 따라야 합니다. mysql2 드라이버를 설치합니다. mysql2.createConnection()을 사용하여 호스트 주소, 포트, 사용자 이름, 비밀번호 및 데이터베이스 이름이 포함된 연결 개체를 만듭니다. 쿼리를 수행하려면 Connection.query()를 사용하세요. 마지막으로 Connection.end()를 사용하여 연결을 종료합니다.
nodejs의 전역 변수는 무엇입니까
Apr 21, 2024 am 04:54 AM
Node.js에는 다음과 같은 전역 변수가 존재합니다. 전역 개체: 전역 핵심 모듈: 프로세스, 콘솔, 필수 런타임 환경 변수: __dirname, __filename, __line, __column 상수: undefine, null, NaN, Infinity, -Infinity
nodejs 설치 디렉토리에 있는 npm과 npm.cmd 파일의 차이점은 무엇입니까?
Apr 21, 2024 am 05:18 AM
Node.js 설치 디렉터리에는 npm과 npm.cmd라는 두 가지 npm 관련 파일이 있습니다. 차이점은 다음과 같습니다. 확장자가 다릅니다. npm은 실행 파일이고 npm.cmd는 명령 창 바로 가기입니다. Windows 사용자: npm.cmd는 명령 프롬프트에서 사용할 수 있으며, npm은 명령줄에서만 실행할 수 있습니다. 호환성: npm.cmd는 Windows 시스템에만 해당되며 npm은 크로스 플랫폼에서 사용할 수 있습니다. 사용 권장사항: Windows 사용자는 npm.cmd를 사용하고, 기타 운영 체제는 npm을 사용합니다.
nodejs와 java 사이에 큰 차이가 있나요?
Apr 21, 2024 am 06:12 AM
Node.js와 Java의 주요 차이점은 디자인과 기능입니다. 이벤트 중심 대 스레드 중심: Node.js는 이벤트 중심이고 Java는 스레드 중심입니다. 단일 스레드 대 다중 스레드: Node.js는 단일 스레드 이벤트 루프를 사용하고 Java는 다중 스레드 아키텍처를 사용합니다. 런타임 환경: Node.js는 V8 JavaScript 엔진에서 실행되는 반면 Java는 JVM에서 실행됩니다. 구문: Node.js는 JavaScript 구문을 사용하고 Java는 Java 구문을 사용합니다. 목적: Node.js는 I/O 집약적인 작업에 적합한 반면, Java는 대규모 엔터프라이즈 애플리케이션에 적합합니다.
nodejs는 백엔드 개발 언어인가요?
Apr 21, 2024 am 05:09 AM
예, Node.js는 백엔드 개발 언어입니다. 서버 측 비즈니스 로직 처리, 데이터베이스 연결 관리, API 제공 등 백엔드 개발에 사용됩니다.
