입문

Vue.이것은 js와 Laravel이 SPA를 실시하는 강좌 문장이다.
이 기사는 4편의 연재 기사 3편이다.
Vue.간단한 SPA 구축 강좌: 개술편
Vue.js+Laravel 간단한 SPA 구축 강좌: Vue 전단편
Vue.js+Laravel 간단한 SPA 구축 강좌: LaravelAPI 편
지금 여기↑
Vue.js+Laravel 간단한 SPA 구축 강좌: Vue와 API 결합편

저번까지.

저번에는 Vue였어요.js에 앞부분만 설치
정적 스파가 생겼어요.
손으로 쓴 샘플 데이터가 표시된 상태에서
임무 일람표
작업 세부 정보
작업 등록
작업 편집
의 페이지가 완료되었습니다.

API 구현을 위한 추진 방법

전체 그림 녹색 부분
5 개의 API 구현

이번에는 가장 쉬운 형식으로 진행을 했습니다.
각 API의 처리는 모두 디렉터 내에서 여러 줄로 끝납니다.
또한 API 자체 설치 전에
DB의 설정과 최소한의 테스트 데이터도 준비한다.

SQLite 설정

이번에는 작업을 간소화하기 위해서.
ySQL 및 PostgreSQL 준비 안 됨
SQLite를 사용합니다.
먼저 SQLite의 저장 파일을 준비합니다.database/database.sqlite에서 빈 파일을 만들면 됩니다.
다음은env의 데이터베이스 연결 정보를 수정합니다.
.env

- DB_CONNECTION=mysql
- DB_HOST=127.0.0.1
- DB_PORT=3306
- DB_DATABASE=laravel
- DB_USERNAME=root
- DB_PASSWORD=


+ DB_CONNECTION=sqlite

이로써 SQLite 설정을 사용합니다.
그러나 PHP의 SQLite 드라이버는 유효해야 합니다.
없으면 유효합니다.
https://awesome-linus.com/2019/05/24/php-sqlite-driver-install/

migration 생성

migration에서 작업표를 만듭니다.
우선 다음 명령으로migration 파일을 생성합니다.

php artisan make:migration create_tasks_table

이런 식으로 생성된migration의 up 방법을 다시 씁니다.
create_tasks_table.php

Schema::create('tasks', function (Blueprint $table) {
    $table->bigIncrements('id');
    $table->string('title', 100);
    $table->string('content', 100);
    $table->string('person_in_charge', 100);
    $table->timestamps();
});

commit: migration 생성

모델 생성하기

다음, 퀘스트 테이블에 대응하기
작업 모형을 만들다.

php artisan make:model Task

동적 입력 프롬프트에서 클릭
추기만 한다$fillable.
app/Task.php

  class Task extends Model
  {
+    protected $fillable = [
+        'title',
+        'content',
+        'person_in_charge',
+    ];
  }

commit: 작업 모델 생성하기

seeder 만들기

다음은 테스트 데이터 자동 생성을 위한
seeder를 만듭니다.
우선 다음 명령으로 seeder 파일을 생성합니다.

php artisan make:seeder TasksTableSeeder

생성된seeder 파일의run 방법
이렇게 수정합니다.
database/seeds/TasksTableSeeder.php

+ use App\Task;
  use Illuminate\Database\Seeder;

  class TasksTableSeeder extends Seeder
  {
      public function run()
      {
+         for ($i = 1; $i <= 10; $i++) {
+             Task::create([
+                 'title' => 'title' . $i,
+                 'content' => 'content' . $i,
+                 'person_in_charge' => 'person_in_charge' . $i,
+             ]);
+         }
      }
  }

이 seeder를 실행하기 위해 데이터베이스seeder 파일도 수정합니다.
database/seeds/DatabaseSeeder.php

 public function run()
 {
-    // $this->call(UsersTableSeeder::class);
+    $this->call(TasksTableSeeder::class);
 }

commit: 작업 선택기 만들기

표, 테스트 데이터 생성

생성표와 테스트 데이터가 준비되었습니다.
실제로 생성합시다.

php artisan migrate --seed

방금 만든migration과seeder를 실행합니다.
표와 테스트 데이터는 10개가 있을 것이다.
데이터가 정확한지 확인하는 경우
tinker를 사용하세요.

$ php artisan tinker


>>> Task::all();

현재 작업 테이블의 데이터가 목록에 표시됩니다.

작업 목록 API 구현 가져오기

그럼 바로 API 구현을 시작하겠습니다.
먼저 작업 요약에서 API를 가져옵니다.
라우트를 추가합니다.
routes/api.php

+ Route::get('/tasks', 'TaskController@index');

※
여기 댓글.
Laravel8에서 이 작법이 좋지 않다는 보고가 있었다.
오류가 발생하면 댓글을 참고하여 수정하십시오.
그리고 작업 컨트롤러 만들기
거기에 index 방법을 추가합니다.
우선artisan 명령으로 컨트롤러 파일 자체를 생성합니다.

