利用Node.js實現線上訂餐功能的Web項目-js教程-PHP中文網

利用Node.js實現線上訂餐功能的Web項目

王林

發布： 2023-11-08 15:42:27

原創

1164 人瀏覽過

利用Node.js實現線上訂餐功能的Web項目

利用Node.js實現線上訂餐功能的Web專案

隨著網路的普及和行動裝置的發展，許多人開始喜歡透過網路訂餐，而不是去實體店面點餐。為了滿足使用者的需求，許多餐廳也開始推出線上訂餐平台。

本文將介紹如何使用Node.js建立一個簡單的線上訂餐功能的Web項目，並提供具體的程式碼範例。

開發環境準備
首先，確保你已經安裝了最新版本的Node.js。可以透過在終端機或命令列視窗中執行以下命令來檢查是否安裝成功：
```
node -v
```
登入後複製
這將顯示你目前安裝的Node.js的版本號。如果沒有安裝，可以去Node.js官方網站下載安裝。
其次，確保你已經安裝了適當的程式碼編輯器，例如Visual Studio Code或Atom。
建立專案資料夾
在你的電腦上選擇一個合適的位置，建立一個專門用來存放專案程式碼的資料夾。在命令列或終端機中，進入該資料夾，並執行以下命令來初始化項目：
```
npm init -y
```
登入後複製
這將創建一個名為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，即可造訪訂單頁面。

填寫姓名和選擇需要的餐點，點擊提交訂單按鈕後，頁面將顯示訂單提交成功的訊息。