[ Laravel + Vue.js ] 나만의 To Do List 만들기 - To Do를 DB에 저장

To Do 생성

가장 중요한 핵심 기능인 To Do를 생성하는 기능

 

Text Form

<div class="flex-initial mt-2" v-if="categoryStatus !== 'important' && patternArr.indexOf(this.categoryStatus) < 0 && currentState === 0">
    <input 
        type="text" 
        v-model="title" 
        @keyup.enter="submit" 
        placeholder="ToDoを書いてください。" 
        class="mb-4  border-4 border-pink-400 w-full p-2 text-black"
        autofocus
	>
</div>

사용자의 Text를 받아서, To Do를 제작해야하니 Text Form을 이용한다. 

 

---

 

input태그안에 사용된 Vue 문법 정리

v-model

v-model은 input태그에서 사용하며, 실시간으로 양방향 바인딩이 가능하도록 해준다. 

이게 무슨말이냐면, data()에서는 template에서 사용될 변수를 선언해주는 부분인데, 여기서 title이라는 변수를 v-model로 바인딩하게 되면, text form에서 글을 작성하는 동시에 그 내용을 title에 넣어주는 것이다. 

 

text form에 "안녕"이라고 적으면, title은 ''로 초기화되어있지만 양방향 바인딩으로 "안녕"이라는 값이 title에 들어간다.

data() {
        return {            
            title: '', // ToDo 생성할 때, text form 값과 v-model로 바인딩
        }
    },

 

@keyup.enter 

Vue에는 @keyup을 이용해서 키보드를 눌렀다 땟을 때, 어떠한 동작을 실행시킬 수 있다.

".enter"를 붙힘으로써 다른 키에는 동작안하고 enter키를 눌렀다가 땟을 때만 특정 작업을 하도록 하는 것

@keyup.enter="submit"

그러므로 위의 코드는 enter키를 눌럿다 땠을 때, submit이라는 함수를 실행시켜라! 라는 말과 같다.

 

---

DB에 저장 

 

위의 @keyup.enter를 설명했을 때, submit이라는 함수를 실행한다 했는데 submit 함수는?

 

methods: {
		//text form에서 @keyup.enter를 통해서 enter를 눌렀다가 땟을 경우 실행되는 함수
        submit() { 
            //if문을 쓴이유는 text가 있을 때만
                if(this.title === '') {
                    alert("글을 입력해야지!!");
                } else {
                    axios.post('api/todo/title', {
                        title: this.title,
                    }).then(res => {                                  
                        this.getResult(lastPage, this.categoryStatus);                
                        this.ToDoList.push(res.data.ToDoList);
                    });
                }         
                //text를 저장하고 나서는 text창 초기화
                this.title='';
        },
 }

 

Vue에서 함수는 methods: {] 안에 작성되게 되는데,  위의 코드를 설명하자면 

 

우선 if문을 통해서 title값이 있는지 없는지를 확인합니다. 

글을 적어야지 To Do를 추가할 수 있으니, 글이 없는 상태에서 엔터를 누르면 alert를 이용해서 경고창이 나오도록 함

 

axios를 이용해서 JSON으로 api와 통신을 할 수 있습니다. 

 

axios.post('api/todo/title', {
                        title: this.title,
                    }).then(res => {                               
                        this.ToDoList.push(res.data.ToDoList);
                    });

axios부분만 따로 설명을 하자면, 지금 우리는 값을 DB에 저장을 할려고 하는거기 때문에 post로 

 

api/todo/title로 요청을 하는데,  여기서 "api/todo/title"가 어디냐? 이건 Laravel 프로젝트 api.php 에서 볼 수 있다.

 

 

route/api.php

Route::post('/todo/title', [ToDoListController::class, 'store']);

해당 URL로 post요청이 왔을 경우에, ToDoListController의 store이라는 함수를 실행시켜라!! 라는 의미다.

 

ToDoListController.php

public function store() {
        $validated = request()->validate([
            'title' => 'required',
        ]);                   
        
        $ToDoList = ToDoList::create($validated);
        
        return response()->json([
            'ToDoList' => $ToDoList,            
        ], 200);
    }

laravel의 validate를 통해서 request로 받아온 내용들을 검증을 합니다. 

 

위의 axios 부분을 보면, "title : this.title"을 파라미터로써 같이 전송을 한 것인데 

 

이 title값을 제대로 받아왔는지를 validate로 확인을 하고, 문제 없으면 DB에 저장을 합니다. 

 

그리고, 정상적으로 성공을 하게 되면 response() -> json()을 이용해서 호출한 곳으로 지금 새로 저장한 To Do의 정보

 

를 JSON의 형태로 보내게 됩니다.

 

axios.post('api/todo/title', {
                        title: this.title,
                    }).then(res => {                               
                        this.ToDoList.push(res.data.ToDoList);
                    });

무사히 통신이 끝났으면,  then 부분의 코드가 실행이 되는데,  res가 방금 JSON형식으로 보낸 데이터를 받아온 것이고 

 

ToDoList라는 변수에 push로 추가하는 것을 볼 수 있다.

 

그러면 무사히 데이터를 저장하고, 저장한 내용을 다시 받아와서 Vue에 변수에 새롭게 추가를 해준다.

 

그럼 template에서는 새롭게 추가된 내용이 바로 view화면을 통해 보일 수 있도록 하는 것 

 

 

 

다음에는 가져온 데이터를 어떻게 View에 보이도록 하는지를 적어보겠습니다.