利用Node.js實現線上點餐功能的Web項目
為了滿足現代人快節奏的生活方式，越來越多的餐廳開始實行線上點餐服務，讓顧客可以更方便快速地預訂、點餐和付款。本文將介紹如何使用Node.js實作一個簡單的線上點餐Web項目，並提供程式碼範例。
- 環境配置
首先需要安裝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中常用的Web應用框架，可以方便快速地建立Web伺服器；body-parser用於處理HTTP請求體，包括query string、表單資料等；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模板引擎，渲染了一個選單頁面。其中，menu是一個動態變量，程式碼執行時將會從伺服器端取得資料。
- 路由處理
為了讓頁面展示選單數據，需要編寫路由處理函數。在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樣式。在根目錄中新建public資料夾，並建立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" />
該程式碼告訴瀏覽器引用public資料夾下的style.css文件，新增頁面樣式。
- 總結
本文介紹如何使用Node.js、Express和ejs模板引擎實現線上點餐Web項目，並提供了程式碼範例。透過本文，讀者可以了解如何初始化專案、安裝依賴模組、建立伺服器、撰寫頁面、處理路由、新增CSS樣式等操作。讀者可以基於這些程式碼，進一步開發更完善的線上點餐系統。
以上是利用Node.js實現線上點餐功能的Web項目的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
eclipse的專案儲存位置
May 05, 2024 pm 07:36 PM
Eclipse專案的儲存位置取決於專案類型和工作區設定。 Java專案：儲存在工作區內的專案資料夾中。 Web專案：儲存在工作區內的專案資料夾內，分為多個子資料夾。其他項目類型：文件儲存在工作區內的項目資料夾內，組織方式可能因項目類型而異。工作區位置預設位於“<家目錄>/workspace”，可透過Eclipse首選項進行變更。若要修改專案儲存位置，可右鍵點選項目並選擇「屬性」中的「資源」標籤進行修改。
nodejs中的全域變數有哪些
Apr 21, 2024 am 04:54 AM
Node.js 中存在以下全域變數：全域物件：global核心模組：process、console、require執行階段環境變數：__dirname、__filename、__line、__column常數：undefined、null、NaN、Infinity、-Infinity
nodejs怎麼連接mysql資料庫
Apr 21, 2024 am 06:13 AM
要連接 MySQL 資料庫，需要遵循以下步驟：安裝 mysql2 驅動程式。使用 mysql2.createConnection() 建立連接對象，其中包含主機位址、連接埠、使用者名稱、密碼和資料庫名稱。使用 connection.query() 執行查詢。最後使用 connection.end() 結束連線。
nodejs安裝目錄裡的npm與npm.cmd檔有什麼差別
Apr 21, 2024 am 05:18 AM
Node.js 安裝目錄中有兩個與 npm 相關的文件：npm 和 npm.cmd，區別如下：擴展名不同：npm 是可執行文件，npm.cmd 是命令視窗快捷方式。 Windows 使用者：npm.cmd 可以在命令提示字元中使用，npm 只能從命令列執行。相容性：npm.cmd 特定於 Windows 系統，npm 跨平台可用。使用建議：Windows 使用者使用 npm.cmd，其他作業系統使用 npm。
nodejs可以寫前端嗎
Apr 21, 2024 am 05:00 AM
是的，Node.js可用於前端開發，主要優勢包括高效能、豐富的生態系統和跨平台相容性。需要考慮的注意事項有學習曲線、工具支援和社群規模較小。
nodejs和java的差別大嗎
Apr 21, 2024 am 06:12 AM
Node.js 和 Java 的主要差異在於設計和特性：事件驅動與執行緒驅動：Node.js 基於事件驅動，Java 基於執行緒驅動。單執行緒與多執行緒：Node.js 使用單執行緒事件循環，Java 使用多執行緒架構。執行時間環境：Node.js 在 V8 JavaScript 引擎上運行，而 Java 在 JVM 上運行。語法：Node.js 使用 JavaScript 語法，而 Java 使用 Java 語法。用途：Node.js 適用於 I/O 密集型任務，而 Java 適用於大型企業應用程式。
