开发体育直播系统，实现前端 Vue.js 实时显示从后端获取的即时比分信息

admin管理员组

文章数量:1444256

开发体育直播系统，实现前端 Vue.js 实时显示从后端获取的即时比分信息

东莞梦幻网络科技开发的即时比分系统，实现前端 Vue.js 将会实时显示从后端获取的即时比分信息，并根据用户的需求提供不同的筛选条件。使用 ThinkPHP 实现从第三方 API 获取比赛数据，并提供接口 GET /api/matches。使用 Vue.js 和 axios 定时请求后端 API，实时更新赛事数据，并在页面上展示。

步骤1：后端实现（PHP TP 框架）

首先，在 TP 项目的 application 目录下创建一个控制器，叫做 MatchController.php，用于提供赛事数据接口。

<?php

namespace app\index\controller;



use think\Controller;

use think\Request;

use think\Db;



class MatchController extends Controller

{

    // 获取赛事数据的接口

    public function getMatches()

    {

        // 模拟数据，这里你可以调用第三方API获取实际数据

        $matches = [

            [

                'id' => 1,

                'league' => '英超',

                'country' => '英格兰',

                'teamA' => '曼联',

                'teamB' => '切尔西',

                'status' => 'live', // 比赛状态：live, finished, schedule

                'time' => '20:30',

                'date' => '2025-03-24',

            ],

            [

                'id' => 2,

                'league' => '西甲',

                'country' => '西班牙',

                'teamA' => '巴萨',

                'teamB' => '皇马',

                'status' => 'finished',

                'time' => '18:00',

                'date' => '2025-03-23',

            ],

            [

                'id' => 3,

                'league' => '意甲',

                'country' => '意大利',

                'teamA' => '尤文',

                'teamB' => '米兰',

                'status' => 'schedule',

                'time' => '22:00',

                'date' => '2025-03-25',

            ]

        ];



        // 返回JSON数据

        return json($matches);

    }

}

**这个控制器有一个方法 getMatches()，它会返回赛事数据。

在实际应用中，你可以通过调用第三方 体育数据商 API获取实际的比分数据。**

步骤2：设置路由

接下来在 route 配置文件中为该控制器方法配置路由。

在 application\route.php 中添加如下路由：

use think\facade\Route;

Route::get('api/matches', 'index/MatchController/getMatches');

步骤3：前端实现（Vue.js）

前端的 Vue.js 部分将通过 axios 向后端 API 发送请求，获取赛事数据并动态展示。

<template>

  <div class="container">

    <h1>即时比分系统</h1>



    <!-- 顶部导航 -->

    <nav>

      <button @click="setFilter('all')">全部</button>

      <button @click="setFilter('live')">即时</button>

      <button @click="setFilter('finished')">完场</button>

      <button @click="setFilter('schedule')">赛程</button>

      <button @click="setFilter('favorite')">收藏</button>

      <input type="date" v-model="selectedDate" @change="filterByDate" />

    </nav>



    <!-- 热门赛事 -->

    <h2>热门赛事</h2>

    <div class="events">

      <div v-for="match in filteredMatches" :key="match.id" class="match-card">

        <h3>{{ match.league }}</h3>

        <p>{{ match.teamA }} VS {{ match.teamB }}</p>

        <p v-if="match.status === 'live'" class="live">进行中</p>

        <p v-else-if="match.status === 'finished'">完场</p>

        <p v-else>赛程: {{ match.time }}</p>

      </div>

    </div>



    <!-- 全部赛事 -->

    <h2>全部赛事</h2>

    <div class="filters">

      <select v-model="selectedCountry" @change="filterByCountry">

        <option value="">筛选国家</option>

        <option v-for="country in availableCountries" :key="country">

          {{ country }}

        </option>

      </select>

    </div>

    

    <div class="events">

      <div v-for="match in filteredMatches" :key="match.id" class="match-card">

        <h3>{{ match.league }} - {{ match.country }}</h3>

        <p>{{ match.teamA }} VS {{ match.teamB }}</p>

        <p>{{ match.time }}</p>

      </div>

    </div>

  </div>

</template>



<script>

import axios from 'axios';



export default {

  data() {

    return {

      matches: [],

      selectedFilter: 'all',

      selectedDate: '',

      selectedCountry: '',

    };

  },

  computed: {

    filteredMatches() {

      let filtered = this.matches;



      if (this.selectedFilter !== 'all') {

        filtered = filtered.filter((match) => match.status === this.selectedFilter);

      }

      if (this.selectedDate) {

        filtered = filtered.filter((match) => match.date === this.selectedDate);

      }

      if (this.selectedCountry) {

        filtered = filtered.filter((match) => match.country === this.selectedCountry);

      }

      return filtered;

    },

    availableCountries() {

      return [...new Set(this.matches.map((match) => match.country))];

    },

  },

  methods: {

    setFilter(filter) {

      this.selectedFilter = filter;

    },

    filterByDate() {

      this.selectedFilter = 'schedule';

    },

    filterByCountry() {

      this.selectedFilter = 'all';

    },

    async fetchMatches() {

      try {

        const response = await axios.get('http://localhost/api/matches');

        this.matches = response.data;

      } catch (error) {

        console.error('获取比赛数据失败:', error);

      }

    },

  },

  mounted() {

    this.fetchMatches();

    setInterval(this.fetchMatches, 10000); // 每 10 秒更新比分

  },

};

</script>



<style scoped>

.container {

  text-align: center;

  padding: 20px;

}



nav button {

  margin: 5px;

  padding: 10px;

  cursor: pointer;

}



.events {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

}



.match-card {

  border: 1px solid #ccc;

  padding: 10px;

  margin: 10px;

  width: 200px;

}



.live {

  color: red;

  font-weight: bold;

}

</style>

本文标签： 开发体育直播系统，实现前端 Vuejs 实时显示从后端获取的即时比分信息