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

vue3中使用vue3-pdf-app和使用浏览器内置的PDF插件浏览器PDF文件

文章目录

  • 先准备一个PDF
  • 使用浏览器内置的PDF插件预览PDF
    • 在HTML中使用浏览器插件预览PDF
    • Vscode使用插件发布服务后直接通过URL地址访问PDF
    • 可使用的浏览器
  • 在vue3项目中预览PDF文件
    • vue3项目也是可以通过URL地址访问文件的
    • vue3中使用浏览器内置的PDF插件预览PDF
      • 代码如下所示:App.vue
  • 在vue3中使用组件vue3-pdf-app预览PDF
      • 下载安装组件
      • vue3-pdf-app预览PDF结果如下图所示
      • 修改组件主题
      • 修改配置
      • 将英文改成中文显示(国际化)

如果想直接看vue3的内容,就点击对应的目录去看就行了

先准备一个PDF

没有的可以使用,WPS直接建立一个,或者建立一个word文档,随便输入一个内容,另存为PDF,就有了。
在这里插入图片描述

使用浏览器内置的PDF插件预览PDF

在这里插入图片描述

在HTML中使用浏览器插件预览PDF

然后我在代码中通过iframe的形式,打开PDF文件,也可以正常预览PDF文件,代码在截图后面
在这里插入图片描述
代码如下所示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>这是PDF测试</title>
</head>
<style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;box-sizing: border-box;}
</style><body><div style="width: 100%; height: 100%;"><!-- <iframe src="./这是PDF测试.pdf" style="width: 100vw; height: 100vh;"></iframe> --><iframe src="./这是PDF测试.pdf" style="width: 100%; height: 100vh;"></iframe></div>
</body></html>

结果如下所示:
在这里插入图片描述
在这里插入图片描述
注意了使用插件发布服务之后,千万别关闭Vscode!千万别关闭Vscode!千万别关闭Vscode!千万别关闭Vscode!千万别关闭Vscode!千万别关闭Vscode! 否则,访问不到文件,因为关闭了Vscode就相当于关闭服务了。
在这里插入图片描述

Vscode使用插件发布服务后直接通过URL地址访问PDF

通过上面Vscode的插件,发布为服务之后,将对应pdftest.html所在目录都变成了URL可以访问的内容了,输入端口号和文件名称,就可以实现通过URL地址访问对应的文件了。如下图所示:其中,图中黑色为在Vscode的目录,因为右键发布服务是以上面截图中所示的pdftest.html发布的,所以这里的(这是PDF测试.pdf)跟pdftest.html是同级目录,如果这里有多一层目录,则需要加上这一层目录,看后面截图
在这里插入图片描述
在这里插入图片描述
图片也是可以通过这种方式访问的
在这里插入图片描述
所以上述的代码还可以改成这样

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>这是PDF测试</title>
</head>
<style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;box-sizing: border-box;}
</style><body><div style="width: 100%; height: 100%;"><!-- <iframe src="./这是PDF测试.pdf" style="width: 100vw; height: 100vh;"></iframe> --><!-- <iframe src="./这是PDF测试.pdf" style="width: 100%; height: 100vh;"></iframe> --><iframe src="http://127.0.0.1:5500/这是PDF测试.pdf" style="width: 100%; height: 100vh;"></iframe></div>
</body></html>

结果如下所示
在这里插入图片描述
其他的以此类推,有兴趣的可以去试一试,所有的URL地址访问,是以使用Vscode对应的插件发布服务的目位置决定的。我为什么要记录这个呢!是因为我发现如果我想试着找一个在线的PDF进行测试,还要自己找可以访问的PDF。还不如这样来得简单,又不用花时间找。除了使用Vscode发布为服务这种方式通过URL访问文件,还可以通过nginx、SpringBoot设置静态资源映射等多种方式,但Vscode这种方式无疑是最简单的。
以后如果需要访问一些在线的地址测试之类的(如:图片,PDF等),直接使用Vscode使用相应的插件发布为服务即可。无需特意找在线的文件,直接通过这种方式使用URL访问本地文件,方便多了。

可使用的浏览器

通过上面的那种方式,我使用edge、Google Chrome、360浏览器,这些都是可以的。火狐因为平时用不到,电脑也没安装有,就不测试了。IE就更不用说了,都2023年了,这个用的应该挺少了的吧,这已经不在我的考虑范围之内了,这里只是提一下而已。有兴趣的可以自行测试一下。

