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

집

웹 프론트엔드

JS 튜토리얼

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

王林

Nov 08, 2023 am 11:27 AM

nodejs온라인 주문웹 프로젝트

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 id="欢迎来到我们的餐厅">欢迎来到我们的餐厅</h1>
  <h2 id="我们的菜单如下">我们的菜单如下：</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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

드림위버 CS6

시각적 웹 개발 도구

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.