需求:
因为大屏基本从上午展示到晚上,不会频繁去打开页面。
前端实现:
在Vue的created钩子函数中发送初次请求,并使用JavaScript中的setInterval函数来设置整点定时发送请求。以下是一个示例
- <div>
- <h1>当前时间:{{ currentTime }}h1>
- <ul>
- <li v-for="item in items" :key="item.id">{{ item.name }}li>
- ul>
- div>
-
- <script>
- export default {
- data() {
- return {
- currentTime: new Date().toLocaleString(),
- items: []
- };
- },
- created() {
- // 初次请求
- this.fetchData();
- // 设置整点定时发送请求
- setInterval(() => {
- const now = new Date();
- // 获取分钟now.getMinutes() 获取秒数now.getSeconds()
- //一下为每日晚1点定时请求
- //一定要加秒
- if (now.getHours() === 1 && now.getSeconds()===0) {
- this.fetchData();
- }
- this.currentTime = now.toLocaleString();
- }, 1000);
- },
- methods: {
- fetchData() {
- // 发送请求的代码
- // 例如使用axios发送请求
- axios.get('/api/items').then(response => {
- this.items = response.data;
- });
- }
- }
- };
- script>