Skip to content
On this page

1.Bootstrap

Bootstrap 5 是一款流行的前端框架,帮助开发者快速构建响应式和现代化的网页应用。以下是对 Bootstrap 5 的详细讲解:

1.1 基础介绍

什么是 Bootstrap? Bootstrap 是由 Twitter 团队开发的开源前端框架,提供了预定义的 HTML、CSS 和 JavaScript 组件,帮助开发者快速搭建美观且响应式的网页。Bootstrap 5 是最新版本,去除了对 jQuery 的依赖,改进了响应式布局系统,并增加了新的组件和实用工具。

安装和使用 你可以通过以下几种方式引入 Bootstrap 5:

  • CDN:
html
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  • NPM:
shell
npm install bootstrap
  • 下载源码: 从 Bootstrap 官网 下载源码,然后手动引入。

网格系统

Bootstrap 5 的网格系统基于 flexbox 布局,可以创建复杂的响应式布局。网格系统包括容器(containers)、行(rows)和列(columns)。

容器 容器是用来包裹内容和网格系统的基本布局元素。容器有两种类型:固定宽度容器和流体容器。

  • 固定宽度容器:
html
<div class="container">
  <!-- 内容 -->
</div>
  • 流体容器:
html
<div class="container-fluid">
  <!-- 内容 -->
</div>

行和列 使用 .row 类定义行,使用 .col 类定义列。列必须放在行内。

  • 基础用法:
html
<div class="container">
  <div class="row">
    <div class="col">列1</div>
    <div class="col">列2</div>
    <div class="col">列3</div>
  </div>
</div>
  • 响应式列:
html
<div class="row">
  <div class="col-sm">小屏幕及以上</div>
  <div class="col-md">中等屏幕及以上</div>
  <div class="col-lg">大屏幕及以上</div>
  <div class="col-xl">超大屏幕</div>
</div>

1.2. 组件

Bootstrap 5 提供了丰富的组件库,帮助开发者快速构建用户界面。常用组件包括:

  • 导航栏(Navbar)
html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
        <a class="nav-link active" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
    </ul>
  </div>
</nav>
  • 按钮(Buttons)
html
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
  • 表单(Forms)
html
<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1">
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
  • 模态框(Modals)
html
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

1.3. 实用工具类

Bootstrap 5 提供了许多实用工具类,用于快速添加常见的样式。这些工具类包括边距(margin)、填充(padding)、文本对齐(text alignment)、背景色(background color)等。

  • 边距和填充
html
<div class="mt-3">上边距3</div>
<div class="mb-3">下边距3</div>
<div class="pt-3">上填充3</div>
<div class="pb-3">下填充3</div>
  • 文本对齐
html
<div class="text-start">左对齐</div>
<div class="text-center">居中对齐</div>
<div class="text-end">右对齐</div>
  • 背景色
html
<div class="bg-primary text-white">蓝色背景,白色文本</div>
<div class="bg-secondary text-white">灰色背景,白色文本</div>
<div class="bg-success text-white">绿色背景,白色文本</div>

1.4. 图标

Bootstrap 5 引入了 Bootstrap Icons,这是一个独立的图标库,提供了数百个图标,开发者可以直接在项目中使用这些图标。

  • 引入图标库
html
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
  • 使用图标
html
<i class="bi bi-alarm"></i>
<i class="bi bi-calendar"></i>

1.5. 自定义和扩展

Bootstrap 5 允许开发者通过 SCSS 变量和混入(mixins)进行自定义。你可以覆盖默认变量值以满足特定需求。

  • 覆盖变量
scss
$primary: #ff6347; // 修改主色调为番茄红
@import "bootstrap/scss/bootstrap";

1.6. 移除 jQuery 依赖

Bootstrap 5 移除了对 jQuery 的依赖,所有 JavaScript 插件都使用原生 JavaScript 编写,这使得框架更轻量、更高效。

2.jQuery

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库,简化了 HTML 文档遍历与操作、事件处理、动画和 Ajax 的复杂性。jQuery 3 是 jQuery 的最新版本之一,提供了许多新特性和改进。以下是 jQuery 3 的主要特性和常用功能的讲解。

2.1.主要特性

  • 跨浏览器兼容性:jQuery 提供了跨浏览器的解决方案,确保在不同浏览器中一致地运行。
  • 简化的 DOM 操作:提供了方便的 API 来操作 DOM 元素。
  • 事件处理:提供了简洁的事件绑定和处理方法。
  • 动画和效果:内置多种动画效果,简化了复杂动画的实现。
  • Ajax 支持:简化了与服务器的异步通信。
  • 插件系统:丰富的插件库,能够扩展 jQuery 的功能。

2.2.常用功能示例

2.2.1. 选择器

jQuery 的选择器允许你轻松地选择和操作 DOM 元素。

js
// 选择所有段落元素
$('p').css('color', 'blue');

// 选择具有特定类的元素
$('.myClass').hide();

