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

后端加前端Echarts画图示例全流程（折线图，饼图，柱状图）

news 文章来源：https://blog.csdn.net/m0_59166601/article/details/140045250 2024/7/6 17:53:56

本文将带领读者通过一个完整的Echarts画图示例项目，演示如何结合后端技术（使用Spring Boot框架）和前端技术（使用Vue.js或React框架）来实现数据可视化。我们将实现折线图、饼图和柱状图三种常见的数据展示方式，通过具体的代码和步骤让读者掌握从零开始搭建项目到展示图表的全过程。

开发环境

后端

SpringBoot  2.6.13

Mybatis-Plus 3.4.3

前端

原生JavaScript

前期准备

数据库创建语句

CREATE TABLE sales_data (id INT AUTO_INCREMENT PRIMARY KEY,month VARCHAR(7) NOT NULL,amount DECIMAL(10, 2) NOT NULL
);

具体实现 

实体类

@Data
@TableName("sales_data")
public class SalesRecord {@TableId(type = IdType.AUTO)private Long id;private String month;private Double amount;
}

Mapper层

@Mapper
public interface SalesRecordMapper extends BaseMapper<SalesRecord> {// 自定义查询方法，根据月份范围查询销售记录@Select("SELECT * FROM sales_data WHERE month BETWEEN #{startMonth} AND #{endMonth}")List<SalesRecord> findByMonthBetween(@Param("startMonth") String startMonth, @Param("endMonth") String endMonth);
}

Service层

public interface SalesRecordService {List<SalesRecord> getAllSalesRecords();List<SalesRecord> getSalesRecordsByMonthRange(String startMonth, String endMonth);
}

Impl层