在vue3项目中预览PDF文件

vue3项目也是可以通过URL地址访问文件的

这个前提是,运行起来了,这个需要知道一下,可能后面需要用到,目录结构如下所示

在这里插入图片描述

运行项目,通过给的例子,f12查看可知

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

通过上面的两种方式,我们可以把PDF放到对应的目录下,然后运行项目,通过URL地址访问对应的目录文件就可以了。这里我把PDF放在public目录和src的pdf目录下。然后分别使用URL地址访问。对应的目录结构,如下所示

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
都是可以通过URL正常访问的

vue3中使用浏览器内置的PDF插件预览PDF

目录结构
在这里插入图片描述
在这里插入图片描述
一样的警告

在这里插入图片描述

代码如下所示:App.vue

<template><div style="width: 100%; height: 100%; background-color: pink;"><!-- 注意了,iframe需要指定宽高,如果不指定也可显示,就是有点小,具体去掉试试就知道了 --><!-- public目录 --><!-- <iframe :src="publicPdfUrl" style="width: 100%; height: 100%;"></iframe> --><!-- <iframe src="/public/publicmulu.pdf" style="width: 100%; height: 100%;"></iframe> --><!-- <iframe src="/publicmulu.pdf" style="width: 100%; height: 100%;"></iframe> --><!-- src目录 --><!-- <iframe :src="srcPdfUrl" style="width: 100%; height: 100%;"></iframe> --><iframe src="/src/assets/pdf/srcassetspdfmulu.pdf" style="width: 100%; height: 100%;"></iframe><!-- 在线URL --><!-- <iframe src="http://localhost:7777/src/assets/pdf/srcassetspdfmulu.pdf" style="width: 100%; height: 100%;"></iframe> --><!-- 或者是访问文章上面发布的那个5500端口的地址也可以 --><!-- <iframe src="http://127.0.0.1:5500/这是PDF测试.pdf.pdf" style="width: 100%; height: 100%;"></iframe> --></div>
</template><script setup lang="ts">
// import {ref} from 'vue'
// 在vue3中下面的第一个/代表的就是public,使用这个反而有警告
// const publicPdfUrl = ref('/public/publicmulu.pdf')
// const publicPdfUrl = ref('/publicmulu.pdf')// src目录
// const srcPdfUrl = ref("/src/assets/pdf/srcassetspdfmulu.pdf")</script><style scoped>
</style>

在这里插入图片描述

在vue3中使用组件vue3-pdf-app预览PDF

这个组件我是无意中发现的,vue3-pdf-app - npm (npmjs.com),这个是对应的官网,这里面有对对应的详细的使用案例,这里简单说明一下。

下载安装组件

npm install vue3-pdf-app

App.vue代码

<template><div style="width: 100%; height: 100%;"><!-- 下面这几种方式都是可以的,正常访问PDF的 --><!-- <vue-pdf-app style="height: 100vh;" pdf="/publicmulu.pdf"></vue-pdf-app> --><!-- <vue-pdf-app style="height: 100vh;" pdf="/src/assets/pdf/srcassetspdfmulu.pdf"></vue-pdf-app> --><!-- <vue-pdf-app style="height: 100vh;" :pdf="pdfUrl"></vue-pdf-app> --><vue-pdf-app style="height: 100vh;" pdf="http://localhost:7777/src/assets/pdf/srcassetspdfmulu.pdf"></vue-pdf-app></div>
</template><script setup lang="ts">
import VuePdfApp from "vue3-pdf-app";
// import this to use default icons for buttons
import "vue3-pdf-app/dist/icons/main.css";// import {ref} from 'vue'// const pdfUrl = ref('publicmulu.pdf')
// const pdfUrl = ref('/src/assets/pdf/srcassetspdfmulu.pdf')</script><style scoped>
</style>

vue3-pdf-app预览PDF结果如下图所示

在这里插入图片描述

修改组件主题

官网都有对应的说明,vue3-pdf-app - npm (npmjs.com) 这里有说明,如我这里改成dark
在这里插入图片描述
代码如下所示:App.vue

