22、web前端开发之html5（三）

六. 离线存储与缓存

在网络环境不稳定或需要优化资源加载速度的场景下，离线存储与缓存技术显得尤为重要。HTML5引入了多种离线存储和缓存机制，帮助开发者提升用户体验。本节将详细介绍Application Cache、localStorage、sessionStorage以及IndexedDB等技术，帮助你理解如何在不同场景下选择合适的存储和缓存策略。

1、Application Cache

Application Cache（应用程序缓存）是HTML5引入的一项技术，允许开发者指定哪些资源需要缓存，以便在离线或网络条件差的情况下，用户仍能访问和使用这些资源。

1.1. 工作原理
  • manifest文件：需要创建一个manifest文件，定义需要缓存的资源。
  • 缓存资源：浏览器会根据manifest文件下载并缓存指定的资源。
  • 离线访问：当用户离线时，浏览器会直接从缓存中加载这些资源，而不是尝试从服务器下载。
1.2. manifest文件结构

一个典型的manifest文件由以下几个部分组成：

CACHE MANIFEST  
# 版本号（可选）  
version 1.0  # CACHE: 需要缓存的资源  
CACHE:  
index.html  
styles.css  
scripts.js  
images/logo.png  # NETWORK: 需要从网络加载的资源（可用通配符*表示所有资源）  
NETWORK:  
*  # FALLBACK: 网络资源无法访问时的回退资源  
FALLBACK:  
/images/offline.jpg
  • CACHE：明确列出需要缓存的资源文件。
  • NETWORK：指定哪些资源应该从网络上加载（可以使用通配符*表示所有资源，除非在CACHE或FALLBACK中指定）。
  • FALLBACK：当网络资源无法访问时，提供替代的本地资源。
1.3. 使用Application Cache的步骤

  1. 创建manifest文件：
    在你的项目中创建一个cache.manifest文件，定义需要缓存的资源。

  2. 在HTML中引入manifest文件：
    在<html>标签中添加manifest属性，指向你的cache.manifest文件。

    <!DOCTYPE html>  
<html manifest="cache.manifest">

  3. 更新缓存：
    浏览器会在首次加载页面时自动下载并缓存资源。对于已缓存的资源，浏览器会在页面加载时优先使用缓存版本。

  4. 更新manifest文件：
    如果需要更新缓存内容，只需修改cache.manifest文件（例如增加一个版本号），然后重新加载页面即可触发缓存更新。

1.4. 离线检测

Application Cache提供了事件来监控缓存的更新状态。通过以下事件，可以实时了解缓存的更新进度和状态：

// 监听缓存的更新进度  
window.applicationCache.onprogress = function(e) {  console.log(`缓存进度：${e.loaded}/${e.total}`);  
};  // 监听缓存下载完成  
window.applicationCache.ondownloading = function() {  console.log('缓存下载中...');  
};  // 监听缓存更新完成  
window.applicationCache.onupdateready = function() {  window.applicationCache.swapCache();  console.log('缓存更新完成！');  
};  // 监听缓存出错  
window.applicationCache.onerror = function() {  console.error('缓存更新失败！');  
};
1.5. 优点与局限
  • 优点：
    • 用户可以在离线环境下访问关键资源。
    • 提高了页面加载速度，尤其是在网络条件差的情况下。
  • 局限：
    • 如果manifest文件中的资源路径发生变化，需要重新加载整个缓存。
    • 管理缓存的更新可能会比较麻烦，尤其是在大型应用中。
2、localStorage与sessionStorage

除了Application Cache，HTML5还引入了localStorage和sessionStorage，它们允许开发者在客户端存储非结构化的数据。

2.1. localStorage

localStorage是一种长期存储机制，存储的数据会在浏览器关闭后仍然保留，除非用户主动清除。

  • 特点：

    • 数据持久保存，除非用户手动清除。
    • 数据在同一网站的所有页面中共享。
    • 大小限制通常为5MB左右。

  • 使用示例：

    // 存储数据  
localStorage.setItem('username', 'alice');  // 读取数据  
const username = localStorage.getItem('username');  
console.log(username); // 输出：alice  // 删除数据  
localStorage.removeItem('username');  // 清除所有数据  
localStorage.clear();
2.2. sessionStorage

