indexedDB---浏览器本地数据库实现增删改查

news2025/1/4 20:26:06

关于indexedDB

indexedDB的基本使用,可以参考:indexedDB---掌握浏览器内建数据库的基本用法_indexdb浏览器使用-CSDN博客

indexedDB是浏览器本地数据库,既然是数据库就能够实现增删改查,了解了indexedDB的基本使用后,我们来实现它的增删改查功能

示例

这里使用音频文件上传的的示例,来演示本地数据库的增删改查功能,

整体要实现的功能简介:

        能够上传歌曲信息并存入数据库,可以从数据库中读取信息,并渲染出音频,可以对数据库的内容进行删除修改

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文件上传</title>
</head>

<body>
  <!-- 多文件上传 -->
  <!-- <input type="file" name="" id="file" multiple> -->
  <div>
    <label for="file">存储歌曲</label>
    <input type="file" name="" id="file" style="display: none;">
    <input type="number" name="" value="1" id="index" style="width: 40px;">
    <button id="bt">获取歌曲</button>
    <button id="del">删除歌曲</button>
    <label for="update">修改歌曲</label>
    <input type="file" name="" id="update" style="display: none;">
  </div>

  <script src="db.js"></script>
  <script src="file.js"></script>
</body>

</html>

html部分主要包括5个交互,

  1. 文件上传存储到数据库(增)
  2. 一个索引框
  3. 根据索引获取上传的音频并渲染在页面(查)
  4. 根据索引删除数据库中的歌曲(删)
  5. 上传一个文件根据索引覆盖数据库中的数据对象(改)

还有一个修改数据对象值的方法,本示例中只提供了逻辑,没有实现交互,

 file.js交互的逻辑,input上传文件处理,按钮事件处理;

db.js数据库的逻辑操作,以下是主体结构


// 浏览器本地数据库
console.log(indexedDB);// window.indexedDB

// 使用indexedDB来存储文件。
// 打开数据库
const request = indexedDB.open('FileDatabase', 4);
let addFile;//添加文件的方法
let getFile;//读取文件的方法
let delFile;//删除文件的方法
let updateFile;//更新文件的方法
let updataVal;//更新文件对象值的方法
let getAllFile;//获取所有文件的方法

request.onerror = function (event) {
  console.error('数据库打开失败:', event.target.errorCode);

}

request.onupgradeneeded = function (event) {
  const db = event.target.result;
  // 创建一个存储对象
  db.createObjectStore('FileStore', { keyPath: 'id', autoIncrement: true });
  console.log('数据库储存对象(表)创建成功');
  // // 删除一个存储对象,只能在更新版本时删除
  // db.deleteObjectStore('FileStore');
  // console.log('数据库储存对象(表)删除成功');
}

request.onsuccess = function (e) {
  const db = e.target.result;
  console.log('数据库打开成功', db);

  // 添加文件
  
  // 读取文件
 

  // 删除文件
 

  // 更新文件
 

  // 获取所有文件
  
}

 添加文件

file.js

const file = document.getElementById('file');

// 添加歌曲
file.onchange = () => {
  console.log(file.files);
  for (item of file.files) {
    if (item.type == 'audio/mpeg') {
      console.log('音频文件');
      let blob = new Blob([item], { type: 'audio/mpeg' });
      let reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onload = () => {//读取的过程是异步的
        // console.log(reader.result);
        addFile({
          name: item.name,
          size: item.size,
          type: item.type,
          data: reader.result
        })
         // getAllFile();
      }
    }else{
      alert('请选择音频文件');
    }
    // if (item.type == 'image/jpeg') {
    //   console.log('图片文件');
    //   let blob = new Blob([item], { type: 'image/jpeg' });
    //   console.log(blob);
    //   let url = URL.createObjectURL(blob);
    //   console.log(url);
    //   let img = document.createElement('img');
    //   img.src = url;
    //   img.width = 200;
    //   document.body.appendChild(img);
    // }
    // if (item.size > 1024 * 1024 * 2) {
    //   console.log('文件大于2mb');
    // }
  }

}

       代码逻辑: 监听onchange事件,上传选择文件后触发,匹配音频类文件,读取到file类型数据(这里可以直接用file,不需要转blob也行,我这里转blob纯属多余操作),转成base64的data:url,然后将这个data:url和文件的其他数据,构成一个对象存入数据库

