집 >웹 프론트엔드 >JS 튜토리얼 >Node.js를 사용하여 온라인 주문 기능을 구현하는 웹 프로젝트

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

王林원래의: 2023-11-08 15:42:271230검색

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

인터넷의 대중화와 모바일 기기의 발전으로 많은 사람들이 실제 매장에 가는 대신 온라인으로 음식을 주문하는 것을 선호하기 시작했습니다. 사용자의 요구를 충족하기 위해 많은 레스토랑에서도 온라인 주문 플랫폼을 출시하기 시작했습니다.

이 글에서는 Node.js를 사용하여 간단한 온라인 음식 주문 기능 웹 프로젝트를 구축하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

개발 환경 준비
먼저 최신 버전의 Node.js가 설치되어 있는지 확인하세요. 터미널이나 명령줄 창에서 다음 명령을 실행하여 설치가 성공했는지 확인할 수 있습니다.
```
node -v
```
그러면 현재 설치된 Node.js의 버전 번호가 표시됩니다. 설치되어 있지 않은 경우 Node.js 공식 웹사이트로 이동하여 다운로드하여 설치할 수 있습니다.

두 번째로 Visual Studio Code 또는 Atom과 같은 적절한 코드 편집기가 설치되어 있는지 확인하세요.
프로젝트 폴더 생성
컴퓨터에서 적절한 위치를 선택하고 프로젝트 코드를 저장하기 위한 폴더를 생성하세요. 명령줄이나 터미널에서 해당 폴더로 이동하여 다음 명령을 실행하여 프로젝트를 초기화합니다.
```
npm init -y
```
이렇게 하면 프로젝트의 기본 정보가 포함된 package.json이라는 파일이 생성됩니다. 의존성. package.json的文件，其中包含了项目的基本信息和依赖项。
安装必要的依赖项
在项目文件夹中，执行以下命令来安装所需的依赖项：
```
npm install express body-parser ejs --save
```
这将安装Express、body-parser和ejs模块，并将其添加到package.json文件中的dependencies中。

创建项目文件结构
在项目文件夹中，创建以下目录和文件结构：

- public
  - css
    - main.css
- views
  - index.ejs
- server.js

在server.js中，添加以下代码：

const express = require('express');
const bodyParser = require('body-parser');
const ejs = require('ejs');

const app = express();

app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: true }));

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  res.render('index');
});

app.post('/order', (req, res) => {
  const { name, items } = req.body;
  // 处理订单逻辑
  res.send('订单提交成功！');
});

app.listen(3000, () => {
  console.log('服务器已启动，监听端口3000');
});

完成上述操作后，你的项目文件结构应该如下所示：

- public
  - css
    - main.css
- views
  - index.ejs
- server.js
- package.json

编写前端页面
打开index.ejs文件，在其中编写HTML和CSS代码，创建一个简单的订单页面。示例代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>在线订餐</title>
    <link rel="stylesheet" type="text/css" href="/css/main.css">
  </head>
  <body>
    <h1>在线订餐</h1>
    <form action="/order" method="post">
      <input type="text" name="name" placeholder="姓名">
      <input type="checkbox" name="items" value="item1"> 餐点1
      <input type="checkbox" name="items" value="item2"> 餐点2
      <input type="checkbox" name="items" value="item3"> 餐点3
      <button type="submit">提交订单</button>
    </form>
  </body>
</html>

运行项目
在终端或命令行中，进入项目文件夹，并执行以下命令来启动服务器：
```
node server.js
```
如果一切正常，你应该在终端中看到服务器已启动的提示信息。

然后，打开浏览器，在地址栏中输入http://localhost:3000

필요한 종속성 설치

rrreee

이렇게 하면 express, body-parser 및 ejs 모듈이 설치되고 <code> dependency에 추가됩니다. package.json 파일에 있습니다.

프로젝트 파일 구조 생성

프로젝트 폴더에서 다음 디렉터리와 파일 구조를 생성합니다.

rrreee🎜server.js에 다음 코드를 추가합니다. 🎜rrreee🎜위 작업을 완료한 후, 프로젝트 파일 구조는 다음과 같아야 합니다. 🎜rrreee🎜🎜🎜프런트 엔드 페이지 작성🎜index.ejs 파일을 열고 HTML 및 CSS 코드를 작성하여 간단한 주문 페이지를 만듭니다. 샘플 코드는 다음과 같습니다. 🎜rrreee🎜🎜🎜프로젝트 실행🎜터미널이나 명령줄에서 프로젝트 폴더로 이동하여 다음 명령을 실행하여 서버를 시작합니다.🎜rrreee🎜모든 것이 정상이면 터미널 프롬프트 정보에서 서버가 시작되었습니다. 🎜🎜그런 다음 브라우저를 열고 주소 표시줄에 http://localhost:3000를 입력하여 주문 페이지에 접속하세요. 🎜🎜이름을 입력하고 원하는 식사를 선택하세요. 주문 제출 버튼을 클릭하면 주문이 성공적으로 제출되었다는 메시지가 페이지에 표시됩니다. 🎜🎜🎜🎜이 시점에서 Node.js를 사용하여 온라인 주문 기능이 있는 간단한 웹 프로젝트를 성공적으로 구축했습니다. 🎜🎜요약🎜이 기사에서는 Node.js를 사용하여 온라인 주문 기능이 있는 간단한 웹 프로젝트를 구축하는 방법을 자세히 소개합니다. 프로젝트 파일 구조 생성, 종속성 설치, 기본 라우팅 및 프런트엔드 페이지 작성을 통해 간단한 온라인 주문 기능을 구현할 수 있습니다. 물론 이것은 단지 초급 수준의 예일 뿐이며 이를 더 확장하고 최적화할 수 있습니다. 🎜🎜이 기사가 Node.js 웹 개발을 이해하고 온라인 주문 기능을 구현하는 데 도움이 되기를 바랍니다. Node.js를 사용한 웹 프로젝트 개발의 성공을 기원합니다! 🎜

위 내용은 Node.js를 사용하여 온라인 주문 기능을 구현하는 웹 프로젝트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

json css html express JS visual studio visual studio code http atom

성명：

이전 기사：Node.js를 사용한 데이터 시각화를 위한 웹 프로젝트다음 기사：Node.js를 사용한 데이터 시각화를 위한 웹 프로젝트