sessionStorage与localStorage类似，但它的数据只会保留到当前会话结束（即浏览器关闭）。

  • 特点：

    • 数据只在当前会话中有效。
    • 数据在同一网站的所有页面中共享。
    • 大小限制通常为5MB左右。

  • 使用示例：

    // 存储数据  
sessionStorage.setItem('tempData', '12345');  // 读取数据  
const tempData = sessionStorage.getItem('tempData');  
console.log(tempData); // 输出：12345  // 删除数据  
sessionStorage.removeItem('tempData');
2.3. 两者的区别
特性localStoragesessionStorage
数据生命周期持久保存只在当前会话有效
作用域全局全局
容量限制通常为5MB通常为5MB
数据清除用户手动清除浏览器关闭后自动清除
2.4. 使用场景
  • localStorage：
    • 用户偏好设置（如主题颜色、字体大小）。
    • 长期有效的数据（如用户凭证、游戏进度）。
  • sessionStorage：
    • 临时数据（如购物车内容、表单填写进度）。
    • 会话级别的信息（如用户ID、临时凭证）。
3、IndexedDB

IndexedDB是一种客户端存储技术，允许开发者在浏览器中存储和管理结构化的数据（如文档、元数据等）。它支持大容量数据存储和事务操作，适合复杂的数据管理需求。

3.1. 核心概念
  • 数据库：IndexedDB以数据库为单位存储数据，每个数据库可以包含多个对象存储空间。
  • 对象存储空间：类似于表格，存储一组结构类似的数据。
  • 索引：用于加速数据查询，类似于数据库中的索引。
  • 事务：支持事务操作，确保数据的完整性。
3.2. 使用步骤

  1. 创建或打开数据库：

    const request = window.indexedDB.open('myDatabase', 1);

  2. 处理数据库创建事件：

    request.onupgradeneeded = function(event) {  const db = event.target.result;  // 创建对象存储空间  const objectStore = db.createObjectStore('users', { keyPath: 'id' });  // 创建索引  objectStore.createIndex('nameIndex', 'name', { unique: false });  
};

  3. 存储数据：

    const transaction = db.transaction(['users'], 'readwrite');  
const objectStore = transaction.objectStore('users');  const request = objectStore.add({  id: 1,  name: 'alice',  email: 'alice@example.com'  
});  request.onsuccess = function() {  console.log('数据存储成功！');  
};

  4. 读取数据：

    const transaction = db.transaction(['users'], 'readonly');  
const objectStore = transaction.objectStore('users');  const request = objectStore.get(1);  
request.onsuccess = function() {  const user = request.result;  console.log(user); // 输出：{ id: 1, name: 'alice', email: 'alice@example.com' }  
};

  5. 关闭数据库：

    db.close();
4、Service Worker

Service Worker是一种脚本，运行在浏览器的后台，允许开发者代理网络请求、实现离线缓存，以及提高网页性能。

4.1. 核心功能
  • 离线缓存：通过拦截网络请求，实现资源的缓存和离线访问。
  • 网络代理：可以修改请求和响应，实现自定义的缓存策略。
  • 推送通知：支持推送通知，提升用户体验。
4.2. 使用示例

  1. 注册Service Worker：

    if ('serviceWorker' in navigator) {  navigator.serviceWorker  .register('/sw.js')  .then(function(registration) {  console.log('Service Worker注册成功！');  })  .catch(function(err) {  console.error('Service Worker注册失败：', err);  });  
}

  2. 实现缓存逻辑（在sw.js中）：

    const CACHE_NAME = 'my-cache-v1';  
const ASSETS = [  '/',  '/index.html',  '/styles.css',  '/scripts.js',  '/images/logo.png'  
];  self.addEventListener('install', function(event) {  event.waitUntil(  caches.open(CACHE_NAME)  .then(function(cache) {  return cache.addAll(ASSETS);  })  );  
});  self.addEventListener('fetch', function(event) {  event.respondWith(  caches.match(event.request)  .then(function(response) {  if (response) {  return response;  }  return fetch(event.request);  })  );  
});
5、缓存策略

