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

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

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

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

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

0回答

1100閲覧

laravel + vue でのSPAでDBのデータを取得したい

matsumoto999

総合スコア0

Vue.js

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

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2020/12/08 12:47

前提・実現したいこと

Vue初学者です。
laravel8.12 + Vue2.5.17 + Vue-router3.4.9でSPAの実装をしています。
写真ギャラリーにドラッグアンドドロップで写真を保存したいと思っています。
また、写真ギャラリー内はカテゴリーごとに写真が管理されており、写真ギャラリートップ->写真カテゴリーと遷移し、写真をドラッグアンドドロップできる形となっております。
axiosを用いて、写真の保存までは出来たのですが、写真を取得することが出来ません。
getでそのカテゴリーに属する写真を取得しているのですが、うまく行かず、帰ったきた値をconsole.logで表示するとなぜか、viewのbladeファイルが表示されてしまいます。

なお、ユーザー側とadmin側を両方SPAとして実装しております。

何が原因かわからず詰まっております。
何かアドバイスをいただけると幸いでございます。

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

エラーメッセージ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title></title> <!-- CSRF Token --> <meta name="csrf-token" content="MYJ616wFLi9t1VZHJdPzRdVVo7FJMc0xOv2wA58N"> <!-- Scripts --> <script src="http://localhost:8383/js/admin.js" defer></script> <!-- Fonts --> <link rel="dns-prefetch" href="//fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> <!-- Styles --> <link href="/css/app.css" rel="stylesheet"> <link href="http://localhost:8383/css/common.css" rel="stylesheet"> <link href="http://localhost:8383/css/header.css" rel="stylesheet"> <link href="http://localhost:8383/css/footer.css" rel="stylesheet"> <link href="http://localhost:8383/css/main.css" rel="stylesheet"> <link href="http://localhost:8383/css/blogs.css" rel="stylesheet"> <link href="http://localhost:8383/css/adminMedia.css" rel="stylesheet"> <link href="http://localhost:8383/css/adminMediaTop.css" rel="stylesheet"> </head> <body> <div id="admin"> </div> </body> </html> これがconsoleに表示される。

migrationファイル

media_categories_table

<?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class CreateMediaCategoriesTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('media_categories', function (Blueprint $table) { $table->bigIncrements('id'); $table->string('name'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('media_categories'); } } medias_table <?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class CreateMediasTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('medias', function (Blueprint $table) { $table->bigIncrements('id'); $table->foreignId('slider_id')->nullable()->constrained('sliders')->onDelete('set null'); $table->foreignId('media_category_id')->constrained('media_categories')->onDelete('cascade'); $table->string('pass'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('medias'); } } ``` ### Model MediaCategory.php <?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class MediaCategory extends Model { use HasFactory; protected $fillable = [ 'name' ]; } Media.php <?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; use App\Models\MediaCategory; class Media extends Model { use HasFactory; protected $fillable = ['pass', 'slider_id', 'media_category_id']; public function mediaCategories() { return $this->belongsTo(MediaCategory::class, 'media_categories'); } } ###Controller AdminController public function getMedias($mediaCategoryId) { $medias = $this->media->where('id', $mediaCategoryId)->get(); return json_encode($medias); } ###Vueファイル <template> <div> <div class="container"> <div class="media-wrapper"> <div class="media-block"> <div class="media-area" @dragenter="dragEnter" @dragleave="dragLeave" @dragover.prevent @drop.prevent="dropFile" :class="{enter: isEnter}"> <input type="file" ref="file"> </div> </div> <div> <div v-for="photo in photos"> <p>{{ photo.pass }}</p> </div> </div> <button @click="show" class="btn btn-primary">カテゴリー名変更</button> <div v-if="isshow"> <div class="form-group"> <input v-model="form.name" type="text" class="col-4 form-control m-3"> <button type="submit" @click="editMediaCategory" class="col-1 btn btn-success form-control m-3">create</button> </div> </div> <button @click="deleteMediaCategory" class="btn btn-danger">カテゴリー削除</button> </div> </div> </div> </template> <script> export default { props: {id: Number}, data: function() { return { isEnter: false, form: {}, photos: {}, files: [], } }, methods: { getMedias() { axios.get('api/getMedias' + this.id).then(response => { this.photos = response.data console.log(this.photos) }) }, show() { this.isshow = true; }, dragEnter() { this.isEnter = true; }, dragLeave() { this.isEnter = false; }, dragOver() { console.log('DragOver') }, dropFile() { this.files = [...event.dataTransfer.files] const formData = new FormData(); for (let i = 0; i < this.files.length; i += 1) { console.log(this.files[i]); formData.append('file', this.files[i]); axios.post('api/post/' + this.id, formData, { headers: { 'content-type': 'multipart/form-data' } }).then(response => { console.log(resonse.data); }) } this.isEnter = false; }, editMediaCategory() { axios.post('api/edit/' + this.id, this.form).then(response => { this.$router.push({name: 'medias'}) }) }, openModal() { this.modal = ture }, closeModal() { this.modal = false }, deleteMediaCategory(){ axios.delete('api/delete/' + this.id).then(response => { this.$router.push({name: 'medias'}) }) }, }, mounted() { this.getMedias() } } </script> ### ルーティング api.php Route::get('/topNotices', [ApiUserController::class, 'showTopNotices']); Route::get('/nextMatch', [ApiUserController::class, 'showNextMatch']); Route::get('/topBlogs', [ApiUserController::class, 'showTopBlogs']); Route::get('/topResult', [ApiUserController::class, 'showTopResult']); Route::get('/sns', [ApiUserController::class, 'getYoutubePass']); Route::prefix('admin')->group(function (){ // メデイアギャラリー一覧表示 Route::get('api/medias', [AdminController::class, 'getMediaCategory']); // メデイアギャラリー追加 Route::post('api/medias/create', [AdminController::class, 'addMediaCategory']); // メディアカテゴリー編集 Route::post('media/api/edit/{id}', [AdminController::class, 'editMediaCategory']); // メディアカテゴリー削除 Route::delete('media/api/delete/{id}', [AdminController::class, 'deleteMediaCategory']); // メディアカテゴリー詳細表示 Route::get('media/api/getMedia/{id}', [AdminController::class, 'getMedias']); // メディア追加 Route::post('media/api/post/{id}', [AdminController::class, 'postMedia']); }); web.php // ユーザー側 Route::get('/{any}', function () { return view('user.top'); })->where('any','^(?!admin/).*'); // admin側 Route::get('/admin/{any?}', function() { return view('admin.index'); })->where('any', '.*');

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問