[모각코][210724] Vue.js 학습2(Django로 TodoApp만들기)

3가지 TodoApp 비교

todo-html	todo-vue-only	todo-django-only
html 파일에 vue.js코드를 작성하는 방식	장고에 html파일을 그대로 수용하는 방식	vue.js 코드 없이, 장고 코드 만으로 todo 앱을 개발하는 방식
프로그램 종료시 todo 데이터가 사라짐	테이블을 사용하지 않아 todo 데이터가 사라짐	테이블을 사용하므로 다른 사람과 데이터 공유 가능
브라우저 Storage를 사용하면 todo데이터가 유지되지만 내 노트북에서만 보이고 다른 사람 노트북에서는 보이지 않음		간단하고 쉬운 클래스형 뷰를 사용

Django 클래스뷰

• ListView : DB에서 레코드 목록을 가져와 보여주는 뷰
• CreateView : 폼에 입력한 내용으로 DB에 레코드를 생성하는 뷰
• UpdateView : DB에 있는 특정 레코드를 수정하는 뷰
• DeleteView : DB에 있는 특정 레코드를 삭제하는 뷰

Django URL 설계

URL패턴	뷰이름	템플릿 파일명
/admin/	(장고 기본 제공)
/todo/vonly	TodoVueOnlyTV(TemplateView)	todo_vue_only.html
/todo/create/	TodoCV(CreateView)	todo_form.html
/todo/list/	TodoLV(ListView)	todo_list.html
/todo/99/delete/	TodoDelV(DeleteView)	todo_confirm_delete.html

코드

• 코딩 순서 : MVT 패턴
  - M(settings.py / models.py / urls.py)
  - V(views.py)
  - T(templates)

1. models.py에 테이블 정의

from django.db import models

class Todo(models.Model): # 모델 정의할 땐 컬럼과 스트링 메서드 정의 => Todo라는 테이블 하나 정의(admin.py에 등록 필요!)
    name = models.CharField('NAME', max_length=5, blank=True) #컬럼1(이름)
    todo = models.CharField('TODO', max_length=50)#컬럼2(투두 아이템)

    def __str__(self): # 스트링 메서드
        return self.todo

2. admin.py에 Todo 클래스 등록

from django.contrib import admin

from todo.models import Todo


@admin.register(Todo) # 등록할때 register()함수 써도 되지만 더 간편한 데코레이터 사용!
class TodoAdmin(admin.ModelAdmin):
    list_display = ('id', 'name', 'todo') # 세 개 항목 모두 보여줌

# 모델에 변경사항이 발생하면 데이터 베이스 테이블에 반영해야 함!
# 1. python manage.py showmigration -> 현재 상태 확인
# 2. python manage.py makemigration -> migration 파일 생성
# 3. python manage.py migrate -> 데이터베이스에 반영해서 테이블 만듦
# 여기까지 한 뒤 runserver - /admin 들어가서 테이블 정상적으로 생성된 것 확인 가능!

• showmigration : 현재 상태 확인
  

• makemigration : todo테이블 migration 파일 생성
  

• migrate : 데이터베이스에 반영, 테이블 생성
  

• runserver해서 /admin에서 생성된 테이블 확인
  

3. /todo/urls.py에 path생성

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'), #path_converter사용: 숫자가 들어오면 int로 변환해 view로 넘겨줌!
]

• <int:pk> : path converter 사용하여 숫자가 들어오면 int형으로 변환해 view에게 넘겨줌!

4. views.py에 View 정의

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'

# template_name은 모든 view에 공통적인 속성임!
# -> redirect view를 제외한 모든 generic view에 사용됨!
# template_name 먼저 정의한 뒤 그 이후에 필요한 속성들 override함!

# CreateView는 form을 보여줘야 하기 때문에 form을 만들기 위해 model이 필요함
class TodoCV(CreateView):
    model = Todo
    fields = '__all__' # 모든 필드 사용
    template_name = 'todo/todo_form.html'
    success_url = reverse_lazy('todo:list') # redirect할 url : todo의 list로 감

# ListView도 테이블에서 가져와야 하기 때문에 Model 필요
class TodoLV(ListView):
    model = Todo
    template_name = 'todo/todo_list.html'

# DeleteView도 특정 테이블에서 특정 레코드 하나를 삭제해야 되기 때문에 model로 테이블 지정 필요
# form을 만들지는 않으므로 fields 속성은 불필요
# success_url 지정할 땐 reverse()함수나 reverse_lazy()함수 사용
# => reverse_lazy() 사용 이유 : success_url line이 실행되는 시점에는 아직 urls.py 모듈이 로딩이 안 된 상태임
class TodoDelV(DeleteView):
    model = Todo
    template_name = 'todo/todo_confirm_delete.html'
    success_url = reverse_lazy('todo:list') # 삭제 성공 후 redirect

• template_name : 모든 view에 공통적인 속성, redirect view를 제외한 모든 generic view에 사용

• success_url : 레코드 생성 및 삭제 성공 시 redirect할 url 지정
  - reverse_lazy() 사용 : success_url line이 실행되는 시점에는 아직 urls.py 모듈이 로딩되지 않은 상태!
  - successful_url을 설정할 땐 reverse_lazy() 사용하는 것 기억!!