正文

掌握Bootstrap5，Express轻松搭建动态网站实战指南

/0 浏览量
0824

引言

随着互联网技术的不断发展，动态网站已成为企业和个人展示信息、提供服务的重要平台。Bootstrap5和Express作为目前流行的前端和后端技术，可以帮助开发者快速搭建具有良好用户体验的动态网站。本文将详细介绍如何利用Bootstrap5和Express搭建一个动态网站，帮助读者从零开始，逐步掌握相关技能。

一、准备工作

1.1 环境搭建

在开始搭建动态网站之前，我们需要准备好以下环境：

  • 操作系统：Windows、macOS或Linux
  • 开发工具：Visual Studio Code、Sublime Text等
  • Node.js和npm：用于Express框架的安装和管理
  • Bootstrap5：用于网站的前端样式设计

1.2 安装Node.js和npm

  1. 访问Node.js官网（https://nodejs.org/），下载适合自己操作系统的安装包。
  2. 根据提示完成安装，确保Node.js和npm已成功安装。

1.3 安装Bootstrap5

  1. 在项目根目录下，创建一个名为public的文件夹，用于存放网站的前端资源。
  2. 在public文件夹下，创建一个名为css的文件夹，用于存放Bootstrap5的样式文件。
  3. 使用以下命令下载Bootstrap5的样式文件：
wget https://github.com/twbs/bootstrap/releases/download/v5.2.3/bootstrap.min.css -P public/css

二、搭建Express后端

2.1 创建项目

  1. 在项目根目录下，使用以下命令创建一个新的Express项目：
npx express-generator --view=ejs myproject
  1. 根据提示，选择项目名称、数据库类型（如MySQL、MongoDB等）和是否使用模块等选项。

2.2 修改项目配置

  1. 打开项目根目录下的package.json文件，将start命令修改为：
"start": "node app.js"
  1. 打开项目根目录下的app.js文件，修改以下内容：
const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'public')));

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

2.3 创建路由和控制器

  1. 在项目根目录下，创建一个名为routes的文件夹，用于存放路由文件。
  2. 在routes文件夹下，创建一个名为index.js的文件，用于定义网站的首页路由：
const express = require('express');
const router = express.Router();

router.get('/', (req, res) => {
  res.render('index', { title: 'My Dynamic Website' });
});

module.exports = router;
  1. 打开项目根目录下的app.js文件，引入并使用index.js路由：
const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'public')));
app.use('/', require('./routes/index'));

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

三、搭建Bootstrap5前端

3.1 创建页面结构

  1. 在项目根目录下的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 rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
  <header>
    <!-- 网站头部内容 -->
  </header>
  <main>
    <!-- 网站主体内容 -->
  </main>
  <footer>
    <!-- 网站底部内容 -->
  </footer>
  <script src="/js/bootstrap.bundle.min.js"></script>
</body>
</html>

3.2 添加Bootstrap5样式

  1. 在public/css文件夹下，创建一个名为custom.css的文件，用于添加自定义样式。
  2. 在index.ejs文件中，引入自定义样式文件：
<link rel="stylesheet" href="/css/custom.css">

3.3 编写页面内容

  1. 在views文件夹下，创建一个名为index.ejs的文件，用于定义网站的首页内容。
  2. 在index.ejs文件中，编写以下内容：
<header>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">我的动态网站</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">关于我们</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">联系方式</a>
        </li>
      </ul>
    </div>
  </nav>
</header>

四、测试网站

  1. 打开终端，进入项目根目录。
  2. 使用以下命令启动服务器：
node app.js
  1. 打开浏览器，访问http://localhost:3000，即可看到搭建好的动态网站。

五、总结

通过本文的介绍，相信你已经掌握了使用Bootstrap5和Express搭建动态网站的基本方法。在实际开发过程中，可以根据需求不断完善和优化网站功能。希望本文能对你有所帮助！

-- 展开阅读全文 --