Rumah >Java >javaTutorial >Bagaimana SpringBoot+thymeleaf+Echarts+Mysql merealisasikan bacaan data visual

Bagaimana SpringBoot+thymeleaf+Echarts+Mysql merealisasikan bacaan data visual

WBOY
WBOYke hadapan
2023-05-19 10:16:281474semak imbas

Mencapai visualisasi data dengan mendapatkan data daripada pangkalan data, menukarnya kepada data JSON dan mengembalikannya ke antara muka hadapan.

Ujian visualisasi data

Bagaimana SpringBoot+thymeleaf+Echarts+Mysql merealisasikan bacaan data visual

Bagaimana SpringBoot+thymeleaf+Echarts+Mysql merealisasikan bacaan data visual

Bagaimana SpringBoot+thymeleaf+Echarts+Mysql merealisasikan bacaan data visual

Proses pelaksanaan

1. pom.xml

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>

Contoh program Backend

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";
    }
}

Bagaimana SpringBoot+thymeleaf+Echarts+Mysql merealisasikan bacaan data visual

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();
}

Bagaimana SpringBoot+thymeleaf+Echarts+Mysql merealisasikan bacaan data visual

3 >

Bagaimana SpringBoot+thymeleaf+Echarts+Mysql merealisasikan bacaan data visual4. 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(); }
}

Bagaimana SpringBoot+thymeleaf+Echarts+Mysql merealisasikan bacaan data visual5 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;

}

Bagaimana SpringBoot+thymeleaf+Echarts+Mysql merealisasikan bacaan data visual6 . 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();

}

Bagaimana SpringBoot+thymeleaf+Echarts+Mysql merealisasikan bacaan data visual7 Jadual data pangkalan data

Bagaimana SpringBoot+thymeleaf+Echarts+Mysql merealisasikan bacaan data visual3

Pengenalan bahagian hadapan:

<?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!

Kenyataan:
Artikel ini dikembalikan pada:yisu.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam