首頁 >web前端 >js教程 >利用Node.js實現線上訂餐功能的Web項目

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

王林原創: 2023-11-08 15:42:271237瀏覽

利用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，即可造訪訂單頁面。

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

至此，你已經成功使用Node.js建立了一個簡單的線上訂餐功能的Web專案。

總結
本文詳細介紹如何使用Node.js建立一個簡單的線上訂餐功能的網路專案。透過建立專案文件結構、安裝依賴項、編寫基本的路由和前端頁面，可以實現一個簡單的線上訂餐功能。當然，這只是一個入門級別的範例，你可以在此基礎上進一步擴展和優化。

希望本文能對你理解Node.js的Web開發和實作線上訂餐功能有一定的幫助。祝你在使用Node.js開發Web專案的過程中取得成功！

以上是利用Node.js實現線上訂餐功能的Web項目的詳細內容。更多資訊請關注PHP中文網其他相關文章！

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

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：利用Node.js實現資料視覺化的Web項目下一篇：利用Node.js實現資料視覺化的Web項目

看更多