입문

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

저번까지.

Vue.js에서 전방 설치
Laravel의 API 구현이 완료되었습니다.
API에 연결되지 않은 상태
임무 일람표
작업 세부 정보
작업 등록
작업 편집
페이지 및
/작업 요약 API 가져오기
/작업 상세 API 가져오기
• 작업 등록 API
/작업 업데이트 API
• 작업 삭제 API
의 상태.
이번에는 이 정적 페이지입니다.
API 연결
이 전체 그림의 붉은 부분이다.

axios

이번에는 프론트 데스크에서
API에 Ajax로 요청 보내기
데이터를 가져오거나 업데이트합니다.
간단하게 Ajax 통신을 실현하기 위해
이번에는 axios라는 포장을 사용합니다.
https://qiita.com/ksh-fthr/items/2daaaf3a15c4c11956e9
특별히 어려운 점은 없어요.
axios의 사용 방법을 간단하게 파악합시다.
laravel/ui에서 기초를 세웠습니다.
작업을 직접 설치하고 설정하지 않아도
처음부터 axios의 상태를 사용할 수 있습니다.

작업 목록 API 연결 가져오기

빨리 작업 일람 페이지와 작업 일람을 API로 연결하세요.
먼저 <script>에 필요한 데이터와 방법을 정의합니다.
resources/js/components/TaskListComponent.vue

<script>
-    export default {}
+    export default {
+        data: function () {
+            return {
+                tasks: []
+            }
+        },
+        methods: {
+            getTasks() {
+                axios.get('/api/tasks')
+                    .then((res) => {
+                        this.tasks = res.data;
+                    });
+            }
+        },
+        mounted() {
+            this.getTasks();
+        }
+    }

</script>

우선data 공수조를 준비한다tasks.
그리고 methods 의 getTasks() 방법에서
작업 목록 검색 API 요청
나는 그 응답을 방금 tasks 에 넣었다.
(이 방법으로 방금 언급한 axios를 사용하여 요청)
그리고 화면 묘사 시 이 getTasks() 방법을 실행하는 방법mounted()에서 호출 방법.<script> 여기서 끝냅니다.
그리고 <templete> 측도 수정한다.
resources/js/components/TaskListComponent.vue

- <tr>
-     <th scope="row">1</th>
-     <td>Title1</td>
-     <td>Content1</td>
-     <td>Ichiro</td>
-     <td>
-         <button class="btn btn-primary">Show</button>
-     </td>
-     <td>
-         <button class="btn btn-success">Edit</button>
-     </td>
-     <td>
-         <button class="btn btn-danger">Delete</button>
-     </td>
- </tr>
- <tr>
-     <th scope="row">2</th>
-     <td>Title2</td>
-     <td>Content2</td>
-     <td>Jiro</td>
-     <td>
-         <button class="btn btn-primary">Show</button>
-     </td>
-     <td>
-         <button class="btn btn-success">Edit</button>
-     </td>
-     <td>
-         <button class="btn btn-danger">Delete</button>
-     </td>
- </tr>
- <tr>
-     <th scope="row">3</th>
-     <td>Title3</td>
-     <td>Content3</td>
-     <td>Saburo</td>
-     <td>
-         <button class="btn btn-primary">Show</button>
-     </td>
-     <td>
-         <button class="btn btn-success">Edit</button>
-     </td>
-     <td>
-         <button class="btn btn-danger">Delete</button>
-     </td>
- </tr>


+ <tr v-for="(task, index) in tasks" :key="index">
+     <th scope="row">{{ task.id }}</th>
+     <td>{{ task.title }}</td>
+     <td>{{ task.content }}</td>
+     <td>{{ task.person_in_charge }}</td>
+     <td>
+         <router-link v-bind:to="{name: 'task.show', params: {taskId: task.id }}">
+             <button class="btn btn-primary">Show</button>
+         </router-link>
+     </td>
+     <td>
+         <router-link v-bind:to="{name: 'task.edit', params: {taskId: task.id }}">
+             <button class="btn btn-success">Edit</button>
+         </router-link>
+     </td>
+     <td>
+         <button class="btn btn-danger">Delete</button>
+     </td>
+ </tr>

우선 초고로 표시하다
세 줄의 데이터를 삭제하다.
그리고 tasks 로 방금 정의된 v-for 데이터를 표시합니다.<tr v-for="(task, index) in tasks" :key="index">표지, 제목, 내용, 인원입Charge의
각 열은 {{ task.title }} 과 같은 데이터를 동적으로 표시합니다.

- <td>Title1</td>
+ <td>{{ task.title }}</td>

또한 표시 편집 버튼의
링크 URL의 매개 변수도 가득 찼습니다.
id를 잘 동적으로 설정하세요.

- <router-link v-bind:to="{name: 'task.show', params: {taskId: 3}}">
+ <router-link v-bind:to="{name: 'task.show', params: {taskId: task.id }}">

지금
API에서 데이터 가져오기
지금은 v-for 화면으로 그것을 한눈에 볼 수 있다.
commit: 작업 목록 페이지 API 연결
작업 요약 페이지 완료.

