2024年一带一路金砖技能大赛之大数据容器云开发

10.31备赛准备

C模块,大数据应用开发

1.前端Vue----请求服务端api接口json数据-----展示/图表
2.Node.js实现后端开发,为前端vue提供接口数据
3.部署在docker中

官方技能需求

在这里插入图片描述

创建vue框架项目

1、安装node.js(https://nodejs.org/zh-cn/download)下载安装windows版64.msi文件,安装(提示:不要安装到C盘或带中文的目录)安装完毕打开cmd命令窗口,输入:node -vnpm -v2、升级或更新相关内容:npm install express --registry=https://registry.npm.taobao.orgnpm install -g nodenpm install -g npmnpm install -g cnpm --registry=https://registry.npm.taobao.org3、安装vue-cli脚手架工具:npm install -g @vue/cli如果不行使用:cnpm install -g @vue/cli安装完毕后输入: vue -V  查看版本号,必须是4.5.X以上版本如果已经安装过但是版本过低,可以使用:npm update –g @vue/cli卸载命令:npm uninstall -g vue-cli4、创建vue3项目:进入你放项目的目录(最好是英文):cd xxxxvue create 项目名5、启动项目:cd 进入项目文件夹下npm run serve6、使用Vscode打开项目,自己去百度看下项目中的目录说明二、通过vite创建vue框架

echarts官网项目实例

官网:https://echarts.apache.org/examples/zh/index.html
在这里插入图片描述

  • 需要理解并将模版熟练的记下来,特别是小细节(标题、图上显示数据、是实线还是虚线)等等。

  • 需要导入并且注册,vue项目

在这里插入图片描述

目标突破1:熟悉各类图标的可视化配置

官方指定要求用echarts库来进行数据可视化处理,在第一个星期,首要目标还是清楚熟练的掌握各种可视化图的配置,把我细节,会调会用。

  • 1.柱状图
<template><div id='line7' style="width: 800px; height: 600px;">创建我的图表</div>
</template><script>
import { onMounted } from 'vue';
import * as echarts from 'echarts';export default {name: 'HelloWorld',setup() {onMounted(() => {let dom7 = document.getElementById('line7'); // 获取图表的容器let chart = echarts.init(dom7); // 初始化图表// 图表的配置选项let option = {title: {text: '图表的标题', // 标题文本x: 'center', // 标题位置textStyle: {color: '#ff0000', // 标题颜色fontSize: 20 // 标题字体大小}},xAxis: {type: 'category', // X轴为分类轴data: ['a', 'v', 'g', 'q', 'y', 'i'] // X轴的分类数据},yAxis: {type: 'value' // Y轴为数值轴},series: [{type: 'bar', // 图表类型为柱状图data: [91, 60, 77, 54, 36, 58], // 柱状图的数据label: {show: true, // 显示标签position: 'top', // 标签显示在柱子顶部color: '#000' // 标签颜色},itemStyle: {// 修改每个柱子的颜色color: function(params) {// params.dataIndex 可以获取当前柱子的索引switch (params.dataIndex) {case 0: return '#ff0000'; // 第一根柱子红色case 1: return '#00ff00'; // 第二根柱子绿色case 2: return '#0000ff'; // 第三根柱子蓝色default: return '#cccccc'; // 其他柱子为灰色}}}}]};// 设置图表的配置项chart.setOption(option);});}
}
</script><style>
/* 在此处添加组件的样式 */
</style>

其中运行效果如下:
在这里插入图片描述

涵盖了柱状图的基础配置

  • 2.折线图
<template><div id='line3' style="width: 800px; height: 600px;">创建我的图表</div><!-- 一定要有宽和高 -->
</template><script>
// 导入资源和所需的库
import { onMounted } from 'vue';
import * as echarts from 'echarts';export default {name: 'Linechart',setup() {onMounted(() => {let dom3 = document.getElementById('line3'); // 获取图表显示的内容let chart = echarts.init(dom3); // 将容器初始化为可以画图表的容器// 配置图表选项let option = {title: {text: '多条折线图示例', // 图表的标题文本x: 'center', // 标题水平居中textStyle: {color: '#ff0000',fontSize: 30}},legend: {orient: 'vertical', // 图例方向right: '1%', // 图例位置top: '20%', // 图例位置textStyle: {color: 'black' // 图例文本颜色}},xAxis: {type: 'category', // x 轴类型为分类轴data: ['李文浩', 'aa', 'uu', 'bb', 'ww', 'qq'] // X 轴数据},yAxis: {type: 'value' // y 轴类型为数值型},series: [{name: '数据系列1', // 系列名称type: 'line',data: [99, 66, 55, 75, 98, 55], // 第一条折线的数据label: {show: true // 显示数据标签},lineStyle: { // 设置线条样式type: 'dashed', // 虚线color: '#ff0000' // 颜色}},{name: '数据系列2', // 系列名称type: 'line',data: [80, 92, 70, 85, 90, 75], // 第二条折线的数据label: {show: true},lineStyle: {type: 'solid', // 实线color: '#00ff00' // 颜色}},{name: '数据系列3', // 系列名称type: 'line',data: [50, 70, 90, 60, 85, 65], // 第三条折线的数据label: {show: true},lineStyle: {type: 'dotted', // 点线color: '#0000ff' // 颜色}}]};// 将配置项应用到图表chart.setOption(option);});}
}
</script><style>
/* 在此处添加组件的样式 */
</style>

运行效果如下:

在这里插入图片描述

此折线图中包含多条,可自由设置,且折线图的基本炒作也就这些。

  • 3.饼状图
<template><div id="line1" style="width: 800px; height: 600px;">创建我的图标</div>   <!-- 这是图表的容器,必须指定宽度和高度 -->
</template><script>
import { onMounted } from 'vue'; // 从 Vue 导入 onMounted 钩子
import * as echarts from 'echarts'; // 导入 ECharts 库export default {name: 'LineChart1', // 定义组件的名称setup() { // Vue 3 中的组合式 APIonMounted(() => { // 当组件挂载后执行let dom1 = document.getElementById('line1'); // 获取 id 为 line1 的 DOM 元素let chart = echarts.init(dom1); // 初始化 ECharts 图表并绑定到该 DOM 元素// 配置图表的选项let option1 = {title: { // 图表标题配置text: '这是一个饼图', // 主标题subtext: '小标题', // 副标题left: 'center' // 标题居中显示},tooltip: { // 提示框配置trigger: 'item' // 鼠标悬停时触发提示框},legend: { // 图例配置orient: 'vertical', // 图例垂直排列left: 'right' // 图例放置在左侧},series: [ // 数据系列配置{name: 'Access From', // 系列名称type: 'pie', // 图表类型为饼图radius: '50%', // 饼图半径data: [ // 饼图数据{ value: 1048, name: 'python' }, // 数据项,value 为数据值,name 为项的名称{ value: 765, name: 'linux' },{ value: 580, name: 'hadoop' },{ value: 486, name: 'vue' },{ value: 985, name: 'java' }],emphasis: { // 高亮显示的样式配置itemStyle: {shadowBlur: 10, // 阴影模糊程度shadowOffsetX: 0, // 阴影在 X 轴的偏移量shadowColor: 'rgba(0, 0, 0, 0.5)' // 阴影颜色}}}]};// 将配置项应用到图表chart.setOption(option1);});}
}
</script><style>
/* 在此处添加组件的样式 */
</style>

效果如下:

在这里插入图片描述

  • 4.漏斗图
<template><div id="line8" style="width: 800px; height: 600px;">创建我的图标</div>   <!-- 这是图表的容器,必须指定宽度和高度 -->
</template><script>
import { onMounted } from 'vue'; // 从 Vue 导入 onMounted 钩子
import * as echarts from 'echarts'; // 导入 ECharts 库export default {name: 'LineChart1', // 定义组件的名称setup() { // Vue 3 中的组合式 APIonMounted(() => { // 当组件挂载后执行const dom8 = document.getElementById('line8'); // 获取 id 为 line8 的 DOM 元素const chart = echarts.init(dom8); // 初始化 ECharts 图表并绑定到该 DOM 元素// 配置图表的选项const option = { // 在这里声明 option// 图表标题配置title: {text: 'Funnel' // 设置图表的标题为“Funnel”},// 提示框配置tooltip: {trigger: 'item', // 提示框触发方式为鼠标悬停在某个项目上formatter: '{a} <br/>{b} : {c}%' // 提示框格式,显示系列名、数据项名称和数据值},// 工具箱配置toolbox: {feature: {dataView: { readOnly: false }, // 数据视图,允许用户编辑restore: {}, // 恢复功能,重置图表saveAsImage: {} // 保存为图片功能}},// 图例配置legend: {data: ['hadoop', 'Click', 'Visit', 'Inquiry', 'Order'] // 图例中显示的数据项名称},// 数据系列配置series: [{name: 'Funnel', // 系列名称type: 'funnel', // 图表类型为漏斗图left: '10%', // 图表距离左侧的距离top: 60, // 图表距离顶部的距离bottom: 60, // 图表距离底部的距离width: '80%', // 图表的宽度min: 0, // Y轴的最小值max: 100, // Y轴的最大值minSize: '0%', // 最小图形的高度maxSize: '100%', // 最大图形的高度sort: 'descending', // 数据从大到小排序gap: 2, // 数据项之间的间距// 标签配置label: {show: true, // 显示标签position: 'inside' // 标签显示在图形内部},// 标签连接线配置labelLine: {length: 10, // 标签连接线的长度lineStyle: {width: 1, // 连接线的宽度type: 'solid' // 连接线的样式为实线}},// 项目样式配置itemStyle: {borderColor: '#fff', // 项目边框颜色为白色borderWidth: 1 // 项目边框宽度为1},// 高亮状态下的配置emphasis: {label: {fontSize: 20 // 高亮时标签的字体大小}},// 数据项配置data: [{ value: 60, name: 'Visit' }, // 数据项:访问,值为60{ value: 40, name: 'Inquiry' }, // 数据项:咨询,值为40{ value: 20, name: 'Order' }, // 数据项:订单,值为20{ value: 80, name: 'Click' }, // 数据项:点击,值为80{ value: 100, name: 'hadoop' } // 数据项:展示,值为100]}]};// 将配置项应用到图表chart.setOption(option);});}
}
</script><style>
/* 在此处添加组件的样式 */
</style>

其中效果如下:

在这里插入图片描述

  • 5.雷达图
<template><div id="line8" style="width: 800px; height: 600px;">创建我的图标</div>   <!-- 这是图表的容器,必须指定宽度和高度 -->
</template><script>
import { onMounted } from 'vue'; // 从 Vue 导入 onMounted 钩子
import * as echarts from 'echarts'; // 导入 ECharts 库export default {name: 'LineChart1', // 定义组件的名称setup() { // Vue 3 中的组合式 APIonMounted(() => { // 当组件挂载后执行const dom8 = document.getElementById('line8'); // 获取 id 为 line8 的 DOM 元素const chart = echarts.init(dom8); // 初始化 ECharts 图表并绑定到该 DOM 元素// 配置图表的选项const option = { // 在这里声明 option// 图表标题配置title: {text: 'Funnel' // 设置图表的标题为“Funnel”},// 提示框配置tooltip: {trigger: 'item', // 提示框触发方式为鼠标悬停在某个项目上formatter: '{a} <br/>{b} : {c}%' // 提示框格式,显示系列名、数据项名称和数据值},// 工具箱配置toolbox: {feature: {dataView: { readOnly: false }, // 数据视图,允许用户编辑restore: {}, // 恢复功能,重置图表saveAsImage: {} // 保存为图片功能}},// 图例配置legend: {data: ['hadoop', 'Click', 'Visit', 'Inquiry', 'Order'] // 图例中显示的数据项名称},// 数据系列配置series: [{name: 'Funnel', // 系列名称type: 'funnel', // 图表类型为漏斗图left: '10%', // 图表距离左侧的距离top: 60, // 图表距离顶部的距离bottom: 60, // 图表距离底部的距离width: '80%', // 图表的宽度min: 0, // Y轴的最小值max: 100, // Y轴的最大值minSize: '0%', // 最小图形的高度maxSize: '100%', // 最大图形的高度sort: 'descending', // 数据从大到小排序gap: 2, // 数据项之间的间距// 标签配置label: {show: true, // 显示标签position: 'inside' // 标签显示在图形内部},// 标签连接线配置labelLine: {length: 10, // 标签连接线的长度lineStyle: {width: 1, // 连接线的宽度type: 'solid' // 连接线的样式为实线}},// 项目样式配置itemStyle: {borderColor: '#fff', // 项目边框颜色为白色borderWidth: 1 // 项目边框宽度为1},// 高亮状态下的配置emphasis: {label: {fontSize: 20 // 高亮时标签的字体大小}},// 数据项配置data: [{ value: 60, name: 'Visit' }, // 数据项:访问,值为60{ value: 40, name: 'Inquiry' }, // 数据项:咨询,值为40{ value: 20, name: 'Order' }, // 数据项:订单,值为20{ value: 80, name: 'Click' }, // 数据项:点击,值为80{ value: 100, name: 'hadoop' } // 数据项:展示,值为100]}]};// 将配置项应用到图表chart.setOption(option);});}
}
</script><style>
/* 在此处添加组件的样式 */
</style>

运行效果如下:

在这里插入图片描述

  • 6.面积图
<template><div id="line123" style="width: 800px; height: 600px;">创建我的图标</div><!-- 一定要有宽度和高度 -->
</template><script>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts'export default {name: 'LineChart1',setup() {const chartData = ref({food: [90, 100, 90, 60, 58, 76],python: [96, 48, 60, 69, 80, 76],linux: [68, 50, 60, 25, 80, 68],java: [67, 50, 85, 70, 80, 76]});onMounted(() => {let dom1 = document.getElementById('line123'); // 获取图表显示的内容let chart = echarts.init(dom1); // 将容器初始化为可以画图表的容器let option1 = {title: {text: '图标的标题', // 图标的标题文本x: 'center', // 标题水平居中textStyle: { // 修改标题的样式color: '#ff0000', // 设置标题颜色为红色(可以根据需求修改颜色)fontSize: 20 // 可以设置标题的字体大小}},xAxis: {type: 'category', // x 轴类型为分类轴data: ['aa', 'bb', 'ss', 'qq', 'ii', 'ee'] // x轴的数据},yAxis: {type: 'value' // y 轴类型为数值轴},series: [{name: '美食',type: 'line', // 数据系列的类型为折线图data: chartData.value.food,stack: 'num',areaStyle: {},emphasis: {focus: "series"},label: {show: true},lineStyle: {type: 'dashed',color: '#00ff00'}},{name: 'Python',type: 'line',data: chartData.value.python,stack: 'num',areaStyle: {},emphasis: {focus: "series"},label: {show: true},lineStyle: {type: 'dashed',color: 'red'}},{name: 'Linux',type: 'line',data: chartData.value.linux,stack: 'num',areaStyle: {},emphasis: {focus: "series"},label: {show: true},lineStyle: {type: 'dotted',color: 'yellow'}},{name: 'Java',type: 'line',data: chartData.value.java,stack: 'num',areaStyle: {},emphasis: {focus: "series"},label: {show: true},lineStyle: {type: 'solid',color: 'blue'}}]};// 将配置项应用到图标chart.setOption(option1);// 数据动态变化setInterval(() => { // setInterval 是用于设置函数调用间隔时间chartData.value.food = chartData.value.food.map(d => Math.floor(Math.random() * 100));chartData.value.python = chartData.value.python.map(d => Math.floor(Math.random() * 100));chartData.value.linux = chartData.value.linux.map(d => Math.floor(Math.random() * 100));chartData.value.java = chartData.value.java.map(d => Math.floor(Math.random() * 100));// 更新图表chart.setOption({ //chart.setOption方法用于更新图标,显示新的数据series: [{ data: chartData.value.food },{ data: chartData.value.python },{ data: chartData.value.linux },{ data: chartData.value.java }]});}, 3000); // 每3秒更新数据});}
}
</script><style>
/* 这里可以添加样式 */
</style>

运行效果如下:

在这里插入图片描述

这个图我通过setInterval()函数来设置运行的间隔时间为3秒,结合随机生成数据模拟了动态的数据交互面积变化图。

  • 7.地图
<template><!-- 创建一个 div 元素,用于承载 ECharts 图表 --><div id="line1131" style="width: 800px; height:600px;"></div>   
</template><script>
// 从 Vue 中引入 onMounted 生命周期钩子
import { onMounted } from 'vue';
// 引入 ECharts 库
import * as echarts from 'echarts'; // 从本地文件引入地图数据
import { mapData } from "../assets/mapData.js"; // 在控制台输出地图数据以检查其有效性
console.log(mapData); // 导出一个名为 LineChart 的组件
export default {name: 'LineChart', // 组件名称// setup 函数是 Vue 3 组合式 API 的一部分setup() {// 使用 onMounted 钩子,确保在组件挂载后执行代码onMounted(() => {// 获取 DOM 元素,以便初始化 EChartslet dom123 = document.getElementById('line1131');// 初始化 ECharts 实例let chart = echarts.init(dom123);// 注册地图数据echarts.registerMap("chinaMap", mapData);console.log('dadada:', mapData); // 输出地图数据以供调试// 图表的配置项const option333 = {title:{text:'这是中国地图',x:'center',},geo: {map: "chinaMap", // 设置使用的地图roam: true, // 开启地图的平移和缩放label: {show: true, // 显示地理信息的标签},itemStyle: {normal: {areaColor: 'yellow', // 正常状态下的区域颜色borderColor: '#111', // 边界颜色},emphasis: {areaColor: 'red', // 鼠标悬停时区域的颜色},},// 地图缩放和中心设置zoom: 8, // 缩放比例center: ['116.395645', '39.904301'], // 中国北京大约的位置(经度,纬度)},tooltip: {show: false, // 隐藏工具提示},visualMap: {show: false, // 隐藏视觉映射},// 数据系列配置series: [{type: 'scatter', // 设置图表类型为散点图coordinateSystem: 'geo', // 使用地理坐标系symbolSize: 20, // 设置散点的大小label:true,type:'effectScatter',rippleEffect:{number:3, // 设置了涟漪效果的层数scale:4,color:'red'},data: [// 示例数据点,可以替换为实际数据{ name: 'Beijing', value: [116.395645, 39.904301, 4000] }, // 北京的坐标{ name: 'Shanghai', value: [121.473704, 31.2304] }, // 上海的坐标],}],};// 设置图表的配置项chart.setOption(option333);});}
}
</script><style scoped>
/* 此处留空或添加组件特定样式 */
/* scoped 确保样式仅适用于当前组件 */
</style>

效果如下:

在这里插入图片描述

代码中引用的地理数据来源于阿里云的可视化地图json数据,网站如下:https://datav.aliyun.com/portal/school/atlas/area_selector

在这里插入图片描述

将地理位置数据,复制后,在项目以下的位置创建js文件并定义变量后,进行粘贴

在这里插入图片描述

然后在程序代码文件中直接引用即可:

在这里插入图片描述

  • 8.散点图
<template><div id="line10" style="width: 800px; height: 600px;">创建我的图标</div>   <!-- 一定要有宽度和高度 -->
</template><script>
import { onMounted } from 'vue';
import * as echarts from 'echarts';export default {name: 'LineChart',setup() {onMounted(() => {// 获取 DOM 元素let dom = document.getElementById('line10');let chart = echarts.init(dom); // 初始化 ECharts 图表// 原始数据const data = [[10.0, 8.04],[8.07, 6.95],[13.0, 7.58],[9.05, 8.81],[11.0, 8.33],[14.0, 7.66],[13.4, 6.81],[10.0, 6.33],[14.0, 8.96],[12.5, 6.82],[9.15, 7.2],[11.5, 7.2],[3.03, 4.23],[12.2, 7.83],[2.02, 4.47],[1.05, 3.33],[4.05, 4.96],[6.03, 7.24],[12.0, 6.26],[12.0, 8.84],[7.08, 5.82],[5.02, 5.68]];// 计算线性回归的参数const getRegressionLine = (data) => {const n = data.length;let sumX = 0, sumY = 0, sumXY = 0, sumX2 = 0;for (let i = 0; i < n; i++) {sumX += data[i][0];sumY += data[i][1];sumXY += data[i][0] * data[i][1];sumX2 += data[i][0] ** 2;}// 计算斜率和截距const slope = (n * sumXY - sumX * sumY) / (n * sumX2 - sumX ** 2);const intercept = (sumY - slope * sumX) / n;// 生成拟合线的数据点const lineData = [];const xValues = data.map(point => point[0]); // 提取 X 值const xMin = Math.min(...xValues);const xMax = Math.max(...xValues);// 在拟合线的范围内生成点for (let x = xMin; x <= xMax; x += (xMax - xMin) / 100) {lineData.push([x, slope * x + intercept]);}return lineData;};const regressionLine = getRegressionLine(data);// 图表配置const option = {xAxis: {type: 'value',name: 'X 轴'},yAxis: {type: 'value',name: 'Y 轴'},series: [{symbolSize: 20,data: data, // 原始散点数据type: 'scatter',name: '散点数据',},{// 拟合线配置type: 'line',data: regressionLine,smooth: true, // 使线条平滑name: '拟合线',lineStyle: {color: 'red', // 拟合线颜色width: 2}}]};// 设置图表的配置项chart.setOption(option);});}
}
</script><style>
/* 在此处添加组件的样式 */
</style>

运行效果如下:

在这里插入图片描述

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

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

相关文章

C++ 内存对齐:alignas 与 alignof

一、什么是内存对齐&#xff1f; 内存对齐是指数据在内存中按照特定的字节边界存储。一般情况下&#xff0c;处理器从内存读取数据时会更高效地读取对齐的数据。如果数据未对齐&#xff0c;处理器可能需要进行额外的内存访问&#xff0c;导致性能下降。对于某些平台&#xff0…

嵌入式linux系统中串口驱动框架分析

大家好,今天主要给大家分享一下,如何使用linux系统中的串口实现。 第一:串口基本简介 串口是很常见的一个外设,在Linux下通常通过串口和其他设备或传感器进行通信。根据电平的不同,串口可以分为TTL和RS232。不管是什么样的电平接口,驱动程序是一样的。 第二:Linux下UAR…

MongoDB 8.0.3版本安装教程

MongoDB 8.0.3版本安装教程 一、下载安装 1.进入官网 2.选择社区版 3.点击下载 4.下载完成后点击安装 5.同意协议&#xff0c;下一步 6.选择第二个Custon&#xff0c;自定义安装 7.选择安装路径 &#xff01;记住安装路径 8.默认&#xff0c;下一步 9.取…

【力扣专题栏】面试题 01.02. 判定是否互为字符重排,如何利用数组模拟哈希表解决两字符串互排问题?

题解目录 1、题目描述解释2、算法原理解析3、代码编写(1)、两个数组分别模拟哈希表解决(2)、利用一个数组模拟哈希表解决问题 1、题目描述解释 2、算法原理解析 3、代码编写 (1)、两个数组分别模拟哈希表解决 class Solution { public:bool CheckPermutation(string s1, stri…

测长机在测量长度尺寸方面有哪些优势?如何保证测量的准确性?

测长机在测量长度尺寸方面具有以下优势&#xff1a; 一、高精度 1.分辨力高&#xff1a; 测长机通常具有很高的分辨力&#xff0c;能够精确测量到非常小的长度变化。例如&#xff0c;一些高精度测长机的分辨力可以达到微米甚至纳米级别&#xff0c;能够满足对精密工件和高精度…

人脑与机器连接:神经科技的伦理边界探讨

内容概要 在当今科技飞速发展的时代&#xff0c;人脑与机器连接已成为一个引人注目的前沿领域。在这一背景下&#xff0c;神经科技的探索为我们打开了一个全新的世界&#xff0c;从脑机接口到人工智能的飞跃应用&#xff0c;不仅加速了技术的进步&#xff0c;更触动了我们内心…

kd树的原理简述

1️⃣定义&#xff1a;给定一个二叉树与点集 P { x 1 , x 2 , . . . , x N } ⊆ R 2 P\{x_1,x_2,...,x_N\}\subseteq{}\mathbb{R}^2 P{x1​,x2​,...,xN​}⊆R2 对应关系&#xff1a; { 叶结点 i ↔ 一一对应 点 x i 中间结点 u ↔ 一多对应 以 u 为根子树的叶结点 ( P u ) ↔…

liunx CentOs7安装MQTT服务器(mosquitto)

查找 mosquitto 软件包 yum list all | grep mosquitto出现以上两个即可进行安装&#xff0c;如果没有出现则需要安装EPEL软件库。 yum install https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm查看 mosquitto 信息 yum info mosquitto安装 mosquitt…

Qt Designer客户端安装和插件集(pyqt5和pyside2)

GitHub - PyQt5/QtDesignerPlugins: Qt Designer PluginsQt Designer Plugins. Contribute to PyQt5/QtDesignerPlugins development by creating an account on GitHub.https://github.com/PyQt5/QtDesignerPlugins 一、下载客户端 https://github.com/PyQt5/QtDesigner/rel…

操作系统进程的描述与控制习题

1.什么是前趋图?为什么要引入前趋图? 前趋图(Precedence Graph)是一个有向无循环图&#xff0c;记为DAG(DirectedAcyclic Graph) 用于描述进程之间执行的前后关系 2.画出下面四条语句的前趋图 S1 a: x y; S2 b: z 1; S3 c: a - b; S4 w: c 1;3.什么程序并发执行…

第三十一章 Vue之路由(VueRouter)

目录 一、引言 1.1. 路由介绍 二、VueRouter 三、VueRouter的使用 3.1. 使用步骤&#xff08;52&#xff09; 3.2. 完整代码 3.2.1. main.js 3.2.2. App.vue 3.2.3. Friend.vue 3.2.4. My.vue 3.2.5. Find.vue 一、引言 1.1. 路由介绍 Vue中路由就是路径和组件的映…

精准选型跨境客服,网页服务更高效

跨境网页客服系统选型需考虑语言、功能、友好性及合规性。ZohoSalesIQ凭多语言支持、友好界面、移动兼容及数据保障成为优选&#xff0c;助力企业提升客户体验、高效沟通并满足数据安全需求。 一、跨境网页客服系统的重要性 1、提升客户体验 在跨境电商中&#xff0c;客户体验…

Pinia-状态管理

Pinia-状态管理 特点&#xff1a; 1. 轻量和模块化 Pinia 是一个轻量级的状态管理库&#xff0c;支持模块化管理&#xff0c;即可以将应用的状态分成多个 store 以实现更好的组织。使用 Pinia&#xff0c;可以定义多个 store&#xff0c;每个 store 都是一个独立的模块&#x…

【C++】对左值引用右值引用的深入理解(右值引用与移动语义)

&#x1f308; 个人主页&#xff1a;谁在夜里看海. &#x1f525; 个人专栏&#xff1a;《C系列》《Linux系列》 ⛰️ 天高地阔&#xff0c;欲往观之。 ​ 目录 前言&#xff1a;对引用的底层理解 一、左值与右值 提问&#xff1a;左值在左&#xff0c;右值在右&#xff1f;…

go 聊天系统项目-1

1、登录界面 说明&#xff1a;这一节的内容采用 go mod 管理【GO111MODULE‘’】模块&#xff0c;从第二节开始使用【GO111MODULE‘off’】GOPATH 管理模块。具体参见 go 包相关知识 1.1登录界面代码目录结构 代码所在目录/Users/zld/Go-project/day8/chatroom/ 1.2登录界…

Balluff EDI 项目需求分析

电子数据交换&#xff08;EDI&#xff0c;Electronic Data Interchange&#xff09;是一种通过电子方式在不同组织之间交换商业文档的技术和标准。它涉及使用标准格式的电子文档&#xff0c;如订单、发票、运输单据等&#xff0c;以实现自动化的数据传输。这种技术通常依赖于专…

如何在 Ubuntu 上安装和配置 GitLab

简介 GitLab是一个开源应用程序&#xff0c;主要用于托管 Git 仓库&#xff0c;并提供与开发相关的附加功能&#xff08;如问题跟踪&#xff09;。GitLab 可由用户自己的基础架构托管&#xff0c;可灵活部署为开发团队的内部存储库、与用户对接的公共方式或供稿者托管自己项目…

c语言-常量和变量

文章目录 一、常量是什么&#xff1f;&#xff08;1&#xff09;整型常量&#xff1a;&#xff08;2&#xff09;实型常量&#xff1a;&#xff08;3&#xff09;字符常量&#xff1a;&#xff08;4&#xff09;字符串常量&#xff08;5&#xff09;地址常量 二、define 和 con…

【Linux】进程间通信(匿/命名管道、共享内存、消息队列、信号量)

文章目录 1. 进程通信的目的2. 管道2.1 原理2.2 匿名管道2.3 管道通信场景&#xff1a;进程池2.4 命名管道 3. System V共享内存3.1 操作共享内存3.2 使用共享内存通信 4. System V 消息队列&#xff08;了解&#xff09;5. System V 信号量&#xff08;了解&#xff09;5.1 信…

VirtualBox 解决虚拟机Cable Unplugged 无法上网问题

问题描述 VirtualBox 中的虚拟机无法上网&#xff0c;在虚拟机中查看网络设置显示 Cable Unplugged。 解决方案 选择VirtualBox 上方任务栏的控制->设置->网络&#xff0c;勾选接入网线即可解决。