Laravel + vue : API(3)

https://laravel.kr/docs/8.x/eloquent-resources#Eloquent:%20API%20Resources

라라벨 8.x - API Resources

위 링크를 확인해주세요.

 

resources 파일을 만들겠습니다.

 

php artisan make:resource TaskResource 명령어로 파일을 만들어주면

app\Http 폴더안에 Resources 폴더가 생성되고 TaskResource 파일이 만들어집니다.

아래와 같이 코딩해줍니다.

<?php

namespace App\Http\Resources;

use Illuminate\Http\Resources\Json\JsonResource;

class TaskResource extends JsonResource
{
    /**
     * Transform the resource into an array.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function toArray($request)
    {
        return [
            'id'=>$this->id,
            'title'=>$this->title,
            'story'=>$this->story,
        ];
    }
}

 

다음은 TaskController.php 파일을 열어줍니다.

아래와 같이 수정해줍니다.

<?php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use App\Http\Resources\TaskResource;
use App\Models\Task;
use Illuminate\Http\Request;

class TaskController extends Controller
{
    public function index()
    {
        $tasks = TaskResource::collection(Task::all());
        return response()->json($tasks, 200);
    }
}

 

이렇게 하면 JSON Response로 보내는 정보를 바꿀 수 있습니다.

 

이전에는 http://127.0.0.1:8000/api/tasks

before

이렇게 id, title, story, created_at, updated_at 정보가 나왔는데

위 처럼 바꾸고 다시 확인해보면

after

toArray 메소드에 설정한대로 id, title, story 값만 받는 것을 확인할 수 있습니다.

 

이제 resources\views 경로로 가서 tasks 폴더를 만들고 index.blade.php 파일을 만들어줍니다.

@extends('layouts.app')

@section('container')
    <div>
        @foreach($tasks as $task)
            <p>id: <span>{{$task->id}}</span></p>
            <p>title: <span>{{$task->title}}</span></p>
            <p>story: <span>{{$task->story}}</span></p>
        @endforeach
    </div>
@stop

 

web.php로 가서 라우트를 설정해줍니다.

<?php

use Illuminate\Support\Facades\Route;
use App\Models\Task;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('home');
});

Route::get('/tasks', function (){
    $tasks = Task::all();
    return view('/tasks/index', compact('tasks'));
});

 

그리고 http://127.0.0.1:8000/tasks 이 경로로 가면

index

이렇게 출력이 되는걸 확인할 수 있습니다.

 

이제 이 화면을 vue를 이용해 출력해보겠습니다.

resources\js\components 폴더에 Front.vue 파일을 만들어주고

js\app.js 파일에 들어가서 아래 코드를 추가해줍니다.

Vue.component('front', require('./components/Front.vue').default);

 

그리고 Front.vue 파일을 아래와 같이 작성해줍니다.

<template>
    <div>
        <p v-for="task in tasks">title: {{task.title}}</p>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                tasks: []
            }
        },
        mounted() {
            this.loadTaskData();
        },
        methods: {
            loadTaskData: function(){
                axios.get('/api/tasks')
                    .then((response) => {
                        this.tasks = response.data;
                    })
            }
        }
    }
</script>

 

index.blade.php를 수정해줍니다.

@extends('layouts.app')

@section('container')
    <div id="app">
        <front></front>
    </div>
@stop

 

그리고 web.php로 가서 라우트를 수정해줍니다.

<?php

use Illuminate\Support\Facades\Route;
use App\Models\Task;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('home');
});

Route::view('/tasks', 'tasks/index');

//Route::get('/tasks', function (){
//    $tasks = Task::all();
//    return view('/tasks/index', compact('tasks'));
//});

 

첫 번째 게시글에서 vue를 설정할 때, 빼고한게 있어서 추가하겠습니다.

resource\views\layouts\app.blade.php 파일을 열어

body 태그 맨 아래 <script src="{{mix('js/app.js')}}"></script> 이걸 추가 해줘야합니다.

 

http://127.0.0.1:8000/tasks 다시 이 경로로 들어가면

vue

이렇게 title을 화면에 출력하는 것을 볼 수 있습니다.

 

Front.vue를 조금 수정해서 id, title, story를 다 출력해보겠습니다.

<template>
    <div>
        <p v-for="task in tasks">
            {{task.id}}<br>
            {{task.title}}<br>
            {{task.story}}
        </p>
    </div>
</template>

 

템플릿 태그 부분만 수정했습니다.

 

vue

 

id, title, story가 잘 출력 되는걸 볼 수 있습니다.