Java使用FFmpeg实现mp4转m3u8

Java使用FFmpeg实现mp4转m3u8

  • 前言
    • FFmpeg
    • M3U8
  • 一、需求及思路分析
  • 二、安装FFmpeg
    • 1.windows下安装FFmpeg
    • 2.linux下安装FFmpeg
      • Ubuntu
      • CentOS
  • 三、代码实现
    • 1.引入依赖
    • 2.修改配置文件
    • 3.工具类
    • 4.Controlle调用
    • 5.Url转换MultipartFile的工具类
  • 四、播放测试
    • 1.html
    • 2.nginx配置
    • 3.效果展示

前言

本文借鉴https://blog.csdn.net/weixin_44446784/article/details/123499468

FFmpeg

官网:https://ffmpeg.org/

FFmpeg是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的完整解决方案。它包含了非常先进的音频/视频编解码库libavcodec,为了保证高可移植性和编解码质量,libavcodec里很多code都是从头开发的。

M3U8

M3U8是一种基于文本的播放列表文件格式,用于指定多个媒体文件(通常是视频或音频)的播放顺序和信息,常用于网络流媒体传输。M3U8文件通常包含一系列URL地址,用于指定媒体文件的片段(segment)或流(stream),以及相关的元数据和参数。

M3U8文件一般通过HTTP协议进行下载和访问,播放器通过解析M3U8文件获取媒体文件的地址和相关信息,并根据需要逐个下载和播放分片媒体文件,从而实现流媒体的播放。由于其开放的文本格式和广泛的支持,M3U8文件在各种流媒体应用中得到了广泛的应用,特别是在移动设备和网络直播领域。

一、需求及思路分析

使用ffmpeg,把视频文件切片成m3u8,并且通过springboot,可以实现在线的点播。
客户端上传视频到服务器,服务器对视频进行切片后,返回m3u8,封面等访问路径。可以在线的播放。

二、安装FFmpeg

下载地址:https://ffmpeg.org/download.html

1.windows下安装FFmpeg

  • 1.点击上面的官方下载地址选择Windows进行下载
    在这里插入图片描述
  • 2.下载完成后解压内容如下
    在这里插入图片描述
  • 3.配置系统环境变量到解压目录的bin下边
    在这里插入图片描述
  • 4.打开命令行输入ffmpeg -version查看是否安装成功
    在这里插入图片描述

2.linux下安装FFmpeg

Ubuntu

提示需要其他依赖,按照提示进行操作即可;
如先操作:sudo apt --fix-broken install,再继续安装:sudo apt install ffmpeg;
或者使用指令:sudo apt install ffmpeg --fix-missing

  • 1、更新apt:sudo apt update

  • 2、安装FFmpeg:sudo apt install ffmpeg

  • 3、安装完成后,验证安装结果:ffmpeg -version

CentOS

  • 1.使用命令下载
wget https://johnvansickle.com/ffmpeg/release-source/ffmpeg-4.1.tar.xz
#使用命令解压:
cd  /root/FFmpeg
tar -xvJf ffmpeg-4.1.tar.xz
  • 2.yasm安装包
cd /root/FFmpeg
wget http://www.tortall.net/projects/yasm/releases/yasm-1.3.0.tar.gz  #下载源码包
tar zxvf yasm-1.3.0.tar.gz #解压
cd yasm-1.3.0 #进入目录
./configure #配置
make && make install #编译安装
  • 3.安装FFmpeg
cd /root/FFmpeg/ffmpeg-4.1/
./configure --enable-shared --prefix=/usr/local/ffmpeg-4.1
make && make install #编译安装
  • 4.下载x264
cd /root/libx264/
yum -y install git
git clone https://git.videolan.org/git/x264.git
  • 5.安装nasm
tar -xvf nasm-2.14.02.tar.gz 
cd nasm-2.14.02
./configure
make
sudo make install
#查看是否安装成功
nasm -version
  • 6.安装FFmpeg
