掌握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 搭建了一個基本的全棧利用。你可能根據須要增加更多功能跟路由，以構建一個更複雜的利用。