為了滿足現(xiàn)代人快節(jié)奏的生活方式，越來越多的餐廳開始實行在線點餐服務(wù)，讓顧客可以更加方便快捷地預(yù)訂、點餐和支付。本文將介紹如何使用Node.js實現(xiàn)一個簡單的在線點餐Web項目，并提供代碼示例。
- 環(huán)境配置
首先需要安裝Node.js和npm包管理器。可以在官網(wǎng)上下載安裝包，也可以使用包管理器進(jìn)行安裝。安裝完成后，打開命令行工具，輸入以下命令進(jìn)行版本確認(rèn)。
node -v //輸出node版本號 npm -v //輸出npm版本號
登錄后復(fù)制
- 項目初始化
使用npm包管理器初始化項目，生成package.json文件。
npm init -y
登錄后復(fù)制
- 安裝依賴模塊
在項目根目錄中，使用npm安裝Express框架和其他必要模塊。
npm install express body-parser ejs --save
登錄后復(fù)制
其中，Express是一個Node.js中常用的Web應(yīng)用框架，可以方便快捷地創(chuàng)建Web服務(wù)器；body-parser用于處理HTTP請求體，包括query string、表單數(shù)據(jù)等；ejs是模板引擎，用于渲染動態(tài)頁面。
- 創(chuàng)建服務(wù)器
為了讓用戶可以訪問我們的Web應(yīng)用，需要創(chuàng)建一個服務(wù)器。在項目根目錄，新建一個server.js文件，并編寫如下代碼：
const express = require('express');
const app = express();
const port = 3000;
app.listen(port, function() {
console.log(`listening on port ${port}`);
});
登錄后復(fù)制
該代碼創(chuàng)建了一個Express應(yīng)用，監(jiān)聽3000端口。運(yùn)行以下命令啟動服務(wù)器。
node server.js
登錄后復(fù)制
在瀏覽器中輸入http://localhost:3000，應(yīng)該可以看到一個“Cannot GET /”的頁面，表示服務(wù)器已經(jīng)啟動。
- 編寫頁面
為了讓用戶能夠進(jìn)行點餐操作，需要創(chuàng)建一些Web頁面。在項目根目錄，新建一個views文件夾，存放頁面。創(chuàng)建index.ejs文件，并編寫如下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在線點餐</title>
</head>
<body>
<h1>歡迎來到我們的餐廳</h1>
<h2>我們的菜單如下：</h2>
<ul>
<% for(var i = 0; i < menu.length; i++) { %>
<li><%= menu[i].name %> - <%= menu[i].price %>元</li>
<% } %>
</ul>
</body>
</html>
登錄后復(fù)制
該代碼使用了ejs模板引擎，渲染了一個菜單頁面。其中，menu是一個動態(tài)變量，代碼執(zhí)行時將會從服務(wù)器端獲取數(shù)據(jù)。
- 路由處理
為了讓頁面展示菜單數(shù)據(jù)，需要編寫路由處理函數(shù)。在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});
});
登錄后復(fù)制
該代碼將路由處理函數(shù)與GET請求綁定在一起，當(dāng)訪問根路由/時，服務(wù)器將會發(fā)送菜單數(shù)據(jù)，渲染index.ejs模板，并將數(shù)據(jù)傳遞給模板引擎，最終生成HTML頁面。
- 添加CSS樣式
為了美化頁面，需要添加一些CSS樣式。在根目錄中新建public文件夾，并創(chuàng)建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;
}
登錄后復(fù)制
該代碼定義了背景色、字體、對齊方式等樣式，讓頁面變得更加美觀。
- 修改模板文件
為了讓HTML頁面鏈接CSS樣式文件，需要修改模板文件。在index.ejs文件中添加如下代碼：
<link rel="stylesheet" href="/style.css" />
登錄后復(fù)制
該代碼告訴瀏覽器引用public文件夾下的style.css文件，添加頁面樣式。
- 總結(jié)
本文介紹了如何使用Node.js、Express和ejs模板引擎實現(xiàn)在線點餐Web項目，并提供了代碼示例。通過本文，讀者可以了解到如何初始化項目、安裝依賴模塊、創(chuàng)建服務(wù)器、編寫頁面、處理路由、添加CSS樣式等操作。讀者可以基于這些代碼，進(jìn)一步開發(fā)更加完善的在線點餐系統(tǒng)。