php artisan make:controller TaskController

그리고 index 방법이 추가됩니다.
app/Http/Controllers/TaskController.php

+ <?php
+
+ namespace App\Http\Controllers;
+
+ use App\Task;
+
+ class TaskController extends Controller
+ {
+     public function index()
+     {
+         return Task::all();
+     }
+ }

Task 모델에서 모든 내용을 가져와return합니다.
POSTMAN 등
http://localhost:8000/api/tasks
요청하다
나는 임무 일람표를 얻을 수 있을 것이라고 생각한다.
※ 라우팅이 routes/api.php로 정의되면 경로의 헤드가 자동으로 추가됩니다/api.
응답은 이런 json 형식입니다.
응답 형식

[
    {
        "id": 1,
        "title": "title1",
        "content": "content1",
        "person_in_charge": "person_in_charge1",
        "created_at": "2019-12-17 00:43:38",
        "updated_at": "2019-12-17 00:43:38"
    },
    {
        "id": 2,
        "title": "title2",
        "content": "content2",
        "person_in_charge": "person_in_charge2",
        "created_at": "2019-12-17 00:43:38",
        "updated_at": "2019-12-17 00:43:38"
    },
]

commit: 작업 목록 API 구현 가져오기

작업 세부 정보 API 구현 가져오기

다음은 작업 세부 정보 API 얻기입니다.
라우트를 추가합니다.
routes/api.php

  Route::get('/tasks', 'TaskController@index');
+ Route::get('/tasks/{task}', 'TaskController@show');

컨트롤러에 show 방법이 추가되었습니다.
app/Http/Controllers/TaskController.php

+ public function show(Task $task)
+ {
+     return $task;
+ }

URL 매개 변수로 수신된 작업 모델
그냥 돌아갔어요.
※ Laravel은 json 형식의 응답을 임의로 반환합니다.
commit: 작업 세부 정보 API 구현 가져오기

작업 등록 API 구현

다음은 작업 등록 API입니다.
라우트를 추가합니다.
routes/api.php

  Route::get('/tasks', 'TaskController@index');
+ Route::post('/tasks', 'TaskController@store');
  Route::get('/tasks/{task}', 'TaskController@show');

※ 라우팅의 정의 순서를 잘못하면 올바른 동작을 수행할 수 없습니다.
컨트롤러에 저장 방법을 추가합니다.
app/Http/Controllers/TaskController.php

  use App\Task;
+ use Illuminate\Http\Request;


+ public function store(Request $request)
+ {
+     return Task::create($request->all());
+ }

요구 사항에 따라 수신된 데이터
모델의create로 데이터를 등록할 뿐입니다.
이 json 형식의 데이터를 받았다고 가정하십시오.
요청 형식

{
    "title": "new title",
    "content": "new content",
    "person_in_charge": "new person_in_charge1"
}

commit: 작업 등록 API 구현

작업 업데이트 API 구현

다음은 작업 업데이트 API입니다.
라우트를 추가합니다.
routes/api.php

  Route::get('/tasks', 'TaskController@index');
  Route::post('/tasks', 'TaskController@store');
  Route::get('/tasks/{task}', 'TaskController@show');
+ Route::put('/tasks/{task}', 'TaskController@update');

컨트롤러에 업데이트 방법을 추가했습니다.
app/Http/Controllers/TaskController.php

+ public function update(Request $request, Task $task)
+ {
+     $task->update($request->all());
+
+     return $task;
+ }

받은 요청의 형식은
등록 API와 동일한 json 형식입니다.
URL 매개 변수에서 받은 작업 모델의 업데이트 방법
데이터를 직접 업데이트할 뿐입니다.
commit: 작업 업데이트 API 구현

작업 삭제 API 구현

다음은 작업 삭제 API입니다.
라우트를 추가합니다.
routes/api.php

  Route::get('/tasks/{task}', 'TaskController@show');
  Route::put('/tasks/{task}', 'TaskController@update');
+ Route::delete('/tasks/{task}', 'TaskController@destroy');

컨트롤러에destroy 방법을 추가했습니다.
app/Http/Controllers/TaskController.php

+ public function destroy(Task $task)
+ {
+     $task->delete();
+ 
+     return $task;
+ }

URL 매개 변수를 사용하여 작업 수신
그렇게 삭제할게요.
commit: 작업 삭제 API 구현

끝내다

이로써 이번에 필요한 API가 모두 설치되었습니다.
POSTMAN 등 사용하기
각 API의 동작을 확인하면 될 것 같습니다.
원래 이 API에서
인증 가입
수색 처리에 들어갈 것 같습니다.
다음
프론트 데스크의 Vue에서 Ajax까지
API에 요청 보내기
데이터를 실제로 보고, 업데이트하고, 등록하고, 삭제할 수 있습니다.
(다음 단계로 가기 전에 LGTM를 얻게 된다면 기쁠 것이다)
Vue.js+Laravel 간단한 SPA 구축 강좌: Vue와 API 결합편