<template><div style="width: 100%; height: 100%;"><!-- 下面这几种方式都是可以的,正常访问PDF的 --><!-- <vue-pdf-app theme="dark"  style="height: 100vh;" pdf="/publicmulu.pdf"></vue-pdf-app> --><vue-pdf-app theme="dark"  style="height: 100vh;" pdf="/src/assets/pdf/srcassetspdfmulu.pdf"></vue-pdf-app><!-- <vue-pdf-app theme="dark"  style="height: 100vh;" :pdf="pdfUrl"></vue-pdf-app> --><!-- <vue-pdf-app theme="dark"  style="height: 100vh;" pdf="http://localhost:7777/src/assets/pdf/srcassetspdfmulu.pdf"></vue-pdf-app> --></div>
</template><script setup lang="ts">
import VuePdfApp from "vue3-pdf-app";
// import this to use default icons for buttons
import "vue3-pdf-app/dist/icons/main.css";// import {ref} from 'vue'// const pdfUrl = ref('publicmulu.pdf')
// const pdfUrl = ref('/src/assets/pdf/srcassetspdfmulu.pdf')</script><style scoped>
</style>

结果如下图所示
在这里插入图片描述

修改配置

官网截图如下所示,vue3-pdf-app - npm (npmjs.com),详情看官网,因为这里的配置是在是太多了,这里建议封装成一个组件方便后面复用,具体看后面的代码
在这里插入图片描述
目录结构如图所示,代码在截图后面
在这里插入图片描述
PDFPreview.vue

<template><div style="width: 100%; height: 100%;"><vue-pdf-app theme="dark"  style="height: 100vh;" :pdf="pdfUrl"></vue-pdf-app></div>
</template><script setup lang="ts">
import VuePdfApp from "vue3-pdf-app";
// import this to use default icons for buttons
import "vue3-pdf-app/dist/icons/main.css";// 宏
defineProps<{pdfUrl: string | undefined
}>()
</script><style scoped>
</style>

App.vue

<template><div style="width: 100%; height: 100%;"><PDFPreview style="width: 100%; height: 100%;" :pdf-url="pdfUrl"></PDFPreview></div>
</template><script setup lang="ts">
import {ref} from 'vue'
import PDFPreview from './components/PDFPreview.vue';
const pdfUrl = ref('/src/assets/pdf/srcassetspdfmulu.pdf')
</script><style scoped>
</style>

结果如下所示
在这里插入图片描述
进行配置,根据官网来。vue3-pdf-app - npm (npmjs.com)
PDFPreview.vue