작업 상세 API 연결 가져오기

다음은 작업 세부 정보 페이지와 작업 세부 정보 획득 API를 연결합니다.
먼저 <script>.
resources/js/components/TaskShowComponent.vue

<script>
    export default {
        props: {
            taskId: String
        },
+        data: function () {
+            return {
+                task: {}
+            }
+        },
+        methods: {
+            getTask() {
+                axios.get('/api/tasks/' + this.taskId)
+                    .then((res) => {
+                        this.task = res.data;
+                    });
+            }
+        },
+        mounted() {
+            this.getTask();
+        }
    }

</script>

※ taskId: String에서 오류가 발생할 수 있으므로 Number주석을 달다를 선택했습니다. 원활한 실행이 이루어지지 않으면 참고하십시오.
일람 페이지와 동일data 빈 것을 준비한다task.methods의getTask() API에서 작업 데이터를 가져옵니다.mounted()에서 화면 묘사를 할 때 호출 방법.
에서 설명한 대로 해당 매개변수의 값을 수정합니다.
다음은 <templete> 측이다.
resources/js/components/TaskShowComponent.vue

<div class="form-group row border-bottom">
    <label for="id" class="col-sm-3 col-form-label">ID</label>
    <input type="text" class="col-sm-9 form-control-plaintext" readonly id="id"
-           v-bind:value="taskId">
+           v-model="task.id">

</div>

<div class="form-group row border-bottom">
    <label for="title" class="col-sm-3 col-form-label">Title</label>
    <input type="text" class="col-sm-9 form-control-plaintext" readonly id="title"
-           value="title title">
+           v-model="task.title">

</div>

<div class="form-group row border-bottom">
    <label for="content" class="col-sm-3 col-form-label">Content</label>
    <input type="text" class="col-sm-9 form-control-plaintext" readonly id="content"
-           value="content content">
+           v-model="task.content">

</div>

<div class="form-group row border-bottom">
    <label for="person-in-charge" class="col-sm-3 col-form-label">Person In Charge</label>
    <input type="text" class="col-sm-9 form-control-plaintext" readonly id="person-in-charge"
-           value="Ichiro">
+           v-model="task.person_in_charge">

</div>

각 데이터가 v-model 로 표시됩니다.
이제 작업 세부 정보 페이지에서 API에서 얻은 데이터를 볼 수 있습니다.
commit: 작업 세부 정보 페이지 API 연결
작업 세부 정보 페이지가 완료되었습니다.

작업 등록 API 연결

다음은 작업 로그인 페이지와 작업 로그인 API를 연결합니다.
먼저 <script>.
resources/js/components/TaskCreateComponent.vue

<script>
-    export default {}
+    export default {
+        data: function () {
+            return {
+                task: {}
+            }
+        },
+        methods: {
+            submit() {
+                axios.post('/api/tasks', this.task)
+                    .then((res) => {
+                        this.$router.push({name: 'task.list'});
+                    });
+            }
+        }
+    }

</script>

빈 task 데이터를 준비한 곳은 아까와 같다.methods의submit()방법에서task 작업 등록 API에 데이터를 오프라인으로 자체 검사하여 보내는 과정을 설명합니다.
또한 API 데이터 기반 로그인이 완료되면this.$router.push({name: 'task.list'}); 작업 요약 페이지로 리디렉션합니다.
　
　
다음은 <templete> 측이다.
resources/js/components/TaskCreateComponent.vue

- <form>
+ <form v-on:submit.prevent="submit">
    <div class="form-group row">
        <label for="title" class="col-sm-3 col-form-label">Title</label>
-        <input type="text" class="col-sm-9 form-control" id="title">
+        <input type="text" class="col-sm-9 form-control" id="title" v-model="task.title">
    </div>
    <div class="form-group row">
        <label for="content" class="col-sm-3 col-form-label">Content</label>
-        <input type="text" class="col-sm-9 form-control" id="content">
+        <input type="text" class="col-sm-9 form-control" id="content" v-model="task.content">
    </div>
    <div class="form-group row">
        <label for="person-in-charge" class="col-sm-3 col-form-label">Person In Charge</label>
-        <input type="text" class="col-sm-9 form-control" id="person-in-charge">
+        <input type="text" class="col-sm-9 form-control" id="person-in-charge" v-model="task.person_in_charge">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>

</form>

각 양식은 v-model 에서 task 데이터와 연결됩니다.
양식에 데이터를 입력한 경우<scripts>측의 task 데이터도 업데이트됩니다.
그리고<form v-on:submit.prevent="submit">에서 기술한 장면은 다음 절차를 이용하여 명세표를 작성하여 개념 디자인에서 체량의 둘레를 분석하도록 한다.
이에 따라 입력된 데이터submit가 반영됩니다.task 메서드는 API를 전송할 수 있습니다.
commit: 작업 로그인 페이지 API 연결
작업 로그인 페이지에서 완료합니다.

