当前位置：首页 > 文章列表 > 文章 > 前端 > 利用Node.js实现在线点餐功能的Web项目

利用Node.js实现在线点餐功能的Web项目

2023-11-08 21:17:48 0浏览收藏

文章不知道大家是否熟悉？今天我将给大家介绍《利用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是模板引擎，用于渲染动态页面。

创建服务器

为了让用户可以访问我们的Web应用，需要创建一个服务器。在项目根目录，新建一个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 /”的页面，表示服务器已经启动。

编写页面

为了让用户能够进行点餐操作，需要创建一些Web页面。在项目根目录，新建一个views文件夹，存放页面。创建index.ejs文件，并编写如下代码：




  
  在线点餐


  欢迎来到我们的餐厅
  我们的菜单如下：
  
    <% for(var i = 0; i < menu.length; i++) { %>
      <%= menu[i].name %> - <%= menu[i].price %>元
    <% } %>

该代码使用了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;
}

该代码定义了背景色、字体、对齐方式等样式，让页面变得更加美观。