Spring Boot +ECharts 案例

文章目录

    一、提出任务
        （一）班级数据
        （二）运行效果
    二、完成任务
        （一）创建数据库与表
            1、创建数据库
            2、创建数据表
            3、插入数据
        （二）创建Spring Boot项目
        （三）创建班级实体类
        （四）创建班级映射器接口
        （五）创建班级映射器配置文件
        （六）创建班级服务类
        （七）创建班级控制器
        （八）添加ECharts和jQuery脚本
        （九）添加Druid起步依赖
        （十）修改应用属性文件
        （十一）创建页面可视化数据
        （十二）启动应用，查看结果

一、提出任务

    后端利用Spring Boot查询班级表数据，前端利用ECharts绘制各班人数柱形图。

（一）班级数据

 （二）运行效果

 

二、完成任务

（一）创建数据库与表

1、创建数据库

• 创建数据库 - bootdb

 2、创建数据表

3、插入数据 

 

（二）创建Spring Boot项目

• 利用Spring Initializr创建Spring Boot项目 - EChartsDemo2

 添加依赖

 单击【Finish】按钮

（三）创建班级实体类

• 在net.cch.echarts包里创建bean子包，在子包里创建Clazz类

 

（四）创建班级映射器接口

• 在net.cch.echarts包里创建mapper子包，在子包里创建ClazzMapper接口

 

 

（五）创建班级映射器配置文件

• 在resources里创建mapper目录，在里面创建ClazzMapper.xml

（六）创建班级服务类

• 在net.cch.echarts包里创建service子包，在子包里创建ClazzService类

 

 

（八）添加ECharts和jQuery脚本

• 在static里创建js目录，添加echarts.min.js与jquery.min.js

 

（九）添加Druid起步依赖

• 在pom.xml文件里添加Druid针对Spring Boot的起步依赖

 

（十）修改应用属性文件

• 将application.properties更名为application.yaml

（十一）创建页面可视化数据

• 在templates目录里创建index.html

 

 

（十二）启动应用，查看结果