Vue进阶之Vue项目实战（三）

Vue项目实战

  • 图表渲染
    • 安装echarts
    • 图表渲染器(图表组件)
      • 图表举例：
        • 创建 ChartsRenderer.vue
        • 创建 ChartsDataTransformer.ts
    • 基于 zrender 开发可视化物料
      • 安装 zrender
      • 画一个矩形
      • 画一个柱状图
    • 基于svg开发可视化物料
      • svg小示例
      • 使用d3进行图表渲染
        • 安装d3
        • 基本使用
        • 地图绘制
    • 本地持久化
    • 拓展知识

图表渲染

安装echarts

package.json:

"dependencies": {"vue": "3.4.26","vue-echarts":"6.7.1","echarts":"5.5.0"},

图表渲染器(图表组件)

一般负责：

  1. 整体图表的基础层数据协议设计
schema:{type:"line",  //折线图data:{labels:[],datasets:[]}
}
  1. 基于数据协议的图表渲染逻辑
    渲染逻辑：通用渲染逻辑、特殊渲染逻辑
    BarRenderer.vue、LineRenderer.vue，统一在ChartsRenderer.vue中进行分发渲染（在这一层将不同的图表类型差异磨平）
  2. 图表的事件处理

图表举例：

创建 ChartsRenderer.vue
  • components
    • ChartsRenderer.vue
<template><!-- 一个的写法 --><div class="charts-container" ref="container">charts Renderer</div><!-- 多个的写法 --><!-- <div :ref="(n)=>maps.n=n">charts Renderer1</div><div :ref="(b)=>maps.b=b">charts Renderer2</div><div :ref="(r)=>maps.r=r">charts Renderer3</div> -->
</template><script setup lang="ts">
import {use,init} from 'echarts'
import {BarChart,LineChart} from 'echarts/charts'
import {LegendComponent,TooltipComponent} from 'echarts/components';
import {onMounted,ref} from 'vue'use([BarChart,LineChart,LegendComponent,TooltipComponent])const container=ref<HTMLDivElement|null>(null)
// 多个的写法
// const maps={}onMounted(()=>{if(!container.value) return;const chartInstance= init(container.value)console.log("container",container);// 多个的写法// console.log("maps",maps);chartInstance.setOption({title:{text:"Echarts 入门示例"},tooltip:{},legend:{data:['销量']},xAxis:{data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']},yAxis:{},series:[{name:"销量",type:"bar",data:[5,20,36,10,10,20]}]})
})
</script><style scoped>
.charts-container{width: 500px;height: 500px;border: 1px solid #ccc;border-radius: 4px;padding: 10px;box-sizing: border-box;
}
</style>

App.vue

<script setup lang="ts">
import ChartsRenderer from './components/ChartsRenderer.vue'
</script>
<template><ChartsRenderer></ChartsRenderer>
</template>

请添加图片描述
项目中：

import {use,init,graphic} from 'echarts'
.......
chartInstance.setOption({color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],title: {text: '渐变堆叠面积图'},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: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}],yAxis: [{type: 'value'}],series: [{name: 'Line 1',type: 'line',stack: 'Total',smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.8,color: new graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(128, 255, 165)'},{offset: 1,color: 'rgb(1, 191, 236)'}])},emphasis: {focus: 'series'},data: [140, 232, 101, 264, 90, 340, 250]},{name: 'Line 2',type: 'line',stack: 'Total',smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.8,color: new graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(0, 221, 255)'},{offset: 1,color: 'rgb(77, 119, 255)'}])},emphasis: {focus: 'series'},data: [120, 282, 111, 234, 220, 340, 310]},{name: 'Line 3',type: 'line',stack: 'Total',smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.8,color: new graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(55, 162, 255)'},{offset: 1,color: 'rgb(116, 21, 219)'}])},emphasis: {focus: 'series'},data: [320, 132, 201, 334, 190, 130, 220]},{name: 'Line 4',type: 'line',stack: 'Total',smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.8,color: new graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(255, 0, 135)'},{offset: 1,color: 'rgb(135, 0, 157)'}])},emphasis: {focus: 'series'},data: [220, 402, 231, 134, 190, 230, 120]},{name: 'Line 5',type: 'line',stack: 'Total',smooth: true,lineStyle: {width: 0},showSymbol: false,label: {show: true,position: 'top'},areaStyle: {opacity: 0.8,color: new graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(255, 191, 0)'},{offset: 1,color: 'rgb(224, 62, 76)'}])},emphasis: {focus: 'series'},data: [220, 302, 181, 234, 210, 290, 150]}]
})

