当前位置：首页 > news >正文

vue2播放视频和预览文件的组件以及使用方法

news 来源：原创 2025/5/14 8:33:16

##文件预览组件

按照组件

    解决展示pdf的问题
npm install pdfh5
npm install  canvas@2.8.0 --ignore-scripts
npm install --save dommatrix     
npm install --save web-streams-polyfill解决excel和docx预览的问题
npm install @vue-office/docx vue-demi@0.14.6
npm install @vue-office/excel vue-demi@0.14.6
npm install @vue/composition-api

使用方法

前端：

页面引入组件：
import VueOfficeDocx from '@vue-office/docx'
import Pdfh5 from "pdfh5";
import VueOfficeExcel from '@vue-office/excel'import '@vue-office/excel/lib/index.css'
import '@vue-office/docx/lib/index.css'pdf预览：
<div id="pdf" v-if="nowItem.fileFormat === '.pdf'" style="width: 100%; height: 100%; border: none;"></div>docx预览：
<vue-office-docx
:key="new Date().getTime()"
v-if="nowItem.fileFormat === '.docx'"
:src="preViewUrl"
@rendered="rendered"
/>
excel预览：
<vue-office-excel
:key="new Date().getTime()"
v-if="nowItem.fileFormat === '.xls' || nowItem.fileFormat === '.xlsx'"
:src="preViewUrl"
@rendered="rendered"
/>
txt预览：
<iframe v-if="nowItem.fileFormat === '.txt'" :src="preViewUrl" style="width: 100%; height: 98%; border: none;"/>

 js部分：  downLoadLibrary(item.id).then(res => { //请求接口获取文件流if (item.fileFormat === '.txt') {this.preViewUrl = window.URL.createObjectURL(res) //将文件流转化为urlthis.loading = false;} else if (item.fileFormat === '.pdf') {let prePdfUrl = window.URL.createObjectURL(res) //将文件流转化为url
//使用id  #pdf 获取pdfh5实例this.pdfh5 = new Pdfh5('#pdf', {pdfurl: prePdfUrl,pageNum: false, //不显示页码backTop: false,  //不显示回到顶部zoomEnable: false, //禁止缩放maxZoom: 1, //点击屏幕缩放1倍 也就是禁止缩放的});//完成let that = this;this.pdfh5.on('complete', function (status, msg, time) {that.rendered(); //渲染完成回调方法 可以自己定义业务逻辑});} else {this.preViewUrl = res //docx和excel}})请求接口:export function downLoadLibrary(id){return request({url: '/manager/library/downLoadLibrary/' + id,method: 'get',responseType: 'blob',})}

后端：这里就是service层的接口，根据id获取文件流并返回给前端，前端根据文件格式进行不同的处理。

public void downLoadLibrary(Long id, HttpServletResponse response) {TInstructionResourceLibrary instructionResourceLibrary = this.selectInstructionResourceLibraryById(id);if (Objects.isNull(instructionResourceLibrary)) {throw new ServiceException("资源不存在");}String configByKey = sysConfigService.selectConfigByKey("sys.upload.file");String resourcePath = configByKey + instructionResourceLibrary.getResourcePath();File file = new File(resourcePath);if (!file.exists()) {throw new ServiceException("文件不存在:" + resourcePath);}try {if (instructionResourceLibrary.getFileFormat().equals(".txt")) {response.setContentType("text/plain");} else if (instructionResourceLibrary.getFileFormat().equals(".pdf")) {response.setContentType("application/pdf");} else {response.setContentType("application/octet-stream");}FileUtils.writeBytes(resourcePath, response.getOutputStream());} catch (Exception e) {throw new ServiceException("下载文件失败:" + e.getMessage());}
}

视频预览组件

使用自带的video组件即可，无需额外的组件。
前端：

<videoref="video":controls="true"controlslist="nodownload noplaybackrate disablepictureinpicture":src="preViewUrl"webkit-playsinline="true"playsinline="true"x-webkit-airplay="allow"x5-playsinlinestyle="width: 100%"@play="onPlayerPlay"@pause="onPlayerPause"@seeking="seeking"@seeked="seeked"@canplay="onPlayerCanPlay"@timeupdate="onPlayerTimeUpdate":autoplay="false"/>

js部分：

    playVideo(row) { // 打开视频弹出层 并且设置视频播放的src的url路径this.videoName = row.videoName;this.preViewOpen = true;this.preViewUrl = "http://域名：端口/路径"this.videoId = row.id;},handleClosePreView() { //关闭弹出层，并且清除播放记录 ，里面的字段可更具需要自定义console.log("关闭弹出层");this.addRecord("close")this.recordId = null; //播放记录idthis.videoId = null; //播放的视频idthis.currentTime = 0; //视频的当前播放进度时间this.tempTime = 0; //临时记录当前播放进度时间，防止拖动进度条时，时间不准确this.viewDuration = 0; //播放时长，单位秒，是根据开始播放到关闭弹出层的视频非暂停时间的总时长this.seconds = 0; //js计时器，大致计算播放时长 大概50多s 触发一次保存接口，之后清零this.setIntervalId && clearInterval(this.setIntervalId); // 清除定时器this.viewDurationInterval && clearInterval(this.viewDurationInterval); // 清除定时器this.duration = 0; //视频实际的时长this.videoName = ""; //视频每次this.$refs.video.load(); //重新加载视频this.preViewOpen = false; //关闭弹出层},//新增播放记录addRecord(option) { //要记录播放的时长let data = {"id": this.recordId, // 记录id"videoId": this.videoId, // 视频id"viewDuration": this.viewDuration, // 播放时长};addTrainVideoRecord(data).then(response => {console.log(response);this.recordId = response.msg;if (option === "close") {this.recordId = null;}});},onPlayerCanPlay() { //回调函数 视频准备好可以播放console.log("可以播放");},onPlayerPlay() { //回调函数 点击播放按钮，视频开始播放if (this.playerPauseFlag) {return;}//新增一条播放记录this.addRecord();this.setIntervalId = setInterval(() => {this.tempTime = this.currentTime + 0.01;this.seconds += 0.01;}, 1); // 定时器，每隔1ms获取一次播放时间this.viewDurationInterval = setInterval(() => {this.viewDuration += 1;}, 950)},onPlayerTimeUpdate(e) { //回调函数 视频播放进度变化 基本每秒触发一次this.currentTime = e.target.currentTime;this.duration = e.target.duration;//每播放1左右分钟秒保存一次播放记录if (this.seconds >= 140) {this.addRecord()this.seconds = 0;}},onPlayerPause() { //回调函数 视频暂停播放if (this.playerPauseFlag) {return;}//记录一次 下次开始是新的记录this.addRecord()this.setIntervalId && clearInterval(this.setIntervalId);this.viewDurationInterval && clearInterval(this.viewDurationInterval);},seeking() { //回调函数 拖动进度条console.log("拖动进度条");},seeked() { //回调函数 拖动进度条结束this.playerPauseFlag = truesetTimeout(function () {this.playerPauseFlag = false}, 1000)// 只允许向后拖动if (this.tempTime < this.currentTime) {this.$refs.video.currentTime = this.tempTime;}},

后端接口：流式返回的每次2m的视频流

@GetMapping(value = "/viewVideo/{id}", produces = MediaType.TEXT_EVENT_STREAM_VALUE)public void viewVideo(@PathVariable("id") Long id, HttpServletResponse response) throws IOException {// 获取视频地址File videoFile = videoService.findVideoUrl(id);StreamingResponseBody stream = out -> {try (InputStream inputStream = Files.newInputStream(videoFile.toPath())) {byte[] bytes = new byte[1024 * 1024 * 2]; // 2Mint length;while ((length = inputStream.read(bytes)) != -1) {out.write(bytes, 0, length);}System.out.println("视频下载成功");out.flush();} catch (final Exception e) {throw new RuntimeException(e);}};stream.writeTo(response.getOutputStream());}

vue2播放视频和预览文件的组件以及使用方法

##文件预览组件按照组件解决展示pdf的问题 npm install pdfh5 npm install canvas2.8.0 --ignore-scripts npm install --save dommatrix npm install --save web-streams-polyfill解决excel和docx预览的问题 npm install vue-office/docx vue-demi0.14.6 npm inst…...

编程日记 2025/5/14 8:33:16

记录一下，解决js内存溢出npm ERR! code ELIFECYCLEnpm ERR! errno 134 以及 errno 9009

项目是个老项目，依赖包也比较大，咱就按正常流程走一遍来详细解决这个问题，先看一下node版本，我用的是nvm管理的，详细可以看我的其他文章友情提醒：如果项目比较老，包又大，又有一些需…...

编程日记 2025/5/14 8:24:51

【批处理脚本】更改Windows系统中的 hosts 解析文件

概述作用修改 Windows 系统中的 hosts 文件，可以实现插入或删除条目。该脚本允许用户以管理员权限执行，将特定的域名解析到指定的 IP 地址应用场景非常适用于需要频繁或批量修改 hosts 文件的场景： 屏蔽网站、域名重定向、DNS 污染防…...

编程日记 2025/5/14 2:00:52

AIGC 与艺术创作：变革与机遇

在当今数字化时代，人工智能生成内容（AIGC）正以惊人的速度重塑着艺术创作的格局，为艺术家们带来了令人振奋的新机遇。一.AIGC 的崛起与艺术领域的变革随着人工智能技术的不断进步，AIGC 逐渐在艺术领域崭露头角。它依…...

编程日记 2025/5/10 11:43:28

String IP和Int IP的互相转换

android中，wifiManager.connectionInfo.ipAddress 可以获取到wifi的ip地址，但这是一个int值，如何转换为常见的如192.168.1.129这种形式，以及这种形式如何转换回int值的形式。这里ip分为4段，每一段的值都是0 ~ 255&am…...

编程日记 2025/5/13 17:25:29

【大数据学习 | 面经】yarn的资源申请和分配的单位-Container

在yarn中，资源的申请和分配是以container为单位进行的，而不是直接以application和task为单位。每个提交到yarn上的应用程序（application）都有一个对应的ApplicationMaster（AM）。这个AM负责与ResourceMana…...

编程日记 2025/5/12 13:00:26

php基础：文件处理2

1.文件属性当我们在程序中操作文件时，可能会使用到文件的一些常见属性，比如文件的大小、类型、修改时间、访问时间以及权限等等。PHP 中提供了非常全面的用来获取这些属性的内置函数，如下表所示。 2.目录操作新建目录：mkdir(路…...

编程日记 2025/5/14 8:24:51

gradle下载慢解决方案2024 /12 /1android studio (Windows环境)

gradle下载慢解决方案2024 /12 /1 默认环境配置好了,环境配置和程序安装请出门右转打开软件,点击右上角设置,找到如下设置页选择本地安装并制定好你已经安装好的 gradle 应用保存即可全局插件环境配置(新版本可以直接在设置中添加了) 找对应位置添加国内源并把前面的内置源…...

编程日记 2025/5/11 6:32:11

使用Java将PDF文件解析成Excel文件

安装pom依赖 <dependency><groupId>org.apache.pdfbox</groupId><artifactId>pdfbox</artifactId><version>2.0.27</version> </dependency>测试读取pdf文件…...

编程日记 2025/5/13 15:00:43

怎么区分直线模组中的导程和行程？

直线模组是一种直线传动装置，安装方便，精度高，其使用范围广。直线模组中的导程和行程是两个不同的概念，它们分别描述了直线模组的不同性能参数。直线模组的行程指的是模组能够正常移动的最大距离，即滑块预期移动的有效…...

编程日记 2025/5/14 7:45:42

算法日记 42 day 图论

今天来看看广度优先搜索，并且写几个题。刷到这里我才想起来，当时第一次面试的时候问的就是这个题，当时大概知道一点思路，但不清楚是图论方面的，更别说写出来了。广度优先搜索（BFS） 不同于深度…...

编程日记 2025/5/12 21:45:53

STM32 GPIO 8种工作模式的应用场景

目录一、四种输入模式1、模拟输入：2、浮空输入：3、上拉输入：4、下拉输入： 二、四种输出模式1、推挽输出：2、开漏输出：3、复用推挽输出：4、复用开漏输出： 一、四种输入模式 1、模拟…...

编程日记 2025/5/14 6:58:43

JVM 类加载器有哪些？双亲委派机制的作用是什么？如何自定义类加载器？

类加载器分类大家好，我是码哥，可以叫我靓仔，《Redis 高手心法》畅销书作者。先回顾下，在 Java 中，类的初始化分为几个阶段: 加载、链接（包括验证、准备和解析）和初始化。而类加载器&#x…...

编程日记 2025/5/10 16:01:51

揭秘：短视频矩阵源码功能开发分析！！！

一、短视频矩阵系统源码概述短视频矩阵系统源码旨在为内容创作者及企业提供一种高效的工具，以实现对多个短视频账户的一站式管理。该系统支持同时管理、发布、监控和优化多达1000个短视频账户，显著提升了操作效率。二、主要功能 1. 多账号管理该系…...

编程日记 2025/5/10 3:59:32

leetcode - 2337. Move Pieces to Obtain a String

Description You are given two strings start and target, both of length n. Each string consists only of the characters ‘L’, ‘R’, and ‘_’ where: The characters ‘L’ and ‘R’ represent pieces, where a piece ‘L’ can move to the left only if there i…...

编程日记 2025/5/11 20:49:58

第九篇：k8s 通过helm发布应用

什么是helm？ Helm 是 Kubernetes 的包管理器。Helm 是查找、分享和使用软件构建 Kubernetes 的最优方式。在红帽系的Linux中我们使用yum来管理RPM包，类似的，在K8s中我们可以使用helm来管理资源对象（Deployment、Service、Ingress…...

编程日记 2025/5/13 14:10:30

MySQL：锁机制

锁是计算机协调多个进程或线程并发访问某一资源的机制（避免争抢）。在数据库中，除传统的计算资源（如 CPU、RAM、I/O 等）的争用以外，数据也是一种供许多用户共享的资源。如何保证数据并发访问的一致性、有效…...

编程日记 2025/5/6 17:24:22

在lio_sam中融入GPS

文章目录概要GPS里程计GPS因子反算后的GPS里程计概要在LIO（激光惯性里程计）系统中，将GPS信息融合到里程计中，借助GTSAM（Georgia Tech Smoothing and Mapping）库进行因子图优化，可以有效提升全局定位精度。 GPS里程计利用GeographicLib第三方库将经纬度投影到局部笛…...

编程日记 2025/5/13 23:20:49

快速构建NLP理论知识体系

NLP理论知识体系一句话解释NLPNLP模型及原理简述1、Rag 一句话解释NLP 如果我们要实现机器翻译、情感分析、问答系统、文本摘要、聊天机器人、构造智能化的辅助文件填写模板，NLP可以通过现成的模型对输入的语音、文字、图片进行处理（分词、标词性、去停…...

编程日记 2025/5/13 5:01:30

长期稳定境外号码解决方案：内地用户如何打电话、接收短信和验证码

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 三大方案对比 📒📝 免费且稳定的境外号码📝 长期稳定且符合本地政策📝 适合低频使用者⚓️ 相关链接 ⚓️📖 介绍 📖 许多用户在日常生活中需要拨打境外电话、接收短信或验证码，尤其是跨境电商从业者，更是对境外号…...

编程日记 2025/5/11 21:49:47

SpringCloud 与 SpringBoot版本对应关系，以及maven,jdk

目录 SpringCloud 与 SpringBoot各版本的对应关系方式一 Learn 方式二 OverView SpringBoot与JDK、maven 容器等对应关系 SpringCloud 与 SpringBoot各版本的对应关系 SpringCloudSpringBootFinchley2.0.xFinchley.SR1Spring Boot >=2.0.3.RELEASE and <=2.0.9RELEAS…...

编程日记 2025/5/14 8:29:32

FSMC实验

FSMC ，即灵活的静态存储控制器，能够与同步或异步存储器和 16 位 PC 存储器卡连接， STM32 的 FSMC 接口支持包括 SRAM 、 NAND FLASH 、 NOR FLASH 和 PSRAM 等存储器。从上图我们可以看出， STM32 的 FSMC 将外部设…...

编程日记 2025/5/14 8:16:07

K8s命令大全（Complete List of K8s Commands）

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。本人主要分享计算机核心技…...

编程日记 2025/5/11 17:55:11

C++学习笔记

小甲鱼学习课程 02 #include <iostream> 头文件 iostream iostream 翻译为IO流输入输出流 using namespace std; 引入命名空间 c标准库所使用的所有标识符都是在同一个特殊的名字空间std中来定义的； 偷懒使用这句话； std::cout <…...

编程日记 2025/5/13 15:31:22

伺服控制电机多大功率合适？

随着现代工业自动化的发展，伺服控制电机在各个行业的应用愈加广泛。伺服电机以其精确的控制、高效的运行和高响应速度，成为许多机械设备中不可或缺的组成部分。然而，在选择伺服电机时，确定其功率大小是一个关键环节。那么&#xf…...

编程日记 2025/5/9 15:59:40

《OpenCV 基础全攻略：从入门到精通》

《OpenCV 基础全攻略：从入门到精通》一、OpenCV 简介（一）特点（二）优势（三）应用场景二、安装与配置三、OpenCV 函数详解1. 图像读取函数 cv2.imread ()2. 图像显示函数 cv2.imshow ()3. 图像保…...

编程日记 2025/5/1 17:13:59

spring ai如何使用function call调用第三方模型

这里写自定义目录标题背景什么是function call怎么用function call？总结背景一直困惑于ai是如何使用插件或者其他一些功能的，后来发现，很多大模型都支持function call功能，如何让大模型能够联网查询呢，function ca…...

编程日记 2025/5/11 14:03:53

2024 数学建模国一经验分享

2024 数学建模国一经验分享背景：武汉某211，专业：计算机科学心血来潮，就从学习和组队两个方面指点下后来者，帮新人避坑吧 2024年我在数学建模比赛中获得了国一（教练说论文的分数是湖北省B组第一&#xff0…...

编程日记 2025/5/11 18:05:34

javaweb-Mybaits

1.Mybaits入门 （1）介绍 （2） 2.Mybaits VS JDBC 3.数据库连接池 （1）SpringBoot默认连接池为hikari，切换为Druid有两种方式方式一：加依赖方式二：直接修改配置文件 …...

编程日记 2025/5/9 19:06:49

108.【C语言】数据结构之二叉树查找值为x的节点

目录 1.题目代码模板 2.分析分类讨论各种情况大概的框架关键部分(继续递归)的详解递归调用展开图 3.测试结果其他写法 4.结论 5.注意事项不推荐的写法 1.题目查找值为x的节点并返回节点的地址代码模板 typedef int BTDataType; typedef struct BinaryT…...

编程日记 2025/5/13 0:27:56

Ant-Design-Vue 全屏下拉日期框无法显示，能显示后小屏又位置错乱

问题1：在全屏后日期选择器的下拉框无法显示。解决：在Ant-Design-Vue的文档中，很多含下拉框的组件都有一个属性 getPopupContainer可以用来指定弹出层的挂载节点。在该组件上加上 getPopupContainer 属性,给挂载到最外层盒子上。 <temp…...

编程日记 2025/5/8 15:31:19

sec啥意思

sec的基本含义是秒，是时间的基本单位之一；在数学中表示正割函数；在计算机科学中有时指安全；在法语中意为干的等。 sec的多重含义与应用 sec在数学中的定义在数学领域，尤其是三角学中，sec代表正割函数&a…...

编程日记 2025/4/30 22:57:19

云计算vspere 安装过程

1 材料的准备 1 安装虚拟机 vmware workstation 2 安装esxi 主机 3 在esxi 主机上安装windows 2018 dns 服务器 4 在虚拟机上安装windows 2018 服务器 6 安装vcenter 5 登入界面测试这里讲一下，由于部署vspere 需要在windows 2012 服务器上部…...

编程日记 2025/5/12 0:56:24

spring-boot打包前重新拉取maven依赖

在使用 Maven 构建 Spring Boot 项目时，如果希望在每次打包时都强制拉取依赖，可以通过以下方法实现。方法一：在命令行强制更新依赖在执行 mvn package 或 mvn install 等命令时，添加 -U 参数： mvn clean package -…...

编程日记 2025/5/11 11:48:56

华为云域名网站，域名切换到Cloudflare CDN出现访问报错：DNS 重定向次过多

网站域名切换到Cloudflare出现访问报错：重定向次过多，应该如何处理？ 最近我自己已经遇到很多次这个情况了，将网站域名DNS切换到Cloudflare之后，网站会打不开，出现重定向次数过多报错。网站域名切换到Clo…...

编程日记 2025/5/12 2:34:58

浔川AI翻译v5.1.0版本正式亮相！

浔川 AI 翻译 v5.1.0 版本正式亮相！ 在科技浪潮汹涌澎湃的今天，浔川 AI 翻译以其卓越的技术实力和对用户需求的精准把握，自豪地向全球用户宣布：浔川 AI 翻译 v5.1.0 版本正式闪耀登场！这一全新版本在继承以往优势的基础…...

编程日记 2025/5/8 14:56:17

Merkle 树应用在代码工程

将 Merkle 树应用在代码工程中，尤其是在大型项目中，可以帮助管理和验证代码的完整性、追踪代码变更、提高版本控制的效率等。通过将代码文件、类、函数等结构映射到 Merkle 树中，我们可以高效地验证代码库的任何变更，确保每个部…...

编程日记 2025/5/7 7:01:58

如何将表中存储的 JSON 数据转换为新表

如何将表中存储的 JSON 数据转换为新表引言本文介绍如何使用 PostgreSQL 的 JSON 函数，将 log_table 表中的 param_json 字段（存储为 JSON 数组）转换为一张新的表，并提取出具体的字段值。表结构说明假设 log_table 表的结…...

编程日记 2025/5/13 4:20:24

鸿蒙开发——使用ArkTs处理XML文本

1、概述 XML（可扩展标记语言）是一种用于描述数据的标记语言，旨在提供一种通用的方式来传输和存储数据，特别是Web应用程序中经常使用的数据。XML并不预定义标记。因此，XML更加灵活，并且可以适用于广泛的应…...

编程日记 2025/5/13 1:09:01

借助vector实现进制转换详解

进制转换，没什么可说的，大一级别的水平，不过在某些考研题目中可能会涉及到顺序栈的实现，本贴不使用顺序栈，用STL里面的vector模拟一下：关键在于想清楚【除留取余】的逻辑，至于用什么结构存放中间…...

编程日记 2025/4/29 8:46:30

混合云策略在安全领域受到青睐

Genetec 发布了《2025 年物理安全状况报告》，该报告根据超过 5,600 名该领域领导者（其中包括 100 多名来自澳大利亚和新西兰的领导者）的回应，揭示了物理安全运营的趋势。报告发现，澳大利亚和新西兰的组织采用混合云策…...

编程日记 2025/5/14 7:24:27

Jackson - 序列化和反序列化Java集合对象

在本文中，我将向您展示如何使用Jackson API来序列化和反序列化Java集合对象，如List、Set和Map。我们将通过具体的示例演示如何利用ObjectMapper类的方法进行这些操作。主要内容添加Maven依赖项使用Jackson API进行List序列化使用Jackson API进行Se…...

编程日记 2025/5/8 7:37:32

No.26 笔记 | 信息收集与工具实践指南

渗透测试的第一步：信息收集背后的“侦察艺术” 在网络安全的世界里，信息就是武器。无论是追踪隐藏的漏洞，还是找到不被注意的入口，信息收集就像一场现代化的“谍战片”。而作为渗透测试的开场白，信息收集不仅考验技…...

编程日记 2025/5/14 5:21:10

使用倒排索引法解决分库分表后查询问题

数据进行了分库分表后，要查询某一条数据的信息，事先是不清楚该条数据在哪台服务器上的，这时候可以使用倒排索引法，将数据的关键信息存储到Redis中，然后从Redis中获取到数据所在的服务器信息和数据ID。 Redis倒排索引示…...

编程日记 2025/5/10 17:35:01

Linux操作系统--文件的重定向以及文件缓冲区

目录前言一、文件描述符的分配规则二、重定向三、系统中的重定向接口 1、dup2()介绍 2、dup2()使用 1）输出重定向和追加重定向 2）输入重定向四、文件缓冲区 1、定义 2、缓冲区刷新的条件 1）文件缓冲区存在的意义 2&…...

编程日记 2025/5/10 13:25:42

Linux 远程连接服务

远程连接服务器简介什么是远程连接服务器远程连接服务器通过文字或图形接口方式来远程登录系统，让你在远程终端前登录linux主机以取得可操作主机接口（shell），而登录后的操作感觉就像是坐在系统前面一样。远程连接服务器的功…...

编程日记 2025/5/13 17:33:13

Chrome控制台网站性能优化指标一览

打开chrome-》f12/右键查看元素-》NetWrok/网络 ctrlF5 刷新网页，可以看到从输入url到页面资源请求并加载网页，用于查看资源加载，接口请求，评估网页、网站性能等，如下图： request、stransferred、resour…...

编程日记 2025/5/13 10:09:21

【SpringBoot】使用IDEA创建SpringBoot项目

1、使用SpringBoot脚手架创建我们使用SpringBoot的脚手架Spring Initializr创建，如图所示： 2、选择SpringBoot版本最开始做项目时候，组长说创建一个 springboot 2.5.4 的项目，mysql使用 5.6.X ，maven使用是3.6.X…...

编程日记 2025/5/13 23:07:23

Mysql锁

锁的分类基于锁的属性分类：共享锁、排它锁。基于锁的粒度分类：表锁、行锁、记录锁、间隙锁、临键锁。基于锁的状态分类：意向共享锁、意向排它锁。排他锁与任何的锁都不兼容，共享锁仅和共享锁兼容。由于MVCC的存在，…...

编程日记 2025/5/11 3:10:35

深入浅出：PHP中的数据类型全解析

文章目录引言理解数据类型标量类型整数 (integer)浮点数 (float)布尔值 (boolean)字符串 (string) 复合类型数组 (array)对象 (object)资源 (resource)NULL 特殊类型Callable强制类型转换实战案例总结与展望参考资料引言在编程的世界里，数据类型是构建任何应用…...

编程日记 2025/5/13 13:41:37

视频预览组件

相关文章：