如何正确实现此场景?

Question

我有一个路由:

Route::get('/', [FrontController::class, 'index']);

在这个Controller中，我获取经过身份验证的用户所在城市未来5天的天气。users表有一个列"城市"。API请求是基于那个城市的。

if (auth()->user()) {
$cityName = auth()->user()->city;
$apiKey = config('services.api.key');
// get the weather based on the provided city
$weatherResponse= Http::get("...");
return view('front.index', [
'weatherRespons' => $weatherRespons->json(),
]);
} else {
return view('front.index');
}

在索引视图

@guest
<h1>login/register to show your city weather</h1>
@else
<h1>Weather in {{ $weatherResponse['city'] }}</h1>
<x-weather :weatherResponse="$weatherResponse" />
@endguest

这个组件x-weather有一些样式来显示5天的天气。

现在我想在这个视图上有一个输入，允许用户在按钮中单击输入城市的名称，然后组件x-weather应该使用搜索城市的天气更新。但是，页面不应该刷新，因为如果页面刷新，它将显示基于经过身份验证的用户所在城市的天气。

你知道如何在架构方面正确地处理这个问题吗?谢谢!

Answer 1

根据我对问题的理解，你的问题如下:

1. 在页面加载时显示登录用户的天气

2. 然后一旦他们输入所需的位置，系统然后显示该位置而不刷新页面。

不确定这个解决方案是否适合你，但我想到了一些想法，希望它们能对你有用。

控制器:

1. 对于已登录的用户，控制器传递用户位置给视图。

2. 为您的输入创建另一个简单调用天气api的函数

视图:

1. 登录用户的输入自动显示当前位置天气，在文档准备好时调用控制器api函数。(或者你可以使用javascirpt隐藏它)

2. Ajax，当用户输入所需的位置时，使用Ajax将位置传递给调用api函数的控制器。当返回值成功时，您可以清除原始内容，然后在页面上添加任何您想要的内容，而无需刷新。

现在不深入编码细节，但我相信你已经明白了。

看看ajax