node.js 实战——从0开始做一个餐厅预订（express+node+ejs+bootstrap）

餐厅预订

做一个WEB版的餐厅预订系统，主要功能包括有：餐厅的介绍、餐厅、明星厨师、预订、注册、个人中心等功能

界面呈现

界面大致呈现的效果如下图：

创建项目

IDE使用WebStorm,当然也可以选择vscode 、HBuilderX都是可以的。创建项目的方式有两种，

一种是使用express-generator 创建，具体步骤可以浏览node.js 实战------express框架------知识点
另种是使用IDE直接创建

express 模板引擎介绍

🧱 常见 View Engine 对比表

模板引擎	语法风格	学习曲线	渲染性能	特点/适用场景
EJS	类似 HTML + JS	🟢 简单	🟢 快	最通用、轻量、入门推荐
Pug（原 Jade）	缩进式语法	🟡 有点怪	🟢 快	简洁、有层次感，但需适应
Handlebars	Mustache 风格	🟢 简单	🟡 中等	强逻辑隔离，适合大团队模板开发
Nunjucks	类似 Django	🟢 简单	🟢 快	功能全、适合内容型网站（支持宏）
EJS + Vue/React	混合方案	🟡 复杂	🟡 看项目	前后端混合渲染项目（不推荐长期用）

###🚦怎么选？

✅ 初学 / 快速原型：

👉 EJS

• 类似 HTML，直接插入 JS 变量，用起来最直观。

bash 复制代码

<h1>Hello <%= username %></h1>

⸻

✅ 喜欢极简 / 不想写太多标签：

👉 Pug

• 不需要闭合标签，代码层次清晰，但初用者容易懵。

bash 复制代码

html
  head
    title= title
  body
    h1 Hello #{username}

⸻

✅ 企业团队 / 更强逻辑分离：

👉 Handlebars

• 支持 block、helper、partial，更适合多人协作。

bash 复制代码

<h1>Hello {{username}}</h1>

⸻

✅ 内容系统 / CMS 风格网站：

👉 Nunjucks

• 支持继承、宏、过滤器，适合文章类网站或后台系统。

⸻

✅ 已经是前后端分离：

• 根本不需要 View Engine，直接返回 JSON，用前端框架（如 Vue、React）渲染。

bash 复制代码

res.json({ user: 'Tom' })

⸻

🧠 总结建议：

你是？	推荐 View Engine
刚学 / 小项目 / 原型开发	EJS
想写优雅、结构化模板	Pug
需要可维护、模块化模板系统	Handlebars/Nunjucks
前后端完全分离	无需 View Engine

使用IDE 创建项目

我这里选择的是ejs ,做入门，后面再说前后端分离的

再Location 处选择好文件存放的位置，然后在写好项目的名字，比如我这里是位置选择的是/Users/layman/Desktop/node 这个文件夹下，我只需要将untitled2 换成项目的名字即可
根据自己的需要选择view Engine 和css
点击创建，等待IDE 执行完操作。

bash 复制代码

项目名称/
├── app.js              # 主应用文件
├── bin/www             # 启动服务器的入口
├── public/             # 静态资源（如图片、CSS、JS）
├── routes/             # 路由定义（如 index.js, users.js）
├── views/              # 模板文件（如 .ejs/.pug/.hbs）
├── package.json        # 项目描述和依赖

引入bootstrap

📦 方法一：直接通过 CDN 引入（最常用）

在你的 .ejs 模板里的里加入 Bootstrap 的 CDN 链接即可👇

html 复制代码

<!-- views/layout.ejs 或 index.ejs 中 -->
<head>
  <meta charset="UTF-8">
  <title><%= title %></title>
  <!-- Bootstrap CSS CDN -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- 可选：Bootstrap 的 JS（模态框、下拉菜单等用得上） -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>

📦 方法二：安装 Bootstrap 到本地

安装 Bootstrap 到项目中

bash 复制代码

npm install bootstrap

在express 里设置一个静态目录

javascript 复制代码

// app.js 或 index.js
app.use('/bootstrap', express.static(path.join(__dirname, 'node_modules/bootstrap/dist')));

在页面中

html 复制代码

<!-- 本地 Bootstrap 引入方式 -->
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/bootstrap/js/bootstrap.bundle.min.js"></script>

打包的时候，方法二处理办法

✅ 方法 A：把 Bootstrap 文件复制出来 → 放进 public/ 或 assets/ 目录

bash 复制代码

cp node_modules/bootstrap/dist/css/bootstrap.min.css public/vendor/bootstrap/css/
cp node_modules/bootstrap/dist/js/bootstrap.bundle.min.js public/vendor/bootstrap/js/

然后在你的 EJS 页面中引用它：

html 复制代码

<link href="/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>