第八次课-echarts图表统计-乐观锁

飞一样的编程
飞一样的编程
擅长邻域:Java,MySQL,Linux,nginx,springboot,mongodb,微信小程序,vue

分类: springboot vue 专栏: 新版在线教育项目 标签: 乐观锁 echarts

2024-04-16 15:16:03 283浏览

课程管理+echarts图表统计+乐观锁

echarts图表统计

简介

ECharts是百度的一个项目,后来百度把Echart捐给apache,用于图表展示,提供了常规的折线图柱状图散点图饼图K线图,用于统计的盒形图,用于地理数据可视化的地图热力图线图,用于关系数据可视化的关系图treemap旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图仪表盘,并且支持图与图之间的混搭。

官方网站:https://echarts.apache.org/handbook/zh/get-started/

特别注意:不能在created里使用。要在页面渲染成功后使用,也就是在mounted中可以用

使用教程

先安装

npm install echarts --save
<template>
<div id="main" style="width: 400px;height: 300px" ></div>
</template>

<script>

import * as echarts from 'echarts';
export default {
    data(){
        return{}
    },
    methods:{
        

    },
    mounted(){
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
            }
        ]
        };

        option && myChart.setOption(option);
      
    }
}

</script>

<style>

</style>

建议:可以统计每个讲师的视频播放量总和的柱状图,直观地展示出哪个老师更受欢迎

核心sql语句

SELECT

 t.`name`,
 SUM(v.play_count) as total
 FROM edu_video v

LEFT JOIN edu_course c on c.id=v.course_id
LEFT JOIN edu_teacher t on c.teacher_id=t.id

GROUP BY   c.teacher_id

Java核心代码

public EchartsDto groupByTeacher() {

        EchartsDto echartsDto= new EchartsDto();
        echartsDto.setTeacherName(new ArrayList<>());
        echartsDto.setPlayCount(new ArrayList<>());

        List<Eacharts> list =videoMapper.groupByTeacher();
        list.stream().map(
                m ->{
                    echartsDto.getTeacherName().add( m.getName());
                    echartsDto.getPlayCount().add( m.getTotal());
                    return m;
                }
        ).collect(Collectors.toList());


        return echartsDto;
    }

前端要的一个横坐标的数组,一个是纵坐标的数组

@Data
public class EchartsDto {

    List<String> teacherName;
    List<Long> playCount;
}

乐观锁

参考文章:https://blog.csdn.net/qq_34337272/article/details/81072874

版本号机制

一般是在数据表中加上一个数据版本号 version 字段,表示数据被修改的次数。当数据被修改时,version 值会加一。当线程 A 要更新数据值时,在读取数据的同时也会读取 version 值,在提交更新时,若刚才读取到的 version 值为当前数据库中的 version 值相等时才更新,否则重试更新操作,直到更新成功。

举一个简单的例子 :假设数据库中帐户信息表中有一个 version 字段,当前值为 1 ;而当前帐户余额字段( balance )为 $100 。

操作员 A 此时将其读出( version=1 ),并从其帐户余额中扣除 $50( $100-$50 )。

在操作员 A 操作的过程中,操作员 B 也读入此用户信息( version=1 ),并从其帐户余额中扣除 $20 ( $100-$20 )。

操作员 A 完成了修改工作,将数据版本号( version=1 ),连同帐户扣除后余额( balance=$50 ),提交至数据库更新,此时由于提交数据版本等于数据库记录当前版本,数据被更新,数据库记录 version 更新为 2 。

操作员 B 完成了操作,也将版本号( version=1 )试图向数据库提交数据( balance=$80 ),但此时比对数据库记录版本时发现,操作员 B 提交的数据版本号为 1 ,数据库记录当前版本也为 2 ,不满足 “ 提交版本必须等于当前版本才能执行更新 “ 的乐观锁策略,因此,操作员 B 的提交被驳回。

这样就避免了操作员 B 用基于 version=1 的旧数据修改的结果覆盖操作员 A 的操作结果的可能。

库存 100

张三 100+1 =101 upadte version =1 2

0 101

李四 100+1=101

1 2

mybatisPlus如何使用乐观锁

MyBatis Plus 提供了一些方便的注解和方法来简化开发。你需要在实体类中使用 @Version 注解标记版本号字段,并在更新操作时 MyBatis Plus 会自动处理乐观锁机制。

下面是一个简单的示例:

假设你有一个实体类 DataEntity:

javaCopy Codeimport com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.baomidou.mybatisplus.annotation.Version;

@TableName("data")
public class DataEntity {
    @TableId
    private Long id;

    private String name;

    @Version
    private Integer version; // 版本号字段

    // 省略其他字段、构造方法和 getter/setter 方法
}

接下来,你的 Mapper 接口应该继承自 MyBatis Plus 提供的 BaseMapper 接口,它提供了许多常用的数据库操作方法,并支持乐观锁。

javaCopy Codeimport com.baomidou.mybatisplus.core.mapper.BaseMapper;

public interface DataMapper extends BaseMapper<DataEntity> {
}

在 Service 层中,你可以使用 MyBatis Plus 提供的 updateById 方法来更新数据。这个方法会自动处理乐观锁,如果更新失败(版本号不匹配),会抛出 OptimisticLockingException 异常。

javaCopy Codeimport org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

@Service
public class DataService {
    @Autowired
    private DataMapper dataMapper;

    @Transactional
    public void updateData(Long id, String newName) {
        DataEntity data = dataMapper.selectById(id);
        if (data != null) {
            // 模拟其他线程修改数据
            try {
                Thread.sleep(1000); // 假设其他线程需要一段时间才能完成修改
            } catch (InterruptedException e) {
                e.printStackTrace();
            }

            data.setName(newName);
            dataMapper.updateById(data); // 自动处理乐观锁
        } else {
            throw new RuntimeException("Data not found with id: " + id);
        }
    }
}

在这个示例中,updateData 方法通过 updateById 方法更新数据,MyBatis Plus 会自动处理乐观锁。如果在更新时版本号不匹配,则会抛出 OptimisticLockingException 异常。


好博客就要一起分享哦!分享海报

此处可发布评论

评论(0展开评论

暂无评论,快来写一下吧

展开评论

您可能感兴趣的博客

客服QQ 1913284695