@Service
public class SalesRecordServiceImpl extends ServiceImpl<SalesRecordMapper, SalesRecord> implements SalesRecordService {@Resourceprivate SalesRecordMapper salesRecordMapper;@Overridepublic List<SalesRecord> getAllSalesRecords() {return list();}@Overridepublic List<SalesRecord> getSalesRecordsByMonthRange(String startMonth, String endMonth) {// 实现根据月份范围查询的逻辑，使用 repository 或者自定义 SQL 查询数据库return salesRecordMapper.findByMonthBetween(startMonth, endMonth);}
}

Controller层

@RestController
@RequestMapping("/api/sales")
public class SalesRecordController {private final SalesRecordService salesRecordService;@Autowiredpublic SalesRecordController(SalesRecordService salesRecordService) {this.salesRecordService = salesRecordService;}@GetMapping("/records")public List<SalesRecord> getAllSalesRecords() {return salesRecordService.getAllSalesRecords();}@GetMapping("/recordsByMonthRange")public List<SalesRecord> getSalesRecordsByMonthRange(@RequestParam("startMonth") String startMonth,@RequestParam("endMonth") String endMonth) {return salesRecordService.getSalesRecordsByMonthRange(startMonth, endMonth);}}

前端页面

创建路径：src/main/resources/static/sales_bar_chart.html

柱形图（包含按照日期分页）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Sales Data Visualization</title><!-- 引入 ECharts --><script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script><!-- 引入 jQuery --><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<!-- 时间范围选择表单 -->
<label for="startMonth">开始月份：</label>
<input type="month" id="startMonth" name="startMonth">
<label for="endMonth">结束月份：</label>
<input type="month" id="endMonth" name="endMonth">
<button onclick="updateChart()">更新图表</button><!-- 图表展示 -->
<div id="chart" style="width: 800px; height: 600px;"></div><script>// 初始化页面时渲染默认图表renderDefaultChart();// 渲染默认图表function renderDefaultChart() {var xhr = new XMLHttpRequest();xhr.open('GET', 'http://localhost:8099/api/sales/records');xhr.onload = function () {if (xhr.status === 200) {var salesData = JSON.parse(xhr.responseText);renderChart(salesData);} else {console.error('Failed to fetch sales data:', xhr.statusText);}};xhr.onerror = function () {console.error('Request failed.');};xhr.send();}// 更新图表函数，根据用户选择的时间范围发送请求function updateChart() {var startMonth = document.getElementById('startMonth').value;var endMonth = document.getElementById('endMonth').value;var xhr = new XMLHttpRequest();xhr.open('GET', `http://localhost:8099/api/sales/recordsByMonthRange?startMonth=${startMonth}&endMonth=${endMonth}`);xhr.onload = function () {if (xhr.status === 200) {var salesData = JSON.parse(xhr.responseText);renderChart(salesData);} else {console.error('Failed to fetch sales data:', xhr.statusText);}};xhr.onerror = function () {console.error('Request failed.');};xhr.send();}// 渲染 ECharts 图表function renderChart(data) {var chart = echarts.init(document.getElementById('chart'));var months = data.map(function (item) {return item.month;});var amounts = data.map(function (item) {return item.amount;});var option = {title: {text: 'Monthly Sales Amount'},tooltip: {},xAxis: {data: months},yAxis: {},series: [{name: 'Sales Amount',type: 'bar',data: amounts}]};chart.setOption(option);}
</script>
</body>
</html>

 

饼图

创建路径：src/main/resources/static/pie-chart-ajax.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Sales Data Pie Chart</title><!-- 引入 ECharts --><script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<!-- 定义一个具有一定尺寸的 div，用于渲染图表 -->
<div id="pieChart" style="width: 600px; height: 400px;"></div><script>// 使用 AJAX 请求后端数据var xhr = new XMLHttpRequest();xhr.open('GET', 'http://localhost:8099/api/sales/records'); // 修改为实际的后端 API 路径xhr.onload = function () {if (xhr.status === 200) {var salesData = JSON.parse(xhr.responseText);renderPieChart(salesData);} else {console.error('Failed to fetch sales data:', xhr.statusText);}};xhr.onerror = function () {console.error('Request failed.');};xhr.send();// 渲染 ECharts 饼图function renderPieChart(data) {var pieChart = echarts.init(document.getElementById('pieChart'));// 构建饼图所需的数据格式var pieData = data.map(function(item) {return {name: item.month,value: item.amount};});// 配置饼图的选项var option = {title: {text: '销售数据分布'},tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},legend: {orient: 'vertical',left: 'left',data: data.map(function(item) { return item.month; }) // 设置图例数据},series: [{name: '销售数据',type: 'pie',radius: '55%',center: ['50%', '60%'],data: pieData // 使用从后端获取的数据}]};// 使用配置项设置图表pieChart.setOption(option);}
</script>
</body>
</html>

折线图

创建路径：src/main/resources/static/sales_long_chart.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Sales Data Line Chart</title><!-- 引入 ECharts --><script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script><!-- 引入 jQuery --><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<!-- 定义一个具有一定尺寸的 div，用于渲染图表 -->
<div id="lineChart" style="width: 800px; height: 600px;"></div><script>// 使用 AJAX 请求后端数据var xhr = new XMLHttpRequest();xhr.open('GET', 'http://localhost:8099/api/sales/records'); // 修改为实际的后端 API 路径xhr.onload = function () {if (xhr.status === 200) {var salesData = JSON.parse(xhr.responseText);renderLineChart(salesData);} else {console.error('Failed to fetch sales data:', xhr.statusText);}};xhr.onerror = function () {console.error('Request failed.');};xhr.send();// 渲染 ECharts 折线图function renderLineChart(data) {var lineChart = echarts.init(document.getElementById('lineChart'));// 构建折线图所需的数据格式var xAxisData = data.map(function(item) {return item.month;});var seriesData = data.map(function(item) {return item.amount;});// 配置折线图的选项var option = {title: {text: '销售数据趋势'},tooltip: {trigger: 'axis',formatter: '{a} <br/>{b} : {c}'},xAxis: {type: 'category',data: xAxisData // 设置 X 轴数据},yAxis: {type: 'value'},series: [{name: '销售额',type: 'line',data: seriesData // 设置折线图数据}]};// 使用配置项设置图表lineChart.setOption(option);}
</script>
</body>
</html>

希望本文对你有所帮助。如果你有任何疑问或建议，欢迎在评论区留言讨论。Happy coding!

相关文章：

后端加前端Echarts画图示例全流程（折线图，饼图，柱状图）

本文将带领读者通过一个完整的Echarts画图示例项目&#xff0c;演示如何结合后端技术&#xff08;使用Spring Boot框架&#xff09;和前端技术&#xff08;使用Vue.js或React框架&#xff09;来实现数据可视化。我们将实现折线图、饼图和柱状图三种常见的数据展示方式&#xff…...

编程日记 2024/7/3 23:08:51

ValidateAntiForgeryToken、AntiForgeryToken 防止CSRF（跨网站请求伪造）

用途&#xff1a;防止CSRF&#xff08;跨网站请求伪造&#xff09;。 用法&#xff1a;在View->Form表单中: aspx&#xff1a;<%:Html.AntiForgeryToken()%> razor&#xff1a;Html.AntiForgeryToken() 在Controller->Action动作上&#xff1a;[ValidateAntiForge…...

编程日记 2024/7/3 23:07:48

《昇思25天学习打卡营第5天 | mindspore 网络构建 Cell 常见用法》

1. 背景&#xff1a; 使用 mindspore 学习神经网络&#xff0c;打卡第五天&#xff1b; 2. 训练的内容&#xff1a; 使用 mindspore 的 nn.Cell 构建常见的网络使用方法&#xff1b; 3. 常见的用法小节&#xff1a; 支持一系列常用的 nn 的操作 3.1 nn.Cell 网络构建&…...

编程日记 2024/7/3 23:05:46

SQLServer：从数据类型 varchar 转换为 numeric 时出错。

1.工作要求 计算某两个经纬度距离 2.遇到问题 从数据类型 varchar 转换为 numeric 时出错。 3.解决问题 项目版本较老&#xff0c;使用SQLServer 2012 计算距离需执行视图&#xff0c;如下&#xff1a; SET QUOTED_IDENTIFIER ON SET ANSI_NULLS ON GO ALTER view vi_ord…...

编程日记 2024/7/3 23:03:44

探索迁移学习：通过实例深入理解机器学习的强大方法

探索迁移学习&#xff1a;通过实例深入理解机器学习的强大方法 &#x1f341;1. 迁移学习的概念&#x1f341;2. 迁移学习的应用领域&#x1f341;2.1 计算机视觉&#x1f341;2.2 自然语言处理&#xff08;NLP&#xff09;&#x1f341;2.3 医学图像分析&#x1f341;2.4 语音…...

编程日记 2024/7/3 23:02:43

【Linux】性能分析器 perf 详解（四）：trace

上一篇：【Linux】性能分析器 perf 详解（三） 1、trace 1.1 简介 perf trace 类似于 strace 工具：用于对Linux系统性能分析和调试的工具。 原理是：基于 Linux 性能计数器（Performance Counters for Linux, PCL），监控和记录系统调用和其他系统事件。 可以提供关于硬件…...

编程日记 2024/7/3 22:59:41

信息安全体系架构设计

对信息系统的安全需求是任何单一安全技术都无法解决的&#xff0c;要设计一个信息安全体系架构&#xff0c;应当选择合适的安全体系结构模型。信息系统安全设计重点考虑两个方面&#xff1b;其一是系统安全保障体系&#xff1b;其二是信息安全体系架构。 1.系统安全保障体系 安…...

编程日记 2024/7/3 22:58:40

GPT-5即将登场：AI赋能下的未来工作与日常生活新图景

随着OpenAI首席技术官米拉穆拉蒂在近期采访中的明确表态&#xff0c;GPT-5的发布已不再是遥不可及的梦想&#xff0c;而是即将在一年半后与我们见面的现实。这一消息无疑在科技界乃至全社会引发了广泛关注和热烈讨论。从GPT-4到GPT-5的飞跃&#xff0c;被形容为从高中生到博士生…...

编程日记 2024/7/3 22:56:37

RocketMQ实战：一键在docker中搭建rocketmq和doshboard环境

在本篇博客中&#xff0c;我们将详细介绍如何在 Docker 环境中一键部署 RocketMQ 和其 Dashboard。这个过程基于一个预配置的 Docker Compose 文件&#xff0c;使得部署变得简单高效。 项目介绍 该项目提供了一套 Docker Compose 配置&#xff0c;用于快速部署 RocketMQ 及其…...

编程日记 2024/7/3 22:52:33

前端项目vue3/React使用pako库解压缩后端返回gzip数据

pako仓库地址&#xff1a;https://github.com/nodeca/pako 文档地址&#xff1a;pako 2.1.0 API documentation 外部接口返回一个直播消息或者图片数据是经过zip压缩的&#xff0c;前端需要把这个数据解压缩之后才可以使用&#xff0c;这样可以大大降低网络数据传输的内容&…...

编程日记 2024/7/3 22:51:32

C++专业面试真题（1）学习

TCP和UDP区别 TCP 面向连接。在传输数据之前&#xff0c;通信双方需要先建立一个连接&#xff08;三次握手&#xff09;。可靠性。TCP提供可靠的数据传输&#xff0c;它通过序列号、确认应答、重传机制和校验和等技术确保数据的正确传输。数据顺序&#xff1a;TCP保证数据按发…...

编程日记 2024/7/3 22:50:31

2024 年人工智能和数据科学的五个主要趋势

引言 2023年&#xff0c;人工智能和数据科学登上了新闻头条。生成性人工智能的兴起无疑是这一显著提升曝光度的驱动力。那么&#xff0c;在2024年&#xff0c;该领域将如何继续占据头条&#xff0c;并且这些趋势又将如何影响企业的发展呢&#xff1f; 在过去几个月&#xff0c;…...

编程日记 2024/7/3 22:49:30

GPU云渲染平台到底怎么选？这六点要注意！

随着对高效计算和图像处理需求的增加&#xff0c;GPU云渲染平台成为许多行业的关键工具。尤其是对影视动画制作领域来说&#xff0c;选择一个合适的GPU云渲染平台可以大大提升工作效率。然而&#xff0c;面对市场上众多的选择&#xff0c;如何找到适合自己的GPU云渲染平台呢&am…...

编程日记 2024/7/3 22:47:28

【区块链+基础设施】国家健康医疗大数据科创平台 | FISCO BCOS应用案例

在医疗领域&#xff0c;疾病数据合法合规共享是亟待解决的难题。一方面&#xff0c;当一家医院对患者实施治疗后&#xff0c;若患者转到其 他医院就医&#xff0c;该医院就无法判断诊疗手段是否有效。另一方面&#xff0c;医疗数据属于个人敏感数据&#xff0c;一旦被泄露或被恶…...

编程日记 2024/7/3 22:46:27

redis压测和造数据方式

一、redis 压测工具 1、压测命令 1、对3000字节的数据进行get set的操作 redis-benchmark -h 10.166.15.36 -p 7001 -t set,get -n 100000 -q -d 3000 2、100个并发连接&#xff0c;100000个请求&#xff0c;检测host为localhost 端口为6379的redis服务器性能 redis-benchma…...

编程日记 2024/7/3 22:43:24

数据存储方案选择：ES、HBase、Redis、MySQL与MongoDB的应用场景分析

一、概述 1.1 背景 在当今数据驱动的时代&#xff0c;选择合适的数据存储技术对于构建高效、可靠的信息系统至关重要。随着数据量的爆炸式增长和处理需求的多样化&#xff0c;市场上涌现出了各种数据存储解决方案&#xff0c;每种技术都有其独特的优势和适用场景。Elasticsear…...

编程日记 2024/7/3 22:41:22

数组理论基础

1. **数组定义**&#xff1a; - 数组是存放在连续内存空间上的相同类型数据的集合。 2. **数组特性**&#xff1a; - 数组下标从0开始。 - 数组的内存空间地址是连续的。 3. **数组操作**&#xff1a; - 数组可以通过下标索引快速访问元素。 - 数组元素的删除…...

编程日记 2024/7/3 22:38:19

FlinkCDC 数据同步优化及常见问题排查

【面试系列】Swift 高频面试题及详细解答 欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;欢迎订阅相关专栏&#xff1a; 欢迎关注微信公众号&#xff1a;野老杂谈 ⭐️ 全网最全IT互联网公司面试宝典&#xff1a;收集整理全网各大IT互联网公司技术、项目、…...

编程日记 2024/7/3 22:37:18

手把手edusrc漏洞挖掘和github信息收集

0x1 前言 这里主要还是介绍下新手入门edusrc漏洞挖掘以及在漏洞挖掘的过程中信息收集的部分哈&#xff01;&#xff08;主要给小白看的&#xff0c;大佬就当看个热闹了&#xff09;下面的话我将以好几个不同的方式来给大家介绍下edusrc入门的漏洞挖掘手法以及利用github信息收…...

编程日记 2024/7/3 22:36:17

linux系统中的各种命令的解释和帮助（含内部命令、外部命令）

目录 一、说明 二、命令详解 1、帮助命令的种类 &#xff08;1&#xff09;help用法 &#xff08;2&#xff09;--help用法 2、如何区别linux内部命令和外部命令 三、help和—help 四、man 命令 1、概述 2、语法和命令格式 &#xff08;1&#xff09;man命令的格式&…...

编程日记 2024/7/3 22:34:15

Gemma轻量级开放模型在个人PC上释放强大性能，让每个桌面秒变AI工作站

Google DeepMind团队最近推出了Gemma&#xff0c;这是一个基于其先前Gemini模型研究和技术的开放模型家族。这些模型专为语言理解、推理和安全性而设计&#xff0c;具有轻量级和高性能的特点。 Gemma 7B模型在不同能力领域的语言理解和生成性能&#xff0c;与同样规模的开放模型…...

编程日记 2024/7/3 22:30:11

Git使用中遇到的问题（随时更新）

问题1.先创建本地库&#xff0c;后拉取远程仓库时上传失败的问题怎么解决&#xff1f; 操作主要步骤&#xff1a; step1 设置远程仓库地址: $ git remote add origin gitgitee.com:yourAccount/reponamexxx.git step2 推送到远程仓库: $ git push -u origin "master&qu…...

编程日记 2024/7/3 22:29:09

php 跨域问题

设置header <?php $origin isset($_SERVER[HTTP_ORIGIN])? $_SERVER[HTTP_ORIGIN]:;$allow_originarray(http://www.aaa.com,http://www.bbb.com, ); if( $origin in $allow_origin ){header("Access-Control-Allow-Origin:".$origin);header("Access-Co…...

编程日记 2024/7/3 22:28:08

【leetcode52-55图论、56-63回溯】

图论 回溯...

编程日记 2024/7/3 22:27:07

2024 年江西省研究生数学建模竞赛题目 A题交通信号灯管理---完整文章分享（仅供学习）

问题&#xff1a; 交通信号灯是指挥车辆通行的重要标志&#xff0c;由红灯、绿灯、黄灯组成。红灯停、绿灯行&#xff0c;而黄灯则起到警示作用。交通信号灯分为机动车信号灯、非机动车信号灯、人行横道信号 灯、方向指示灯等。一般情况下&#xff0c;十字路口有东西向和南北向…...

编程日记 2024/7/3 22:26:06

日志可视化监控体系ElasticStack 8.X版本全链路实战

目录 一、SpringBoot3.X整合logback配置1.1 log4j、logback、self4j 之间关系 1.2 SpringBoot3.X整合logback配置 二、日志可视化分析ElasticStack 2.1为什么要有Elastic Stack 2.2 什么是Elastic Stack 三、ElasticSearch8.X源码部署 ​四、Kibana源码部署 五、LogSta…...

编程日记 2024/7/3 22:24:03

【LinuxC语言】定义线程池结果

文章目录 前言任务结构体线程池定义总结前言 在并发编程中，线程池是一种非常重要的设计模式。线程池可以有效地管理和控制线程的数量，避免线程频繁创建和销毁带来的性能开销，提高系统的响应速度。在Linux环境下，我们可以使用C语言来实现一个简单的线程池。 线程池的主要组…...

编程日记 2024/7/3 22:23:02

uniapp分包

分包是为了优化小程序的下载和启动速度 小程序启动默认下载主包并启动页面&#xff0c;当用户进入分包时&#xff0c;才会下载对应的分包&#xff0c;下载完进行展示。 /* 在manifest.json配置下添加optimization&#xff0c;开启分包优化 */ "mp-weixin" : {/**分包…...

编程日记 2024/7/3 22:22:01

Python 生成Md文件带超链 和 PDF文件 带分页显示内容

software.md # -*- coding: utf-8 -*- import os f open("software.md", "w", encoding"utf-8") f.write(内部测试版2024 MD版\n) for root, dirs, files in os.walk(path): dax os.path.basename(root)if dax "":print("空白…...

编程日记 2024/7/3 22:20:59

行业模板｜DataEase旅游行业大屏模板推荐

DataEase开源数据可视化分析工具于2022年6月发布模板市场&#xff08;https://templates-de.fit2cloud.com&#xff09;&#xff0c;并于2024年1月新增适用于DataEase v2版本的模板分类。模板市场旨在为DataEase用户提供专业、美观、拿来即用的大屏模板&#xff0c;方便用户根据…...

编程日记 2024/7/3 22:17:56

this.$refs[tab.$attrs.id].scrollIntoView is not a function

打印this.$refs[tab.$attrs.id].scrollIntoView 在控制台看到的是一个undefined 是因为this.$refs[tab.$attrs.id] 不是一个dom 是一个vuecomponent 如图所示: 所以我用的这个document.querySelector(.${tab.$attrs.id})获取dom document.querySelector(.${tab.$attrs.id})…...

编程日记 2024/7/3 22:15:54

【AI是在帮助开发者还是取代他们？】AI与开发者：合作与创新的未来

目录 前言一、AI工具现状&#xff08;一&#xff09;GitHub Copilot&#xff08;二&#xff09;TabNine 二、AI对开发者的影响&#xff08;一&#xff09;影响和优势&#xff08;二&#xff09;新技能和适应策略&#xff08;三&#xff09;保持竞争力的策略 三、AI开发的未来&a…...

编程日记 2024/7/3 22:14:53

【SpringBoot Web框架实战教程(开源)】01 使用 pom 方式创建 SpringBoot 第一个项目

导读 这是一系列关于 SpringBoot Web框架实战 的教程&#xff0c;从项目的创建&#xff0c;到一个完整的 web 框架&#xff08;包括异常处理、拦截器、context 上下文等&#xff09;&#xff1b;从0开始&#xff0c;到一个可以直接运用在生产环境中的web框架。而且所有源码均开…...

编程日记 2024/7/3 22:13:52

Boosting【文献精读、翻译】

Boosting Bhlmann, P., & Yu, B. (2009). Boosting. Wiley Interdisciplinary Reviews: Computational Statistics, 2(1), 69–74. doi:10.1002/wics.55 摘要 在本文中&#xff0c;我们回顾了Boost方法&#xff0c;这是分类和回归中最有效的机器学习方法之一。虽然我们也讨…...

编程日记 2024/7/3 22:11:50

保姆级教程|如何配置ROS1主从机

在机器人开发经常遇到使用两个板子通信问题&#xff0c;比如一个板子跑底层的运动控制&#xff0c;一个板子跑定位导航。为了确保两个板子之间的ROS通信流畅&#xff0c;我们需要在两个板子的.bashrc文件中添加必要的环境变量配置。首先&#xff0c;确保你的 /etc/hosts 文件中…...

编程日记 2024/7/3 22:10:49

贝叶斯优化算法（Bayesian Optimization）及其Python 和 MATLAB 实现

贝叶斯优化算法&#xff08;Bayesian Optimization&#xff09;是一种基于贝叶斯统计理论的优化方法&#xff0c;通常用于在复杂搜索空间中寻找最优解。该算法能够有效地在未知黑盒函数上进行优化&#xff0c;并在相对较少的迭代次数内找到较优解&#xff0c;因此在许多领域如超…...

编程日记 2024/7/3 22:09:47

NLP - 基于bert预训练模型的文本多分类示例

项目说明 项目名称 基于DistilBERT的标题多分类任务 项目概述 本项目旨在使用DistilBERT模型对给定的标题文本进行多分类任务。项目包括从数据处理、模型训练、模型评估到最终的API部署。该项目采用模块化设计&#xff0c;以便于理解和维护。 项目结构 . ├── bert_dat…...

编程日记 2024/7/3 22:08:44

数据库备份和还原

一、备份 备份类型 1.完全备份 全备份是指对整个数据集进行完整备份。每次备份都会复制所有选定的数据&#xff0c;无论这些数据是否发生了变化。 2.增量备份 增量备份是指仅备份自上次备份&#xff08;无论是全备份还是增量备份&#xff09;以来发生变化的数据。它记录了…...

编程日记 2024/7/3 22:07:44

谷粒商城-个人笔记(集群部署篇一)

前言 ​学习视频&#xff1a;​Java项目《谷粒商城》架构师级Java项目实战&#xff0c;对标阿里P6-P7&#xff0c;全网最强​学习文档&#xff1a; 谷粒商城-个人笔记(基础篇一)谷粒商城-个人笔记(基础篇二)谷粒商城-个人笔记(基础篇三)谷粒商城-个人笔记(高级篇一)谷粒商城-个…...

编程日记 2024/7/3 22:05:40

Linux环境下的字节对齐现象

在Linux环境下&#xff0c;字节对齐是指数据在内存中的存储方式。字节对齐是为了提高内存访问的效率和性能。 在Linux中&#xff0c;默认情况下&#xff0c;结构体和数组的成员会进行字节对齐。具体的对齐方式可以通过编译器选项来控制。 在使用C语言编写程序时&#xff0c;可…...

编程日记 2024/7/3 22:04:37

没有调用memcpy却报了undefined reference to memcpy错误

现象 在第5行出现了&#xff0c;undefined reference to memcpy’ 1 static void printf_x(unsigned int val) 2{ 3 char buffer[32]; 4 const char lut[]{0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F}; 5 char *p buffer; 6 while (val || p buffer) { 7 *(p) …...

编程日记 2024/7/3 22:02:34

import和require的区别

import是ES6标准中的模块化解决方案&#xff0c;require是node中遵循CommonJS规范的模块化解决方案。 后者支持动态引入&#xff0c;也就是require(${path}/xx.js)&#xff0c;前者目前不支持&#xff0c;但是已有提案。 前者是关键词&#xff0c;后者不是。 前者是编译时加…...

编程日记 2024/7/3 22:01:31

白骑士的Python教学高级篇 3.3 数据库编程

系列目录 上一篇&#xff1a;白骑士的Python教学高级篇 3.2 网络编程 SQL基础 Structured Query Language (SQL) 是一种用于管理和操作关系型数据库的标准语言。SQL能够执行各种操作&#xff0c;如创建、读取、更新和删除数据库中的数据&#xff08;即CRUD操作&#xff09;&a…...

编程日记 2024/7/3 22:00:26

macOS 安装redis

安装Redis在macOS上通常通过Homebrew进行&#xff0c;Homebrew是macOS上一个流行的包管理器。以下是安装Redis的步骤&#xff1a; 一 使用Homebrew安装Redis 1、安装Homebrew&#xff08;如果尚未安装&#xff09;&#xff1a; 打开终端&#xff08;Terminal&#xff09;并执…...

编程日记 2024/7/3 21:59:25

【AIGC评测体系】大模型评测指标集

大模型评测指标集 &#xff08;☆&#xff09;SuperCLUE&#xff08;1&#xff09;SuperCLUE-V&#xff08;中文原生多模态理解测评基准&#xff09;&#xff08;2&#xff09;SuperCLUE-Auto&#xff08;汽车大模型测评基准&#xff09;&#xff08;3&#xff09;AIGVBench-T2…...

编程日记 2024/7/3 21:57:18

工厂模式之简单工厂模式

文章目录 工厂模式工厂模式分为工厂模式的角色简单工厂模式案例代码定义一个父类&#xff0c;三个子类定义简单工厂客户端使用输出结果 工厂模式 工厂模式属于创造型的模式&#xff0c;用于创建对象。 工厂模式分为 简单工厂模式&#xff1a;定义一个简单工厂类&#xff0c;根…...

编程日记 2024/7/3 21:53:06

2.（vue3.x+vite）调用iframe的方法（vue编码）

1、效果预览 2.编写代码 （1）主页面 <template><div><button @click="sendMessage">调用iframe，并发送信息...

编程日记 2024/7/3 21:52:00

实战项目——用Java实现图书管理系统

前言 首先既然是管理系统&#xff0c;那咱们就要实现以下这几个功能了--> 分析 1.首先是用户分为两种&#xff0c;一个是管理员&#xff0c;另一个是普通用户&#xff0c;既如此&#xff0c;可以定义一个用户类&#xff08;user&#xff09;&#xff0c;在定义管理员类&am…...

编程日记 2024/7/3 21:50:58

利用DeepFlow解决APISIX故障诊断中的方向偏差问题

概要&#xff1a;随着APISIX作为IT应用系统入口的普及&#xff0c;其故障定位能力的不足导致了在业务故障诊断中&#xff0c;APISIX常常成为首要的“嫌疑对象”。这不仅导致了“兴师动众”式的资源投入&#xff0c;还可能使诊断方向“背道而驰”&#xff0c;从而导致业务故障“…...

编程日记 2024/7/3 21:47:55

sqlalchemy获取数据条数

1、sqlalchemy获取数据条数 在SQLAlchemy中，你可以使用count()函数来获取数据表中的记录条数。 from sqlalchemy import create_engine, MetaData, Table# 数据库连接字符串 DATABASE_URI = dialect+driver://username:password@host:port/database# 创建引擎 engine = crea…...

编程日记 2024/7/3 21:46:54

Android基础知识

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…...

编程日记 2024/7/6 15:05:22

docker -run hello-world超时

主要原因就是尝试拉取库的时候没有从阿里云镜像里拉&#xff0c;所以设置一下就好了 这里使用的是ubuntu系统&#xff08;命令行下逐行敲就行了&#xff09; sudo mkdir -p /etc/docker sudo tee /etc/docker/daemon.json <<-EOF {"registry-mirrors": [&quo…...

编程日记 2024/7/6 8:19:10

服务器的分类，主流服务器的应用场景

一、服务器分类 服务器可以按应用层次、体系架构、用途、外形等进行分类。以下是详细说明&#xff1a; 按应用层次分类 入门级服务器&#xff1a;这些服务器一般用于小型企业或部门的简单任务&#xff0c;如文件共享和打印服务。工作组级服务器&#xff1a;适用于中小型企业&…...

编程日记 2024/7/6 8:07:04

C++实现简化版Qt的QObject（3）：增加父子关系、属性系统

前几天写了文章&#xff1a; C实现一个简单的Qt信号槽机制 C实现简化版Qt信号槽机制&#xff08;2&#xff09;&#xff1a;增加内存安全保障 之后感觉还不够过瘾&#xff0c;Qt中的QObject体系里还有不少功能特性没有实现。为了提高QObject的还原度&#xff0c;今天我们将父子…...

编程日记 2024/7/6 0:08:56

算法练习——数素数

题目 题目描述 令Pi表示第i&#xff08;i从1开始计数&#xff09;个素数。现任给两个正整数M < N < 10000&#xff0c;请输出PM到PN的所有素数。 输入描述: 输入在一行中给出M和N&#xff0c;其间以空格分隔。 输出描述: 输出从PM到PN的所有素数&#xff0c;每10个…...

编程日记 2024/7/5 22:17:44

23种设计模式之装饰者模式

深入理解装饰者模式 一、装饰者模式简介1.1 定义1.2 模式类型1.3 主要作用1.4 优点1.5 缺点 二、模式动机三、模式结构四、 装饰者模式的实现4.1 组件接口4.2 具体组件4.3 装饰者抽象类4.4 具体装饰者4.5 使用装饰者模式4.6 输出结果&#xff1a; 五、 应用场景5.1 图形用户界面…...

编程日记 2024/7/5 21:57:27

车身结构的匠心打造：星途揽月与传祺GS8的安全对决

在谈论汽车的安全性时，车身结构作为一个核心要素，其重要性不言而喻。今天，我们将对两款备受瞩目的SUV——星途揽月和传祺GS8的车身结构进行深入剖析。我们将详细探讨这两款车型在车身设计上如何精益求精，通过独特的匠心独运，旨在为乘客提供最为周全和最大程度的保护，从而…...

编程日记 2024/7/6 17:25:16

使用NuScenes数据集生成ROS Bag文件：深度学习与机器人操作的桥梁

在自动驾驶、机器人导航及环境感知的研究中&#xff0c;高质量的数据集是推动算法发展的关键。NuScenes数据集作为一项开源的多模态自动驾驶数据集&#xff0c;提供了丰富的雷达、激光雷达&#xff08;LiDAR&#xff09;、摄像头等多种传感器数据&#xff0c;是进行多传感器融合…...

编程日记 2024/7/6 13:41:05

script 标签中 defer 和 async 属性的区别

script 标签中的 defer Vs. async 在 HTML 中&#xff0c;script 标签可以使用 defer 和 async 属性来控制外部 JavaScript 脚本加载和执行的方式。defer 和 async 都可以提高页面的加载性能&#xff0c;主要区别整理如下。 区别点deferasync加载顺序按顺序加载异步加载&…...

编程日记 2024/7/5 12:33:22

【Hudi】hudi概述

Apache Hudi是什么 下一代数仓解决方法&#xff0c;提供高效的upsert和近实时更新Hudi提供了表、事务、高效的upsert/delete、高级索引、流摄取服务、数据集群/压缩优化和并发。同时保持数据的开源文件格式 两种文件格式&#xff1a;parquet、avroApache Hudi不仅非常适合流工…...

编程日记 2024/7/5 8:16:32

milvus 中的集合与 database

在Milvus中&#xff0c;集合&#xff08;Collection&#xff09;和数据库&#xff08;Database&#xff09;是两个不同的概念&#xff0c;它们之间存在一定的关系。 1. 数据库&#xff08;Database&#xff09; 数据库是Milvus中的最顶层的组织单位&#xff0c;可以理解为一个…...

编程日记 2024/7/5 16:42:06

WebService的wsdl详解

webservice服务的wsdl内容详解&#xff0c;以及如何根据其内容编写调用代码 wsdl示例 展示一个webservice的wsdl&#xff0c;及调用这个接口的Axis客户端 wsdl This XML file does not appear to have any style information associated with it. The document tree is shown…...

编程日记 2024/7/6 11:33:10