Node.js를 사용하여 온라인 주문 기능을 구현하는 웹 프로젝트
- 王林원래의
- 2023-11-08 11:27:28615검색
빠르게 변화하는 현대인의 라이프스타일에 부응하기 위해 점점 더 많은 레스토랑이 온라인 주문 서비스를 구현하기 시작했으며, 이를 통해 고객은 보다 편리하고 빠르게 예약하고 주문하고 결제할 수 있습니다. 이 기사에서는 Node.js를 사용하여 간단한 온라인 주문 웹 프로젝트를 구현하는 방법을 소개하고 코드 예제를 제공합니다.
- 환경 구성
먼저 Node.js와 npm 패키지 관리자를 설치해야 합니다. 공식 웹사이트에서 설치 패키지를 다운로드하거나 패키지 관리자를 사용하여 설치할 수 있습니다. 설치가 완료되면 명령줄 도구를 열고 다음 명령을 입력하여 버전을 확인하세요.
node -v //输出node版本号 npm -v //输出npm版本号
- 프로젝트 초기화
npm 패키지 관리자를 사용하여 프로젝트를 초기화하고 package.json 파일을 생성하세요.
npm init -y
- 종속 모듈 설치
프로젝트 루트 디렉터리에서 npm을 사용하여 Express 프레임워크 및 기타 필요한 모듈을 설치합니다.
npm install express body-parser ejs --save
그 중 Express는 Node.js에서 일반적으로 사용되는 웹 애플리케이션 프레임워크로, 웹 서버를 쉽고 빠르게 생성할 수 있으며, 쿼리 문자열, 양식 데이터 등을 포함한 HTTP 요청 본문을 처리하는 데 사용됩니다. ejs는 동적 페이지를 렌더링하는 데 사용되는 템플릿 엔진입니다.
- 서버 만들기
사용자가 웹 애플리케이션에 액세스하려면 서버를 만들어야 합니다. 프로젝트 루트 디렉터리에서 새 server.js 파일을 생성하고 다음 코드를 작성합니다.
const express = require('express');
const app = express();
const port = 3000;
app.listen(port, function() {
console.log(`listening on port ${port}`);
});이 코드는 Express 애플리케이션을 생성하고 포트 3000을 수신합니다. 다음 명령을 실행하여 서버를 시작합니다.
node server.js
브라우저에 http://localhost:3000을 입력하면 서버가 시작되었음을 나타내는 "Cannot GET /" 페이지가 표시됩니다.
- 페이지 작성
사용자가 음식을 주문할 수 있도록 하려면 일부 웹 페이지를 만들어야 합니다. 프로젝트 루트 디렉터리에서 페이지를 저장할 새 views 폴더를 만듭니다. index.ejs 파일을 생성하고 다음 코드를 작성합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在线点餐</title>
</head>
<body>
<h1>欢迎来到我们的餐厅</h1>
<h2>我们的菜单如下：</h2>
<ul>
<% for(var i = 0; i < menu.length; i++) { %>
<li><%= menu[i].name %> - <%= menu[i].price %>元</li>
<% } %>
</ul>
</body>
</html>이 코드는 ejs 템플릿 엔진을 사용하여 메뉴 페이지를 렌더링합니다. 그 중 메뉴는 동적 변수로, 코드가 실행될 때 서버에서 데이터를 가져옵니다.
- 경로 처리
페이지에 메뉴 데이터가 표시되도록 하려면 경로 처리 기능을 작성해야 합니다. server.js에 다음 코드를 추가하세요.
app.set('view engine', 'ejs');
app.get('/', function(req, res) {
const menu = [
{name: '鸡蛋炒饭', price: 12},
{name: '牛肉面', price: 15},
{name: '鱼香肉丝', price: 18},
{name: '红烧肉', price: 30},
];
res.render('index', {menu: menu});
});이 코드는 루트 핸들러 기능을 GET 요청과 바인딩합니다. 루트 경로 /에 액세스하면 서버는 메뉴 데이터를 보내고 index.ejs 템플릿을 렌더링한 후 변환합니다. 템플릿 엔진에 전달된 데이터를 통해 최종적으로 HTML 페이지가 생성됩니다.
- CSS 스타일 추가
페이지를 아름답게 하려면 CSS 스타일을 추가해야 합니다. 루트 디렉터리에 새 공용 폴더를 만들고 style.css 파일을 만듭니다. 다음 코드를 추가하세요.
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
margin-top: 50px;
}
ul {
list-style: none;
padding: 0;
}
li {
margin-top: 10px;
font-size: 18px;
font-weight: bold;
}이 코드는 배경색, 글꼴, 정렬 및 기타 스타일을 정의하여 페이지를 더욱 아름답게 만듭니다.
- 템플릿 파일 수정
HTML 페이지를 CSS 스타일 파일에 연결하려면 템플릿 파일을 수정해야 합니다. index.ejs 파일에 다음 코드를 추가합니다.
<link rel="stylesheet" href="/style.css" />
이 코드는 브라우저에 공용 폴더의 style.css 파일을 참조하고 페이지 스타일을 추가하도록 지시합니다.
- 요약
이 글에서는 Node.js, Express, ejs 템플릿 엔진을 사용하여 온라인 주문 웹 프로젝트를 구현하는 방법을 소개하고 코드 예제를 제공합니다. 이 기사를 통해 독자는 프로젝트 초기화, 종속 모듈 설치, 서버 생성, 페이지 작성, 라우팅 처리, CSS 스타일 추가 및 기타 작업 방법을 배울 수 있습니다. 독자는 이러한 코드를 기반으로 보다 완전한 온라인 주문 시스템을 더욱 개발할 수 있습니다.
위 내용은 Node.js를 사용하여 온라인 주문 기능을 구현하는 웹 프로젝트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!