JSONデータをphpで作成し,Vue.jsでJSONデータを読み込みたいが、ファイルがないとエラーが出力されます

[解決したいこと（課題）]

・JSONデータをphpで作成し,Vue.jsでJSONデータを読み込みたいが、ファイルがないとエラーが出力されます。
方法が間違っているのでしょうか

疑問点

・ルーティング設定が必要なのでしょうか？
・そもそも、JSONデータをファイル保存してやりとりしないのでしょうか？
・JSONデータをファイル保存するのではなく、セッションに保存が必要なのでしょうか？

[開発環境]

・Laravel Framework 6.20.27
・PHP 8.0.6
・XAMPP

[手順]

JSONデータを作成する。
上記1.で作成したJSONデータをjsで読み込む。

[ソース]

JSONデータ作成する。

　→下記ソース実行で「public\test.json」が作成されることは成功しています。

php
1　　　　// データ作成
2        $arr = array(
3        "uses" => array(
4            [
5            "time1" => "1",
6            "time2" => "0",
7            "time3" => "1",
8            "time4" => "1",
9            "time5" => "0",
10            "time6" => "0",
11            "time7" => "0",
12            "time8" => "1",
13            "time9" => "1",
14            "time10" => "0",
15            "time11" => "0",
16            "time12" => "0",
17            "check" => "0"
18            ],
19            [
20            "time1" => "1",
21            "time2" => "1",
22            "time3" => "1",
23            "time4" => "1",
24            "time5" => "1",
25            "time6" => "1",
26            "time7" => "1",
27            "time8" => "1",
28            "time9" => "1",
29            "time10" => "1",
30            "time11" => "1",
31            "time12" => "1",
32            "check" => "1"
33            ]
34        )
35        );
36
37        //JSON形式に文字列を変換
38        $arr = json_encode($arr , JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_NUMERIC_CHECK  | JSON_PRETTY_PRINT | JSON_FORCE_OBJECT );
39
40        //ファイルに保存 文字列の文字コードを指定（文字化防止）
41        file_put_contents("test.json" , mb_convert_encoding($arr, 'utf-8'));

上記1.で作成したJSONデータをjsで読み込む。

JavaScript
1<script>
2  var data_aa = {
3    title: 'こんにちは。',
4    text: 'テスト'
5  }
6  new Vue(
7    {
8      el: '#app0',
9      data: data_aa
10    })
11
12　// JSONデータを読み込む
13  function doAction() {
14    const file_json = "app/publuc/test.json" // ★ここを「test.json」に変えてもエラーが出力
15
16    axios.get(file_json)
17    .then(response => console.log(response))
18    .catch(error => console.log(error))
19  }
20</script>

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
5  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
6  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
7  <script src="app/publuc/test.js"></script>
8  <title>テスト</title>
9</head>
10<body>
11  <button id='dd' onclick="doAction()">テスト</button>
12  <div id="app0">
13  </div>
14</body>
15</html>

試したこと

・ネットで調査して試行錯誤したが、「axios.get()」に指定するパスがLaravel環境下のフルパスでは、できなかった。
・「axios.get()」に指定するパスが外部のURLであれば、エラーが出力されなかった。

行動規範の内容に同意します

回答2件

自己解決

自己解決しました。
以下、間違いと正しいを記載します。
[間違い]
JSONデータをファイルに書き込むという方法
[正しい]
JSONデータを返すURIをルーティング設定し、axios.get()の引数に渡す

投稿2021/07/06 11:17

moti7

総合スコア15

tst.json→test.jsonでは？
普通にfetchで処理すると良いと思います

投稿2021/07/05 11:17

yambejp

総合スコア115010

moti7

2021/07/05 14:24

ご回答ありがとうございます。ご指摘の「tst.json→test.json」は、記載ミスでした。 fetchに変更してもエラー404が表示されます。 http://127.0.0.1:8000/xxx/test.json 404 (Not Found) というエラーで、test.jsonのパスをURLにする必要があるのでしょうか？

moti7

2021/07/06 11:16

自己解決しました。以下、間違いと正しいを記載します。 [間違い] JSONデータをファイルに書き込むという方法 [正しい] JSONデータを返すURIをルーティング設定し、axios.get()の引数に渡す

行動規範の内容に同意します

あなたの回答