#配置 /etc/ld.so.conf
vim /etc/ld.so.conf #通过vim指令进入位于etc目录中的ld.so.conf
#输入i进入插入模式,将第二行的内容插入到该文件
include ld.so.conf.d/*.conf
/usr/local/ffmpeg-4.1/libldconfig  #ldconfig 是一个动态链接库管理命令,其目的为了让动态链接库为系统所共享。
make
sudo make install
# ffmpeg  -i  /root/FFmpeg/wukel.mp4  -c:v  libx264  -c:a  copy  -hls_key_info_file  /root/FFmpeg/video_folder/20220308/test1/  -hls_time  15  -hls_playlist_type  vod  -hls_segment_filename  %06d.ts  index.m3u8
ldd ffmpeg
cd /root/FFmpeg/ffmpeg-4.1
./configure --prefix=/usr/softinstall/ffmpeg --enable-gpl --enable-shared --enable-libx264# 配置环境变量
vim /etc/profile
#配置如下
export FFMPEG_HOME=/usr/local/ffmpeg-4.1
export PATH=$FFMPEG_HOME/bin:$PATH
#修改完使用命令退出
~:wq
source /etc/profile
# 测试
ffmpeg -version
~~~~~~~~成功~~~~~~~~~

三、代码实现

1.引入依赖

pom.xml

    <properties><java.version>1.8</java.version><javacv.version>1.5.4</javacv.version><ffmpeg.version>4.3.1-1.5.4</ffmpeg.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><!--      javacv 和 ffmpeg的依赖包      --><dependency><groupId>org.bytedeco</groupId><artifactId>javacv</artifactId><version>${javacv.version}</version><exclusions><exclusion><groupId>org.bytedeco</groupId><artifactId>*</artifactId></exclusion></exclusions></dependency><dependency><groupId>org.bytedeco</groupId><artifactId>ffmpeg-platform</artifactId><version>${ffmpeg.version}</version></dependency><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.6.5</version></dependency><dependency><groupId>com.google.code.gson</groupId><artifactId>gson</artifactId></dependency><dependency><groupId>commons-lang</groupId><artifactId>commons-lang</artifactId><version>2.6</version></dependency><dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.2.2</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.5</version></dependency><dependency><groupId>commons-codec</groupId><artifactId>commons-codec</artifactId></dependency></dependencies>

2.修改配置文件

server:port: 8086app:# 存储转码视频的文件夹video-folder: /root/FFmpeg/video_folderspring:servlet:multipart:enabled: true# 不限制文件大小max-file-size: -1# 不限制请求体大小max-request-size: -1# 临时IO目录location: "${java.io.tmpdir}"# 不延迟解析resolve-lazily: false# 超过1Mb,就IO到临时目录file-size-threshold: 1MBweb:resources:static-locations:- "classpath:/static/"- "file:${app.video-folder}" # 把视频文件夹目录,添加到静态资源目录列表

3.工具类

MediaInfo

import java.util.List;import com.google.gson.annotations.SerializedName;public class MediaInfo {public static class Format {@SerializedName("bit_rate")private String bitRate;public String getBitRate() {return bitRate;}public void setBitRate(String bitRate) {this.bitRate = bitRate;}}public static class Stream {@SerializedName("index")private int index;@SerializedName("codec_name")private String codecName;@SerializedName("codec_long_name")private String codecLongame;@SerializedName("profile")private String profile;}@SerializedName("streams")private List<Stream> streams;@SerializedName("format")private Format format;public List<Stream> getStreams() {return streams;}public void setStreams(List<Stream> streams) {this.streams = streams;}public Format getFormat() {return format;}public void setFormat(Format format) {this.format = format;}
}

TranscodeConfig


import lombok.Data;@Data
public class TranscodeConfig {private String poster = "00:00:00.001";				// 截取封面的时间			HH:mm:ss.[SSS]private String tsSeconds = "15";			// ts分片大小,单位是秒private String cutStart;			// 视频裁剪,开始时间		HH:mm:ss.[SSS]private String cutEnd;				// 视频裁剪,结束时间		HH:mm:ss.[SSS]public String getPoster() {return poster;}public void setPoster(String poster) {this.poster = poster;}public String getTsSeconds() {return tsSeconds;}public void setTsSeconds(String tsSeconds) {this.tsSeconds = tsSeconds;}public String getCutStart() {return cutStart;}public void setCutStart(String cutStart) {this.cutStart = cutStart;}public String getCutEnd() {return cutEnd;}public void setCutEnd(String cutEnd) {this.cutEnd = cutEnd;}@Overridepublic String toString() {return "TranscodeConfig [poster=" + poster + ", tsSeconds=" + tsSeconds + ", cutStart=" + cutStart + ", cutEnd="+ cutEnd + "]";}
}

FFmpegUtils

import com.erfou.minio.demo.config.TranscodeConfig;
import com.erfou.minio.demo.domain.MediaInfo;
import com.google.gson.Gson;
import org.apache.commons.codec.binary.Hex;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.util.StringUtils;import javax.crypto.KeyGenerator;
import java.io.BufferedReader;
import java.io.File;
import java.io.IOException;
import java.io.InputStreamReader;
import java.nio.charset.StandardCharsets;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.nio.file.StandardOpenOption;
import java.security.NoSuchAlgorithmException;
import java.util.ArrayList;
import java.util.List;public class FFmpegUtils {private static final Logger LOGGER = LoggerFactory.getLogger(FFmpegUtils.class);// 跨平台换行符private static final String LINE_SEPARATOR = System.getProperty("line.separator");/*** 生成随机16个字节的AESKEY** @return*/private static byte[] genAesKey() {try {KeyGenerator keyGenerator = KeyGenerator.getInstance("AES");keyGenerator.init(128);return keyGenerator.generateKey().getEncoded();} catch (NoSuchAlgorithmException e) {return null;}}/*** 在指定的目录下生成key_info, key文件,返回key_info文件** @param folder* @throws IOException*/private static Path genKeyInfo(String folder) throws IOException {// AES 密钥byte[] aesKey = genAesKey();// AES 向量String iv = Hex.encodeHexString(genAesKey());// key 文件写入Path keyFile = Paths.get(folder, "key");Files.write(keyFile, aesKey, StandardOpenOption.CREATE, StandardOpenOption.TRUNCATE_EXISTING);// key_info 文件写入StringBuilder stringBuilder = new StringBuilder();stringBuilder.append("key").append(LINE_SEPARATOR);                    // m3u8加载key文件网络路径stringBuilder.append(keyFile).append(LINE_SEPARATOR);    // FFmeg加载key_info文件路径stringBuilder.append(iv);                                            // ASE 向量Path keyInfo = Paths.get(folder, "key_info");Files.write(keyInfo, stringBuilder.toString().getBytes(), StandardOpenOption.CREATE, StandardOpenOption.TRUNCATE_EXISTING);return keyInfo;}/*** 指定的目录下生成 master index.m3u8 文件** @param file      master m3u8文件地址* @param indexPath 访问子index.m3u8的路径* @param bandWidth 流码率* @throws IOException*/private static void genIndex(String file, String indexPath, String bandWidth) throws IOException {StringBuilder stringBuilder = new StringBuilder();stringBuilder.append("#EXTM3U").append(LINE_SEPARATOR);stringBuilder.append("#EXT-X-STREAM-INF:BANDWIDTH=" + bandWidth).append(LINE_SEPARATOR);  // 码率stringBuilder.append(indexPath);Files.write(Paths.get(file), stringBuilder.toString().getBytes(StandardCharsets.UTF_8), StandardOpenOption.CREATE, StandardOpenOption.TRUNCATE_EXISTING);}/*** 转码视频为m3u8** @param source     源视频* @param destFolder 目标文件夹* @param config     配置信息* @throws IOException* @throws InterruptedException*/public static void transcodeToM3u8(String source, String destFolder, TranscodeConfig config) throws IOException, InterruptedException {// 判断源视频是否存在if (!Files.exists(Paths.get(source))) {throw new IllegalArgumentException("文件不存在:" + source);}// 创建工作目录Path workDir = Paths.get(destFolder, "ts");Files.createDirectories(workDir);// 构建命令List<String> commands = new ArrayList<>();commands.add("ffmpeg");commands.add("-i");commands.add(source);                    // 源文件commands.add("-c:v");commands.add("libx264");                // 视频编码为H264commands.add("-c:a");commands.add("copy");                    // 音频直接copycommands.add("-hls_time");commands.add(config.getTsSeconds());    // ts切片大小commands.add("-hls_playlist_type");commands.add("vod");                    // 点播模式commands.add("-hls_segment_filename");commands.add("%06d.ts");                // ts切片文件名称if (StringUtils.hasText(config.getCutStart())) {commands.add("-ss");commands.add(config.getCutStart());    // 开始时间}if (StringUtils.hasText(config.getCutEnd())) {commands.add("-to");commands.add(config.getCutEnd());        // 结束时间}commands.add("index.m3u8");                                                        // 生成m3u8文件// 构建进程Process process = new ProcessBuilder().command(commands).directory(workDir.toFile()).start();// 读取进程标准输出new Thread(() -> {try (BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(process.getInputStream()))) {String line = null;while ((line = bufferedReader.readLine()) != null) {LOGGER.info(line);}} catch (IOException e) {}}).start();// 读取进程异常输出new Thread(() -> {try (BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(process.getErrorStream()))) {String line = null;while ((line = bufferedReader.readLine()) != null) {LOGGER.info(line);}} catch (IOException e) {}}).start();// 阻塞直到任务结束if (process.waitFor() != 0) {throw new RuntimeException("视频切片异常");}// 切出封面if (!screenShots(source, String.join(File.separator, destFolder, "poster.jpg"), config.getPoster())) {throw new RuntimeException("封面截取异常");}// 获取视频信息final MediaInfo[] mediaInfo = {getMediaInfo(source)};if (mediaInfo[0] == null) {throw new RuntimeException("获取媒体信息异常");}// 生成index.m3u8文件
//        genIndex(String.join(File.separator, destFolder, "index.m3u8"), "ts/index.m3u8", mediaInfo[0].getFormat().getBitRate());}/*** 获取视频文件的媒体信息** @param source* @return* @throws IOException* @throws InterruptedException*/public static MediaInfo getMediaInfo(String source) throws IOException, InterruptedException {List<String> commands = new ArrayList<>();commands.add("ffprobe");commands.add("-i");commands.add(source);commands.add("-show_format");commands.add("-show_streams");commands.add("-print_format");commands.add("json");Process process = new ProcessBuilder(commands).start();MediaInfo mediaInfo = null;try (BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(process.getInputStream()))) {mediaInfo = new Gson().fromJson(bufferedReader, MediaInfo.class);} catch (IOException e) {e.printStackTrace();}if (process.waitFor() != 0) {return null;}return mediaInfo;}/*** 截取视频的指定时间帧,生成图片文件** @param source 源文件* @param file   图片文件* @param time   截图时间 HH:mm:ss.[SSS]* @throws IOException* @throws InterruptedException*/public static boolean screenShots(String source, String file, String time) throws IOException, InterruptedException {List<String> commands = new ArrayList<>();commands.add("ffmpeg");commands.add("-i");commands.add(source);commands.add("-ss");commands.add(time);commands.add("-y");commands.add("-q:v");commands.add("1");commands.add("-frames:v");commands.add("1");commands.add("-f");commands.add("image2");commands.add(file);Process process = new ProcessBuilder(commands).start();// 读取进程标准输出new Thread(() -> {try (BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(process.getInputStream()))) {String line = null;while ((line = bufferedReader.readLine()) != null) {LOGGER.info(line);}} catch (IOException e) {}}).start();// 读取进程异常输出new Thread(() -> {try (BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(process.getErrorStream()))) {String line = null;while ((line = bufferedReader.readLine()) != null) {LOGGER.error(line);}} catch (IOException e) {}}).start();return process.waitFor() == 0;}
}

