vue大屏可视化：4k带鱼屏、4k、2k、1920*1080、笔记本 全适配方案

 本方案采用的是媒体查询的方法来实现的

css媒体查询书写（可按照自己需求新增）不同尺寸下显示不同的文字大小图片大小等：

javascript">// 4K 带鱼屏
@media screen and (max-width: 3840px) and (max-height: 1080px) {}
// 4K
@media screen and (max-width: 3840px) and (min-height: 1081px) {}
// 2K
@media screen and (max-width: 2560px) {}
// 全高清屏幕
@media screen and (max-width: 1920px) {}
// 14寸笔记本
@media screen and (max-width: 1366px) {}

 页面ecahrts字体大小和样式采用计算属性计算：

javascript">// 计算样式
const computedSize = computed(() => {let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;let objFun = {};// 14寸笔记本if (clientWidth <= 1366) {console.log("14寸笔记本")objFun.fontSize = 12; //文字大小objFun.symbolSize = 3; //节点大小objFun.borderWidth = 1; //线条宽度objFun.itemWidth = 12; //legend方块宽度objFun.itemHeight = 5; //legend方块高度objFun.padding = [0, 50, 0, 0]; //右侧单位距离右侧距离objFun.grid = {containLabel: true,bottom: "6%",top: "25%",left: "2%",right: "2%",};} // 全高清屏幕else if (clientWidth <= 1920) {console.log("全高清屏幕")objFun.fontSize = 15; //文字大小objFun.symbolSize = 5; //节点大小objFun.borderWidth = 2; //线条宽度objFun.itemWidth = 20; //legend方块宽度objFun.itemHeight = 8; //legend方块高度objFun.padding = [0, 55, 0, 0]; //右侧单位距离右侧距离objFun.grid = {containLabel: true,bottom: "6%",top: "25%",left: "2%",right: "2%",};}// 2Kelse if (clientWidth <= 2560) {console.log("2K")objFun.fontSize = 18; //文字大小objFun.symbolSize = 10; //节点大小objFun.borderWidth = 3; //线条宽度objFun.itemWidth = 25; //legend方块宽度objFun.itemHeight = 10; //legend方块高度objFun.padding = [0, 50, 0, 0]; //右侧单位距离右侧距离objFun.grid = {containLabel: true,bottom: "6%",top: "20%",left: "2%",right: "2%",};}// 4K 带鱼屏else if (clientWidth <= 3840 && clientHeight <= 1080) {console.log("4K 带鱼屏")objFun.fontSize = 20; //文字大小objFun.symbolSize = 15; //节点大小objFun.borderWidth = 5; //线条宽度objFun.itemWidth = 24; //legend方块宽度objFun.itemHeight = 15; //legend方块高度objFun.padding = [0, 60, 0, 0]; //右侧单位距离右侧距离objFun.grid = {containLabel: true,bottom: "6%",top: "28%",left: "2%",right: "2%",};}// 4Kelse if (clientWidth <= 3840 && clientHeight >= 1080) {console.log("4K尺寸")objFun.fontSize = 30; //文字大小objFun.symbolSize = 20; //节点大小objFun.borderWidth = 5; //线条宽度objFun.itemWidth = 40; //legend方块宽度objFun.itemHeight = 20; //legend方块高度objFun.padding = [0, 150, 0, 0]; //右侧单位距离右侧距离objFun.grid = {containLabel: true,bottom: "6%",top: "18%",left: "2%",right: "2%",};} return objFun;
});

初始化echarts的时候直接使用：