请添加图片描述

创建 ChartsDataTransformer.ts
  • components
    • ChartsRenderer.vue
    • ChartsDataTransformer.ts

ChartsDataTransformer.ts：

import {graphic} from 'echarts/core';const chartsTypes=['bar','line'] as const;type ChartType=(typeof chartsTypes)[number]interface ChartsProtocol{type:ChartType,  //图类型config:{},   //图表配置data:{labels:[],datasets:[],legends:[],xAxis:[],yAxis:[]},events:{onClick:Function,onHover:Function}
}// 抹平数据差异
export function getChartsOption(data:ChartsProtocol){switch(data.type){case "bar":return getBarChartsOptions(data);case "line":return getLineChartsOptions(data);default:return {}   }
}function getBarChartsOptions(data:ChartsProtocol){// 处理柱状图数据data.data;return {color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],title: {text: '渐变堆叠面积图'},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: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}],yAxis: [{type: 'value'}],series: [{name: 'Line 3',type: 'bar',stack: 'Total',smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.8,color: new graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(55, 162, 255)'},{offset: 1,color: 'rgb(116, 21, 219)'}])},emphasis: {focus: 'series'},data: [320, 132, 201, 334, 190, 130, 220]},]}/* return{chart:{type:"bar",height:350,},playOptions:{bar:{horizontal:true}},xAxis:{categories:["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]}} */
}function getLineChartsOptions(data:ChartsProtocol){// 处理折线图data.datareturn {color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],title: {text: '渐变堆叠面积图'},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: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}],yAxis: [{type: 'value'}],series: [{name: 'Line 1',type: 'line',stack: 'Total',smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.8,color: new graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(128, 255, 165)'},{offset: 1,color: 'rgb(1, 191, 236)'}])},emphasis: {focus: 'series'},data: [140, 232, 101, 264, 90, 340, 250]},{name: 'Line 2',type: 'line',stack: 'Total',smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.8,color: new graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(0, 221, 255)'},{offset: 1,color: 'rgb(77, 119, 255)'}])},emphasis: {focus: 'series'},data: [120, 282, 111, 234, 220, 340, 310]},{name: 'Line 3',type: 'line',stack: 'Total',smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.8,color: new graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(55, 162, 255)'},{offset: 1,color: 'rgb(116, 21, 219)'}])},emphasis: {focus: 'series'},data: [320, 132, 201, 334, 190, 130, 220]},{name: 'Line 4',type: 'line',stack: 'Total',smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.8,color: new graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(255, 0, 135)'},{offset: 1,color: 'rgb(135, 0, 157)'}])},emphasis: {focus: 'series'},data: [220, 402, 231, 134, 190, 230, 120]},{name: 'Line 5',type: 'line',stack: 'Total',smooth: true,lineStyle: {width: 0},showSymbol: false,label: {show: true,position: 'top'},areaStyle: {opacity: 0.8,color: new graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(255, 191, 0)'},{offset: 1,color: 'rgb(224, 62, 76)'}])},emphasis: {focus: 'series'},data: [220, 302, 181, 234, 210, 290, 150]}]}
}

ChartsRenderer.vue:

