电子购物网站设计日本进口yamawa
以下是基于“东莞梦幻网络科技”的体育即时比分系统收藏界面的技术实现方案,包括后端(PHP + ThinkPHP)、安卓(Java)、iOS(Objective-C)和PC/H5前端(Vue.js)的代码示例。
技术架构
后端(PHP + ThinkPHP):提供API接口,处理数据存储、用户管理、比赛数据获取等功能。
安卓端(Java):调用后端API,展示比赛列表,并实现收藏功能。
iOS端(Objective-C):实现与安卓端类似的功能,提供比赛数据展示和收藏功能。
PC/H5前端(Vue.js):基于Vue3 + Element UI 实现收藏比赛列表、赛事展示等功能。
代码实现
(1)后端(ThinkPHP)
<?php
namespace app\controller;use think\Request;
use think\Db;class MatchController {// 获取比赛数据(支持收藏筛选)public function getMatchList(Request $request) {$userId = $request->param('user_id');$isFavorite = $request->param('favorite', 0); // 0: 全部 1: 仅收藏$query = Db::table('matches')->alias('m')->field('m.id, m.time, m.team_home, m.team_away, m.status, f.id as favorite')->leftJoin('favorites f', 'm.id = f.match_id AND f.user_id = '.$userId);if ($isFavorite) {$query->whereNotNull('f.id');}$matches = $query->order('m.time', 'asc')->select();return json(['code' => 200, 'data' => $matches]);}// 收藏比赛public function toggleFavorite(Request $request) {$userId = $request->param('user_id');$matchId = $request->param('match_id');$exists = Db::table('favorites')->where('user_id', $userId)->where('match_id', $matchId)->find();if ($exists) {Db::table('favorites')->where('user_id', $userId)->where('match_id', $matchId)->delete();return json(['code' => 200, 'message' => '取消收藏']);} else {Db::table('favorites')->insert(['user_id' => $userId, 'match_id' => $matchId]);return json(['code' => 200, 'message' => '收藏成功']);}}
}
(2)安卓端(Java)
public void fetchMatchList(boolean favoriteOnly) {ApiService apiService = RetrofitClient.getInstance().create(ApiService.class);Call<ApiResponse<List<Match>>> call = apiService.getMatchList(userId, favoriteOnly ? 1 : 0);call.enqueue(new Callback<ApiResponse<List<Match>>>() {@Overridepublic void onResponse(Call<ApiResponse<List<Match>>> call, Response<ApiResponse<List<Match>>> response) {if (response.isSuccessful() && response.body() != null) {matchListAdapter.updateData(response.body().getData());}}@Overridepublic void onFailure(Call<ApiResponse<List<Match>>> call, Throwable t) {Log.e("API_ERROR", "Failed to fetch matches");}});
}public void toggleFavorite(int matchId) {ApiService apiService = RetrofitClient.getInstance().create(ApiService.class);Call<ApiResponse<String>> call = apiService.toggleFavorite(userId, matchId);call.enqueue(new Callback<ApiResponse<String>>() {@Overridepublic void onResponse(Call<ApiResponse<String>> call, Response<ApiResponse<String>> response) {if (response.isSuccessful() && response.body() != null) {fetchMatchList(false); // 刷新比赛列表}}@Overridepublic void onFailure(Call<ApiResponse<String>> call, Throwable t) {Log.e("API_ERROR", "Failed to update favorite");}});
}
(3)iOS端(Objective-C )
- (void)fetchMatchList:(BOOL)favoriteOnly {NSDictionary *params = @{@"user_id": userId, @"favorite": @(favoriteOnly ? 1 : 0)};AFHTTPSessionManager *manager = [AFHTTPSessionManager manager];[manager GET:@"http://yourserver.com/api/match/list" parameters:params headers:nil progress:nil success:^(NSURLSessionDataTask * _Nonnull task, id _Nullable responseObject) {self.matches = responseObject[@"data"];[self.tableView reloadData];} failure:^(NSURLSessionDataTask * _Nullable task, NSError * _Nonnull error) {NSLog(@"API Error: %@", error.localizedDescription);}];
}- (void)toggleFavorite:(NSInteger)matchId {NSDictionary *params = @{@"user_id": userId, @"match_id": @(matchId)};AFHTTPSessionManager *manager = [AFHTTPSessionManager manager];[manager POST:@"http://yourserver.com/api/match/toggleFavorite" parameters:params headers:nil progress:nil success:^(NSURLSessionDataTask * _Nonnull task, id _Nullable responseObject) {[self fetchMatchList:NO]; // 刷新列表} failure:^(NSURLSessionDataTask * _Nullable task, NSError * _Nonnull error) {NSLog(@"API Error: %@", error.localizedDescription);}];
}
(4)PC/H5前端(Vue.js)
<template><div><el-switch v-model="favoriteOnly" active-text="仅显示收藏" @change="fetchMatches" /><el-table :data="matches"><el-table-column prop="time" label="时间" /><el-table-column prop="team_home" label="主队" /><el-table-column prop="team_away" label="客队" /><el-table-column label="操作"><template #default="{ row }"><el-button :type="row.favorite ? 'danger' : 'primary'" @click="toggleFavorite(row.id)">{{ row.favorite ? '取消收藏' : '收藏' }}</el-button></template></el-table-column></el-table></div>
</template><script>
import axios from "axios";export default {data() {return {matches: [],favoriteOnly: false,};},mounted() {this.fetchMatches();},methods: {fetchMatches() {axios.get("/api/match/list", { params: { user_id: 1, favorite: this.favoriteOnly ? 1 : 0 } }).then((res) => {this.matches = res.data.data;});},toggleFavorite(matchId) {axios.post("/api/match/toggleFavorite", { user_id: 1, match_id: matchId }).then(() => {this.fetchMatches();});},},
};
</script>