{

不熟悉blob和file操作可以参考:

js二进制数据,文件---blob对象_js 输出 blob-CSDN博客

js文件---file和fileReafer对象_js file-CSDN博客

}

// 添加文件
  addFile = function (file) {
    // 连接数据库的表,比获取读写权限,默认只读
    const transaction = db.transaction(['FileStore'], 'readwrite');
    const objectStore = transaction.objectStore('FileStore');
    const re = objectStore.add(file);
    re.onsuccess = function (event) {
      console.log('文件添加成功');
    }
  }

代码解读:获取事务连接,连接数据库的表,并获取读写权限,

获取数据对象表的实例

通过add方法添加一个对象到FileStore的表中,这个过程是异步的要等待结构

 

成功保存了数据,可以在控制台查看

获取文件

file.js

// 获取歌曲
document.getElementById('bt').onclick = () => {
  getFile(Number(index.value),getAudio);
};

const getAudio = (res) => {

  let span = document.createElement('span');
  span.innerText = res.name;
  document.body.appendChild(span);

  let audio = document.createElement('audio');
  audio.src = res.data;
  audio.controls = true;
  document.body.appendChild(audio);

}

点击按钮开始读取数据,但是这里要注意,读取过程是异步的,拿到数据后要进行操作,只能等异步读取完成才行,这里采用回调函数的方式,传入拿到数据后的渲染操作,还有第一个参数应该是number类型,input的值是string类型,需要转换类型,否则无法读取到数据

db.js

 // 读取文件
  getFile = function (id, callback) {
    const transaction = db.transaction(['FileStore'], 'readonly');
    const objectStore = transaction.objectStore('FileStore');
    const re = objectStore.get(id);
    re.onsuccess = (e) => {
      console.log(e.target.result)
      callback(e.target.result);
    }
    re.onerror = function (event) {
      console.error('文件读取失败:', event.target.errorCode);
    }
  }

当数据读取成功后执行回调渲染音频数据

删除文件

 file.js

// 删除歌曲
document.getElementById('del').onclick = () => {
  delFile(Number(index.value));
  // getAllFile();
}

db.js

  // 删除文件
  delFile = function (id) {
    const transaction = db.transaction(['FileStore'], 'readwrite');
    const objectStore = transaction.objectStore('FileStore');
    const re = objectStore.delete(id);
    re.onsuccess = function (event) {
      console.log('文件删除成功');
    }
  }

和读取操作差不多

修改文件

file.js

