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>