javascript">// 初始化echarts
function initChart(myData8, tss, dcl) {const chartDom = document.getElementById('echarts2');chart = proxy.$echarts.init(chartDom);// let ycl = [20, 60, 65, 20, 10, 60, 80, 25, 40, 60, 20, 40];let option = {// backgroundColor: "#041D3F",tooltip: {trigger: "axis",axisPointer: {lineStyle: {color: {type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: "rgba(0, 255, 233,0)",},{offset: 0.5,color: "rgba(255, 255, 255,1)",},{offset: 1,color: "rgba(0, 255, 233,0)",},],global: false,},},},textStyle: {color: "#fff",fontSize: computedSize.value.fontSize, // 设置字体大小},confine: true, // 限制溢出屏幕外backgroundColor: "rgba(0,0,0,0.5)", // 设置背景颜色padding: [10, 10, 10, 10], // 设置方框的内边距},grid: computedSize.value.grid,legend: {show: true,right: 0,top: 0,itemWidth: computedSize.value.itemWidth,itemHeight: computedSize.value.itemHeight,icon: 'rect',// itemGap: 20, // 调整图例项之间的水平间距textStyle: {color: '#fff',fontSize: computedSize.value.fontSize,// 设置上下居中对齐align: 'center',// verticalAlign: 'middle',// color: "#B6DCF5",// padding: [0, 0, 0, 4],},},xAxis: {data: myData8,axisLabel: {interval: 0,show: true,fontSize: computedSize.value.fontSize,color: "#B6DCF5",},axisLine: {show: true,lineStyle: {show: true,color: "rgba(54, 153, 255, .4)",},},axisTick: {show: false,},},yAxis: [{name: "单位：KJ",type: "value",nameTextStyle: {color: "#B6DCF5",fontSize: computedSize.value.fontSize,align: "center",padding: [0, 0, 0, 0],},// splitNumber: 5,axisLabel: {show: true,fontSize: computedSize.value.fontSize,color: "#B6DCF5",},axisLine: {show: false,lineStyle: {color: "#7FD6FF",},},axisTick: {show: false,},splitLine: {lineStyle: {color: "rgba(54, 153, 255, .4)",type: "dashed",},},}, {name: "单位：吨",// offset: -25,type: "value",nameLocation: "end",nameGap: 10, // 控制名称和轴之间的距离nameTextStyle: {color: "#B6DCF5",fontSize: computedSize.value.fontSize,align: "center",padding: computedSize.value.padding,},// splitNumber: 5,axisLabel: {show: true,fontSize: computedSize.value.fontSize,color: "#B6DCF5",},axisLine: {show: false,lineStyle: {color: "#7FD6FF",},},axisTick: {show: false,},splitLine: {lineStyle: {color: "rgba(54, 153, 255, .4)",type: "dashed",},},}],series: [{name: "能耗",type: "line",showSymbol: true,symbolSize: computedSize.value.symbolSize, //方块大小symbol: "circle",lineStyle: {normal: {color: "#FF8E3C",width: computedSize.value.borderWidth, //线条宽度},},itemStyle: {color: "#FF8E3C",// borderColor: "#fff",borderWidth: 2,},data: tss, // 折线图的数据},{name: "吞吐量",type: "line",showSymbol: true,symbol: "circle",symbolSize: computedSize.value.symbolSize,lineStyle: {normal: {color: "#00A0E9",width: computedSize.value.borderWidth, //线条宽度},},itemStyle: {color: "#00A0E9",// borderColor: "#fff",borderWidth: 2,},data: dcl, // 折线图的数据},// {//     name: "已处理",//     type: "line",//     showSymbol: true,//     symbolSize: 8,//     symbol: "circle",//     lineStyle: {//         normal: {//             color: "#02D6B0",//         },//     },//     itemStyle: {//         color: "#02D6B0",//         borderColor: "#fff",//         borderWidth: 2,//     },//     data: ycl, // 折线图的数据// },],};// 使用刚指定的配置项和数据显示图表。chart.setOption(option);window.addEventListener('resize', function () {chart.resize();});}

另外可以加上 监听到页面尺寸变化后刷新页面：

javascript">onMounted(() => {window.addEventListener("resize", () => {window.location.reload();});
})

vue+echarts其中一个组件完整写法：

