angular - Angular - Laravel 获得记录最多的前 5 个 ID
问题描述
我正在使用 Angular-7 作为前端和 Laravel-5.8 开发客户端门户应用程序。我有一个名为 trips 的表,其中包含以下字段:id、client_id、destination。我正在努力获得前 5 名的目的地。
仪表板控制器.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\DB;
use Carbon\Carbon;
use App\User;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Validator;
use App\Trip;
use App\Client;
class DashboardController extends Controller
{
public function getTopDestination(Request $request)
{
$user = Auth::user();
$userClientId = Auth::user()->client_id;
try{
if(Auth::user()->client_id == 'ABC')
{
$destination = Trip::withCount('trips as destination_count')
->orderBy('destination_count', 'desc')
->take(5)
->get();
}
else
{
$destination = Trip::withCount('trips as destination_count')
->where('client_id', $userClientId)
->orderBy('destination_count', 'desc')
->take(5)
->get();
}
return response()->json($destination, 200);
}
catch(QueryException $e)
{
$errorCode = $e->errorInfo[1];
return response()->json($errorCode);
}
}
}
navdashboard.component.ts
import {dashboard2} from 'src/assets/dist/js/pages/dashboard2.js';
import { Component, OnInit, NgZone } from '@angular/core';
import { ApiService } from 'src/app/shared/services/api.service';
import { TokenService } from 'src/app/shared/services/token.service';
import { RolesCheckService } from 'src/app/shared/services/roles-check.service';
import { SnotifyService } from 'ng-snotify';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import {NgbPaginationConfig} from '@ng-bootstrap/ng-bootstrap';
import swal from 'sweetalert2';
import { FormControl } from '@angular/forms';
declare var $;
@Component({
selector: 'app-navdashboard',
templateUrl: './navdashboard.component.html',
styleUrls: ['./navdashboard.component.scss']
})
export class NavdashboardComponent implements OnInit {
topdestination = null;
headers = { //Token for API Authorization
'Authorization' : this.token.get(),
'X-Requested-With' : 'XMLHttpRequest'
}
constructor(
private pg: NgbPaginationConfig,
private token: TokenService,
private http: HttpClient,
private router: Router,
private api: ApiService,
private zone: NgZone,
private notify: SnotifyService
) { }
ngOnInit() {
window.dispatchEvent(new Event('load'));
window.dispatchEvent(new Event('resize'));
$(dashboard2);
document.body.className = 'skin-blue sidebar-mini';
this.notify.clear();
this.notify.info("Loading...", {timeout: 0});
this.api.get('getTopDestination', this.headers).subscribe(
data => {console.log(data), this.topdestination = data; this.datahandlertopdestination(data)}
)
}
datahandlertopdestination(data){
console.log(data.data);
this.notify.clear();
this.topdestination = data.data;
}
}
navdashboard.cmponent.html
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-body">
<table id="example2" class="table table-bordered table-hover table-striped table-condesed">
<thead>
<tr>
<th width="5%">#</th>
<th scope="col">Destination</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let topdestinations of topdestination; let i = index">
<td>{{i + 1}}</td>
<td>{{ topdestinations.destination }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
旅行的模型类是 Trip。
当我加载页面时,我希望看到前五个目的地。但我得到了这个错误:
消息:“调用未定义的方法 App\Trip::trips()”
我该如何解决?
解决方案
当我将api更改为:
public function getTopDestination(Request $request)
{
$user = Auth::user();
$userClientId = Auth::user()->client_id;
try{
if(Auth::user()->client_id == 'ABC')
{
$destination = Trip::select('destination')
->selectRaw('COUNT(*) AS count')
->groupBy('destination')
->orderByDesc('count')
->limit(5)
->get();
}
else
{
$destination = Trip::select('destination')
->selectRaw('COUNT(*) AS count')
->where('client_id', $userClientId)
->groupBy('destination')
->orderByDesc('count')
->limit(5)
->get();
}
return response()->json($destination, 200);
}
catch(QueryException $e)
{
$errorCode = $e->errorInfo[1];
return response()->json($errorCode);
}
}
}
非常感谢。
推荐阅读
- spring - 获取 @Recover 注释的参数类型错误连接错误
- java - 应用CORS策略Springboot后的空响应
- firebase - Firebase Firestore,如何最佳实践
- ffmpeg - 将一张 PNG 图像转换为具有透明度和淡入淡出效果的 webm 视频
- azure - Azure cli 运行查询包查询
- javascript - nodejs函数返回未定义的mysql
- amazon-web-services - 上传文档时拒绝访问,如何设置权限配置文件和存储桶策略?
- clickhouse - Clickhouse 查询以获取多边形中的多边形
- python - 如何实例化一个类?
- android - 无法在安卓手机上用谷歌登录