Mencapai visualisasi data dengan mendapatkan data daripada pangkalan data, menukarnya kepada data JSON dan mengembalikannya ke antara muka hadapan.
Ujian visualisasi data
pengenalan pom.xml (hanya diperlukan untuk contoh dalam artikel ini, kebergantungan lain diimport oleh anda sendiri)
<!--Thymeleaf整合security--> <dependency> <groupId>org.thymeleaf.extras</groupId> <artifactId>thymeleaf-extras-springsecurity5</artifactId> <version>3.0.4.RELEASE</version> </dependency> <!--导入lombok小辣椒驱动依赖,用来生成get/set方法依赖--> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <!--<optional>true</optional>--> <version>1.18.12</version> <scope>provided</scope><!--自动生成有参无参构造--> </dependency> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.4</version> </dependency>
1. Lapisan pengawal
package com.dvms.controller; /* *文件名: DataviewController *创建者: CJW *创建时间:2022/4/15 20:33 *描述: TODO */ import com.alibaba.fastjson.JSON; import com.dvms.service.ParamoduleService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.ModelMap; import org.springframework.web.bind.annotation.RequestMapping; import java.util.ArrayList; @Controller public class DataviewController { @Autowired private ParamoduleService paramoduleService; // 查出 @RequestMapping("/data/todatashow") public String finddata(ModelMap model){ ArrayList<String> dataname = paramoduleService.finddata(); ArrayList<Integer> datanum = paramoduleService.finddatanum(); String datanameJson = JSON.toJSONString(dataname); String datanumJson = JSON.toJSONString(datanum); System.out.println(datanameJson); System.out.println(datanumJson); model.put("datanameJson",datanameJson); model.put("datanumJson",datanumJson); return "ems/charts"; } }
2. Lapisan perkhidmatan
package com.dvms.service; import com.dvms.entity.Record; import com.dvms.entity.Video; import java.util.ArrayList; import java.util.List; import java.util.Map; /* *文件名: ParamoduleService *创建者: CJW *创建时间:2022/1/15 10:54 *描述: TODO */ public interface ParamoduleService { ArrayList<String> finddata(); ArrayList<Integer> finddatanum(); }
3 >
4. lapisan entiti
package com.dvms.service.Impl; import com.dvms.dao.ParamoduleDao; import com.dvms.entity.Record; import com.dvms.entity.Video; import com.dvms.service.ParamoduleService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.ArrayList; import java.util.List; import java.util.Map; /* *文件名: ParamoduleServiceImpl *创建者: CJW *创建时间:2022/1/15 10:55 *描述: TODO */ @Service public class ParamoduleServiceImpl implements ParamoduleService { @Autowired private ParamoduleDao paramoduleDao; //查出数据名 @Override public ArrayList<String> finddata(){ return paramoduleDao.finddata(); } //查出数据数量 @Override public ArrayList<Integer> finddatanum(){ return paramoduleDao.finddatanum(); } }
5 lapisan dao(pojo)
package com.dvms.entity; /* *文件名: Data *创建者: CJW *创建时间:2022/4/14 16:17 *描述: TODO */ import lombok.AllArgsConstructor; import lombok.NoArgsConstructor; import lombok.ToString; import lombok.experimental.Accessors; @lombok.Data @ToString @AllArgsConstructor @NoArgsConstructor @Accessors(chain = true) //链式调用 public class Data { private String id; private String dataname; private Integer datanum; }
6 . lapisan daoMapper
package com.dvms.dao; import com.dvms.entity.Record; import com.dvms.entity.Video; import org.springframework.stereotype.Repository; import java.util.ArrayList; import java.util.List; import java.util.Map; /* *文件名: ParamoduleDao *创建者: CJW *创建时间:2022/1/15 10:52 *描述: TODO */ @Repository public interface ParamoduleDao { ArrayList<String> finddata(); ArrayList<Integer> finddatanum(); }
7 Jadual data pangkalan data
3
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.dvms.dao.ParamoduleDao"> <!--查询数据名--> <select id="finddata" resultType="String"> select dataname from data </select> <!--查询数据数量--> <select id="finddatanum" resultType="Integer"> select datanum from data </select> </mapper>
Menunjukkan sebahagian daripada program bahagian hadapan, terutamanya dua ayat berikut:
<script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"> <html lang="en" xmlns:th="http://www.thymeleaf.org"></script>
var datanum=[[${datanumJson}]]; // thymeleaf 获取后端参数方式 JSON.parse(dataname) // JSON接收数据
Atas ialah kandungan terperinci Bagaimana SpringBoot+thymeleaf+Echarts+Mysql merealisasikan bacaan data visual. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!