質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

0回答

1255閲覧

Laravel+Vue 天気API表示について(主にLaravel周り)

minabetakuya

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

0クリップ

投稿2020/09/14 08:21

前提・実現したいこと

ローカル環境:
php 7.3.11
Laravel 5.8.13
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.11"
"axios": "^0.19",
phpstorm使っています。

OpenWeather MapのAPIを使って現在の天気情報を取得し画面に表示したいです。
その際、位置情報の緯度と経緯はMySqlから取得して、ユーザーが自由に位置情報を変更できる仕組みにしたいです。

発生している問題・エラーメッセージ

axiosを使ってAPIからデータを取得し、表示するところはできています。
が、位置情報をデータベースから抽出するところが、どうやってできません。
本来であればView(bladeファイル)内でaxios.get('api/weather')をした時に直接URLを指定したかったのですが、
どうやらできないようなので、aip.phpで処理をしています。

Viewコンポーネントファイル (このファイルは特に問題は発生していません)

<template> <div class="weather-posision"> <p><b>登録した地域の現在の天気</b></p> <p class="weather_city">都市:{{ city }}</p> <p class="weather_temp">気温:{{ temp | roundUp }}&deg;C</p> <div class="weather_pic"> <p v-if="condition.main == 'Rain'"><i class="fas fa-umbrella fa-3x"></i></p> <p v-else-if="condition.main == 'Clouds'"><i class="fas fa-cloud fa-3x"></i></p> <p v-else-if="condition.main == 'Clear'"><i class="fas fa-sun fa-3x"></i></p> <p v-else>該当しなかった<i class="fas fa-cloud-sun fa-3x"></i></p> </div> </div> </template> <script> export default { data() { return { city: null, //地域名 temp: null, //気温 condition: { main: null, //天候名 } } }, mounted: function () { axios.get('api/weather') .then(function (response) { this.city = response.data.name this.temp = response.data.main.temp this.condition = response.data.weather[0] }.bind(this)) .catch(function (error) { console.log(error) }) }, filters: { roundUp(value) { return Math.ceil(value); } }//filters }//export default </script>

問題なのは下記コードです
api.php

Route::get('weather', function() { //ログインしているID取得 $userID = Auth::id(); //緯度を取得 $latitude =DB::select('select latitude from users where id = :id',['id' => $userID]); //文字列に変換 $user_latitude = implode(" ",$latitude); //経緯を取得 $longitude =DB::select('select longitude from users where id = :id',['id' => $userID]); //文字列に変換 $user_longitude =implode(" ",$longitude); //APIで取得する時のベースURL $baseurl = 'https://api.openweathermap.org/data/2.5/weather?'; $lat = 'lat='.$user_latitude.'&';//35.770913 緯度 $lon = 'lon='.$user_longitude.'&';//139.896147 経度 $units = 'units=metric&'; $id = 'appid=意図的に伏せています'; $url = $baseurl.$lat.$lon.$units.$id; return file_get_contents($url); });

エラーメッセージ
特にないです。SQL文が空振りしているLOGが出ていました。

試したこと

DBファサードではなく直接緯度と経緯を手入力するとjsonファイルを取得、表示できました。

おそらくですが、api.php(routeファイル)でDBファサードを使うことができないと思われます。
(ちゃんとクラスは読み込んでいます)

分かる方アドバイスをお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問