// 更新歌曲
update.onchange = () => {
  for (item of update.files) {
    if (item.type == 'audio/mpeg') {
      console.log('音频文件');
      let blob = new Blob([item], { type: 'audio/mpeg' });
      let reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onload = () => {//读取的过程是异步的
        // console.log(reader.result);
        updateFile({
          id: Number(index.value),
          name: item.name,
          size: item.size,
          type: item.type,
          data: reader.result
        })
        // getAllFile();
      }
    }else{
      alert('请选择音频文件');
    }
  }

类似上传,但是要注意,修改要带上id键值, 

db.js

  // 更新文件
  updateFile = function (file) {
    const transaction = db.transaction(['FileStore'], 'readwrite');
    const objectStore = transaction.objectStore('FileStore');
    const re = objectStore.put(file);
    re.onsuccess = function (event) {
      console.log('文件更新成功');
    }
  }

查看数据库的表时,可能数据没有更新,可以手动刷新一下

修改值

db.js

  // 更新文件对象值
  updataVal = function (id,key,val) {
    const transaction = db.transaction(['FileStore'], 'readwrite');
    const objectStore = transaction.objectStore('FileStore');
    // 打开一个移动指针
    objectStore.openCursor().onsuccess = function (event) {
      const cursor = event.target.result;
      if (cursor) {// 指针存在,有数据
        console.log(cursor);
        if(cursor.value.id === id){// 匹配数据id
          let updateData = cursor.value;// 获取数据对象
          updateData[key] = val;// 修改对应键的值
          const re = cursor.update(updateData);// 将新的数据对象替换原数据对象,更新数据
          re.onsuccess = function (event) {
            console.log('更新成功',cursor.value);
          }
        }else{
          cursor.continue(); // 指针继续移动
        }
        
      }else{// 没有数据或者指针移出了数据列表
        console.log('没有更多数据了');
      }
    }
  }

  updataVal(1,'name','歌曲');

这个逻辑会复杂一些,这里用到了文件指针,它会指向存储对象表,可以像链表一样,移动遍历整个存储对象表,

第一首歌曲的name属性被改成了'歌曲',

渲染对象数据表

为了让这些操作更直观,将渲染对象数据表的id和name属性渲染出来,并在页面载入后,和数据表变化时渲染最新数据

db.js

  // 获取所有文件
  getAllFile = function () {
    const transaction = db.transaction(['FileStore'], 'readonly');
    const objectStore = transaction.objectStore('FileStore');
    const re = objectStore.getAll();
    re.onsuccess = (e) => {
      const res = e.target.result
      let ul = document.createElement('ul');
      let li = document.createElement('li');
      li.innerText = "本地存储的歌曲"
      ul.appendChild(li);
      for (item of res) {
        let li = document.createElement('li');
        li.innerText = item.id + ":" + item.name;
        ul.appendChild(li);
      }
      document.body.appendChild(ul);
    }
  }
  getAllFile();

将所有数据读取,并渲染成列表,可以把前面注释的getAllFile()取消注释

这样就很直观的查看对象数据表的变化

完整代码展示

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文件上传</title>
</head>

<body>
  <!-- 多文件上传 -->
  <!-- <input type="file" name="" id="file" multiple> -->
  <div>
    <label for="file">存储歌曲</label>
    <input type="file" name="" id="file" style="display: none;">
    <input type="number" name="" value="1" id="index" style="width: 40px;">
    <button id="bt">获取歌曲</button>
    <button id="del">删除歌曲</button>
    <label for="update">修改歌曲</label>
    <input type="file" name="" id="update" style="display: none;">
  </div>

  <script src="db.js"></script>
  <script src="file.js"></script>
</body>

</html>

file.js

const file = document.getElementById('file');
const update = document.getElementById('update');
const index = document.getElementById('index');

// 添加歌曲
file.onchange = () => {
  console.log(file.files);
  for (item of file.files) {
    if (item.type == 'audio/mpeg') {
      console.log('音频文件');
      let blob = new Blob([item], { type: 'audio/mpeg' });
      let reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onload = () => {//读取的过程是异步的
        // console.log(reader.result);
        addFile({
          name: item.name,
          size: item.size,
          type: item.type,
          data: reader.result
        })
        getAllFile();
      }
    }else{
      alert('请选择音频文件');
    }
    // if (item.type == 'image/jpeg') {
    //   console.log('图片文件');
    //   let blob = new Blob([item], { type: 'image/jpeg' });
    //   console.log(blob);
    //   let url = URL.createObjectURL(blob);
    //   console.log(url);
    //   let img = document.createElement('img');
    //   img.src = url;
    //   img.width = 200;
    //   document.body.appendChild(img);
    // }
    // if (item.size > 1024 * 1024 * 2) {
    //   console.log('文件大于2mb');
    // }
  }

}

// 更新歌曲
update.onchange = () => {
  for (item of update.files) {
    if (item.type == 'audio/mpeg') {
      console.log('音频文件');
      let blob = new Blob([item], { type: 'audio/mpeg' });
      let reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onload = () => {//读取的过程是异步的
        // console.log(reader.result);
        updateFile({
          id: Number(index.value),
          name: item.name,
          size: item.size,
          type: item.type,
          data: reader.result
        })
        getAllFile();
      }
    }else{
      alert('请选择音频文件');
    }
  }
}

// 获取歌曲
document.getElementById('bt').onclick = () => {
  getFile(Number(index.value),getAudio);
};

// 删除歌曲
document.getElementById('del').onclick = () => {
  delFile(Number(index.value));
  getAllFile();
}

const getAudio = (res) => {

  let span = document.createElement('span');
  span.innerText = res.name;
  document.body.appendChild(span);

  let audio = document.createElement('audio');
  audio.src = res.data;
  audio.controls = true;
  document.body.appendChild(audio);

}

db.js


// 浏览器本地数据库
console.log(indexedDB);// window.indexedDB

// 使用indexedDB来存储文件。
// 打开数据库
const request = indexedDB.open('FileDatabase', 4);
let addFile;//添加文件的方法
let getFile;//读取文件的方法
let delFile;//删除文件的方法
let updateFile;//更新文件的方法
let updataVal;//更新文件对象值的方法
let getAllFile;//获取所有文件的方法

request.onerror = function (event) {
  console.error('数据库打开失败:', event.target.errorCode);

}

request.onupgradeneeded = function (event) {
  const db = event.target.result;
  // 创建一个存储对象
  db.createObjectStore('FileStore', { keyPath: 'id', autoIncrement: true });
  console.log('数据库储存对象(表)创建成功');
  // // 删除一个存储对象,只能在更新版本时删除
  // db.deleteObjectStore('FileStore');
  // console.log('数据库储存对象(表)删除成功');
}

request.onsuccess = function (e) {
  const db = e.target.result;
  console.log('数据库打开成功', db);

  // 添加文件
  addFile = function (file) {
    // 连接数据库的表,比获取读写权限,默认只读
    const transaction = db.transaction(['FileStore'], 'readwrite');
    const objectStore = transaction.objectStore('FileStore');
    const re = objectStore.add(file);
    re.onsuccess = function (event) {
      console.log('文件添加成功');
    }
  }

  // 读取文件
  getFile = function (id, callback) {
    const transaction = db.transaction(['FileStore'], 'readonly');
    const objectStore = transaction.objectStore('FileStore');
    const re = objectStore.get(id);
    re.onsuccess = (e) => {
      console.log(e.target.result)
      callback(e.target.result);
    }
    re.onerror = function (event) {
      console.error('文件读取失败:', event.target.errorCode);
    }
  }

  // 删除文件
  delFile = function (id) {
    const transaction = db.transaction(['FileStore'], 'readwrite');
    const objectStore = transaction.objectStore('FileStore');
    const re = objectStore.delete(id);
    re.onsuccess = function (event) {
      console.log('文件删除成功');
    }
  }

  // 更新文件
  updateFile = function (file) {
    const transaction = db.transaction(['FileStore'], 'readwrite');
    const objectStore = transaction.objectStore('FileStore');
    const re = objectStore.put(file);
    re.onsuccess = function (event) {
      console.log('文件更新成功');
    }
  }

  // 更新文件对象值
  updataVal = function (id,key,val) {
    const transaction = db.transaction(['FileStore'], 'readwrite');
    const objectStore = transaction.objectStore('FileStore');
    // 打开一个移动指针
    objectStore.openCursor().onsuccess = function (event) {
      const cursor = event.target.result;
      if (cursor) {// 指针存在,有数据
        console.log(cursor);
        if(cursor.value.id === id){// 匹配数据id
          let updateData = cursor.value;// 获取数据对象
          updateData[key] = val;// 修改对应键的值
          const re = cursor.update(updateData);// 将新的数据对象替换原数据对象,更新数据
          re.onsuccess = function (event) {
            console.log('更新成功',cursor.value);
          }
        }else{
          cursor.continue(); // 指针继续移动
        }
        
      }else{// 没有数据或者指针移出了数据列表
        console.log('没有更多数据了');
      }
    }
  }

  // 获取所有文件
  getAllFile = function () {
    const transaction = db.transaction(['FileStore'], 'readonly');
    const objectStore = transaction.objectStore('FileStore');
    const re = objectStore.getAll();
    re.onsuccess = (e) => {
      const res = e.target.result
      let ul = document.createElement('ul');
      let li = document.createElement('li');
      li.innerText = "本地存储的歌曲"
      ul.appendChild(li);
      for (item of res) {
        let li = document.createElement('li');
        li.innerText = item.id + ":" + item.name;
        ul.appendChild(li);
      }
      document.body.appendChild(ul);
    }
  }


  getAllFile();
  // updateTest();
}

function updateTest(){
  updataVal(1,'name','江南.mp3');
  getAllFile();
}



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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

怎么把不同的文件做成二维码?多种文件类型在线生码的制作方法

扫码来展示文件是现在很多场景下会使用的一种内容展示方法&#xff0c;这种方式能够简化其他人获取文件的流程&#xff0c;从而提升文件传播的效率&#xff0c;用户可以存储二维码&#xff0c;随时扫码查看文件内容。文件生成二维码支持多种类型的文件使用&#xff0c;比如ppt、…

Element 页面滚动表头置顶

在开发后台管理系统时&#xff0c;表格是最常用的一个组件&#xff0c;为了看数据方便&#xff0c;时常需要固定表头。 如果页面基本只有一个表格区域&#xff0c;我们可以根据屏幕的高度动态的计算出一个值&#xff0c;给表格设定一个固定高度&#xff0c;这样表头就可以固定…

Transformer实战——摘要生成

本文借助Huggingface Tranformer库完成一个摘要生成任务&#xff0c;参考自https://github.com/datawhalechina/learn-nlp-with-transformers/&#xff0c;在本文&#xff0c;将展示如何使用简单的加载数据集&#xff0c;同时针对相应的任务使用transformer中的Trainer接口对模…

司美格鲁肽在中国获批!深度解析报告附上

在中国&#xff0c;肥胖问题日益严重&#xff0c;但有效的治疗方法却相对匮乏。然而&#xff0c;这一现状随着国家药品监督管理局&#xff08;NMPA&#xff09;对诺和诺德公司研发的司美格鲁肽注射液&#xff08;商品名&#xff1a;诺和盈&#xff09;的批准而得到改变。6月25日…

hadoop离线与实时的电影推荐系统-计算机毕业设计源码10338

摘 要 随着互联网与移动互联网迅速普及&#xff0c;网络上的电影娱乐信息数量相当庞大&#xff0c;人们对获取感兴趣的电影娱乐信息的需求越来越大,个性化的离线与实时的电影推荐系统 成为一个热门。然而电影信息的表示相当复杂&#xff0c;己有的相似度计算方法与推荐算法都各…

文件管理器加载缓慢-禁用文件类型自动发现功能

文件管理器加载缓慢-禁用文件类型自动发现功能 右键“Shell”项&#xff0c;选择新建“字符串值” “FolderType”&#xff0c;数值为 NotSpecified。

Python数据分析-糖尿病数据集数据分析

一、研究背景介绍 糖尿病是美国最普遍的慢性病之一&#xff0c;每年影响数百万美国人&#xff0c;并对经济造成重大的经济负担。糖尿病是一种严重的慢性疾病&#xff0c;其中个体失去有效调节血液中葡萄糖水平的能力&#xff0c;并可能导致生活质量和预期寿命下降。。。。糖尿…

【网络安全学习】漏洞利用:-01- BurpSuite的基础设置使用

Burp Suite是一款集成了多种功能的Web应用渗透测试工具&#xff0c;可以帮助渗透测试人员对Web应用进行拦截、分析、修改、重放、扫描、爆破、模糊测试等操作&#xff0c;从而发现和利用Web应用中的漏洞。可以说Burp Suite是每个安全从业人员必须学会使用的安全渗透测试工具。 …

服务器硬件以及RAID配置

目录 一、RAID磁盘阵列原理&#xff08;嘎嘎重要&#xff09; 1、RAID的概述 2、常用的RAID 2.1、RAID 0 2.2、RAID 1 2.3、RAID 5 2.5、RAID 10 3、阵列卡介绍 二、建立软件RAID磁盘阵列 1、添加硬盘 2、使用fdisk分区&#xff0c;类型为fd 3、mdata命令使用参数 …

今日好料(中国农业银行研发中心DevOps规划与实践)

今日好料&#xff08;中国农业银行研发中心DevOps规划与实践&#xff09; 在数字化转型的背景下&#xff0c;企业面临着更加复杂和多变的市场环境&#xff0c;对IT系统的敏捷性和稳定性提出了更高的要求。作为金融行业的领军企业&#xff0c;中国农业银行在其研发中心推进DevO…

eXosip协议栈构造Info应答并发送

最近在开发GB28181视频监控平台&#xff0c;对于录像的暂停、倍速等控制是通过INFO消息完成的&#xff0c;但是eXosip协议栈没有明确说明该如何去构造INFO消息的应答。通过对源代码的解读&#xff0c;是使用eXosip_call_send_answer接口去构造&#xff0c;参考了一些博客&#…

AI大模型训练过程

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl 大模型训练概述 AI大模型训练是指在海量数据中&#xff0c;对拥有数百万至数千万参数及深层次神经网络结构的模型进行训练的过程。这类大模型因其庞大的参数规模和复杂的网…

【云原生】深入理解Pod的使用进行管理

深入理解Pod 文章目录 深入理解Pod一、介绍Pod1.1、什么是Pod1.2、Pod的特点1.3、Pod的用途1.4、Pod网络1.5、Pod存储1.6、Pod的工作方式 二、创建Pod2.1、命令行创建Pod2.2、资源清单创建Pod2.2.1、镜像拉取策略2.2.2、Pod重启策略2.2.3、部署资源2.2.4、删除资源 三、静态Pod…

大厂面试经验分享,小白如何在面试中脱颖而出

前言 毕业季&#xff0c;对于每一位即将步入社会的学子来说&#xff0c;都是一个充满挑战和机遇的时刻。作为我的一位好朋友也是好学长&#xff0c;他刚刚在一家顶尖科技公司斩获了他梦寐以求的职位。他深知求职路上的艰辛&#xff0c;因此打算把自己的经验分享给大家&#xf…

项目实战系列三: 家居购项目 第六部分

文章目录 &#x1f308;Ajax检验注册名&#x1f308;Ajax添加购物车&#x1f308;上传与更新家居图片&#x1f308;作业布置&#x1f34d;会员登陆后不能访问后台管理&#x1f34d;解决图片冗余问题&#x1f34d;分页导航完善 &#x1f308;Ajax检验注册名 需求分析 注册会员时…

flask水质监测预警系统-计算机毕业设计源码10148

摘 要 近些年来&#xff0c;对河道水位进行实时、准确的监测越来越受到广大人民群众的重视。然而要建立一个稳定的、可靠地、准确的城市河道水位远程监测系统&#xff0c;就必须要解决由人工监测向自动化监测的转变&#xff0c;使用新科技来进行设计。水质监测预警系统是以实际…

构筑卓越:建筑企业如何通过GB/T 50430:2017认证铸就质量管理基石

在建筑业这片充满挑战和机遇的战场上&#xff0c;企业资质犹如一面旗帜&#xff0c;标志着企业的实力和信誉。GB/T 50430:2017《工程建设施工企业质量管理规范》的实施&#xff0c;成为了建筑企业提高管理水平、赢得市场竞争的重要武器。 GB/T 50430:2017的战略意义 GB/T 5043…

【JavaScript】BOM编程

目录 一、BOM编程是什么 二、window对象的常用方法 1、弹窗API方法 2、计时器任务方法 三、window对象的属性对象常用方法 1、history网页浏览历史 2、location地址栏 3、数据存储属性对象 4、console控制台 一、BOM编程是什么 当我们使用浏览器打开一个网页窗口时&#xff0c;…

python f.write中文乱码怎么解决

举个例子&#xff1a; #coding:utf-8 s u中文 f open("test.txt","w") f.write(s) f.close() 原因是编码方式错误&#xff0c;应该改为utf-8编码。 解决方案一&#xff1a; #coding:utf-8 s u中文 f open("test.txt","w") f.writ…

新改进!LSTM与注意力机制结合,性能一整个拿捏住

众所周知&#xff0c;LSTM并不能很好地处理长序列和重要信息的突出&#xff0c;这导致在某些情况下性能不佳。而注意力机制模拟人类视觉注意力机制的特点可以很好地解决这个问题。 说具体点就是&#xff0c;注意力机制通过权重分布来决定应该关注输入序列中的哪些部分&#xf…