掌握Bootstrap5，轻松搭建Express全栈应用

Bootstrap 5 是一个流行的前端框架，它可以帮助开发者快速搭建响应式、移动优先的网页。结合 Express，一个流行的 Node.js 框架，可以构建全栈应用。本文将介绍如何使用 Bootstrap 5 和 Express 来创建一个基本的全栈应用。

一、环境准备

在开始之前，请确保以下环境已经安装：

Node.js 和 npm：用于运行 Express 应用。
Bootstrap 5：用于美化网页。
任何代码编辑器：如 Visual Studio Code、Sublime Text 等。

二、创建项目结构

首先，创建一个新的文件夹用于存放项目文件，然后在该文件夹中执行以下命令：

npm init -y

这会创建一个 package.json 文件，其中包含了项目的元数据和依赖信息。

三、安装依赖

接下来，安装 Express 和 Bootstrap 5 相关的依赖：

npm install express bootstrap @popperjs/core --save

这里，bootstrap 是用于引入 Bootstrap 5，@popperjs/core 是 Bootstrap 5 所依赖的 Popper.js 库。

四、设置 Express 应用

创建一个名为 app.js 的文件，并添加以下代码：

const express = require('express');
const path = require('path');
const app = express();

// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'public')));

// 设置模板引擎为 EJS
app.set('view engine', 'ejs');

// 定义路由
app.get('/', (req, res) => {
  res.render('index', { title: '我的全栈应用' });
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

这里，我们设置了静态文件目录为 public，这意味着所有放置在 public 文件夹中的文件都可以直接通过 URL 访问。同时，我们设置了模板引擎为 EJS，这是一个流行的服务器端模板引擎。

五、创建 EJS 模板

在 views 文件夹中创建一个名为 index.ejs 的文件，并添加以下代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title %></title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-5">
    <h1><%= title %></h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

这里，我们使用了 Bootstrap 5 的 CSS 和 JavaScript 文件，使页面具有响应式布局和样式。

六、运行应用

在终端中运行以下命令来启动应用：

node app.js

打开浏览器，访问 http://localhost:3000，你应该能看到一个使用了 Bootstrap 5 样式的页面。

七、总结

通过以上步骤，你已经成功使用 Bootstrap 5 和 Express 搭建了一个基本的全栈应用。你可以根据需要添加更多功能和路由，以构建一个更复杂的应用。