在现代Web开发中，缓存策略扮演着至关重要的角色。它不仅可以显著提升网页的加载速度，还能优化用户体验，尤其是在网络条件较差或需要离线访问的场景下。然而，缓存策略的选择和实施并非一刀切，每种技术都有其特定的应用场景和优缺点。通过合理的缓存策略，可以在性能、用户体验和开发效率之间取得平衡。本节将详细介绍如何选择合适的缓存技术、管理缓存的生命周期、避免缓存污染以及如何在开发与生产环境中分离缓存策略。

5.1 选择合适的缓存技术

选择合适的缓存技术是实现高效缓存策略的第一步。根据项目需求、数据规模和性能要求，我们可以选择不同的缓存技术。以下是几种常见的缓存技术及其适用场景：

1. Application Cache

Application Cache（应用程序缓存）是一种通过manifest文件管理资源缓存的技术，适用于需要离线访问完整页面的场景。它允许开发者指定哪些资源需要缓存，以便在离线或网络条件差的情况下，用户仍能访问和使用这些资源。

适用场景：

  • 需要离线访问的完整网页。
  • 希望通过预加载资源提升首次加载速度的应用。
  • 在网络不稳定的环境中，确保关键资源可用的场景。

示例：一个需要在离线环境中访问的移动应用，可以通过Application Cache缓存所有必要的HTML、CSS、JavaScript和图像文件。

2. localStorage与sessionStorage

localStorage和sessionStorage是HTML5引入的一种轻量级存储技术，适用于小规模的数据存储。它们允许开发者在客户端存储非结构化的数据，以提升数据的读写效率。

适用场景：

  • 存储用户偏好设置，如主题颜色、字体大小等。
  • 存储临时数据，如购物车内容、表单填写进度等。
  • 存储需要持久化的数据，如用户凭证（Token）、游戏进度等。

优点：

  • 数据持久保存（localStorage）或仅在当前会话有效（sessionStorage）。
  • 便于通过JavaScript操作，API简单易用。
  • 支持较大的存储空间（通常为5MB左右）。

示例：在电商网站中，可以通过localStorage存储用户的购物车内容，确保即使在用户关闭浏览器后，购物车数据仍然保留。

3. IndexedDB

IndexedDB是一种客户端存储技术，允许开发者在浏览器中存储和管理结构化的数据。它支持大容量数据存储和事务操作，适用于需要复杂数据管理的应用场景。

适用场景：

  • 需要存储大量结构化数据的应用，如电子商务平台的产品数据库。
  • 需要高效查询和管理数据的场景，如搜索引擎的本地缓存。
  • 需要在离线环境中访问复杂数据的应用，如移动端的CRM系统。

优点：

  • 支持大容量数据存储（通常为数百MB）。
  • 支持事务操作，确保数据的完整性。
  • 支持索引，提升数据查询的效率。

示例：在一个在线音乐播放器中，可以通过IndexedDB存储用户的音乐库，包括歌曲元数据、专辑封面等信息，以便在离线环境下访问。

4. Service Worker

Service Worker是一种脚本，运行在浏览器的后台，允许开发者代理网络请求、实现离线缓存，以及提高网页性能。Service Worker的功能远超传统的缓存技术，适用于需要复杂网络请求代理和离线支持的应用。

适用场景：

  • 需要实现离线访问的现代Web应用，如Progressive Web Apps（PWA）。
  • 需要代理和拦截网络请求的场景，如自定义缓存策略、数据压缩等。
  • 需要推送通知的应用，如新闻客户端、社交媒体应用等。

优点：

  • 提供灵活的缓存控制，允许开发者自定义缓存逻辑。
  • 支持推送通知，提升用户体验。
  • 能够代理和修改网络请求，适用于需要自定义请求处理的场景。

示例：在一个新闻客户端中，可以通过Service Worker缓存常访问的文章和资源，实现离线阅读功能，并在后台推送最新新闻通知。

5.2 管理缓存的生命周期

缓存的有效性和性能在很大程度上依赖于缓存的生命周期管理。合理的缓存生命周期管理可以避免缓存过期、数据不一致等问题，确保应用始终拥有最新且有效的数据。

1. 为缓存设置合理的过期时间

