开发体育直播系统，实现前端 Vue.js 实时显示从后端获取的即时比分信息
东莞梦幻网络科技开发的即时比分系统，实现前端 Vue.js 将会实时显示从后端获取的即时比分信息，并根据用户的需求提供不同的筛选条件。使用 ThinkPHP 实现从第三方 API 获取比赛数据，并提供接口 GET /api/matches。使用 Vue.js 和 axios 定时请求后端 API，实时更新赛事数据，并在页面上展示。
步骤1：后端实现（PHP TP 框架）
首先，在 TP 项目的 application 目录下创建一个控制器，叫做 MatchController.php，用于提供赛事数据接口。
代码语言：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 中添加如下路由：
代码语言：php复制use think\facade\Route;
Route::get('api/matches', 'index/MatchController/getMatches');步骤3：前端实现（Vue.js）
前端的 Vue.js 部分将通过 axios 向后端 API 发送请求，获取赛事数据并动态展示。
代码语言：php复制<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>