카테고리 없음

Django - Vue(클래스형 뷰를 사용하여 todo 만들기, 3)

뉴비뉴 2019. 9. 2.

3. todo-django-only

- Vue.js 코드 없이, Django 코드 만으로 todo 앱을 개발하는 방식- 테이블을 사용하므로, 다른 사람과 데이터 공유가 가능하다, 간단하고 쉬운 클래스형 뷰를 사용한다.

클래스형 뷰를 사용해보자.

- ListView : DB에서 레코드 목록을 가져와 보여주는 뷰

- CreateView : 폼에 입력한 내용으로, DB에 레코드를 생성하는 뷰

- UpdateView : DB에 있는 특정 레코드를 수정하는 뷰

- DeleteView : DB에 있는 특정 레코드를 삭제하는 뷰

1. settings.py

건드릴 설정이 없다.

2. models.py

from django.db import models


class Todo(models.Model):
    name = models.CharField('NAME', max_length=5, blank=True) # 공백을 넣을 수 있게
    todo = models.CharField('TODO', max_length=30) # 위의 'NAME과, TODO'는 라벨이다. 
# blank를 써주지 않으면 default 값인 False가 들어가게 된다.
    def __str__(self):
        return self.todo

- admin.py

from django.contrib import admin

from todo.models import Todo


@admin.register(Todo) # 데코레이터 사용
class TodoAdmin(admin.ModelAdmin):
    list_display = ('id','name','todo') # amdin 화면에서 보일 list들 id는 기본적으로 제공

3. urls.py

from django.urls import path
from . import views

app_name = 'todo'
urlpatterns = [
    path('vonly/', views.TodoVueOnlyTV.as_view(), name='vonly'),
    path('create/', views.TodoCV.as_view(), name='create'),
    path('list/', views.TodoLV.as_view(), name='list'),
    path('<int:pk>/delete', views.TodoDelV.as_view(), name='delete'),
# <int:pk> path컨버트라고 부르는데 숫자가 들어오면 int로 변환해서 view에 넘겨준다. 
]

4. views.py

from django.shortcuts import render
from django.urls import reverse_lazy
from django.views.generic import TemplateView, CreateView, ListView, DeleteView

from todo.models import Todo


class TodoVueOnlyTV(TemplateView):
    template_name = 'todo/todo_vue_only.html' # RedirectView를 제외한 모든 제네릭뷰에 사용되기 때문에 template_name 지정


class TodoCV(CreateView): # 오버라이딩한다. 기존 내용에서 수정
    model = Todo
    fields = '__all__'
    template_name = 'todo/todo_form.html'
    success_url = reverse_lazy('todo:list') # 생성 후 Redirect 할 url을 지정해준다.


class TodoLV(ListView):
    model = Todo
    template_name = 'todo/todo_list.html'


class TodoDelV(DeleteView):
    model = Todo
    template_name = 'todo/todo_confirm_delete.html'
    success_url = reverse_lazy('todo:list') # 삭제 후 Redirect 할 url을 지정
    # reverse_lazy와 reverse를 사용할 수 있는데 여기선 reverse_lazy를 사용한다 왜냐하면 
    # 이 라인이 실행되는 시점에는 아직 urls.py 모듈이 로딩되지 않아서 이다.
    # 간단하게 생각한다면 success_url 에서는 reverse_lazy를 사용한다고 생각하면 된다.

5. templates

todo_list.html(ListView)

<body>
    <div id='app'>

        <h1>My Todo App !</h1>
        <strong>서로 할 일이나 의견을 공유해 봅시다.</strong>
        <br>

        <ul class="todoList"> {# list가 보여지는 부분이다. #}
            {% for todo in object_list %} {# list view에서는 object_list라는 context를 넘겨준다. #}
            <li>
                <span>{{ todo.name }}:: {{ todo.todo }}</span> <!-- Django와 같이 data를 꺼내온다. -->
                <span class="removeBtn"><a href="{% url 'todo:delete' todo.id %}">&#x00D7</a></span> <!-- remove_todo(index) 여기서 index는 글 번호를 말한다.-->
            </li>
            {% endfor %}
        </ul>

    </div>
</body>

여기서 가장 기억해야 될 것은 object_list로 ListView에서는 context로 자동으로 object_list를 템플릿에 넘긴다.

그리고 삭제 버튼 클릭 시 appname이 todo인 곳에 name이 delete로 지정 된 path에 todo.id를 같이 넘긴다.

todo_form.html(CreateView)

<body>
    <div id='app'>

        <h1>My Todo App !</h1>
        <strong>서로 할 일이나 의견을 공유해 봅시다.</strong>
        <br>

        <form class="inputBox" action="" method="post"> {# form 을 보여주는 부분 #}
            {% csrf_token %}
            <input class="name" type="text" placeholder="name ..." name="name"> <!--name변수를 v-model로 바인딩--><!-- newTodoItem을 바인딩 -->
            <input class="item" type="text" placeholder="type anything welcomed ..." name="todo"> {# name 명은 todo table의 컬럼명과 동일해야 한다. #}
            <button type="submit">ADD</button>
        </form>
    </div>
</body>

여기서 input 안에 있는 name은 테이블에 있는 칼럼명과 동일해야 한다. 그래야 데이터베이스에 해당 칼럼명에 저장

todo_confirm_delete.html(DeleteView)

<body>
    <div id='app'>
        <h1>Todo Delete</h1>
        <p>Are you sure to delete {{ object }} ?</p> {# delete view에서는 context변수 object를 넘긴다. #}
        <br>
        <form action="" method="post">
            {% csrf_token %}
            <button type="submit">Confirm</button>
        </form>
    </div>
</body>

여기서 ListView와 context로 넘기는 값이 다르다는 걸 확인할 수 있다. DeleteView의 경우 object만 넘겨준다.

추가로 object.id, object.name 등등으로 활용해서 자기가 원하는 값도 가져올 수 있다.

하지만 object_list의 경우에는 for의 도움 없이는 출력하기가 어렵다. 왜냐하면 object_list에는

수 많은 값이 저장되어있고, object_list.id 를 찍어낸다면 어떤 값을 가져올지 모르기 때문이다.

Django - Vue(클래스형 뷰를 사용하여 todo 만들기, 3)

댓글

💲 추천 글

티스토리툴바