<template><!-- 一个的写法 --><div class="charts-container" ref="container">charts Renderer</div><!-- 多个的写法 --><!-- <div :ref="(n)=>maps.n=n">charts Renderer1</div><div :ref="(b)=>maps.b=b">charts Renderer2</div><div :ref="(r)=>maps.r=r">charts Renderer3</div> -->
</template><script setup lang="ts">
import {use,init} from 'echarts'
import {BarChart,LineChart} from 'echarts/charts'
import {LegendComponent,TooltipComponent} from 'echarts/components';
import {onMounted,ref} from 'vue'
import {getChartsOption} from './ChartsDataTransformer'
import {CanvasRenderer} from 'echarts/renderers';use([BarChart,LineChart,LegendComponent,TooltipComponent,CanvasRenderer])const container=ref<HTMLDivElement|null>(null)
// 多个的写法
// const maps={}onMounted(()=>{if(!container.value) return;const chartInstance= init(container.value)console.log("container",container);// 多个的写法// console.log("maps",maps);chartInstance.setOption(getChartsOption({type:"line",data:{labels:["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],datasets:[{name:"A",data:[820,932,901,934,435,1234,1500]},{name:"B",data:[320,256,401,456,860,390,470]}]}}))
})
</script><style scoped>
.charts-container{width: 1000px;height: 500px;border: 1px solid #ccc;border-radius: 4px;padding: 10px;box-sizing: border-box;
}
</style>

请添加图片描述

基于 zrender 开发可视化物料

安装 zrender

package.json:

"dependencies": {..."zrender":"5.5.0"},

pnpm i

  • src
    • components
      • CustomCharts
        • Rectangle.vue

画一个矩形

Rectangle.vue

<template><div class="container" ref="container"></div>
</template><script setup lang="ts">
import {onMounted,ref} from 'vue';
import {init,Rect} from 'zrender';const container=ref<HTMLDivElement|null>(null)onMounted(()=>{// 我们使用zrender创建的一个场景const zr=init(container.value);zr.add(new Rect({shape:{x:10,y:10,width:100,height:100},style:{fill:"red"}}))
})
</script><style scoped>
.container{width:500px;height:500px;border: 1px solid #ccc;border-radius: 4px;padding: 10px;box-sizing:border-box;
}
</style>

App.vue:

