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

首頁

web前端

js教程

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

王林

Nov 08, 2023 am 11:27 AM

nodejs線上點餐web項目

利用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中文網其他相關文章！

陳述

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

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。