작업 API 연결 업데이트

그런 다음 작업 편집 페이지와 작업 업데이트 API를 연결합니다.
먼저 submit.
resources/js/components/TaskEditComponent.vue

<script>
    export default {
        props: {
            taskId: String
        },
+        data: function () {
+            return {
+                task: {}
+            }
+        },
+        methods: {
+            getTask() {
+                axios.get('/api/tasks/' + this.taskId)
+                    .then((res) => {
+                        this.task = res.data;
+                    });
+            },
+            submit() {
+                axios.put('/api/tasks/' + this.taskId, this.task)
+                    .then((res) => {
+                        this.$router.push({name: 'task.list'})
+                    });
+            }
+        },
+        mounted() {
+            this.getTask();
+        }
    }

</script>

작업 상세 페이지 및 작업 로그인 페이지에서 하는 일
둘 다 했을 뿐이야.
비어 있음<script> 데이터 준비task API에서 가져온 데이터를 설정합니다.getTask() 방법에서
작업 업데이트 API에 put 요청을 보내고 있습니다.
　
　
그리고 submit.
resources/js/components/TaskEditComponent.vue

- <form>
+ <form v-on:submit.prevent="submit">
    <div class="form-group row">
        <label for="id" class="col-sm-3 col-form-label">ID</label>
-        <input type="text" class="col-sm-9 form-control-plaintext" readonly id="id" v-bind:value="taskId">
+        <input type="text" class="col-sm-9 form-control-plaintext" readonly id="id" v-model="task.id">
    </div>
    <div class="form-group row">
        <label for="title" class="col-sm-3 col-form-label">Title</label>
-        <input type="text" class="col-sm-9 form-control" id="title">
+        <input type="text" class="col-sm-9 form-control" id="title" v-model="task.title">
    </div>
    <div class="form-group row">
        <label for="content" class="col-sm-3 col-form-label">Content</label>
-        <input type="text" class="col-sm-9 form-control" id="content">
+        <input type="text" class="col-sm-9 form-control" id="content" v-model="task.content">
    </div>
    <div class="form-group row">
        <label for="person-in-charge" class="col-sm-3 col-form-label">Person In Charge</label>
-        <input type="text" class="col-sm-9 form-control" id="person-in-charge">
+        <input type="text" class="col-sm-9 form-control" id="person-in-charge" v-model="task.person_in_charge">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>

</form>

이것은 작업 등록 페이지와 같습니다.
각 양식은 <template> 에서 v-model 데이터와 연결됩니다.
form의task에서 v-on:submit.prevent="submit" 방법을 호출합니다.
commit: 작업 편집 페이지 API 연결
작업 편집 페이지는 여기서 완료합니다.

작업 API 연결 삭제

마지막으로 작업 요약 페이지의 삭제 버튼과 작업 삭제 API를 연결합니다.
먼저 sumit.
resources/js/components/TaskListComponent.vue

methods: {
    getTasks() {
        axios.get('/api/tasks')
            .then((res) => {
                this.tasks = res.data;
            });
    },
+    deleteTask(id) {
+        axios.delete('/api/tasks/' + id)
+            .then((res) => {
+                this.getTasks();
+            });
+    }
},

<script> 메서드가 추가되었습니다.
매개변수를 통한 작업 ID 수신
작업에 API 제거 요청을 보내는 중입니다.
삭제가 완료되면deleteTask() 호출 방법
작업 목록을 다시 불러오는 중입니다.
그리고 getTasks().
resources/js/components/TaskListComponent.vue

<td>
-    <button class="btn btn-danger">Delete</button>
+    <button class="btn btn-danger" v-on:click="deleteTask(task.id)">Delete</button>

</td>

원래 설정된 Delete 버튼<template>.
이 버튼을 클릭하면 v-on:click="deleteTask(task.id)" 메서드가 호출됩니다.
commit: 작업 목록 페이지에서 연결 API 제거
이렇게 하면 작업 일람 페이지의 삭제 처리도 완성된다
전체 페이지, 전체 기능이 완성되었다.

끝내다

간단한 CRUD 기능 어플리케이션
Vue.js의 SPA와 Laravel의 API로 구축되었습니다.
Vue 측면과 Laravel 측면은 거의 어려움이 없습니다.
나는 상당히 간단하게 썼다고 생각한다.
왜냐하면 이번에는 최대한 간단하게 기능을 만드는 튜토리얼로 삼고 싶어요.
설치해야 할 처리를 생략한 곳이 많다.
Vue 측
Ajax의 오류 처리
API 전송 전 검증 등
설치해야 되는데.
라라벨 쪽에서도 검증이 됐어요.
API 인증 처리 등이 있었으면 좋겠어요.
이번 강좌에서
일단 전체적인 이미지를 잡아야 돼요.
나는 앞으로 상술한 것과 같은 상세한 처리를 조금 추가하면 좋겠다고 생각한다.
(마지막 여러분을 보고 최초 기사에서 LGTM를 받게 된다면 기쁠 것입니다)