每个缓存条目都应该有一个合理的过期时间，确保缓存不会永久有效。过期时间的长短取决于数据的更新频率和业务需求。

示例：在电商网站中，用户的购物车数据可以设置为30天过期，而商品价格信息可能需要更短的缓存时间（如15分钟），以确保及时更新。

2. 提供清理缓存的接口

在数据更新时，需要及时清理相关的缓存条目，确保应用使用最新的数据。可以通过以下方式提供缓存清理接口：

  • 手动清理：在管理后台提供清理缓存的按钮，允许管理员手动清理特定或所有缓存。
  • 自动清理：在数据更新时，自动触发缓存清理逻辑。
  • 版本控制：通过版本号或哈希值来管理缓存，确保更新时自动识别和清理旧缓存。

示例：在社交媒体平台中，当用户更新个人资料时，后台系统自动清理与该用户相关的缓存，确保前端获取最新的用户信息。

3. 监控缓存的使用情况

通过监控工具监控缓存的使用情况，了解缓存的命中率、存储空间的使用情况等指标，及时优化缓存策略。

示例：使用Google Analytics或类似的监控工具，跟踪用户访问的资源，分析缓存命中率，以优化缓存策略，确保高频访问的资源得到充分缓存。

5.3 避免缓存污染

缓存污染是指不同资源被错误地缓存或读取，导致数据不一致或错误。为了避免缓存污染，需要采取以下措施：

1. 确保不同的资源有不同的缓存版本

每个资源都应该有唯一的标识符，如URL、版本号或哈希值，确保不同的资源不会被错误地缓存或读取。

示例：在网页中，JavaScript文件和CSS文件可以通过添加版本号或哈希值作为查询参数，确保每次更新时，浏览器下载最新的文件。

<script src="script.js?v=1.0.0"></script>  
<link rel="stylesheet" href="style.css?v=1.0.0">

九. Web Workers（多线程）

1. 背景
  • 单线程限制：JavaScript在主线程执行，繁重任务会阻塞UI。
  • Web Workers：在后台运行JavaScript，避免阻塞。
2. 使用方法
  1. 创建Worker：new Worker('worker.js')
  2. 通信：通过postMessage发送消息。
  3. 处理消息：onmessage事件监听。
3. 示例
<!-- 主线程 -->  
<script>  
const worker = new Worker('worker.js');  
worker.onmessage = function(event) {  console.log('收到从Worker的消息:', event.data);  
};  
worker.postMessage('开始计算');  
</script>  <!-- worker.js -->  
self.onmessage = function(event) {  const result = performExpensiveTask(event.data);  self.postMessage(result);  
};

十、表单增强

随着Web开发的不断进步，HTML5引入了许多新的表单输入类型和验证功能，大大增强了表单的功能性和用户体验。通过这些增强功能，开发者可以创建更加智能、用户友好的表单，减少前端验证的需求，同时提高数据的准确性。以下是详细的讲解。

1、新增输入类型

HTML5新增了多种输入类型，使得表单字段能够更精确地匹配用户输入的数据类型，从而提高表单的整体体验和数据的准确性。

1.1 Email 输入类型

  • 类型：email

  • 功能：用于输入电子邮件地址。

  • 优势：

    • 自动验证邮箱格式。
    • 在支持的设备上会显示邮箱键盘（如移动设备）。

  • 示例：

    <input type="email" name="email" required placeholder="输入邮箱">

1.2 URL 输入类型

  • 类型：url

  • 功能：用于输入网页地址。

  • 优势：

    • 自动验证URL格式。
    • 在支持的设备上会显示URL键盘。

  • 示例：

    <input type="url" name="website" placeholder="输入网站地址">

1.3 电话号码输入类型

  • 类型：tel

  • 功能：用于输入电话号码。

  • 优势：

    • 在移动设备上会自动显示电话键盘。
    • 可以配合pattern属性进行自定义验证。

  • 示例：

    <input type="tel" name="phone" pattern="[0-9]{11}" placeholder="输入电话号码">

1.4 数字输入类型

  • 类型：number

  • 功能：用于输入数字。

  • 优势：

    • 只允许输入数字。
    • 可以通过min和max属性限制输入范围。

  • 示例：

    <input type="number" name="age" min="18" max="100" placeholder="输入年龄">

