SpringBoot thymeleaf实现饼状图与柱形图流程介绍

今天给大家带来的是一个用SpringBoot + thymeleaf显示出饼状图和柱形图

首先我们先创建项目 注意：创建SpringBoot项目时一定要联网不然会报错

项目创建好后我们首先对 application.yml 进行编译

#指定端口号
server:
 port: 8888
#配置mysql数据源
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/nba?serverTimezone=Asia/Shanghai
    username: root
    password: root
#配置模板引擎 thymeleaf
  thymeleaf:
    mode: HTML5
    cache: false
    suffix: .html
    prefix: classpath:/templates/
mybatis:
  mapper-locations: classpath:/mapper/*.xml
  type-aliases-package: com.bdqn.springboot  #放包名

接下来我们写后端代码

mapper层

package com.bdqn.springbootexcel.mapper;
import com.bdqn.springbootexcel.pojo.User;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import java.util.List;
@Mapper
public interface UserMapper {
    @Select("select * from user")
    List find();
    @Insert("insert into user ( name, age, sex) values ( #{name}, #{age}, #{sex})")
    int add(User user);
}

实体类

package com.bdqn.springbootexcel.pojo;
import com.alibaba.excel.annotation.ExcelProperty;
import lombok.Data;
@Data
public class User {
    @ExcelProperty(index = 0,value = "用户编号")
    private Integer id;
    @ExcelProperty(index = 1,value = "用户姓名")
    private String name;
    @ExcelProperty(index = 2,value = "用户年龄")
    private String age;
    @ExcelProperty(index = 3,value = "用户性别")
    private String sex;
}

现在编写最重要的前端代码

index.html

现在我们看看前端展示效果

到此这篇关于SpringBoot thymeleaf实现饼状图与柱形图流程介绍的文章就介绍到这了,更多相关SpringBoot饼状图与柱形图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！