体育直播系统，实现前端 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>