博客

最近有个项目需要实现采集信息在web端的实时显示，由于采集器与web端之间唯一的交互途径就是通过数据库，而采集器端会定时上传采集到的信息到数据库，所以想到一种方法就是让web端也定时的读取数据库，并且通过数据库操作（将采集时间进行逆序排序并取最新的一个）获得最新采集到的数据，并通过ajax在不刷新整个网页的基础上将数据显示到网页的table中

本博客是将本人学习的过程已经最终实现的结果予以记录。

在spring中

使用@Scheduled()注解来实现，但在项目启动类上必须加上@EnableScheduling注解

// 在主类前添加@EnableScheduling，启动Scheduled
@SpringBootApplication
@EnableScheduling       // 定时执行任务
public class InspectionApplication extends SpringBootServletInitializer{
    public static void main(String[] args) {
        SpringApplication.run(InspectionApplication.class, args);
    }
}


// 然后在服务类中进行实现 
@Component 
public class TestServiceImpl {   
    @Scheduled(fixedRate = 5000) // 定时执行，每隔5s执行一次   
    public void myTest() {       
        System.out.println("mytest" + new SimpleDateFormat("HH:mm:ss").format(new Date())); 
    } 
}

​ ​

其中，@Scheduled()中的属性可以有

fixedRate：固定速率执行任务，从启动的时候就开始执行
cron：顺序为 秒，分，时，日，月，周，年（可选），每个之间以空格符分隔
    "?":表示不确定的值
    ",":执行多个值    0，10，20，30
    "-":指定一个范围   0-15
    "/":指定增加的大小 n/m表示从n开始，每次增加m
    "L":用在日表示一个月中最后一天，用在周表示该月最后一个星期X
    "W":离给定日期最近的工作日（周一到周五）
    "#":该月的第几个周         6#3 该月第三个周五
fixedDelay:固定延迟，在延迟一段时间后执行定时任务，并不是加载后直接执行

在HTML中

可以在HTML中实现网页的定时刷新，但此时刷新的是整个网页

<!-- 10 表示每隔10s刷新一次， url若有参数可表示10s后自动跳转到某个url -->
<meta http-equiv="refresh" content="10;url="/>

使用Ajax实现网页区域的自动刷新

<!--使用setInterval实现页面定时刷新获取数据库数据-->
<script type="text/javascript">
    setInterval(function() {
        $.ajax({
            type: "get",
            url: "/jxInfo/getinfo",
            data: {},
            dataType: "json",
            async: false,
            success: function (result) {
                var str = "";
                str +=
                    "<td>" + result.place + "</td>" +
                    "<td>" + result.temp + "</td>" +
                    "<td>" + result.humid + "</td>" +
                    "<td>" + result.gate + "</td>" +
                    "<td>" + result.site1 + "</td>" +
                    "<td>" + result.site2 + "</td>" +
                    "<td>" + result.time + "</td>";
                document.getElementById("trData").innerHTML = str;
            }
        })
    }, 2000)
</script>


setInterval(function, interval)

function可以实现要执行的操作，interval表示时间间隔上面给的例子中是使用ajax每间隔2s去执行/jxInfo/getinfo 路径，执行成功后返回的值为success下的data，并将获得的值通过innerHTML写入HTML文件中，实现刷新数据

/jxInfo/getinfo是获

取数据库中最新的一条数据，这样就能够实现定时从数据库中提取最新的数据，实时显示。。。

Note：

使用JS时记得要引用JS文件呦，不然ajax是不会执行的，本人就犯过这样愚蠢的错误，很是尴尬。