Node.js를 사용하여 온라인 주문 기능을 구현하는 웹 프로젝트-JS 튜토리얼-php.cn

Node.js를 사용하여 온라인 주문 기능을 구현하는 웹 프로젝트

王林

풀어 주다： 2023-11-08 11:27:28

원래의

679명이 탐색했습니다.

Node.js를 사용하여 온라인 주문 기능을 구현하는 웹 프로젝트

빠르게 변화하는 현대인의 라이프스타일에 부응하기 위해 점점 더 많은 레스토랑이 온라인 주문 서비스를 구현하기 시작했으며, 이를 통해 고객은 보다 편리하고 빠르게 예약하고 주문하고 결제할 수 있습니다. 이 기사에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!