1.5 滑块输入类型

  • 类型：range

  • 功能：用于输入一个范围内的值。

  • 优势：

    • 提供滑块选择，用户友好。
    • 可以通过min、max和step属性控制范围和步长。

  • 示例：

    <input type="range" name="rating" min="1" max="10" step="1">

1.6 日期和时间输入类型

  • 类型：date、datetime、month、time、week

  • 功能：

    • date：选择日期（年、月、日）。
    • datetime：选择日期和时间。
    • month：选择月份和年份。
    • time：选择时间（小时、分钟）。
    • week：选择周和年份。

  • 优势：

    • 提供标准的日期时间选择界面。
    • 自动验证格式。

  • 示例：

    <input type="date" name="birthday" required>  
<input type="time" name="appointment_time">
2、表单验证

表单验证是确保用户输入数据符合预期格式和要求的关键步骤。HTML5提供了内置的验证功能，减少了对JavaScript的依赖。

2.1 必填字段（required）

  • 属性：required

  • 功能：指定该字段必须填写，否则无法提交表单。

  • 示例：

    <input type="email" name="email" required>
2.2 正则表达式验证（pattern）

  • 属性：pattern

  • 功能：通过正则表达式验证输入内容。

  • 示例：

    <input type="tel" name="phone" pattern="[0-9]{11}" placeholder="输入11位电话号码">
2.3 输入长度限制（maxlength 和 minlength）

  • 属性：

    • maxlength：指定输入的最大字符数。
    • minlength：指定输入的最小字符数。

  • 示例：

    <input type="text" name="username" maxlength="20" minlength="4" placeholder="输入4-20个字符">
2.4 占位符提示（placeholder）

  • 属性：placeholder

  • 功能：在输入字段为空时显示提示文本。

  • 示例：

    <input type="email" name="email" placeholder="例如：user@example.com">
3、综合示例

以下是一个综合了多种输入类型和验证功能的表单示例：

<form>  <div>  <label for="username">用户名：</label>  <input type="text" id="username" name="username"   maxlength="20" minlength="4" required placeholder="输入4-20个字符">  </div>  <div>  <label for="email">邮箱：</label>  <input type="email" id="email" name="email" required placeholder="输入邮箱地址">  </div>  <div>  <label for="phone">电话：</label>  <input type="tel" id="phone" name="phone" pattern="[0-9]{11}" placeholder="输入11位电话号码">  </div>  <div>  <label for="age">年龄：</label>  <input type="number" id="age" name="age" min="18" max="100" placeholder="输入年龄">  </div>  <div>  <label for="rating">评分：</label>  <input type="range" id="rating" name="rating" min="1" max="10" step="1">  </div>  <div>  <label for="birthday">生日：</label>  <input type="date" id="birthday" name="birthday" required>  </div>  <button type="submit">提交</button>  
</form>
4、最佳实践
  1. 结合输入类型和验证：根据需要选择合适的输入类型，并配合required、pattern等属性进行验证。
  2. 提供反馈：使用浏览器的内置验证功能，同时可以通过JavaScript提供更详细的错误反馈。
  3. 响应式设计：确保表单在不同设备上的显示效果一致。
  4. 测试：在不同浏览器和设备上测试表单的兼容性和验证效果。

十一. 响应式设计

1. viewport元标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 媒体查询

