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 变量，用起来最直观。
<h1>Hello <%= username %></h1>
⸻
✅ 喜欢极简 / 不想写太多标签：
👉 Pug
• 不需要闭合标签，代码层次清晰，但初用者容易懵。
htmlheadtitle= titlebodyh1 Hello #{username}
⸻
✅ 企业团队 / 更强逻辑分离：
👉 Handlebars
• 支持 block、helper、partial，更适合多人协作。
<h1>Hello {{username}}</h1>
⸻
✅ 内容系统 / CMS 风格网站：
👉 Nunjucks
• 支持继承、宏、过滤器，适合文章类网站或后台系统。
⸻
✅ 已经是前后端分离：
• 根本不需要 View Engine，直接返回 JSON，用前端框架（如 Vue、React）渲染。
res.json({ user: 'Tom' })
⸻
🧠 总结建议：
| 你是？ | 推荐 View Engine |
|---|---|
| 刚学 / 小项目 / 原型开发 | EJS |
| 想写优雅、结构化模板 | Pug |
| 需要可维护、模块化模板系统 | Handlebars/Nunjucks |
| 前后端完全分离 | 无需 View Engine |
使用IDE 创建项目
我这里选择的是ejs ,做入门，后面再说 前后端分离的
- 再Location 处选择好文件存放的位置，然后在写好项目的名字，比如我这里是位置选择的是/Users/layman/Desktop/node 这个文件夹下，我只需要将untitled2 换成项目的名字即可
- 根据自己的需要选择view Engine 和css
- 点击创建，等待IDE 执行完操作。
项目名称/
├── app.js # 主应用文件
├── bin/www # 启动服务器的入口
├── public/ # 静态资源（如图片、CSS、JS）
├── routes/ # 路由定义（如 index.js, users.js）
├── views/ # 模板文件（如 .ejs/.pug/.hbs）
├── package.json # 项目描述和依赖引入bootstrap
📦 方法一：直接通过 CDN 引入（最常用）
在你的 .ejs 模板里的 里加入 Bootstrap 的 CDN 链接即可👇
<!-- 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 到项目中
npm install bootstrap
在express 里设置一个静态目录
// app.js 或 index.js
app.use('/bootstrap', express.static(path.join(__dirname, 'node_modules/bootstrap/dist')));
在页面中
<!-- 本地 Bootstrap 引入方式 -->
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/bootstrap/js/bootstrap.bundle.min.js"></script>
打包的时候，方法二处理办法
✅ 方法 A：把 Bootstrap 文件复制出来 → 放进 public/ 或 assets/ 目录
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 页面中引用它：
<link href="/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>