Spring boot + ECharts

文章目录

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

一、创建数据库与表
（一）创建数据库

创建数据库 - bootdb

CREATE DATABASE bootdb;

1

执行上面命令，效果图如下：

（二）创建数据表

创建表结构-t_class

CREATE TABLE t_class (
id int(11) NOT NULL AUTO_INCREMENT,
class varchar(50) CHARACTER SET utf8 DEFAULT NULL,
boys int(11) DEFAULT NULL,
girls int(11) DEFAULT NULL,
PRIMARY KEY (id) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 5 CHARACTER SET = utf8;

执行上面命令，效果如下：

插入数据

INSERT INTO t_class VALUES (1, ‘20数据1班’, 33, 22);
INSERT INTO t_class VALUES (2, ‘20数据2班’, 24, 29);
INSERT INTO t_class VALUES (3, ‘20软件1班’, 22, 33);
INSERT INTO t_class VALUES (4, ‘20软件2班’, 26, 37);

执行上面语句，效果如下图所示：

查看班级表记录

二、创建Spring Boot项目

利用Spring Initializr创建Spring Boot项目 - EChartsDemo

添加依赖，如下步骤所示：

单击【Create】按钮

三、创建班级实体类

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

package net.zx.echarts.bean;

/**

• 功能：班级实体类
• 作者：jiangzhiyou
• 日期：2022年6月16
  */

public class Clazz {
private int id;
private String clazz;
private int boys;
private int girls;

public int getId(){
    return id;
}
public void setId(int id){
    this.id = id;
}
public void getClazz(){

}
public void setClazz(String clazz){
    this.clazz = clazz;
}
public int getBoys(){
    return boys;
}
public void setBoys(int boys){
    this.boys = boys;
}
public  int getGirls(){
    return girls;
}
public void setGirls(int girls){
    this.girls = girls;
}
@Override
public String toString(){
    return "Clazz{" +
            "id=" + id +
            ", boys=" + boys +
            ", girls=" + girls +
            '}';
}

}

四、创建班级映射器接口

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

package net.zx.echarts.mapper;

import net.zx.echarts.bean.Clazz;
import org.apache.ibatis.annotations.Mapper;
import java.util.List;

/**

• 功能：班级映射器接口
• 作者：xizaizhao
• 日期：2022年6月16
  */

@Mapper
public interface ClazzMapper {
List findAll();
}

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

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

<?xml version="1.0" encoding="UTF-8" ?>

<select id="findAll" resultMap="clazzMap">
    SELECT * FROM t_class;
</select>

六、创建班级服务类

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

package net.zx.echarts.service;

import net.zx.echarts.bean.Clazz;
import net.zx.echarts.mapper.ClazzMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**

• 功能：班级服务类

• 作者：xizaizhao

• 日期：2022年06月16日
  */
  @Service
  public class ClazzService {
  @Autowired(required = false)
  private ClazzMapper clazzMapper;

  public List findAll() {
  return clazzMapper.findAll();
  }
  }

七、创建班级控制器

在net.zx.echarts包里创建controller子包，在子包里创建ClazzController类

package net.zx.echarts.controller;

import net.zx.echarts.bean.Clazz;
import net.zx.echarts.service.ClazzService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

/**

• 功能：班级控制器

• 作者：xizaizhao

• 日期：2022年06月16日
  */
  @Controller
  public class ClazzController {
  @Autowired
  private ClazzService clazzService;

  @GetMapping(“/”)
  public String index() {
  return “index”;
  }

  @RequestMapping(value = “/getAll”, produces = “application/json; charset=utf-8”)
  @ResponseBody
  public List getAll() {
  List clazzes = clazzService.findAll();
  return clazzes;
  }
  }

八、添加ECharts和jQuery脚本

在static里创建js目录，添加echarts.min.js与jquery.min.js
在这里插入图片描述

九、添加Druid起步依赖

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

在这里插入图片描述

com.alibaba druid-spring-boot-starter 1.2.11

1
2
3
4
5
6

十、修改应用属性文件

将application.properties更名为application.yaml

在这里插入图片描述

spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/bootdb?serverTimezone=UTC&useUnicode=true&characterEncoding=UTF-8
username: root
password: 123456

type: com.alibaba.druid.pool.DruidDataSource
druid:
  initial-size: 20
  max-active: 100
  min-idle: 10

mybatis:
mapper-locations: classpath:mapper/*.xml
type-aliases-package: net.zx.echarts.bean

server:
port: 8888

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

十一、创建页面可视化数据

在templates目录里创建index.html
在这里插入图片描述

---

十二、启动应用，查看结果

启动应用（端口号：8888）

访问http://localhost:8888

单击【显示柱状图】按钮