因为我上次是使用的另外一种方法实现的可视化，对json了解的不够，所以来补充一下这一块的知识点

1、新建一个SpringBoot项目

2、添加依赖

<dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
        </dependency>
<dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.1.2</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.4</version>
        </dependency>

3、配置数据信息

将application.properties改成application.yml之后，加入连接数据库的信息：

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&zeroDateTimeBehavior=CONVERT_TO_NULL
    username: root
    password: 20214063

4、编写后台代码

先导入这两个文件：

要是想要在web页面访问springboot生成的html页面，就需要将资源文件.yml文件改成这样：

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&zeroDateTimeBehavior=CONVERT_TO_NULL
    username: root
    password: 20214063
  web:
    resources:
      static-locations: classpath:/templates/, classpath:/static/

也就是加上了后面三行~

静态成功显示了！

下面开始在springboot后端基础下，开始使用ajax和json进行数据库数据的获取：

获取到了数据库的数据：

就是不知道为啥，x轴数据少了一半~