4.Controlle调用

import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.time.LocalDate;
import java.time.format.DateTimeFormatter;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;import com.erfou.minio.demo.config.TranscodeConfig;
import com.erfou.minio.demo.utils.FFmpegUtils;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;@RestController
@RequestMapping("/uploadController")
@Slf4j
public class UploadController {@Value("${app.video-folder}")private String videoFolder;private Path tempDir = Paths.get(System.getProperty("java.io.tmpdir"));/*** 上传视频进行切片处理,返回访问路径* @param video* @return* @throws IOException*/@PostMapping("/upload")@CrossOriginpublic Object upload (@RequestParam(name = "file") MultipartFile video) throws IOException {/**    参数传UUID去数据库查询需要转换的视频地址 进行入参public ResponseData upload (@RequestParam("uuid") String uuid) throws Exception {TranscodeConfig transcodeConfig = new TranscodeConfig();FastDfsFile fastDfsFile = sectionService.getSectionByUUID(uuid);if(fastDfsFile.getFastDfsFileUrl() == null){LOGGER.info("请上传视频!!");return ResponseData.warnWithMsg("请选择要上传的视频!");}MultipartFile video = UrlToMultipartFile.urlToMultipartFile(fastDfsFile.getFastDfsFileUrl());*/TranscodeConfig transcodeConfig = new TranscodeConfig();log.info("文件信息:title={}, size={}", video.getOriginalFilename(), video.getSize());log.info("转码配置:{}", transcodeConfig);// 原始文件名称,也就是视频的标题String title = video.getOriginalFilename();// io到临时文件Path tempFile = tempDir.resolve(title);log.info("io到临时文件:{}", tempFile.toString());try {video.transferTo(tempFile);// 删除后缀title = title.substring(0, title.lastIndexOf(".")) + "-" + UUID.randomUUID().toString().replaceAll("-", "");// 按照日期生成子目录String today = DateTimeFormatter.ofPattern("yyyyMMdd").format(LocalDate.now());// 尝试创建视频目录Path targetFolder = Files.createDirectories(Paths.get(videoFolder, today, title));log.info("创建文件夹目录:{}", targetFolder);Files.createDirectories(targetFolder);// 执行转码操作log.info("开始转码");try {FFmpegUtils.transcodeToM3u8(tempFile.toString(), targetFolder.toString(), transcodeConfig);} catch (Exception e) {log.error("转码异常:{}", e.getMessage());Map<String, Object> result = new HashMap<>();result.put("success", false);result.put("message", e.getMessage());return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(result);}// 封装结果Map<String, Object> videoInfo = new HashMap<>();videoInfo.put("title", title);videoInfo.put("m3u8", String.join("/", "", today, title, "ts/index.m3u8"));videoInfo.put("poster", String.join("/", "", today, title, "poster.jpg"));//返回数据Map<String, Object> result = new HashMap<>();result.put("success", true);result.put("data", videoInfo);return result;} finally {// 始终删除临时文件Files.delete(tempFile);}}
}

调用
在这里插入图片描述

5.Url转换MultipartFile的工具类

如controller中参数传的是URL 使用以下工具类转换一下即可
UrlToMultipartFile

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.lang.RandomStringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.commons.CommonsMultipartFile;import java.io.*;
import java.net.HttpURLConnection;
import java.net.URL;public class UrlToMultipartFile {private static final Logger LOGGER = LoggerFactory.getLogger(UrlToMultipartFile.class);/*** inputStream 转 File*/public static File inputStreamToFile(InputStream ins, String name) throws Exception{//System.getProperty("java.io.tmpdir")临时目录+File.separator目录中间的间隔符+文件名File file = new File(System.getProperty("java.io.tmpdir") + File.separator + name);OutputStream os = new FileOutputStream(file);int bytesRead;int len = 8192;byte[] buffer = new byte[len];while ((bytesRead = ins.read(buffer, 0, len)) != -1) {os.write(buffer, 0, bytesRead);}os.close();ins.close();return file;}/*** file转multipartFile*/public static MultipartFile fileToMultipartFile(File file) {FileItemFactory factory = new DiskFileItemFactory(16, null);FileItem item=factory.createItem(file.getName(),"text/plain",true,file.getName());int bytesRead = 0;byte[] buffer = new byte[8192];try {FileInputStream fis = new FileInputStream(file);OutputStream os = item.getOutputStream();while ((bytesRead = fis.read(buffer, 0, 8192)) != -1) {os.write(buffer, 0, bytesRead);}os.close();fis.close();} catch (IOException e) {e.printStackTrace();}return new CommonsMultipartFile(item);}//url转MultipartFilepublic static MultipartFile urlToMultipartFile(String url) throws Exception {File file = null;MultipartFile multipartFile = null;try {HttpURLConnection httpUrl = (HttpURLConnection) new URL(url).openConnection();httpUrl.connect();file = UrlToMultipartFile.inputStreamToFile(httpUrl.getInputStream(),RandomStringUtils.randomAlphanumeric(8)+".mp4");LOGGER.info("---------"+file+"-------------");multipartFile = UrlToMultipartFile.fileToMultipartFile(file);httpUrl.disconnect();} catch (Exception e) {e.printStackTrace();}return multipartFile;}}

四、播放测试

1.html

为了方便测试,写了一个简单的html,html只需要解压后,修改里面的src地址,设置为实际的m3u8播放地址
在这里插入图片描述

2.nginx配置

location /hls {add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Headers X-Requested-With;add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;types {  application/vnd.apple.mpegurl m3u8;  video/mp2t ts;  }alias  D:/m3u8/hls/; #切片存放地址expires -1;add_header Cache-Control no-cache;  }

3.效果展示

在这里插入图片描述

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

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

相关文章

Web3.0:已经开启的互联网革命!

1 痛点 2 web发展形态 只读、封闭式、协作式。 3 一个高度联系、全球统一的数字经济体 去中心化架构通过计算几余打破数据垄断&#xff0c;同时实现数字确权大量的功能依靠智能合约自动实现&#xff0c;运转效率大大提升DAO大量涌现&#xff0c;全球范围实现资源配置 4 特…

【Element-ui】学习与使用

网站快速成型工具Element&#xff0c;一套为开发者、设计师和产品经理准备的基于vue2.0的桌面端组件库 安装 npm i element-ui -S 在项目中安装element-ui&#xff0c;安装了以后查看package.json中的依赖中有没有element-ui的版本&#xff0c;如果有&#xff0c;则说明安装成功…

Spring Boot 自定义启动画面

文章目录 自定 Banner获取属性设置颜色实操关闭 Banner参考 我们启动项目的之后&#xff0c;会在控制台上看到类似下面的画面&#xff1a; 那么&#xff0c;我们是否可以自定义呢&#xff1f; 肯定可以 自定 Banner 上面的截图信息就是 Banner 信息&#xff0c;我们可以在项目…

在Chrome(谷歌浏览器)中安装Vue.js devtools开发者工具及解决Vue.js not detected报错

文章目录 一、Vue.js devtools开发者工具安装1.打开谷歌浏览器——点击扩展程序——选择管理扩展程序2.先下载添加一个谷歌助手到扩展程序中&#xff08;根据提示进行永久激活&#xff09;3.点击谷歌浏览器的应用商店4.输入Vue.js devtools——搜索——选择下载 二、解决Vue.js…

如何为WordPress博客网站配置免费域名HTTPS证书

文章目录 如何为WordPress博客网站配置免费域名HTTPS证书前置条件&#xff1a;步骤1 申请免费的域名HTTPS证书步骤2 将HTTP证书配置到cpolar的配置文件中2.1 创建证书文件夹2.2 修改cpolar配置文件2.3 重启cpolar服务2.4 查看后台Wordpress隧道是否在线正常2.5 用浏览器打开站点…

MyBatis基础模块-类型转换模块

文章目录 1. 为什么需要类型转换模块2. TypeHandler 1. 为什么需要类型转换模块 执行sql&#xff0c;在PreparedStatement设置参数时&#xff0c;需要把java类型转换成jdbc类型&#xff0c;而从结果集中获取数据时&#xff0c;需要把jdbc类型转换为java类型。 2. TypeHandle…

Linux操作系统~必考面试题⑧

1、pwd 命令 pwd 命令用于查看当前工作目录路径。 实例&#xff1a; 查看当前路径 pwd 查看软链接的实际路径 pwd -P 2、rmdir 命令 从一个目录中删除一个或多个子目录项&#xff0c;删除某目录时也必须具有对其父目录的写权限。 注意&#xff1a;不能删除非空目录实例&…

Linux系统MySQL中用户的权限管理

本节主要学习用户权限管理的概述&#xff0c;用户权限类型&#xff0c;用户赋权&#xff0c;权限删除&#xff0c;用户删除等。 目录 一、概述 二、用户权限类型 三、用户赋权 四、权限删除 五、用户删除 一、概述 数据库用户权限管理是数据库系统中非常重要的一个方面&am…

统一观测丨使用 Prometheus 监控 Cassandra 数据库最佳实践

作者&#xff1a;元格 本篇内容主要包括四部分&#xff1a;Cassandra 概览介绍、常见关键指标解读、常见告警规则解读、如何通过 Prometheus 建立相应监控体系。 Cassandra 简介 Cassandra 是什么&#xff1f; Apache Cassandra 是一个开源、分布式、去中心化、弹性可伸缩、…

Vue3封装函数组件(ElImageViewer)预览图片

目录结构 index.vue <template><el-image-viewer v-if"show" v-bind"$attrs" hide-on-click-modal close"show false" /> </template><script setup> import { ref, watch } from "vue" import { ElImageV…

Linux基础以及常用命令

目录 1 Linux简介1.1 不同应用领域的主流操作系统1.2 Linux系统版本1.3 Linux安装1.3.1 安装VMWare1.3.2 安装CentOS镜像1.3.3 网卡设置1.3.4 安装SSH连接工具1.3.5 Linux和Windows目录结构对比 2 Linux常用命令2.0 常用命令&#xff08;ls&#xff0c;pwd&#xff0c;cd&#…

mysql的一些知识整理

这里整理一些mysql相关的知识点&#xff0c;是自己不太熟悉的内容 varchar(n) 中 n 最大取值为多少 MySQL 规定除了 TEXT、BLOBs 这种大对象类型之外&#xff0c;其他所有的列&#xff08;不包括隐藏列和记录头信息&#xff09;占用的字节长度加起来不能超过 65535 个字节。 …

docker+Jenkins

拉取镜像 docker pull jenkins/jenkins启动容器 8080端口映射58080 jenkins_home 映射本地/data/下方便查看 docker run -d -p 58080:8080 -p 5000:50000 -v /data/jenkins_home:/var/jenkins_home -v /etc/localtime:/etc/localtime --name jenkins jenkins/jenkins访问ip:5…

Java多线程锁

多线程锁 本专栏学习内容又是来自尚硅谷周阳老师的视频 有兴趣的小伙伴可以点击视频地址观看 Synchronized Synchronized是Java中锁的一种实现方法&#xff0c;我们需要了解他锁在什么地方&#xff0c;锁的类型有哪些 阿里巴巴开发手册规定&#xff1a; 高并发时&#xff0c;同…

将Spring Session存储到Redis中实现持久化

文章目录 Session持久化1. 添加依赖2. 配置redis连接信息3. 存储和读取session从Redis Session持久化 1. 添加依赖 在项目中添加session依赖和redis依赖&#xff0c;如下所示&#xff1a; <dependency><groupId>org.springframework.boot</groupId><art…

基于VUE3+Layui从头搭建通用后台管理系统(前端篇)五:后台主页功能实现上

一、本章内容 本章实现后台主页框架实现、菜单的动态加载及生产、tab组件与菜单绑定、菜单与路由绑定等,工具栏按钮等界面及对应功能实现。 1. 详细课程地址: 待发布 2. 源码下载地址: 待发布 二、界面预览

vue脚手架文件说明

vue脚手架文件说明 1、文件介绍2、脚手架里面主要文件和作用 1、文件介绍 2、脚手架里面主要文件和作用 node_modules 都是下载的第三方包public/index.html 浏览器运行的网页src/main.js webpack打包的入口src/APP.vue Vue页面入口package.json 依赖包列表文件

E2E工程问题:小周期转大周期Gateway

摘要&#xff1a; 本文讨论一个具体的工程问题&#xff0c;E2E报文对应的信号&#xff0c;由小周期转大周期导致的E2E校验失败问题。 工程中&#xff0c;网关节点很重要的一个功能就是路由。当然&#xff0c;E2E&#xff08;End to End&#xff09;报文也可路由&#xff0c;但…

5分钟开发一个AI论文抓取和ChatGPT提炼应用

5分钟开发一个AI论文抓取和ChatGPT提炼应用 第一步 点击“即刻开始” -选择模板 python -修改标题 “AIPaper”&#xff0c;项目标识“AIPaper”&#xff0c;点击“创建项目” 第二步 在编程区域右侧AI区域&#xff0c;输入框输入以下内容&#xff1a; 请根据下面的内容&…

Java后端程序员不得不知道的 API 接口常识

说实话&#xff0c;我非常希望自己能早点看到本篇文章&#xff0c;大学那个时候懵懵懂懂&#xff0c;跟着网上的免费教程做了一个购物商城就屁颠屁颠往简历上写。 至今我仍清晰地记得&#xff0c;那个电商教程是怎么定义接口的&#xff1a; 管它是增加、修改、删除、带参查询&…