<template><div style="width: 100%; height: 100%;"><vue-pdf-app :config="config" theme="dark" style="height: 100vh;" :pdf="pdfUrl"></vue-pdf-app></div>
</template><script setup lang="ts">
import VuePdfApp from "vue3-pdf-app";
// import this to use default icons for buttons
import "vue3-pdf-app/dist/icons/main.css";// 宏
defineProps<{pdfUrl: string | undefined
}>()// 想不显示那一项,就将对应的true改成false就行了
const config = {sidebar: {// viewThumbnail: true, 原来的配置viewThumbnail: false,// viewOutline: true, 原来的配置viewOutline: false,// viewAttachments: true, 原来的配置viewAttachments: false,},secondaryToolbar: {secondaryPresentationMode: true,secondaryOpenFile: true,secondaryPrint: true,secondaryDownload: true,secondaryViewBookmark: true,firstPage: true,lastPage: true,pageRotateCw: true,pageRotateCcw: true,cursorSelectTool: true,cursorHandTool: true,scrollVertical: true,scrollHorizontal: true,scrollWrapped: true,spreadNone: true,spreadOdd: true,spreadEven: true,documentProperties: true,},toolbar: {toolbarViewerLeft: {findbar: true,previous: true,next: true,pageNumber: true,},toolbarViewerRight: {presentationMode: true,openFile: true,print: true,download: true,viewBookmark: true,},toolbarViewerMiddle: {zoomOut: true,zoomIn: true,scaleSelectContainer: true,},},errorWrapper: true,
};</script><style scoped></style>

App.vue

<template><div style="width: 100%; height: 100%;"><PDFPreview style="width: 100%; height: 100%;" :pdf-url="pdfUrl"></PDFPreview></div>
</template><script setup lang="ts">
import {ref} from 'vue'
import PDFPreview from './components/PDFPreview.vue';
const pdfUrl = ref('/src/assets/pdf/srcassetspdfmulu.pdf')
</script><style scoped>
</style>

结果如下所示
这个是没有将选项设置为false的情况
在这里插入图片描述
这个是将一些选项设置为false的情况
在这里插入图片描述
超级简化版配置
PDFPreview.vue

<template><div style="width: 100%; height: 100%;"><vue-pdf-app :config="config" theme="dark" style="height: 100vh;" :pdf="pdfUrl"></vue-pdf-app></div>
</template><script setup lang="ts">
import VuePdfApp from "vue3-pdf-app";
// import this to use default icons for buttons
import "vue3-pdf-app/dist/icons/main.css";// 宏
defineProps<{pdfUrl: string | undefined
}>()// 来一个超级简化版配置,详细配置往后看
const config = {sidebar: false,secondaryToolbar: false,toolbar: false,errorWrapper: false,
};/**// 想不显示那一项,就将对应的true改成false就行了
const config = {sidebar: {// viewThumbnail: true, 原来的配置viewThumbnail: false,// viewOutline: true, 原来的配置viewOutline: false,// viewAttachments: true, 原来的配置viewAttachments: false,},secondaryToolbar: {secondaryPresentationMode: true,secondaryOpenFile: true,secondaryPrint: true,secondaryDownload: true,secondaryViewBookmark: true,firstPage: true,lastPage: true,pageRotateCw: true,pageRotateCcw: true,cursorSelectTool: true,cursorHandTool: true,scrollVertical: true,scrollHorizontal: true,scrollWrapped: true,spreadNone: true,spreadOdd: true,spreadEven: true,documentProperties: true,},toolbar: {toolbarViewerLeft: {findbar: true,previous: true,next: true,pageNumber: true,},toolbarViewerRight: {presentationMode: true,openFile: true,print: true,download: true,viewBookmark: true,},toolbarViewerMiddle: {zoomOut: true,zoomIn: true,scaleSelectContainer: true,},},errorWrapper: true,
};// 从官网知道,这里有多种配置方法
// disable whole page navigation panel
const config2 = {toolbar: {toolbarViewerLeft: false}
}// disable whole panel
const config3 = {toolbar: false
}
*/</script><style scoped></style>

App.vue

<template><div style="width: 100%; height: 100%;"><PDFPreview style="width: 100%; height: 100%;" :pdf-url="pdfUrl"></PDFPreview></div>
</template><script setup lang="ts">
import {ref} from 'vue'
import PDFPreview from './components/PDFPreview.vue';
const pdfUrl = ref('/src/assets/pdf/srcassetspdfmulu.pdf')
</script><style scoped>
</style>

结果如下所示

在这里插入图片描述

将英文改成中文显示(国际化)

需要下载国际化的语言配置,https://github.com/mozilla/pdf.js,这是对应的GitHub官网,需要到这里下载对应的国际化语言配置,记住是先下载好对应的文件,至于怎么下载,往后看。有详细的截图说明。
在这里插入图片描述
在这里插入图片描述
上面的viewer.properties文件下载。如果下载失败,就直接自己新建一个文件(同样的名称和后缀名。viewer.properties。就可以了),然后复制一下里面的代码,粘贴,就可以了。

viewer.properties这个文件来自于https://github.com/mozilla/pdf.js这里,需要自己去下载。
viewer.properties这个文件来自于https://github.com/mozilla/pdf.js这里,需要自己去下载。
viewer.properties这个文件来自于https://github.com/mozilla/pdf.js这里,需要自己去下载。
viewer.properties这个文件来自于https://github.com/mozilla/pdf.js这里,需要自己去下载。

下载好之后,通过

 <link rel="resource" type="application/l10n" href="/src/assets/properites/viewer.properties">

的形式,进行国际化语言配置,变成中文。
把下载好的viewer.properties文件放到项目的某个目录下,目录结构如下所示
在这里插入图片描述
PDFPreview.vue的代码如下

<template><div style="width: 100%; height: 100%;"><link rel="resource" type="application/l10n" href="/src/assets/properites/viewer.properties"><vue-pdf-app theme="dark" style="height: 100vh;" :pdf="pdfUrl"></vue-pdf-app></div>
</template><script setup lang="ts">
import VuePdfApp from "vue3-pdf-app";
// import this to use default icons for buttons
import "vue3-pdf-app/dist/icons/main.css";// 宏
defineProps<{pdfUrl: string | undefined
}>()</script><style scoped></style>

App.vue

<template><div style="width: 100%; height: 100%;"><PDFPreview style="width: 100%; height: 100%;" :pdf-url="pdfUrl"></PDFPreview></div>
</template><script setup lang="ts">
import {ref} from 'vue'
import PDFPreview from './components/PDFPreview.vue';
const pdfUrl = ref('/src/assets/pdf/srcassetspdfmulu.pdf')
</script><style scoped>
</style>

结果如下所示
在这里插入图片描述

不过,最后我还是选择使用iframe的形式展示PDF,感觉浏览器内置的PDF插件已经足够强大了,已经符合我要求了。我写这篇文章是因为,我既然了解到了,就顺便记录一下呗!

相关文章:

vue3中使用vue3-pdf-app和使用浏览器内置的PDF插件浏览器PDF文件

文章目录 先准备一个PDF使用浏览器内置的PDF插件预览PDF在HTML中使用浏览器插件预览PDFVscode使用插件发布服务后直接通过URL地址访问PDF可使用的浏览器 在vue3项目中预览PDF文件vue3项目也是可以通过URL地址访问文件的vue3中使用浏览器内置的PDF插件预览PDF代码如下所示&#…...

fastadmin 后台添加视频

做个记录,字段自行对照解决 1.add.html <div class"form-group"><label class"control-label col-xs-12 col-sm-2">{:__(Video)}:</label><div class"col-xs-12 col-sm-8"><div class"input-group">&l…...

TFHE 的全同态模结构(FHE Module Structure)

参考文献&#xff1a; [CGGI20] Chillotti I, Gama N, Georgieva M, et al. TFHE: fast fully homomorphic encryption over the torus[J]. Journal of Cryptology, 2020, 33(1): 34-91.[BGGJ20] Boura C, Gama N, Georgieva M, et al. Chimera: Combining ring-lwe-based ful…...

rapidocr_paddle[gpu]:GPU端推理库来了

简介 rapidocr_paddle系列包是基于PaddlePaddle框架作为推理引擎的&#xff0c;支持CPU和GPU上推理。值得说明的是&#xff0c;这个包和PaddleOCR相比&#xff0c;代码基本都是一样的&#xff0c;只不过这个库将里面核心推理代码抽了出来&#xff0c;更加精简而已。 推荐GPU上…...

PKU 概率论+数理统计+建模 期中考复习总结

目录 计算条件概率计算概率&#xff08;放回与不放回&#xff09;生成随机数算法Linear Congruential Method判断是否是full period Uniformity (test of frequency)1.Chi-Square testmethodreminderexample 2.Kolmogorov-Sminov testmethodexample Independence (test of auto…...

Kubernetes技术与架构-网络 3

Kubernetes集群支持为Pod或者Service申请IPV4或者IPV6的地址空间。 kube-apiserver --service-cluster-ip-range<IPv4 CIDR>,<IPv6 CIDR> kube-controller-manager --cluster-cidr<IPv4 CIDR>,<IPv6 CIDR> --service-cluster-ip-range<IPv4 CI…...

pycharm转移缓存目录

原来的缓存目录为C:\Users\86176\AppData\Local\JetBrains&#xff0c;各种配置文件、缓存文件随着pycharm的使用堆积在这里&#xff0c;导致C盘逐渐爆满。 因此需要将缓存目录转移至D盘。首先需要了解缓存目录的知识。 PyCharm 和其他 JetBrains 的 IDE 通常会有两个关键的目…...

python 2组list绘制拟合曲线、计算拟合方程 R^2

import matplotlib.pyplot as plt import numpy as np # plt.rcParams[font.family] SimHei # 指定使用中文字体&#xff0c;例如宋体&#xff08;SimHei&#xff09;def Curve_Fitting(x, y, deg):parameter np.polyfit(x, y, deg) #拟合deg次多项式p np.poly1d(paramet…...

Vue单页面应用(SPA)怎么做SEO

在Vue单页面应用(SPA)中,由于内容的动态加载和路由切换,搜索引擎可能无法直接获取和索引页面的内容。不过,你可以采取一些策略来优化SEO,使你的Vue单页面应用在搜索引擎中更好地被索引和展示: 1:使用预渲染(Prerendering)或服务器端渲染(Server-Side Rendering,SS…...

简述【关系型数据库】

“关系型数据库”是博主在复习时做题遇到的知识点&#xff0c;用于简单扫盲 关系型数据库简称RDBMS&#xff0c;是依据关系模型来创建的数据库所谓“关系模型”就是“一对一、一对多、多对多”等关系模型。关系模型就是指二维表格模型&#xff0c;因而一个关系型数据库就是由二…...

LVS之DR模式(最常见的LVS负载方式,直接路由模式)

一、LVS-DR模式的数据流向 1、负载均衡器lvs调度器&#xff1a;只负责请求和转发到后端的真实服务器&#xff0c;但是响应结果&#xff0c;由后端服务器直接转发给客户端&#xff0c;不需要经过调度器的处理&#xff0c;减轻lvs调度器的负担&#xff0c;提高性能和稳定性 二、…...

006:vue使用lottie-web实现web动画

文章目录 1. 简介2. 优点3. 效果4. 安装使用5. lottie-web 常用方法6. Lottie-web 常用的事件 1. 简介 官方介绍&#xff1a;Lottie 是一个库&#xff0c;可以解析使用AE制作的动画&#xff08;需要用bodymovie导出为json格式&#xff09;,支持web、ios、android、flutter和re…...

Java NIO

Java NIO 一&#xff0c;介绍 Java NIO&#xff08;New IO&#xff09;是 JDK 1.4 引入的一组新的 I/O API&#xff0c;用于支持非阻塞式 I/O 操作。相比传统的 Java IO API&#xff0c;NIO 提供了更快、更灵活的 I/O 操作方式&#xff0c;可以用于构建高性能网络应用程序。 …...

人机交互中的数字与文字

人机交互是指人类与计算机系统之间进行信息交流和操作的过程。在人机交互中&#xff0c;数字和文字被广泛应用于界面设计、输入输出、交流和信息展示等方面。 数字在人机交互中常用于表示数据、数量和参数等信息。通过数字&#xff0c;我们可以输入和输出各种数值&#xff0c;进…...

C++11新特性之十六:std::tie

在c 11标准库中&#xff0c;加入了std::tie&#xff0c;在c 14中改进&#xff0c;方便使用。 其与std::tuple关系密切&#xff0c; 主要目的是方便地使用std::tuple。 std::tie函数的作用就是从元素引用中生成一个std::tuple元组&#xff0c;其在头文件<tuple>中定义&…...

今天是1024节日,作为一个程序员,我想表达我对Java和詹姆斯·高斯林(James Gosling)的感激之情

今天是1024节日 我感谢Java感谢詹姆斯高斯林 今天是1024节日&#xff0c;作为一个程序员&#xff0c;我想表达我对Java和詹姆斯高斯林&#xff08;James Gosling&#xff09;的感激之情。Java是一门伟大的编程语言&#xff0c;而詹姆斯高斯林是它的创造者之一。 首先&#xf…...

众和策略:华为汽车概念活跃,圣龙股份斩获12板,华峰超纤涨10%

华为轿车概念23日盘中再度生动&#xff0c;到发稿&#xff0c;华峰超纤涨超10%&#xff0c;佛山照明、圣龙股份、隆基机械、银宝山新等涨停&#xff0c;赛力斯涨近6%。 值得注意的是&#xff0c;圣龙股份已接连12个交易日涨停。 昨日晚间&#xff0c;圣龙股份宣布前三季度成果…...

关于一篇“范式详解”博文的批注

本篇文章是对于下面这个链接中的文章的批注。这篇文章详细讲述了第一、二、三范式和BCNF范式&#xff0c;希望我的这篇文章能帮助您更好的理解这篇优秀的博文 详解第一范式、第二范式、第三范式、BCNF范式-CSDN博客 “范式”批注 这样理解范式的概念&#xff1a;一张数据表的表…...

LNMP架构部署Discuz论坛系统

文章目录 LNMP架构&部署Discuz论坛系统部署LNMP架构环境前期准备安装Nginx安装mariadb安装php配置nginx 部署Discuz论坛系统下载Discuz论坛系统代码包部署Discuz论坛系统配置虚拟主机安装Discuz论坛访问站点尝试注册一个账号 LNMP架构&部署Discuz论坛系统 部署LNMP架构…...

【vscode】本地配置和根据不同项目不同的vscode配置

目录 1. .vscode项目配置2. vscode本地配置 1. .vscode项目配置 {"typescript.tsdk": "node_modules/typescript/lib","prettier.enable": false,"god.tsconfig": "./tsconfig.json",// TODO: 文件默认配置"[css]&quo…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

深度学习水论文:mamba+图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

如何更改默认 Crontab 编辑器 ?

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...