<script setup lang="ts">
// import HelloWorld from './components/HelloWorld.vue'
// import ChartsRenderer from './components/ChartsRenderer.vue'
import Rectangle from './components/CustomCharts/Rectangle.vue'
</script><template><!-- <div> --><!-- <a href="https://vitejs.dev" target="_blank"><img src="/vite.svg" class="logo" alt="Vite logo" /></a><a href="https://vuejs.org/" target="_blank"><img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /></a></div><HelloWorld msg="Vite + Vue" /> --><!-- <ChartsRenderer></ChartsRenderer> --><Rectangle></Rectangle>
</template><style scoped>
.logo {height: 6em;padding: 1.5em;will-change: filter;transition: filter 300ms;
}
.logo:hover {filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

请添加图片描述

画一个柱状图

Rectangle.vue

<template><div class="container" ref="container"></div>
</template><script setup lang="ts">
import {onMounted,ref} from 'vue';
import {init,Rect} from 'zrender';const container=ref<HTMLDivElement|null>(null)onMounted(()=>{// 我们使用zrender创建的一个场景const zr=init(container.value);const ticks=10for(let i=0;i<ticks;i++){const height=Math.random()*100+20const barWidth=20const barGap=10const randomColor=`rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`zr.add(new Rect({shape:{x:barWidth+i*(barWidth+barGap),y:500-height,width:barWidth,height},style:{fill:randomColor}}))}/* zr.add(new Rect({shape:{x:10,y:10,width:100,height:100},style:{fill:"red"}})) */
})
</script><style scoped>
.container{width:500px;height:500px;border: 1px solid #ccc;border-radius: 4px;padding: 10px;box-sizing:border-box;
}
</style>

在这里插入图片描述

拓展：
zrender学习
echarts底层封装是用zrender来做的
可视化：知道echarts每个图表类型的折线，面积怎么绘制出来的；如果要深入学习可视化绘制的话，推荐一些比较复杂的图表去画一画，比如，和弦图、旭日图

数据库关系图用vue-flow来画
如果用的React，那么就用React-flow
系统的学习绘制，可以学习d3

echarts和d3的区别： echarts是更简单的图表框架，是可以拿来就用的，配置也比较简单；但是d3是什么都可以，d3是数据驱动的可视化库，能够基于数据封装可视化图表，基于svg绘制的。d3相当于jquery，语法和jQuery很像。

可视化面试一般会问什么问题？
问图表缩放问题，图表适配问题，问svg和canvas的区别，他们的优势和缺点等

基于svg开发可视化物料

svg小示例

  • src
    • components
      • SvgCharts
        • SvgBaseRenderer.vue

App.vue:

<script setup lang="ts">
// import HelloWorld from './components/HelloWorld.vue'
// import ChartsRenderer from './components/ChartsRenderer.vue'
// import Rectangle from './components/CustomCharts/Rectangle.vue'
import SvgBaseRenderer from './components/SvgCharts/SvgBaseRenderer.vue'
</script><template><!-- <div> --><!-- <a href="https://vitejs.dev" target="_blank"><img src="/vite.svg" class="logo" alt="Vite logo" /></a><a href="https://vuejs.org/" target="_blank"><img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /></a></div><HelloWorld msg="Vite + Vue" /> --><!-- <ChartsRenderer></ChartsRenderer> --><!-- <Rectangle></Rectangle> --><SvgBaseRenderer></SvgBaseRenderer>
</template><style scoped>
.logo {height: 6em;padding: 1.5em;will-change: filter;transition: filter 300ms;
}
.logo:hover {filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

SvgBaseRenderer.vue

<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" width="240"><text><tspan x="0" dy="1.2em">Hello SVG!</tspan></text></svg>
</template><script>
export default {setup(){}}
</script><style scoped></style>

请添加图片描述

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" width="240"><!-- <text><tspan x="0" dy="1.2em">Hello SVG!</tspan></text> --><path d="m 0 12 a 20 20 90 0 0 -20 20 h 111 h 22 h 100 v -20" stroke="pink" fill="yellow"></path></svg>

请添加图片描述

svg editor辅助去学习svg
svg文档看w3c内容
可以在编辑器中画，然后复制路径过来：

<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="450"><!-- <text><tspan x="0" dy="1.2em">Hello SVG!</tspan></text> --><!-- <path d="m 0 12 a 20 20 90 0 0 -20 20 h 111 h 22 h 100 v -20" stroke="pink" fill="yellow"></path> --><path d="M 4 8 L 10 1 L 13 0 L 12 3 L 5 9 C 6 10 6 11 7 10 C 7 11 8 12 7 12 A 1.42 1.42 0 0 1 6 13 A 5 5 0 0 0 4 10 Q 3.5 9.9 3.5 10.5 T 2 11.8 T 1.2 11 T 2.5 9.5 T 3 9 A 5 5 90 0 0 0 7 A 1.42 1.42 0 0 1 1 6 C 1 5 2 6 3 6 C 2 7 3 7 4 8 M 10 1 L 9 4 L 12 3 L 10.2 2.8 L 10 1"fill="skyblue" stroke="black"></path></svg>
</template>

请添加图片描述
原生svg画图表：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="450"><!-- group --><g><path d="M 4 8 L 10 1 L 13 0 L 12 3 L 5 9 C 6 10 6 11 7 10 C 7 11 8 12 7 12 A 1.42 1.42 0 0 1 6 13 A 5 5 0 0 0 4 10 Q 3.5 9.9 3.5 10.5 T 2 11.8 T 1.2 11 T 2.5 9.5 T 3 9 A 5 5 90 0 0 0 7 A 1.42 1.42 0 0 1 1 6 C 1 5 2 6 3 6 C 2 7 3 7 4 8 M 10 1 L 9 4 L 12 3 L 10.2 2.8 L 10 1"fill="skyblue" stroke="black"></path></g><g><!-- 坐标 --><!-- 坐标轴 --><line x1="0" y1="120" x2="240" y2="120" stroke="black"></line><!-- 坐标刻度 --><g><g><line x1="0" y1="120" x2="240" y2="120" stroke="black"></line><line x1="0" y1="120" x2="240" y2="120" stroke="black"></line><line x1="0" y1="120" x2="240" y2="120" stroke="black"></line><line x1="0" y1="120" x2="240" y2="120" stroke="black"></line></g><g><!-- 坐标刻度值 --></g></g></g><!-- 纵坐标 --><g><line x1="0" y1="0" x2="0" y2="240" stroke="black"></line><!-- 坐标刻度 --><g><g><!-- 刻度 --></g><g><!-- 坐标刻度值 --></g></g></g>
</svg>

请添加图片描述

使用d3进行图表渲染

安装d3

package.json：

"dependencies": {..."d3":"7.9.0"},
"devDependencies": { 类型文件"@types/d3":"7.4.3",...
}

pnpm i

请添加图片描述
请添加图片描述

基本使用
  • src
    • components
      • SvgCharts
        • SvgMapRenderer.vue

SvgMapRenderer.vue;

<template><div ref="container"></div>
</template><script setup lang="ts">
import * as d3 from 'd3';
import {onMounted, ref} from 'vue'const container = ref<HTMLDivElement|null>(null)
const randomColor = ()=>{return `rgb(${Math.round(Math.random()*255)},${Math.round(Math.random()*255)},${Math.round(Math.random()*255)})`
}onMounted(() => {if(!container.value) return;const svg = d3.select(container.value).append("svg").attr("width",960).attr("height",500).attr("viewBox","0 0 960 500")// 数据驱动 - 核心svg.selectAll("circle")// 数据绑定.data([32,57,112,293]).join("circle").attr("cx",(d,i) => i * 100 + 30).attr("cy",(d)=>300-Math.sqrt(d)).attr("r",(d)=>Math.sqrt(d)).attr("fill",randomColor).enter().exit()});
</script><style scoped></style>

App.vue

<script setup lang="ts">
// import HelloWorld from './components/HelloWorld.vue'
// import ChartsRenderer from './components/ChartsRenderer.vue'
// import Rectangle from './components/CustomCharts/Rectangle.vue'
import SvgMapRenderer from './components/SvgCharts/SvgMapRenderer.vue'
</script><template><!-- <div> --><!-- <a href="https://vitejs.dev" target="_blank"><img src="/vite.svg" class="logo" alt="Vite logo" /></a><a href="https://vuejs.org/" target="_blank"><img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /></a></div><HelloWorld msg="Vite + Vue" /> --><!-- <ChartsRenderer></ChartsRenderer> --><!-- <Rectangle></Rectangle> --><SvgMapRenderer></SvgMapRenderer>
</template><style scoped>
.logo {height: 6em;padding: 1.5em;will-change: filter;transition: filter 300ms;
}
.logo:hover {filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

请添加图片描述

地图绘制
  1. 首先要有地图数据，在做地图位置定位的时候，要和经纬度结合起来；在做地图的时候，最核心的是地理数据，JSON格式数据

谷歌浏览器插件：JSON Viewer 让JSON数据更美观
中国的JSON数据

本地持久化

前端临时缓存数据，
localStorage – 数据量小，要注意数据序列化和反序列化的实现
IndexDB – 数据量较大，选择Dexie

拓展知识

  1. Figma底层使用的是 skia，是基于c++的，性能比直接用canvas在前端写会好很多
  2. 3d知识对于React的方面，应该看react-three-fiber；对于Vue的方面，应该看tresjs
  3. 关于更深入的3d知识，可以看看webGL

可以在低代码平台上扩充物料：
比如要接入React的白板，excalidraw，去对应的github网站请添加图片描述
请添加图片描述

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

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

相关文章

柏拉图表征假说：AI模型趋同于现实的统一表征

柏拉图表征假说：AI模型趋同于现实的统一表征

引言 近日&#xff0c;Ilya Sutskever在离开OpenAI后不久点赞了一篇由MIT团队发表的AI论文&#xff0c;这篇题为《The Platonic Representation Hypothesis》的论文引起了广泛关注。这篇论文探讨了AI模型在不同数据和模态上的训练是否趋向于收敛成一个共享的现实世界统计模型。…
阅读更多...
怎么识别图片中的文字呢！？？

怎么识别图片中的文字呢！？？

要识别图片中的文字&#xff0c;一般使用OCR软件来实现这一需求&#xff0c;下面以金某识别网页版为例&#xff0c;说说操作步骤&#xff1a; 一、点击“点击添加需转换的图片或PDF”&#xff0c;如还没登录将弹出登录窗口&#xff0c;直接登录即可&#xff0c;如已登录&#x…
阅读更多...
基于 Wireshark 分析 UDP 协议

基于 Wireshark 分析 UDP 协议

一、UDP 协议 UDP&#xff08;User Datagram Protocol&#xff0c;用户数据报协议&#xff09;是一种无连接的传输层协议&#xff0c;常用于传输即时数据&#xff0c;如音频、视频和实时游戏数据等。 UDP 的特点如下&#xff1a; 1. 无连接性&#xff1a;UDP 不需要在发送数…
阅读更多...
计算机毕业设计 | SSM汽车租赁系统(附源码)

计算机毕业设计 | SSM汽车租赁系统(附源码)

1&#xff0c; 概述 1.1 课题背景 随着社会的快速发展&#xff0c;计算机的影响是全面且深入的。用户生活水平的不断提高&#xff0c;日常生活中用户对汽车租赁系统方面的要求也在不断提高&#xff0c;需要汽车租赁系统查询的人数更是不断增加&#xff0c;使得汽车租赁系统的…
阅读更多...
6-3 求二叉树的深度

6-3 求二叉树的深度

作者 DS课程组 单位 临沂大学 本题要求实现一个函数&#xff0c;可返回二叉树的深度。 函数接口定义&#xff1a; int Depth(BiTree T);T是二叉树树根指针&#xff0c;函数Depth返回二叉树的深度&#xff0c;若树为空&#xff0c;返回0。 裁判测试程序样例&#xff1a; #in…
阅读更多...
电商API接口：供应商价格与主流电商平台价格做比价

电商API接口：供应商价格与主流电商平台价格做比价

品牌在进行采购工作时&#xff0c;将供应商提供的价格与主流电商平台上的公开价格进行比价是一种非常常见的做法&#xff0c;这样做的目的主要是为了保证自身供应商提供的价格具有竞争力和合理性&#xff0c;从而更好地优化采购工作。 以下是过程中的具体步骤及一些注意事项&a…
阅读更多...
基于springboot实现周边游平台个人管理系统项目【项目源码+论文说明】

基于springboot实现周边游平台个人管理系统项目【项目源码+论文说明】

基于springboot实现周边游平台个人管理系统演示 摘要 在如今社会上&#xff0c;关于信息上面的处理&#xff0c;没有任何一个企业或者个人会忽视&#xff0c;如何让信息急速传递&#xff0c;并且归档储存查询&#xff0c;采用之前的纸张记录模式已经不符合当前使用要求了。所以…
阅读更多...
2024年上半年信息系统项目管理师下午真题及答案(第一批)

2024年上半年信息系统项目管理师下午真题及答案(第一批)

试题一 某项目包含ABCDEFGH共8个活动&#xff0c;各活动的历时、活动逻辑关系如下表所示&#xff1a; 单击下面头像图片领取更多软考独家资料
阅读更多...
分布式一致性必备：一文读懂Raft算法

分布式一致性必备：一文读懂Raft算法

本文作者：小米，一个热爱技术分享的29岁程序员。如果你喜欢我的文章，欢迎关注我的微信公众号“软件求生”，获取更多技术干货！ 大家好！我是小米，一个热爱分享技术的29岁程序员哥哥。今天我们来聊聊分布式系统中的一个重要算法——Raft。这个算法专门用于管理分布式系统中…
阅读更多...
DCL(数据控制)

DCL(数据控制)

1. 用户管理 1.1 查询用户 select * from mysql.user; 查询结果&#xff1a; 其中 Host代表当前用户访问的主机, 如果为localhost, 仅代表只能够在当前本机访问&#xff0c;是不可以远程访问的。 User代表的是访问该数据库的用户名。在MySQL中需要通过Host和User来唯一标识…
阅读更多...
Python爬虫实战：利用代理IP获取电商数据

Python爬虫实战：利用代理IP获取电商数据

文章目录 1.电商数据介绍2.爬取目标3.代理IP推荐4.准备工作4.1 模块安装4.2 代理IP获取 5.爬虫代码实战5.1分析网页5.1.1 获取cookie5.1.2 关键词分析5.1.3 翻页分析5.1.4 数据获取分析 5.2 发送请求5.3 提取数据5.4 保存数据5.5 完整源码5.6 数据分析六、总结 1.电商数据介绍 …
阅读更多...
解决问题的多样手段：不止律师

解决问题的多样手段：不止律师

在我们日常生活和工作中&#xff0c;总是会遇到各种各样的问题。有时我们会不由自主地想到找律师打官司&#xff0c;认为这是解决问题的唯一途径。然而&#xff0c;解决问题其实有很多手段&#xff0c;律师和法庭只是其中的一种。事实上&#xff0c;只要能够发现问题并及时解决…
阅读更多...
Spring Boot中@Value加载配置的替代者：@ConfigurationProperties

Spring Boot中@Value加载配置的替代者：@ConfigurationProperties

Value注解Spring Boot开发者都已经熟悉了&#xff0c;通过该注解&#xff0c;我们可以快速的把配置信息加载到Spring的Bean中。 例如&#xff1a;在application.yml中添加了一个配置如下&#xff1a; 我想在service中获取name&#xff0c;通过value注解方式实现&#xff0c;代…
阅读更多...
人力资源管理信息化系统如何支持企业开展管理诊断？

人力资源管理信息化系统如何支持企业开展管理诊断？

华恒智信人力资源顾问有限公司致力于帮助企业开展人力资源管理方面的各项提升改进工作&#xff0c;在长期的咨询工作中&#xff0c;最常听到企业提到的问题莫过于管理诊断方面的问题&#xff0c;事实上&#xff0c;很多企业在日常工作中&#xff0c;都意识到企业内部存在管理方…
阅读更多...
比例溢流阀的放大器找BEUEC

比例溢流阀的放大器找BEUEC

液压比例放大器的使用范围广泛&#xff0c;包括工业生产线、船舶液压系统等多个领域。BEUEC比例放大器是一种重要的液压系统组件&#xff0c;其作用是将微弱的液压信号放大&#xff0c;以实现对液压系统的精确控制。这种设备在多个行业中都有广泛的应用&#xff0c;特别是在需要…
阅读更多...
C++ List完全指南：使用方法与自定义实现

C++ List完全指南：使用方法与自定义实现

文章目录 list的使用几种构造函数 list的实现1.节点类的定义1.1节点类的构造函数 2.正向迭代器实现2.1operator*重载2.2operator->重载2.3operator重载2.4operator--2.5operator和operator&#xff01; 3.反向迭代器实现3.1operator*重载3.2operator->重载3.3operator重载…
阅读更多...
解决Vue3+TS+vite，VSCode 高亮语法错误

解决Vue3+TS+vite，VSCode 高亮语法错误

一般像这种提示&#xff0c;有可能就是TypeScript语法的识别问题&#xff0c; 一般我们重装一下Vue - Official插件 或者将tcconfig.json中的moduleResolution改为node模式&#xff0c; 基本都是TypeScript无法识别vue文件中的TypeScript语句导致的
阅读更多...
照片处理软件哪个好？爆款图片编辑工具分享

照片处理软件哪个好？爆款图片编辑工具分享

照片处理软件哪个好&#xff1f;在数字时代&#xff0c;照片处理软件已经成为我们日常生活和工作中不可或缺的工具。无论是为了美化照片、修复旧照&#xff0c;还是进行专业的图像处理&#xff0c;都有各种软件可以满足我们的需求。以下是一些值得一试的照片处理软件&#xff0…
阅读更多...
win10和win11修改暂停更新时间

win10和win11修改暂停更新时间

关于Windows的自动更新&#xff0c;可以说是有人喜欢&#xff0c;也有人讨厌。部分小伙伴觉得&#xff0c;自动更新能让系统时刻保持最新状态&#xff0c;提高安全性。但也有用户认为&#xff0c;频繁的自动更新很耽误事&#xff0c;有时还会带来意想不到的BUG。 零副作用关闭…
阅读更多...
ChatGPT-4o模型功能介绍——还没用过的看过来

ChatGPT-4o模型功能介绍——还没用过的看过来

1.概述 OpenAI 持续突破人工智能的边界&#xff0c;推出了其最新模型 ChatGPT-4o&#xff0c;作为 ChatGPT-4 的继承者&#xff0c;该模型有望带来显著的提升和创新功能。本文将深入解析 ChatGPT-4 与 ChatGPT-4o 之间的区别&#xff0c;并探讨它们的功能、性能以及潜在的应用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023