@media (max-width: 600px) {  body {  font-size: 14px;  }  
}
3. 弹性盒布局（Flexbox）
.container {  display: flex;  flex-wrap: wrap;  justify-content: space-between;  
}  
.item {  flex: 1;  width: 300px;  
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/74773.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

用HTML和CSS生成炫光动画卡片

用HTML和CSS生成炫光动画卡片

这个效果结合了渐变、旋转和悬浮效果的炫酷动画示例&#xff0c;使用HTML和CSS实现。 一、效果 二、实现 代码如下&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport&quo…
阅读更多...
【嵌入式学习2】数组

【嵌入式学习2】数组

目录 ## 数组概念 ## 数组使用 ## 数组初始化 ## 数组名 ## 数组长度 ## 数组相关题目 1、找最大值 2、逆置 ## 数组和指针 指针加整数的含义 ## 指针数组 ## 数组名做函数参数 ## 函数参数传递数组 1、在函数内部 2. 在函数外部 ## 多维数组 使用下标访问 #…
阅读更多...
C++中的判断与循环

C++中的判断与循环

一.if判断语句 1.程序中的判断&#xff1a; if (要执行的判断&#xff0c;最后的返回值要是bool型的数据) {如果为真&#xff0c;要执行的代码段; } #include"iostream" using namespace std;int main() {int ans;cin >> ans;if (ans > 1000) {cout <…
阅读更多...
前端开发中生成网站的favicon.ico文件的软件推荐及使用方法

前端开发中生成网站的favicon.ico文件的软件推荐及使用方法

日常网站开发中&#xff0c;我们经常需要生成网站的favicon.ico文件&#xff0c;今天我在这里来推荐几个编辑.ico(也可将图片格式转化为.ico)图片&#xff0c;而且免费的那软件&#xff1a; GIMP&#xff1a;一个功能强大的开源图像编辑软件&#xff0c;支持多种文件格式&#…
阅读更多...
浅谈WebSocket-FLV

浅谈WebSocket-FLV

FLV是一种视频数据封装格式&#xff0c;这种封装被标准通信协议HTTP-FLV和RTMP协议应用。 而WebSocket-FLV是一种非标的FLV封装数据从后端发送到前端的一种方式。 在WebSocket的url请求中&#xff0c;包含了需要请求设备的视频相关信息&#xff0c;在视频数据到达时&#xff0c…
阅读更多...
基于ADMM无穷范数检测算法的MIMO通信系统信号检测MATLAB仿真,对比ML,MMSE,ZF以及LAMA

基于ADMM无穷范数检测算法的MIMO通信系统信号检测MATLAB仿真,对比ML,MMSE,ZF以及LAMA

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 ADMM算法 4.2 最大似然ML检测算法 4.3 最小均方误差&#xff08;MMSE&#xff09;检测算法 4.4 迫零&#xff08;ZF&#xff09;检测算法 4.5 OCD_MMSE 检测算法 4.6 LAMA检测算法 …
阅读更多...
cocos creator 笔记-路边花草

cocos creator 笔记-路边花草

版本&#xff1a;3.8.5 实现目标&#xff1a;给3d道路生成路边景观花草 在场景下创建一个节点&#xff0c;我这里种植两种花草模型&#xff0c;兰花和菊花&#xff0c;所以分别在节点下另创建两个节点&#xff0c;为了静态合批。 1.将花草模型分别拖入场景中&#xff0c;制作…
阅读更多...
R语言——循环

R语言——循环

参考资料&#xff1a;学习R 在R中有三种循环&#xff1a;repeat、while和for。虽然向量化意味着我们可能并不需要大量使用它们&#xff0c;但在需要重复执行代码时&#xff0c;它们是非常有用的。 1、重复循环 R中最容易掌握的循环是repeat。它所做的事情就是反复地执行代码&a…
阅读更多...
springboot使用阿里限流框架-sentinel

springboot使用阿里限流框架-sentinel

当前项目源码 控制台下载 启动bin中的看板服务&#xff1a;账号密码:sentinel/sentinel 官方文档地址 项目引入依赖 <!-- sentinel注解支持 --> <dependency><groupId>com.alibaba.csp</groupId><artifactId>sentinel-annotation-aspectj<…
阅读更多...
CSS3学习教程，从入门到精通，CSS3 元素的浮动与定位语法知识点及案例代码（17）

CSS3学习教程，从入门到精通，CSS3 元素的浮动与定位语法知识点及案例代码（17）

CSS3 元素的浮动与定位语法知识点及案例代码 一、CSS3 浮动&#xff08;float&#xff09; 知识点 1. **定义** &#xff1a;浮动使元素向左或向右移动&#xff0c;直到它的外边缘碰到包含框或另一个浮动元素的边框为止。浮动主要用于布局&#xff0c;如实现图文绕排等效果。…
阅读更多...
数据结构：汉诺塔问题的递归求解和分析

数据结构：汉诺塔问题的递归求解和分析

递归方法求解该类问题&#xff0c;是一种简单的思维方法&#xff0c;通常比使用迭代方法更简单。但是&#xff0c;递归方法也有劣势。此处以典型的汉诺塔问题&#xff08;Tower of Hanoi&#xff09;为例给予说明。 汉诺塔是根据一个传说形成的数学问题&#xff0c;最早是由法国…
阅读更多...
3.27学习总结 算法题

3.27学习总结 算法题

自己用c语言做的&#xff0c;不尽如意 后面看了题解&#xff0c;用的是c&#xff0c;其中string 变量和字符串拼接感觉比c方便好多&#xff0c;可以用更少的代码实现更好的效果&#xff0c;打算之后去学习c&#xff0c;用c写算法。 递归&#xff0c;不断输入字符&#xff0c;…
阅读更多...
vue 图片放大到全局

vue 图片放大到全局

背景&#xff1a; 在vue项目中&#xff0c;el-image组件图片组件用于展示图片&#xff0c;组件自带的属性preview-teleported&#xff0c;设置为true可以控制图片放大到全局 实现效果&#xff1a; 核心代码&#xff1a; //图片地址&#xff1a;BASEUrl /file/ item.file //这…
阅读更多...
【商城实战(75)】数据分析指标体系搭建：从0到1的技术指南

【商城实战(75)】数据分析指标体系搭建：从0到1的技术指南

【商城实战】专栏重磅来袭&#xff01;这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建&#xff0c;运用 uniapp、Element Plus、SpringBoot 搭建商城框架&#xff0c;到用户、商品、订单等核心模块开发&#xff0c;再到性能优化、安全加固、多端适配&#xf…
阅读更多...
seatunnel配置mysql2hive

seatunnel配置mysql2hive

SeaTunnel安装教程 # 执行流程 # 下载&#xff0c;解压 # https://mirrors.aliyun.com/apache/seatunnel/2.3.8/?spma2c6h.25603864.0.0.2e2d3f665eBj1E # https://blog.csdn.net/taogumo/article/details/143608532 tar -zxvf apache-seatunnel-2.3.8-bin.tar.gz -C /opt/mo…
阅读更多...
SSH项目负载均衡中的Session一致性解决方案‌

SSH项目负载均衡中的Session一致性解决方案‌

SSH项目负载均衡中的Session一致性解决方案‌ 1. 粘性会话&#xff08;Session Sticky&#xff09;‌2. Session复制&#xff08;集群同步&#xff09;‌3. 集中式Session存储‌4. 客户端存储&#xff08;Cookie加密&#xff09;‌方案选型建议‌注意事项‌ 1. 粘性会话&#x…
阅读更多...
MySQL 表连接（内连接与外连接）

MySQL 表连接（内连接与外连接）

&#x1f3dd;️专栏&#xff1a;Mysql_猫咪-9527的博客-CSDN博客 &#x1f305;主页&#xff1a;猫咪-9527-CSDN博客 “欲穷千里目&#xff0c;更上一层楼。会当凌绝顶&#xff0c;一览众山小。” 目录 1、表连接的核心概念 1.1 为什么需要表连接&#xff1f; 2、内连接&a…
阅读更多...
解锁Spring Boot异步编程：让你的应用“飞“起来！

解锁Spring Boot异步编程：让你的应用“飞“起来！

引言&#xff1a;从点餐说起 &#x1f354; 想象你在快餐店点餐&#xff1a; 同步模式&#xff1a;排队等餐&#xff0c;队伍越来越长&#xff08;就像卡死的服务器&#xff09;异步模式&#xff1a;拿号后去旁边坐着等&#xff08;服务员喊号通知你&#xff09; 今天我们就…
阅读更多...
做一个有天有地的css及html画的旋转阴阳鱼

做一个有天有地的css及html画的旋转阴阳鱼

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>天地阴阳</title><style>/* 重置默认样…
阅读更多...
ngx_http_core_main_conf_t

ngx_http_core_main_conf_t

定义在 src\http\ngx_http_core_module.h typedef struct {ngx_array_t servers; /* ngx_http_core_srv_conf_t */ngx_http_phase_engine_t phase_engine;ngx_hash_t headers_in_hash;ngx_hash_t variables_hash;…
阅读更多...
最新文章

Copyright @ 2022~2023