springboot學習：從數據庫中獲取數據並展示於網頁內的兩種方法

寫在前面

記錄學習，隨時更改。
兩種方法：

1. 常規方法：Jpa訪問數據庫拿到值後，寫入域中，thymeleaf從域中拿值，然後修改標籤的值。

2. 用於echarts：由於echarts的所有配置都寫在js代碼內，所以上述java的實現不可行，採用Ajax輪詢的方式訪問配置的“@RestController”，拿到返回的查詢結果，經過處理後寫入圖表配置。

方法一

看代碼示例：

 @RequestMapping("/watermonitor") //訪問某url時
    public String water(Model model) {
        Kepwater kepwater=kepwaterRepository.findById(1); //讀出數據表內第一行數據
        if(kepwater==null){
            System.out.println(11);
        }else
        model.addAttribute("kepwater",kepwater);//若不爲空，寫入域內
        return "watermonitor"; //跳到"watermonitor.html"
    }

然後thymeleaf拿值，寫入html：（部分代碼）

<div  th:text="${kepwater.value}" style="font-size: 30px;text-align: center">100</div>

方法二

配置時就不用“@Controller”了，而用“@RestController”,因爲現在不返回頁面而是返回查詢結果。

@RestController
@RequestMapping("/oee")
public class oeeController {
    @Autowired
    private cn.edu.cims.sunwa.repository.oeeRepository oeeRepository;
    @RequestMapping("/listAll")
    public String oeeAll(){
        List<oee> list = oeeRepository.findAll();
        String str = JSON.toJSONString(list);
        return str;
    }
}

接下來看對應的JS代碼：
簡介：定時訪問上述配置的“/oee/listAll”,將每一條查詢結果的“month”值和“value”值push入兩個數組（數據表表頭是“id”，“month”，“value”），這裏我就直接相應定義了month和value數組（因爲echarts配置中，“data”參數是數組，所以需要將單個的值分別push入數組）。
代碼有點長，但其實基本上都是echarts配置，真正的邏輯在get函數內，很簡單。

<script type="text/javascript">
        // 基於準備好的dom，初始化echarts實例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定圖表的配置項和數據
        var option = {
            title: {
                text: 'OEE管理'
            },
            legend: {
                data:['目標','實際']
            },
            xAxis: {
                type: 'category',
                name:'月份',
                data: []
            },
            yAxis: {
                type: 'value',
                name:'百分比/%',
            },
            series: [{
                name:'目標',
                data: [40, 40, 40, 40, 40, 40, 40],
                type: 'line'
            },
            {
                name:'實際',
                data: [],
                label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
                type: 'line'
            }]
        };

        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);
        get();
        setInterval(get(),5000);
        function get(){
            $.ajax({
                url: '/oee/listAll',
                method: "get",
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                dataType: "json",
                clickToSelect: true,
                success:function (data) {
                    var value=[];
                    var month=[];
                    for (var i = 0;i<data.length;i++){
                        console.log(data[i]);
                        value.push(data[i].value);
                        month.push(data[i].month)
                    }
                    //console.log(a);
                    myChart.setOption({
                        xAxis: {
                            type: 'category',
                            data: month
                        },
                        series: [{
                        name:'實際',
                        data: value,
                        label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                        type: 'line'
                    }]

                    })

                }
            });
        }
    </script>