// 选择具有特定 ID 的元素
$('#myId').show();

2.2.2. 事件处理

jQuery 提供了便捷的方法来绑定和处理事件。

js
// 绑定点击事件
$('#myButton').on('click', function() {
    alert('Button clicked!');
});

// 解绑点击事件
$('#myButton').off('click');

2.2.3. DOM 操作

jQuery 提供了简洁的 API 来操作 DOM 元素的属性、内容和样式。

js
// 改变元素的文本内容
$('#myElement').text('New text');

// 改变元素的 HTML 内容
$('#myElement').html('<strong>Bold text</strong>');

// 改变元素的属性
$('#myInput').attr('placeholder', 'Enter your name');

2.2.4. 动画和效果

jQuery 提供了多种内置动画和效果,简化了复杂动画的实现。

js
// 淡入效果
$('#myElement').fadeIn();

// 淡出效果
$('#myElement').fadeOut();

// 滑动效果
$('#myElement').slideDown();
$('#myElement').slideUp();

2.2.5. Ajax

jQuery 提供了便捷的 Ajax 方法,用于与服务器进行异步通信。

js
// 使用 $.ajax 方法
$.ajax({
    url: 'https://api.example.com/data',
    method: 'GET',
    success: function(data) {
        console.log(data);
    },
    error: function(error) {
        console.error(error);
    }
});

// 使用 $.get 方法
$.get('https://api.example.com/data', function(data) {
    console.log(data);
});

// 使用 $.post 方法
$.post('https://api.example.com/data', { key: 'value' }, function(response) {
    console.log(response);
});

2.2.6. 链式调用

jQuery 支持链式调用,使代码更加简洁和可读。

js
// 链式调用示例
$('#myElement').css('color', 'red').slideUp().slideDown();

3.Handlebars

Handlebars 是一个简单但功能强大的模板引擎,用于生成 HTML 代码。它是基于 Mustache 模板语言的扩展,提供了更为强大的功能,如条件判断和循环。

3.1.基本使用

  • Handlebars 的基本语法非常简单。它使用双大括号 来包裹变量名和表达式
  • 在渲染模板时, 将被替换为上下文中 variableName 的值。
  • Handlebars 的模板渲染依赖于上下文(Context)。上下文是一个包含数据的对象。在渲染模板时,Handlebars 会用上下文中的数据来替换模板中的变量。例如:
js
const Handlebars = require('handlebars');
// 模板源
const source = "<p>Hello, {{name}}!</p>";
// 编译模板
const template = Handlebars.compile(source);
// 上下文
const context = { name: "Nick" };
// 渲染模板
const result = template(context);
console.log(result);  // 输出: <p>Hello, Nick!</p>

3.2. 条件判断

Handlebars 支持条件判断,例如:

js
const Handlebars = require('handlebars');
const source = `
{{#if isAdmin}}
  <p>Welcome, admin!</p>
{{else}}
  <p>Welcome, user!</p>
{{/if}}
`;
const template = Handlebars.compile(source);
const context = { isAdmin: true };
const result = template(context);
console.log(result);

如果上下文中 isAdmin 的值为 true,则渲染 Welcome, admin!,否则渲染 Welcome, user!。

3.3. 循环

可以使用 each 块来遍历数组。例如:

js
const Handlebars = require('handlebars');
const source = `
<ul>
  {{#each items}}
    <li>{{this}}</li>
  {{/each}}
</ul>
`;
const template = Handlebars.compile(source);
const context = { items: ["Item 1", "Item 2", "Item 3"] };
const result = template(context);
console.log(result);

3.4. 自定义帮助器

可以定义自己的帮助器来扩展 Handlebars 的功能。例如:

js
const Handlebars = require('handlebars');
Handlebars.registerHelper('uppercase', function (str) {
    return str.toUpperCase();
});
const source = `{{uppercase name}}`;
const template = Handlebars.compile(source);
const context = { name: 'Nick' };
const result = template(context);
console.log(result);

4.express-handlebars

4.1.基本使用

4.1.1 home.handlebars

views/home.handlebars

html
<p>Welcome to the Home Page!</p>

4.1.2. header.handlebars

views/partials/header.handlebars

html
<header>
    <h1>{{uppercase title}}</h1>
</header>

4.1.3. main.handlebars

views/layouts/main.handlebars

html
<!DOCTYPE html>
<html>
<head>
    <title>{{title}}</title>
</head>
<body>
    {{> header}}
    {{{body}}}
</body>
</html>

4.1.4. index.js

index.js

js
const express = require('express');
const exphbs = require('express-handlebars');
const app = express();
+const hbs = exphbs.create({
+   helpers: {
+       uppercase: function (str) {
+           return str.toUpperCase();
+       }
+   }
+});
+
+app.engine('handlebars', hbs.engine);
app.set('view engine', 'handlebars');
app.set('views', './views');
app.get('/', (req, res) => {
+   res.render('home', { title: 'Home Page', layout: 'main' });
});
+const PORT = 3600;
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

4.2.树

  • 在 Handlebars 中,部分模板(partial)可以通过传递参数来定制其渲染。传递参数的方法
    • 上下文对象:this 或其他上下文对象表示当前的上下文数据。
    • 命名参数:使用 key=value 形式传递参数,这些参数可以在部分模板中使用。
  • 在 Handlebars 中,../ 表示访问当前上下文对象的父级上下文。

4.2.1 tree.handlebars

views/tree.handlebars

html
<div>
    {{#each accessTree}}
    {{> treeNode this depth=1}}
    {{/each}}
</div>

4.2.2 treeNode.handlebars

views/partials/treeNode.handlebars

html
<div>
    {{name}}
    {{#if children}}
    <div style="padding-left: {{multiply depth 20}}px;">
        {{#each children}}
        {{> treeNode this depth=(inc ../depth)}}
        {{/each}}
    </div>
    {{/if}}
</div>

4.2.3 index.js

index.js

js
const express = require('express');
const exphbs = require('express-handlebars');
const app = express();
const hbs = exphbs.create({
    helpers: {
        uppercase: function (str) {
            return str.toUpperCase();
+       },
+       inc: function (value) {
+           return parseInt(value) + 1;
+       },
+       multiply: function (a, b) {
+           return a * b;
+       },
    }
});
app.engine('handlebars', hbs.engine);
app.set('view engine', 'handlebars');
app.set('views', './views');
+const accessTree = [
+   {
+       name: 'child1',
+       children: [
+           {
+               name: 'child1.1',
+               children: [
+                   {
+                       name: 'child1.1.1',
+                       children: []
+                   }
+               ]
+           },
+           {
+               name: 'child1.2',
+               children: [
+                   {
+                       name: 'child1.2.1',
+                       children: []
+                   }
+               ]
+           }
+       ]
+   }
+];
+app.get('/tree', (req, res) => {
+   res.render('tree', { title: 'Tree', accessTree });
});
const PORT = 3600;
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

5.bcrypt

bcrypt 是一个用于密码哈希和验证的库,在 Node.js 应用中广泛用于处理用户密码的存储和验证。bcrypt 基于 Blowfish 加密算法,可以对密码进行加密,并通过生成的哈希来验证密码。其主要目的是提高密码存储的安全性,避免明文存储密码或使用简单的哈希算法导致的安全隐患。

5.1 为什么要使用 bcrypt?

安全性:bcrypt 通过生成盐值并结合哈希算法来处理密码,使得相同的密码每次生成的哈希值都不同,增强了密码的安全性。 防止彩虹表攻击:bcrypt 使用的盐值使得预先计算好的哈希表(如彩虹表)无法直接破解哈希值。 哈希强度:bcrypt 允许配置哈希强度(cost factor),使得生成哈希的计算时间更长,进一步增加破解难度。

5.2 如何使用 bcrypt?

要使用 bcrypt,首先需要安装这个 npm 包。

5.2.1 安装

npm install bcrypt 在代码中,你可以使用 bcrypt 来对密码进行哈希和验证。以下是一些常见的用法:

5.2.2 生成哈希

在用户注册或密码设置时,可以使用 bcrypt 生成密码的哈希值,然后将哈希值存储在数据库中。

js
const bcrypt = require('bcrypt');

// 生成哈希的示例
async function hashPassword(password) {
  const saltRounds = 10;  // 盐的轮次,越高计算时间越长,安全性越高
  const hash = await bcrypt.hash(password, saltRounds);
  return hash;
}

// 使用示例
const plainPassword = 'myPlainPassword';
hashPassword(plainPassword).then(hash => {
  console.log('Hashed password:', hash);
});

5.2.3 验证密码

在用户登录时,可以使用 bcrypt 来比较用户输入的明文密码与数据库中存储的哈希值。

js
const bcrypt = require('bcrypt');
// 验证密码的示例
async function verifyPassword(plainPassword, hashedPassword) {
  const match = await bcrypt.compare(plainPassword, hashedPassword);
  return match;
}
// 使用示例
const plainPassword = 'myPlainPassword';
const hashedPassword = '$2b$10$2b.qiYdCOOgr9WqlX/IVLueucF.xMe/LyeuLwNnIFQlkbS4ySPUti';  // 示例哈希
verifyPassword(plainPassword, hashedPassword).then(match => {
  if (match) {
    console.log('Password is valid!');
  } else {
    console.log('Password is invalid.');
  }
});

5.2.4 调整哈希强度(salt rounds)

bcrypt 允许你通过调整 salt rounds 来控制哈希的计算成本。salt rounds 越高,生成哈希所需的时间就越长,安全性也越高。

js
const bcrypt = require('bcrypt');
const saltRounds = 12;  // 你可以调整这个数值
const password = 'examplePassword';
bcrypt.hash(password, saltRounds, function(err, hash) {
  // 保存哈希到数据库中
  console.log('Hashed password with higher salt rounds:', hash);
});