引言
随着互联网技术的发展，全栈开发变得越来越流行。Bootstrap5和Express.js是两个强大的工具，可以帮助开发者快速构建响应式网站和应用程序。本文将详细讲解如何结合Bootstrap5和Express.js，打造一个功能齐全、响应式的全栈应用。
一、环境搭建
1.1 安装Node.js和npm
首先，确保你的计算机上安装了Node.js和npm。这两个工具是运行Express.js应用程序的基础。
访问
Node.js官网
下载并安装Node.js。
npm是Node.js的包管理器，安装Node.js时会自动安装npm。
1.2 创建Express.js项目
在命令行中，创建一个新的目录用于存放你的项目，并进入该目录：
mkdir my-express-app
cd my-express-app
使用npm初始化项目：
npm init -y
安装Express.js：
npm install express
二、Bootstrap5基础
2.1 引入Bootstrap5
在你的项目根目录下创建一个名为
public
的文件夹，然后在该文件夹中创建一个名为
styles.css
的文件。将以下代码复制到
styles.css
中：
/* 引入Bootstrap5样式 */
@import “node_modules/bootstrap/dist/css/bootstrap.min.css”;
2.2 基本布局
在项目的
public
文件夹中创建一个名为
index.html
的文件。以下是一个基本的HTML结构，使用Bootstrap5进行布局：

三、Express.js路由和控制器
3.1 创建路由
在你的项目根目录下创建一个名为
app.js
的文件。以下是一个简单的Express.js路由示例：
const express = require(‘express’);
const app = express();

// 设置静态文件目录
app.use(express.static(‘public’));

// 处理根路由
app.get(‘/’, (req, res) => {
res.sendFile(__dirname + ‘/public/index.html’);
});

// 启动服务器
app.listen(3000, () => {
console.log(‘服务器运行在 http://localhost:3000’);
});
3.2 创建控制器
创建一个名为
controllers
的文件夹，并在其中创建一个名为
homeController.js
的文件。以下是一个简单的控制器示例：
// homeController.js
module.exports = {
home: (req, res) => {
res.send(‘欢迎来到我的全栈应用！’);
}
};
在
app.js
中引入并使用控制器：
const express = require(‘express’);
const app = express();
const homeController = require(‘./controllers/homeController’);

// 设置静态文件目录
app.use(express.static(‘public’));

// 使用控制器处理根路由
app.get(‘/’, homeController.home);

// 启动服务器
app.listen(3000, () => {
console.log(‘服务器运行在 http://localhost:3000’);
});
四、数据库集成
为了实现持久化存储，我们需要集成一个数据库。以下以MongoDB为例进行讲解。
4.1 安装MongoDB
在
MongoDB官网
下载并安装MongoDB。
4.2 连接MongoDB
在
app.js
中引入MongoDB并连接到数据库：
const express = require(‘express’);
const mongoose = require(‘mongoose’);
const app = express();

// 连接到MongoDB数据库
mongoose.connect(‘mongodb://localhost:27017/my-express-app’, {
useNewUrlParser: true,
useUnifiedTopology: true
});

// …（其他代码）

// 启动服务器
app.listen(3000, () => {
console.log(‘服务器运行在 http://localhost:3000’);
});
4.3 创建模型
创建一个名为
models
的文件夹，并在其中创建一个名为
user.js
的文件。以下是一个简单的用户模型示例：
// user.js
const mongoose = require(‘mongoose’);
const Schema = mongoose.Schema;

const UserSchema = new Schema({
name: String,
email: String
});

module.exports = mongoose.model(‘User’, UserSchema);
在控制器中使用模型：
// homeController.js
const User = require(‘../models/user’);

module.exports = {
home: async (req, res) => {
try {
const users = await User.find();
res.send(users);
} catch (error) {
res.status(500).send(error);
}
}
};
五、总结
通过本文的讲解，我们了解了如何结合Bootstrap5和Express.js打造一个响应式的全栈应用。从环境搭建到数据库集成，我们一步步构建了一个功能齐全、响应式的全栈应用。希望本文能对你有所帮助。