大屏模板，增加自适应（包含websocket）
1、简单的Node服务端
const WebSocket = require('ws');// 创建 WebSocket 服务器
const wss = new WebSocket.Server({ port: 8888 });const getHeader = (protocol) => {const protocolArr = protocol.split(',')const headers = {};for (let i = 0; i < protocolArr.length; i += 2) {const key = protocolArr[i].trim();const value = protocolArr[i + 1].trim();headers[key] = value;}return headers;
}
let timer = null;
let num = 0;
let UID = '';// 监听连接事件
wss.on('connection', (ws, req) => {const userName = req.url.replace('/', '');UID = userName;console.log('WebSocket connection established for URL:', userName);// 在 'upgrade' 事件处理程序中获取请求头信息const protocol = req.headers['sec-websocket-protocol'];console.log('Sec-WebSocket-Protocol:', getHeader(protocol)['X-Access-Token']);// 连接建立成功时触发console.log('Client connected');if(!timer) {const obj = [{name: 'SC001',value: 123},{name: 'SC001',value: 123}]timer = setInterval(() => {ws.send(`${UID}心跳信息消息: ${num}--${JSON.stringify(obj)}`);num++}, 3000);}// 监听消息接收事件ws.on('message', (message) => {console.log(`Received message: ${message}`);// 向客户端发送消息ws.send(`服务端返回消息: ${message}`);});// 监听连接关闭事件ws.on('close', () => {// 连接关闭时触发console.log('Client disconnected');timer = null;});
});
2、大屏客户端
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>大屏测试</title>
</head><body><style>body {position: relative;margin: 0;padding: 0;color: #ffffff;font-size: 36px;font-weight: bold;background-color: #20f;background-color: #3084e7;background: url(https://tinypng.com/backend/opt/output/3ret9c4gdpxnargyh99c1rgj1ne52res/bg.png) no-repeat;background-size: auto;}.item {box-shadow: inset 0px 0px 6px 2px #9df6fa;border-radius: 4px;width: calc(100% - 24px);height: 100%;display: flex;justify-content: center;align-items: center;padding: 12px;}.bigscreen {margin: 12px;display: flex;height: 100%;}.mg12 {margin: 12px 0;}.header {margin: 0 12px;text-align: center;line-height: 48px;margin-bottom: 12px;font-size: 36px;background: linear-gradient(to bottom, #56f4fe, #3084e7);-webkit-background-clip: text;color: transparent;}.first {display: flex;justify-content: space-around;align-items: center;font-size: 22px;}.i {width: 100%;display: flex;flex-direction: column;text-align: center;}.val {margin-top: 12px;}</style><div id="app" style="position: absolute;"><div class="header">大屏标题</div><div class="bigscreen"><div style="display: flex;flex-direction: column; height: calc(100% - 72px); width: 65%; margin-right: 12px;"><div id="first" class="item first" style="height: 15%;"><div class="i"><div>API总数</div><div class="val">19,612</div></div><div class="i"><div>调用数</div><div class="val">1,222</div></div><div class="i" id="warn" style="color: red;"><div>告警数</div><div class="val">68</div></div></div><div id="chart2" class="item mg12" style="height: 30%;">222</div><div id="chart3" class="item" style="flex: 1;">333</div></div><div style="display: flex;flex-direction: column; height: calc(100% - 72px); flex: 1;"><div id="chart4" class="item">111</div><div id="chart5" class="item mg12">222</div><div id="chart6" class="item">333</div></div></div></div><script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script><script type="module">import autofit from 'https://cdn.jsdelivr.net/npm/autofit.js';autofit.init({dh: 1080,dw: 1920,el: '#app',resize: true},false);// 配置图表选项和数据const obj = ['bar', 'line']const getType = () => {// 生成随机索引var randomIndex = Math.floor(Math.random() * obj.length);// 获取随机元素var type = obj[randomIndex];return type;}var option = () => {const type = getType()return {color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],title: {text: 'Gradient Stacked Area Chart'},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}}},legend: {data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']},toolbox: {feature: {saveAsImage: {}}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',boundaryGap: type === 'bar',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}],yAxis: [{type: 'value'}],series: [{name: 'Line 1',type: type,stack: 'Total',smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(128, 255, 165)'},{offset: 1,color: 'rgb(1, 191, 236)'}])},emphasis: {focus: 'series'},data: [Math.random() * 1000, Math.random() * 100, 101, 264, 90, 340, 250]},{name: 'Line 2',type: type,stack: 'Total',smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(0, 221, 255)'},{offset: 1,color: 'rgb(77, 119, 255)'}])},emphasis: {focus: 'series'},data: [Math.random() * 1000, Math.random() * 100, 111, 234, 220, 340, 310]},{name: 'Line 3',type: type,stack: 'Total',smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(55, 162, 255)'},{offset: 1,color: 'rgb(116, 21, 219)'}])},emphasis: {focus: 'series'},data: [Math.random() * 1000, Math.random() * 100, 201, 334, 190, 130, 220]},]}};// 初始化ECharts实例var myChart2 = echarts.init(document.getElementById('chart2'), 'dark');var myChart3 = echarts.init(document.getElementById('chart3'), 'dark');var myChart4 = echarts.init(document.getElementById('chart4'), 'dark');var myChart5 = echarts.init(document.getElementById('chart5'), 'dark');var myChart6 = echarts.init(document.getElementById('chart6'), 'dark');// 使用配置项设置图表myChart2.setOption(option());myChart3.setOption(option());myChart4.setOption(option());myChart5.setOption(option());myChart6.setOption(option());// 自适应窗口大小变化window.addEventListener('resize', function () {myChart2.resize();myChart3.resize();myChart4.resize();myChart5.resize();myChart6.resize();});const timer = setInterval(() => {myChart2.setOption(option());myChart3.setOption(option());myChart4.setOption(option());myChart5.setOption(option());myChart6.setOption(option());}, 3000);</script><script>setTimeout(() => {// 创建一个 Canvas 元素var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');// 设置 Canvas 的尺寸与容器元素相同var container = document.getElementById('first');canvas.width = container.offsetWidth * 0.6;canvas.height = container.offsetHeight;var date = new Date();var month = date.getMonth() + 1;var time = `${date.getFullYear()}-${month > 9 ? month : '0'+month}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`// 旋转绘图上下文45度（以弧度为单位）ctx.rotate(Math.PI / 16);// 绘制水印文本ctx.font = '36px Arial';ctx.fillStyle = '#ffffff1f'; // 水印文本颜色和透明度ctx.textAlign = 'center';ctx.textBaseline = 'middle';ctx.fillText(time, canvas.width / 4, canvas.height / 4);// 将 Canvas 转换为背景图像var watermarkUrl = canvas.toDataURL();// 设置容器元素的背景样式为水印图像container.style.backgroundImage = 'url(' + watermarkUrl + ')';}, 200)</script><script>let socket, timers, connectState;let num = 1;const TIME = 10// 创建 WebSocket 连接函数function createWebSocket(state) {if(state) {num = 1;document.getElementById("output").innerHTML = '';console.clear()}const room = new Date().getTime();const token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2ODg1MzgzNDUsInVzZXJuYW1lIjoiYWRtaW4ifQ.Yac09LCyIAwjUofsm2cvGKxPmpZ5fTXG9ZKpFYdX2eQ';socket = new WebSocket("ws:localhost:8888/tengyu?id=001", ['X-Access-Token', token, 'Authorization', "token"]);// socket = new WebSocket(`ws://10.72.30.229:8080/dsss/websocket/largeScreen/room-${room}`);// 监听连接打开事件socket.onopen = function(event) {connectState = true;};// 监听消息接收事件socket.onmessage = function(event) {console.log(event.data);};// 监听连接关闭事件socket.onclose = function(event) {connectState = false;// 断线后尝试重连timers = setTimeout(function() {if (num > TIME) {clearTimeout(timers);console.log(`%cWS连接失败，如需重连请点击【连接WebSocket】`, 'background: blue; color: #fff; padding: 8px 12px; border-radius: 3px');return;}console.log(`%cWS第${num}次断线重连中...`, 'background: red; color: #fff; padding: 8px 12px; border-radius: 3px');createWebSocket();num++}, 5000);};}function fangdou(callback, time = 500) {let timers = null;return function() {if(timers) {clearTimeout(timers);}timers = setTimeout(() => {callback.apply(this, arguments);timers = null;}, time);};}// 发送消息到 WebSocket 服务器function sendMessage() {if(!connectState) {console.log(`WS服务器未连接~`);return;} const message = prompt("Enter your message:");console.log(`发送到服务器： ${messages}`);socket.send(messages);}// 初始化 WebSocket 连接createWebSocket();</script></body></html>相关文章：
大屏模板，增加自适应（包含websocket）
1、简单的Node服务端 const WebSocket require(ws);// 创建 WebSocket 服务器 const wss new WebSocket.Server({ port: 8888 });const getHeader (protocol) > {const protocolArr protocol.split(,)const headers {};for (let i 0; i < protocolArr.length; i …...
电商系统架构设计系列（九）：如何规划和设计分库分表？
上篇文章中，我给你留了一个思考题：分库分表该如何设计？ 今天这篇文章，我们来聊一下如何规划和设计分库分表，以及要考虑哪些问题。 引言 当要解决海量数据的问题，就必须要用到分布式的存储集群了ÿ…...
从Web 2.0到Web 3.0，互联网有哪些变革？
文章目录 Web 2.0时代：用户参与和社交互动Web 3.0时代：语义化和智能化影响和展望 🎉欢迎来到Java学习路线专栏~从Web 2.0到Web 3.0，互联网有哪些变革？ ☆* o(≧▽≦)o *☆嗨~我是IT陈寒🍹✨博客主页&#x…...
QT中资源文件resourcefile的使用，使用API完成页面布局
QT中资源文件resourcefile的使用 之前添加图标的方法使用资源文件的方法创建资源文件资源文件添加前缀资源文件添加资源使用资源文件中的资源 使用API完成布局使用QHBoxLayout完成水平布局使用QVBoxLayout完成垂直布局使用QGridLayout完成网格布局 在Qt中引入资源文件好处在于他…...
2337. 移动片段得到字符串
题目描述： 给你两个字符串 start 和 target ，长度均为 n 。每个字符串 仅 由字符 ‘L’、‘R’ 和 ‘_’ 组成，其中： 字符 ‘L’ 和 ‘R’ 表示片段，其中片段 ‘L’ 只有在其左侧直接存在一个 空位 时才能向 左 移动&a…...
Java并发编程第5讲——volatile关键字（万字详解）
volatile关键字大家并不陌生，尤其是在面试的时候，它被称为“轻量级的synchronized”。但是它并不容易完全被正确的理解，以至于很多程序员都不习惯去用它，处理并发问题的时候一律使用“万能”的sychronized来解决，然而如…...
6.小程序api分类
事件监听 以on开头，监听某个事件触发，例如：wx.WindowResize事件 同步 以Sync结尾的是同步，可以通过函数返回值直接获取，例如：wx.setStorageSync 异步 需要通过函数接收调用结果，例如&#…...
什么是PPS和TOD时序？授时防护设备是什么？
介绍 PPS和TOD PPS和TOD是两种用于精确时间同步的技术，它们在许多领域都有广泛的应用，总的来说，PPS和TOD被广泛应用于各种需要高度精确时间同步的领域，包括通信、测量、测试、系统集成和计算机网络等。 一、PPS PPS（…...
推荐一款好用的开源视频播放器（免费无广告）
mpv是一个自由开源的媒体播放器，它支持多种音频和视频格式，并且具有高度可定制性。mpv的设计理念是简洁、高效和功能强大。 软件特点： 1. 开源、跨平台。可以在Windows\Linux\MacOS\BSD等系统上使用，完全免费无广告。Windows版解压…...
STM32 CubeMX （第三步Freertos中断管理和软件定时）
STM32 CubeMX STM32 CubeMX （第三步Freertos中断管理和软件定时） STM32 CubeMX一、STM32 CubeMX设置时钟配置HAL时基选择TIM1（不要选择滴答定时器；滴答定时器留给OS系统做时基）使用STM32 CubeMX 库，配置Fre…...
Java虚拟机（JVM）：堆溢出
一、概念 Java堆溢出（Java Heap Overflow）是指在Java程序中，当创建对象时，无法分配足够的内存空间来存储对象，导致堆内存溢出的情况。 Java堆是Java虚拟机中用于存储对象的一块内存区域。当程序创建对象时，…...
C语言，Linux，静态库编写方法，makefile与shell脚本的关系。
静态库编写： 编写.o文件gcc -c(小写) seqlist.c(需要和头文件、main.c文件在同一文件目录下) libs.a->去掉lib与.a剩下的为库的名称‘s’。 -ls是指库名为s。 -L库的路径。 makefile文件编写： CFLAGS-Wall -O2 -g -I ./inc/ LDFLAGS-L./lib/ -l…...
Php“牵手”淘宝商品详情页数据采集方法,淘宝API接口申请指南
淘宝天猫详情接口 API 是开放平台提供的一种 API 接口，它可以帮助开发者获取商品的详细信息，包括商品的标题、描述、图片等信息。在电商平台的开发中，详情接口API是非常常用的 API，因此本文将详细介绍详情接口 API 的使用。 一、…...
如何使用CSS实现一个全屏滚动效果（Fullpage Scroll）？
聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 实现全屏滚动效果的CSS和JavaScript示例⭐ HTML 结构⭐ CSS 样式 (styles.css)⭐ JavaScript 代码 (script.js)⭐ 实现说明⭐ 写在最后 ⭐ 专栏简介 前端入门之旅：探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦…...
Docker之Compose
目录 前言 1.1Docker Swarm与Docker Compose 1.1.1Docker Swarm 1.1.2Docker Compose 1.1.2.1 三层容器 编辑 二、YAML 2.1YAML概述 2.2注意事项 2.3Docker Compose 环境安装 2.3.1下载 三、Docker-Compose配置常用字段 四、Docker-compose常用命令 五、Docker…...
安装chromedriver 115，对应chrome版本115（经检验，116也可以使用）
目录 1. 查看Chrome浏览器的版本2. 找到对应的chromedriver3. 安装ChromeDriver 1. 查看Chrome浏览器的版本 点进这个网站查看：chrome://settings/help （真是的，上一秒还是115版本，更新后就是116版本了，好在chromedi…...
排序算法：插入排序
插入排序的思想非常简单，生活中有一个很常见的场景：在打扑克牌时，我们一边抓牌一边给扑克牌排序，每次摸一张牌，就将它插入手上已有的牌中合适的位置，逐渐完成整个排序。 插入排序有两种写法： 交…...
掌握AI助手的魔法工具：解密Prompt（提示）在AIGC时代的应用「上篇」
在当今的AIGC时代，我们面临着越来越多的人工智能技术和应用。其中一个引人注目的工具就是Prompt（提示）。它就像是一种魔法，可以让我们与AI助手进行更加互动和有针对性的对话。那么，让我们一起来了解一下Prompt…...
JMeter - 接口压力测试工具简单使用
【启动前配置】 启动JMeter前可以先配置语言和编码： 修改：E:\JMeter\apache-jmeter-5.5\bin\jmeter.properties文件中： 1.language=en # 指定语言 language=zh_CN 2.sampleresult.default.encoding=ISO-8859-1 # 指定编码 UTF-8 sampleresult.default.encoding=UTF-8 也…...
【C++入门到精通】C++入门 —— priority_queue(STL)优先队列
阅读导航 前言一、priority_queue简介1. 概念2. 特点 二、priority_queue使用1. 基本操作2. 底层结构 三、priority_queue模拟实现⭕ C代码⭕priority_queue中的仿函数 总结温馨提示 前言 ⭕文章绑定了VS平台下std::priority_queue的源码，大家可以下载了解一下&…...
静态代码扫描工具 Sonar 配置及使用
概览 Sonar 是一个用于代码质量管理的开放平台。通过插件机制，Sonar 可以集成不同的测试工具，代码分析工具，以及持续集成工具。与持续集成工具（例如 Hudson/Jenkins 等）不同，Sonar 并不是简单地把不同的代…...
docker 03(docker 容器的数据卷)
一、数据卷的概念和作用 删除后，数据也没了。 不能 数据卷 是宿主机中的一个目录或文件当容器目录和数据卷目录绑定后，对方的修改会立即同步一个数据卷可以被多个容器同时挂载 作用： 容器数据持久化 外部机器和容器间接通信 容器之间数据交换…...
【04】基础知识：typescript中的类
一、es5 对象 1、定义 类（对象） 原型链上的属性和方法会被多个实例共享。构造函数中的属性和方法不会。 // 自定义构造函数 function Person(name, age) {this.name namethis.age agethis.getInfo function() {console.log(${this.name} - ${this.…...
CCClippingNode：在游戏中实现遮罩效果、剪切效果，以涂抹糖霜为例，如何更好的实现涂抹效果，提高用户的游戏体验
CCClippingNode：在游戏中实现遮罩效果、剪切效果，以涂抹糖霜为例，如何更好的实现涂抹效果 设备/引擎：Mac（11.6）/cocos2d-x 开发工具：Xcode（13.0） 开发需求：…...
cuda gdb调试
如果cudaDeviceEnablePeerAccess函数不支持或不起作用，您仍然可以尝试其他方法来实现GPU之间的数据交换和通信。以下是一些替代方法： 通过主机内存进行数据传输： 如果GPU之间的数据交换不是非常频繁，您可以将数据从一个GPU复制到…...
【vim 学习系列文章 5 - cscope 过滤掉某些目录】
文章目录 cscope 过滤目录介绍 cscope 过滤目录介绍 第一步创建自己的cscope脚本~/.local/bin/cscope.sh，如下： function my_cscope() {CODE_PATHpwdecho "$CODE_PATH"echo "start cscope...."if [ ! -f "$CODE_PATH/cscope.…...
实验三 HBase1.2.6安装及配置
系列文章目录 文章目录 系列文章目录前言一、HBase1.2.6的安装二、HBase1.2.6的配置2.1 单机模式配置2.2 伪分布式模式配置 总结参考 前言 在安装HBase1.2.6之前，需要安装好hadoop2.7.6。 本篇文章参考：HBase2.2.2安装和编程实践指南 一、HBase1.2.6的安…...
LightDB sequence支持MAXVALUE最大值与Oracle相同
功能介绍 Oracle数据库在创建sequence的时候可以支持设置maxvalue 为9999999999999999999999999999，这样的SQL在LightDB23.3版本之前都是执行失败的。为了方便Oracle用户迁移到LightDB上，在LightDB23.3版本上，增加了sequence支持maxvalue设置…...
二、Kafka快速入门
目录 2.1 安装部署1、【单机部署】2、【集群部署】 2.2 Kafka命令行操作1、查看topic相关命令参数2、查看当前kafka服务器中的所有Topic3、创建 first topic4、查看 first 主题的详情5、修改分区数（注意：分区数只能增加，不能减少）…...
消息中间件-kafka实战-第五章-kafka重复消费、顺序消费及死信队列
目录 一、参考二、路由规则（分片规则）三、触发重复消费的场景场景一：触发rebalance问题描述可能原因实际影响参数在kafka0.10.1 之前:在kafka0.10.1之后：解决方案 场景二：服务宕机可能原因解决方案 消息幂等性 四、kaf…...
python爬虫9：实战2
python爬虫9：实战2 前言 python实现网络爬虫非常简单，只需要掌握一定的基础知识和一定的库使用技巧即可。本系列目标旨在梳理相关知识点，方便以后复习。 申明 本系列所涉及的代码仅用于个人研究与讨论，并不会对网站产生不好…...
从业务层的代码出发，去排查通用框架代码崩溃的问题
目录 1、问题说明 1.1、Release下崩溃，Debug下很难复现 1.2、用Windbg打开dump文件，发现崩溃在通用的框架代码中 2、进一步分析 2.1、使用IDA查看汇编代码尝试寻找崩溃的线索 2.2、在Windbg中查看相关变量的值 2.3、查看最近代码的修改记录&#…...
LLM预训练大型语言模型Pre-training large language models
在上一个视频中，您被介绍到了生成性AI项目的生命周期。 如您所见，在您开始启动您的生成性AI应用的有趣部分之前，有几个步骤需要完成。一旦您确定了您的用例范围，并确定了您需要LLM在您的应用程序中的工作方式，您的下…...
[Machine Learning] 损失函数和优化过程
文章目录 机器学习算法的目的是找到一个假设来拟合数据。这通过一个优化过程来实现，该过程从预定义的 hypothesis class（假设类）中选择一个假设来最小化目标函数。具体地说，我们想找到 arg min h ∈ H 1 n ∑ i 1 n ℓ ( X i…...
serialVersionUID 有何用途？如果没定义会有什么问题？
序列化是将对象的状态信息转换为可存储或传输的形式的过程。我们都知道，Java 对象是保持在 JVM 的堆内存中的，也就是说，如果 JVM 堆不存在了，那么对象也就跟着消失了。 而序列化提供了一种方案，可以让你在即使 JVM 停机…...
C# OpenCvSharp DNN 二维码增强 超分辨率
效果 项目 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using OpenCvSharp; using OpenCvSharp.Dnn; using OpenCvSh…...
this.$refs使用方法
深入理解和使用this.$refs——Vue.js的利器 Vue.js是一个流行的JavaScript框架，用于构建交互性强大的用户界面。在Vue.js中，this.$refs是一个强大的特性，允许你直接访问组件中的DOM元素或子组件实例。本教程将带你深入了解this.$refs的使用方…...
Ohio主题 - 创意组合和代理机构WordPress主题
Ohio主题是一个精心制作的多用途、简约、华丽、多功能的组合和创意展示主题，具有敏锐的用户体验，您需要构建一个现代且实用的网站，并开始销售您的产品和服务。它配备了最流行的WordPress页面构建器 WPBakery Page Builder（以前称为…...
mysql 、sql server trigger 触发器
sql server mySQL create trigger 触发器名称 { before | after } [ insert | update | delete ] on 表名 for each row 触发器执行的语句块## 表名： 表示触发器监控的对象 ## before | after : 表示触发的时间，before : 表示在事件之前触发&am…...
自然语言处理从入门到应用——LangChain：索引（Indexes）-[检索器（Retrievers）]
分类目录：《自然语言处理从入门到应用》总目录 检索器（Retrievers）是一个通用的接口，方便地将文档与语言模型结合在一起。该接口公开了一个get_relevant_documents方法，接受一个查询（字符串）并返…...
春秋云境：CVE-2022-0543（Redis 沙盒逃逸漏洞）
目录 一、i春秋题目 二、CVE-2022-0543：（redis沙盒逃逸） 漏洞介绍： 漏洞复现： 一、i春秋题目 靶标介绍： Redis 存在代码注入漏洞，攻击者可利用该漏洞远程执行代码。 进入题目：…...
关于uniapp组件的坑
关于uniapp组件的坑 我有一个组件写的没什么问题,但是报下面这个错误 is not found in path “components/xxx/xxxx” (using by “components/yyy/yyy”) 最后经过排除发现命名需要驼峰命名法 我原本组件命名: 文件夹名 test_tttt 文件名 test_tttt.vue 不行 最后改成文件…...
AIGC与软件测试的融合
一、ChatGPT与AIGC 生成式人工智能——AIGC（Artificial Intelligence Generated Content），是指基于生成对抗网络、大型预训练模型等人工智能的技术方法，通过已有数据的学习和识别，以适当的泛化能力生成相关内容的技术。…...
滑动验证码-elementui实现
使用elementui框架实现 html代码 <div class"button-center"><el-popoverplacement"top":width"imgWidth"title"安全验证"trigger"manual"v-model"popoverVisible"hide"popoverHide"show&quo…...
ubuntu 20.04 安装 高版本cuda 11.7 和 cudnn最新版
一、安装显卡驱动 参考另一篇文章：Ubuntu20.04安装Nvidia显卡驱动教程_ytusdc的博客-CSDN博客 二、安装CUDA 英伟达官网（最新版）：CUDA Toolkit 12.2 Update 1 Downloads | NVIDIA Developer CUDA历史版本下载地址：C…...
svg图片如何渲染到页面，以及svg文件的上传
svg图片渲染到页面的几种方式 背景🟡require.context获取目录下的所有文件🟡方式1: 直接在html中渲染🟡方式: 发起ajax请求，获取SVG文件 背景 需要实现从本地目录下去获取所有的svg图标进行预览，将选中的图片显示在另…...
GPT-LLM-Trainer：如何使用自己的数据轻松快速地微调和训练LLM
一、前言 想要轻松快速地使用您自己的数据微调和培训大型语言模型（LLM）？我们知道训练大型语言模型具有挑战性并需要耗费大量计算资源，包括收集和优化数据集、确定合适的模型及编写训练代码等。今天我们将介绍一种实验性新方法&am…...
深入理解ForkJoin
任务类型 线程池执行的任务可以分为两种：CPU密集型任务和IO密集型任务。在实际的业务场景中，我们需要根据任务的类型来选择对应的策略，最终达到充分并合理地使用CPU和内存等资源，最大限度地提高程序性能的目的。 CPU密集型任务 …...
Spring5学习笔记—AOP编程
✅作者简介：大家好，我是Leo，热爱Java后端开发者，一个想要与大家共同进步的男人😉😉 🍎个人主页：Leo的博客 💞当前专栏： Spring专栏 ✨特色专栏： M…...
适用于 Docker 用户的 kubectl
适用于 Docker 用户的 kubectl 你可以使用 Kubernetes 命令行工具 kubectl 与 API 服务器进行交互。如果你熟悉 Docker 命令行工具， 则使用 kubectl 非常简单。但是，Docker 命令和 kubectl 命令之间有一些区别。以下显示了 Docker 子命令， 并…...