javascript">// 装卸能耗分析
<template><div class="all"><div class="all_title"><span class="all_title_txt">装卸能耗分析</span><img class="dateBg" src="../../assets/images/dateBg.png" alt="" oncontextmenu="return false"draggable="false"></div><div class="all_bod" id="echarts2"></div></div>
</template><script setup name="box8">
const { proxy } = getCurrentInstance();
import { ref, reactive, watch, onMounted, onUnmounted, nextTick } from "vue";
// let currentIndex = ref(0)
let chart = ref(null);
let timer = ref(null);const props = defineProps({allData: {type: Object,required: true}
});// 监听 allData 的变化
watch(() => props.allData, (newVal) => {console.log("echarts8接收到值", newVal)let myData8 = [];let tss = [];let dcl = [];// let myData8 = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"];// let tss = [60, 80, 20, 40, 60, 40, 50, 50, 60, 32, 52, 55, 60];// let dcl = [40, 55, 50, 60, 30, 20, 60, 30, 20, 10, 30, 20];newVal.forEach(item => {myData8.push(item.time)tss.push(item.energyConsumption)dcl.push(item.thruput)})setTimeout(() => {initChart(myData8, tss, dcl)}, 500)});// window.addEventListener('resize', function () {
//     // const innerWidth = window.innerWidth
//     // const innerHeight = window.innerHeight
//     // console.log("resize", computedSize.value.fontSize)
//     chart.resize();
// });onUnmounted(() => {if (timer.value) clearInterval(timer.value);
})// 计算样式
const computedSize = computed(() => {let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;let objFun = {};// 14寸笔记本if (clientWidth <= 1366) {console.log("14寸笔记本")objFun.fontSize = 12; //文字大小objFun.symbolSize = 3; //节点大小objFun.borderWidth = 1; //线条宽度objFun.itemWidth = 12; //legend方块宽度objFun.itemHeight = 5; //legend方块高度objFun.padding = [0, 50, 0, 0]; //右侧单位距离右侧距离objFun.grid = {containLabel: true,bottom: "6%",top: "25%",left: "2%",right: "2%",};} // 全高清屏幕else if (clientWidth <= 1920) {console.log("全高清屏幕")objFun.fontSize = 15; //文字大小objFun.symbolSize = 5; //节点大小objFun.borderWidth = 2; //线条宽度objFun.itemWidth = 20; //legend方块宽度objFun.itemHeight = 8; //legend方块高度objFun.padding = [0, 55, 0, 0]; //右侧单位距离右侧距离objFun.grid = {containLabel: true,bottom: "6%",top: "25%",left: "2%",right: "2%",};}// 2Kelse if (clientWidth <= 2560) {console.log("2K")objFun.fontSize = 18; //文字大小objFun.symbolSize = 10; //节点大小objFun.borderWidth = 3; //线条宽度objFun.itemWidth = 25; //legend方块宽度objFun.itemHeight = 10; //legend方块高度objFun.padding = [0, 50, 0, 0]; //右侧单位距离右侧距离objFun.grid = {containLabel: true,bottom: "6%",top: "20%",left: "2%",right: "2%",};}// 4K 带鱼屏else if (clientWidth <= 3840 && clientHeight <= 1080) {console.log("4K 带鱼屏")objFun.fontSize = 20; //文字大小objFun.symbolSize = 15; //节点大小objFun.borderWidth = 5; //线条宽度objFun.itemWidth = 24; //legend方块宽度objFun.itemHeight = 15; //legend方块高度objFun.padding = [0, 60, 0, 0]; //右侧单位距离右侧距离objFun.grid = {containLabel: true,bottom: "6%",top: "28%",left: "2%",right: "2%",};}// 4Kelse if (clientWidth <= 3840 && clientHeight >= 1080) {console.log("4K尺寸")objFun.fontSize = 30; //文字大小objFun.symbolSize = 20; //节点大小objFun.borderWidth = 5; //线条宽度objFun.itemWidth = 40; //legend方块宽度objFun.itemHeight = 20; //legend方块高度objFun.padding = [0, 150, 0, 0]; //右侧单位距离右侧距离objFun.grid = {containLabel: true,bottom: "6%",top: "18%",left: "2%",right: "2%",};}return objFun;
});// 初始化echarts
function initChart(myData8, tss, dcl) {const chartDom = document.getElementById('echarts2');let chart = proxy.$echarts.init(chartDom);// let ycl = [20, 60, 65, 20, 10, 60, 80, 25, 40, 60, 20, 40];let option = {// backgroundColor: "#041D3F",tooltip: {trigger: "axis",axisPointer: {lineStyle: {color: {type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: "rgba(0, 255, 233,0)",},{offset: 0.5,color: "rgba(255, 255, 255,1)",},{offset: 1,color: "rgba(0, 255, 233,0)",},],global: false,},},},textStyle: {color: "#fff",fontSize: computedSize.value.fontSize, // 设置字体大小},confine: true, // 限制溢出屏幕外backgroundColor: "rgba(0,0,0,0.5)", // 设置背景颜色padding: [10, 10, 10, 10], // 设置方框的内边距},grid: computedSize.value.grid,legend: {show: true,right: 0,top: 0,itemWidth: computedSize.value.itemWidth,itemHeight: computedSize.value.itemHeight,icon: 'rect',// itemGap: 20, // 调整图例项之间的水平间距textStyle: {color: '#fff',fontSize: computedSize.value.fontSize,// 设置上下居中对齐align: 'center',// verticalAlign: 'middle',// color: "#B6DCF5",// padding: [0, 0, 0, 4],},},xAxis: {data: myData8,axisLabel: {interval: 0,show: true,fontSize: computedSize.value.fontSize,color: "#B6DCF5",},axisLine: {show: true,lineStyle: {show: true,color: "rgba(54, 153, 255, .4)",},},axisTick: {show: false,},},yAxis: [{name: "单位：KJ",type: "value",nameTextStyle: {color: "#B6DCF5",fontSize: computedSize.value.fontSize,align: "center",padding: [0, 0, 0, 0],},// splitNumber: 5,axisLabel: {show: true,fontSize: computedSize.value.fontSize,color: "#B6DCF5",},axisLine: {show: false,lineStyle: {color: "#7FD6FF",},},axisTick: {show: false,},splitLine: {lineStyle: {color: "rgba(54, 153, 255, .4)",type: "dashed",},},}, {name: "单位：吨",// offset: -25,type: "value",nameLocation: "end",nameGap: 10, // 控制名称和轴之间的距离nameTextStyle: {color: "#B6DCF5",fontSize: computedSize.value.fontSize,align: "center",padding: computedSize.value.padding,},// splitNumber: 5,axisLabel: {show: true,fontSize: computedSize.value.fontSize,color: "#B6DCF5",},axisLine: {show: false,lineStyle: {color: "#7FD6FF",},},axisTick: {show: false,},splitLine: {lineStyle: {color: "rgba(54, 153, 255, .4)",type: "dashed",},},}],series: [{name: "能耗",type: "line",showSymbol: true,symbolSize: computedSize.value.symbolSize, //方块大小symbol: "circle",lineStyle: {normal: {color: "#FF8E3C",width: computedSize.value.borderWidth, //线条宽度},},itemStyle: {color: "#FF8E3C",// borderColor: "#fff",borderWidth: 2,},data: tss, // 折线图的数据},{name: "吞吐量",type: "line",showSymbol: true,symbol: "circle",symbolSize: computedSize.value.symbolSize,lineStyle: {normal: {color: "#00A0E9",width: computedSize.value.borderWidth, //线条宽度},},itemStyle: {color: "#00A0E9",// borderColor: "#fff",borderWidth: 2,},data: dcl, // 折线图的数据},// {//     name: "已处理",//     type: "line",//     showSymbol: true,//     symbolSize: 8,//     symbol: "circle",//     lineStyle: {//         normal: {//             color: "#02D6B0",//         },//     },//     itemStyle: {//         color: "#02D6B0",//         borderColor: "#fff",//         borderWidth: 2,//     },//     data: ycl, // 折线图的数据// },],};// 使用刚指定的配置项和数据显示图表。chart.setOption(option);let index = 0; // 初始化索引 // 使用定时器定时更新 tooltip 数据if (timer.value) clearInterval(timer.value);timer.value = setInterval(() => {chart.dispatchAction({type: "showTip", // 触发 tooltip 显示seriesIndex: 0, // 触发 tooltip 的系列索引dataIndex: index, // 触发 tooltip 的数据索引});index = (index + 1) % myData8.length; // 更新索引，循环显示数据}, 2000); // 每隔 2 秒更新一次 // 鼠标移入暂停轮播chart.on("mouseover", () => {clearInterval(timer.value);timer.value = null;});// 鼠标移出继续轮播chart.on("globalout", () => {if (timer.value) { clearInterval(timer.value); }timer.value = setInterval(() => {chart.dispatchAction({type: "showTip", // 触发 tooltip 显示seriesIndex: 0, // 触发 tooltip 的系列索引dataIndex: index, // 触发 tooltip 的数据索引});index = (index + 1) % myData8.length; // 更新索引，循环显示数据}, 2000); // 每隔 2 秒更新一次});window.addEventListener('resize', function () {chart.resize();});}</script><style lang="scss" scoped>
* {margin: 0;padding: 0;box-sizing: border-box;
}img {-webkit-user-drag: none;user-drag: none;user-select: none;-ms-user-select: none;
}.all {display: flex;flex-flow: column;justify-content: space-between;width: 100%;height: 100%;// border: 1px solid red;// background-color: pink;.all_title {display: flex;align-items: center;justify-content: space-between;// padding: 0 40px;padding-right: 20px;width: 100%;// height: 44px;color: #A5D8FC;font-size: 16px;background: url("../../assets/images/smallTitBg.png") no-repeat;background-size: 100% 100%;// span {//     transform: translateY(-8px);// }.dateBg {// width: 25px;// height: 25px;cursor: pointer;&:hover {opacity: .8;}}}.all_bod {display: flex;flex-flow: column;width: 100%;// height: calc(100% - 44px);}}// 4K 带鱼屏
@media screen and (max-width: 3840px) and (max-height: 1080px) {.all_title_txt {font-size: 35px;transform: translate(80px, -20px);}.today_tit {font-size: 30px;}.all_title {height: 80px;}.all_bod {height: calc(100% - 80px) !important;}.dateBg {width: 45px;height: 45px;transform: translateY(-10px);}
}// 4K
@media screen and (max-width: 3840px) and (min-height: 1081px) {.all_title_txt {font-size: 50px;transform: translate(80px, -20px);}.today_tit {font-size: 50px;}.all_title {height: 100px;}.all_bod {height: calc(100% - 100px) !important;}.dateBg {width: 55px;height: 55px;transform: translateY(-15px);}
}// 2K
@media screen and (max-width: 2560px) {.all_title_txt {font-size: 35px;transform: translate(70px, -20px);}.today_tit {font-size: 32px;}.all_title {height: 100px;}.all_bod {height: calc(100% - 100px) !important;}.dateBg {width: 40px;height: 40px;transform: translateY(-15px);}
}// 全高清屏幕
@media screen and (max-width: 1920px) {.all_title_txt {font-size: 16px;transform: translate(30px, -10px);}.today_tit {font-size: 16px;}.all_title {height: 50px;}.all_bod {height: calc(100% - 50px) !important;}.dateBg {width: 25px;height: 25px;transform: translateY(-5px);}
}// 14寸笔记本
@media screen and (max-width: 1366px) {.all_title_txt {font-size: 14px;transform: translate(30px, -10px);}.today_tit {font-size: 16px;}.all_title {height: 50px;}.all_bod {height: calc(100% - 50px) !important;}.dateBg {width: 20px;height: 20px;transform: translateY(-5px);}
}
</style>


http://www.ppmy.cn/news/1520632.html

相关文章

计算机网络（八股文）

计算机网络（八股文）

这里写目录标题 计算机网络一、网络分层模型1. TCP/IP四层架构和OSI七层架构⭐️⭐️⭐️⭐️⭐️2. 为什么网络要分层&#xff1f;⭐️⭐️⭐️3. 各层都有那些协议&#xff1f;⭐️⭐️⭐️⭐️ 二、HTTP【重要】1. http状态码&#xff1f;⭐️⭐️⭐️2. 从输入URL到页面展示…
阅读更多...
基于 web教学管理系统设计与实现

基于 web教学管理系统设计与实现

3 总体设计 3.1 系统软件体系结构 系统采用B/S结构&#xff0c;统一管理数据库和Web服务器。在这种结构下&#xff0c;用户界面完全通过WWW浏览器实现&#xff0c;一部分事务逻辑在前端实现&#xff0c;但是主要事务逻辑在服务器端实现&#xff0c;形成所谓3-tier结构,第一…
阅读更多...
安装Selenium进行web⾃动化测试

安装Selenium进行web⾃动化测试

目录 驱动安装驱动管理工具selenium安装selenium驱动浏览器的⼯作原理自动化测试常⽤函数1. 元素定位1.1. find_element 的基本用法1.2. 常见的 find_element 定位方式1.3. find_element 的使用注意事项1.4. find_element 的进阶用法 2. 操作测试对象3. 窗口操作4. 弹窗处理5. …
阅读更多...
Hive整合MySQL

Hive整合MySQL

目录 Hive整合MySQL 安装MySQL 1&#xff09;上传MySQL安装包以及MySQL驱动jar包 2&#xff09;解压MySQL安装包 3&#xff09;卸载系统自带的mariadb 4&#xff09;安装MySQL依赖 5&#xff09;安装mysql-client 6&#xff09;安装mysql-server 7&#xff09;启动MySQ…
阅读更多...
Maven与Gradle差异

Maven与Gradle差异

作为Java 开发者&#xff0c;你平时用 Maven 还是 Gradle&#xff1f; 我一直用的都是 Maven&#xff0c;但是前几天做了一个小项目&#xff0c;用的是 Gradle&#xff0c;因工作需要就去了解了Gradle的相关信息。 直到看到 Spring 和 Spring Boot 都从 Maven 切换到 Gradle了…
阅读更多...
IPSec 参数

IPSec 参数

IPSec抗重放&#xff1a; 抗重放窗口&#xff1a; ChatGPT 说&#xff1a; ChatGPT 在 IPSec&#xff08;Internet Protocol Security&#xff09;中&#xff0c;“抗重放”机制是一种用于防止重放攻击的安全功能。重放攻击是一种攻击形式&#xff0c;攻击者捕获合法的网络通…
阅读更多...
大数据技术之Flume 参数调优（12）

大数据技术之Flume 参数调优（12）

目录 1. Source 调优 增加 Source 个数 调整 batchSize 参数 2. Channel 调优 选择 Channel 类型 配置 dataDirs 参数 设置 Capacity 和 transactionCapacity 参数 3. Sink 调优 增加 Sink 个数 调整 batchSize 参数 4. Flume 的事务机制 事务处理 5. 数据丢失与重…
阅读更多...
Linux中的编译器gcc/g++

Linux中的编译器gcc/g++

目录 一、gcc与g的区别 1.gcc编译器使用 2.g编译器使用 二、gcc/g编译器编译源文件过程 1.预处理 2.编译 3.汇编 4.链接 三、静态库和动态库 1.库中的头文件作用 2.静态库 3.动态库 四、gcc编译器的一些选项命令 一、gcc与g的区别 gcc用于编译C语言代码&#xff…
阅读更多...
Power Automate向Power Apps传Table数据

Power Automate向Power Apps传Table数据

Flow返回查询的数据表并返回Apps 场景介绍代码开发Power Automate开发数据库Power Automate调用存储过程 Power Apps开发代码开发 测试 场景介绍 我们通常会使用Flow 查询数据表然后Apps端将表中的数据显示出来&#xff0c;我们怎么来传呢&#xff0c;它自带的response for Po…
阅读更多...
揭秘GLM-130B爆火秘诀：颠覆性自回归填空和二维位置编码的训练黑科技

揭秘GLM-130B爆火秘诀：颠覆性自回归填空和二维位置编码的训练黑科技

GLM&#xff08;通用语言模型&#xff09;的训练过程确实复杂&#xff0c;尤其是涉及到其独特的预训练目标和架构调整。让我来详细解释一下GLM的训练过程。 1. 模型架构简介 GLM-130B 是基于 Transformer 架构的双语&#xff08;中文和英文&#xff09;语言模型&#xff0c;拥…
阅读更多...
仕考网：应届生考公务员的优势

仕考网：应届生考公务员的优势

应届生报考公职存在显著优势&#xff0c;建议大家充分利用这一身份&#xff1a; 1.政策优惠 在不缴纳社保的前提下&#xff0c;应届毕业生可在两年内利用此身份参与各类公职考试。国考及省考中&#xff0c;大量岗位专为应届生设置&#xff0c;其中国考约有三分之一的职位仅限…
阅读更多...
解除本地Git仓库与远程仓库关联

解除本地Git仓库与远程仓库关联

清除Git凭据缓存 Git在本地会缓存你的认证信息&#xff0c;以便在后续操作中自动使用。你可以通过以下步骤来清除这些缓存的凭据&#xff1a; 对于Windows用户&#xff1a; 打开“控制面板”并选择“凭据管理器”&#xff08;Credential Manager&#xff09;。在“Windows凭据…
阅读更多...
C#如何使用外部别名Extern alias

C#如何使用外部别名Extern alias

说到 extern 关键字&#xff0c;只是很简单告诉大家用来做区分两个不同 dll 有相同的命名空间和类&#xff0c;可以使用这个关键字。 在遇到了存在两个 dll 都有相同的命名空间&#xff0c;而且有相同的类的时候&#xff0c;如何同时使用这两个 dll 的类。 这里有两个库 Jall…
阅读更多...
通俗易懂理解Java枚举类

通俗易懂理解Java枚举类

什么是枚举 一组常量。 比如一年的 4 个季节&#xff0c;一年的 12 个月份&#xff0c;一个星期的 7 天&#xff0c;方向有东南西北等。 Java 枚举类使用 enum 关键字来定义&#xff0c;各个常量使用逗号 , 来分割。 例如定义一个颜色的枚举类。 enum Color { RED, GREEN, …
阅读更多...
C++菜鸟教程 - 从入门到精通 第一节

C++菜鸟教程 - 从入门到精通 第一节

一.C简介 C 是一种编程语言&#xff0c;它是由 Bjarne Stroustrup 于 1979 年在贝尔实验室开始设计开发的。C 进一步扩充和完善了 C 语言&#xff0c;是一种面向对象的程序设计语言。C 可运行于多种平台上&#xff0c;如 Windows、MAC 操作系统以及 UNIX 的各种版本。 C 是一种…
阅读更多...
MongoDB之MongoDB Compass工具

MongoDB之MongoDB Compass工具

MongoDB Compass 是 MongoDB 官方提供的一款图形化用户界面 (GUI) 工具&#xff0c;用于与 MongoDB 数据库进行交互和管理。Compass 提供了丰富的功能&#xff0c;能够帮助开发者、数据库管理员以及数据分析师轻松管理和分析 MongoDB 数据。以下是对 MongoDB Compass 的详细介绍…
阅读更多...
Go语言 Go程基础

Go语言 Go程基础

本篇文章主要为Go语言 Go程基础内容介绍及代码示例。 目录 并发与并行 Go程介绍 简单go程示例 匿名函数写法 启动多个子go进程 总结 并发与并行 并发&#xff1a;电脑同时听歌&#xff0c;看小说&#xff0c;看电影。cpu根据时间片进行划分&#xff0c;交替执行这个三个…
阅读更多...
Windows安装docker，启动ollama运行open-webui使用AIGC大模型写周杰伦歌词

Windows安装docker，启动ollama运行open-webui使用AIGC大模型写周杰伦歌词

Windows安装docker&#xff0c;启动ollama运行open-webui使用AIGC大模型写周杰伦歌词 1、下载docker的Windows版本。 docker下载地址&#xff1a; https://docs.docker.com/desktop/install/windows-install/https://docs.docker.com/desktop/install/windows-install/ 2、设…
阅读更多...
java基础知识-JVM知识详解

java基础知识-JVM知识详解

一、JVM内存结构 Java虚拟机（JVM）的内存结构主要分为几个不同的区域，每个区域都有其特定的目的和功能。以下是JVM内存结构的主要组成部分： 先看一下总体的结构图 程序计数器（Program Counter Register） 这是一个较小的内存块，用于存储当前线程所执行的字节码指令的地址…
阅读更多...
tomato靶机通关攻略

tomato靶机通关攻略

主机发现 用kali去扫描端口&#xff0c;发现有3个开放端口 访问网站 在kali里面进行目录扫描&#xff0c;找到一个antibot_image 找到一个/antibot_image/ 目录&#xff0c;进而找到/antibots/目录 发现可能存在文件包含 页面通过image传参查看passwd文件 页面通过image传参查…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站