🔥[새 기능 안내] 로드맵 기능 오픈
Vue.js - Django 연동 웹 프로그래밍

Vue.js - Django 연동 웹 프로그래밍

(8개의 수강평)

120명의 수강생

33,000원

김석훈
평생
초급
수료증
31개 수업, 총 4시간 11분
위시리스트 추가
terecal 프로필

csrf token 문제가 해결이 안되요 terecal 17일 전

딜리트뷰에 데코레이터로 csrf_exempt를 적용했는데 에러가 발생합니다. 이유가무엇일까요?

 

from django.http import JsonResponse
from django.shortcuts import render
from django.utils.decorators import method_decorator
from django.views.decorators.csrf import csrf_exempt
from django.views.generic import ListView, DeleteView
from todo.models import Todo

 

from django.http import JsonResponse
from django.shortcuts import render
from django.utils.decorators import method_decorator
from django.views.decorators.csrf import csrf_exempt
from django.views.generic import ListView, DeleteView
from todo.models import Todo

 

@method_decorator(csrf_exempt, name='dispatch')
class ApiTodoDelV(DeleteView):
    model = Todo
   
    def delete(self, request, *args, **kwargs):
        print("todo 삭제 실행 ~!")
        self.object = self.get_object()
        self.object.delete()
        return JsonResponse(DATA={}, status=204)

 

error:

spread.js:25 DELETE http://127.0.0.1:8000/api/todo/1/delete/ 403 (Forbidden)

 

github:

https://github.com/hyunsokstar/vueDjTodo

 

1
SeJin Kang 프로필

for 문 속도 때문일까요..? SeJin Kang 1달 전

Vue only 방식으로

리스트는 정상적으로 화면에 잘 뿌려집니다..

그런데 실행시키면

 

span 태그에

 

{{ todo.name }} :: {{ todo.item }}

 

이 문자 그대로 화면에 아주 잠깐 보인다음 사라지고

todoItems 의 값들이 잘뿌려지고

추가, 삭제 버튼까지도 잘 작동합니다.

 

화면이동이나 새로고침은 전혀 없지만. 깜빡이는 게

괜히 새로고침 또는 화면이동하는 거 같이 느껴지네요 ..

원인이 무엇일까요 ? 

 

2
SeJin Kang 프로필

클래스형 뷰와 함수형 뷰 SeJin Kang 1달 전

클래스형 뷰와 함수형 뷰가 있는데

보통 파이썬 개발자분들은

개발시에 이중 택 1 해서 뷰를 작성하시나요

반복되고 비슷한 코드들일 경우 클래스형 뷰, 

아니면 함수형 뷰를 혼용하면서 개발하나요~?

 

각각 용도가 있겠지만 클래스형 뷰를 더 추천을 많이하는 거 같아서요..

궁금하네요  

3
김동혁 프로필

Django 서버 환경에서 ie11로 실행 시 문제발생 김동혁 1달 전

제가 크롬으로 진행하다가 문제점을 몰랐는데

django서버 가동(python manage.py runserver)해서

크롬으로 뜨면 

delimiters: ['[[', ']]'],
 

이게 잘 먹히는데

ie11로 하면 

저게 안먹혀서 [[ vue변수명 ]] 이렇게 나오는데 혹시 해결책이 있는가요..?

1
김동혁 프로필

VUEJS 관련 질문 드립니다. 김동혁 1달 전

현재 Todo메뉴의

페이지만 div id= app이라는 vuejs를 구축했습니다. 

근데 메뉴가 여러개고 페이지가 다양해질 수 있습니다. 

상단 메뉴가 아래와 같이 구성된다고 가정하면

Home | Todo앱 | Blog앱 | 기타실험작1 | 기타실험작2

 

질문 1.

위와같이 메뉴가 구성되면 VUE도 각 페이지 마다 하나씩 내장되어야하나요? 

 

질문 2. 

VUE 하나로 todo앱 blog앱 기타실험작 1, 2앱을 구현할 수 있는가요? 

즉 vue파일 하나가 있고, 

각 페이지의 엘리먼트를 불러올 수 있는가용?? 

vUE에 대해서 잘 몰라서 어떻게 해야되는지도 감이 안오네요 

1
김동혁 프로필

응용해서 만들어봤는데 신기한걸 발견했습니다. 김동혁 1달 전


<body>
<div id='app'>

<h1>소모품대장 계산 도우미</h1>

<div class="inputBox">
<small>현재 재고는 <b>{{ inStock }}</b>입니다.</small>
<input class="use" type="text" placeholder="불출량 입력하세요" v-model="use">
<button v-on:click="usingInStock(use)" v-on:keyup.enter="usingInStock(use)">사용</button>
</div>
<div class="inputBox">
<small>추가 입고분이 있다면 입력해주세요.</small>
<input class="store" type="text" placeholder="입고량 입력하세요" v-model="store">
<button v-on:click="storingInStock(store)" v-on:keyup.enter="storingInStock(store)">사용</button>
</div>

<ul class="todoList">
<li v-for="(record, index) in records">
<span>{{index}} :: 날짜는 : {{record.Today_date}} - 재고는 : {{ record.currunt_data }} </span>
</li>
</ul>

</div>
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>

<script>
function getRandomIntInclusive(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var vm = new Vue({
el: '#app',
data: {
inStock: '1581',
use: '',
store: '',
str1: '',
tempDate: new Date(2018, 0, 1),
fistDate: '',
records: [
{Today_date: '', currunt_data: ''}
],
},
methods: {
usingInStock: function(use){
this.inStock -= this.use
var d = new Date();
var week = new Array('일', '월', '화', '수', '목', '금', '토');
// this.tempDate.setDate(this.tempDate.getDate() + getRandomIntInclusive(6, 7))
this.tempDate.setDate(this.tempDate.getDate() + 7)
// this.str1 = week[this.tempDate.getDay()]
// console.log("하하하", this.str1, d.getDate(), d.getDay())
this.records.unshift({Today_date:this.tempDate.toLocaleString('ko-KR', {year: "numeric", month:"2-digit", day:"2-digit", weekday: 'short' }), currunt_data: this.inStock})
 
},
storingInStock: function(store){
this.store = parseInt(this.store)
this.inStock = parseInt(this.inStock)
this.inStock += this.store
}
}
}
)
</script>

</body>

위와 같이 코드를 만들어봤는데요

this.inStock에서 -= 변수 하면 instock이 int형으로 잘 반응합니다. *= 도 잘 반응합니다.

근데 왜 +=하면 str + str로 되버려서 

제가 따로 저렇게 형변환을 해줘야됩니다. 

왜이런지 궁금합니다.

1
김동혁 프로필

강의 잘 들었습니다. 김동혁 1달 전

좋은 강의 해주셔서 감사합니다. 

혹시 다음번 강의를 하게되면 

VUEJS-Django간에 REST API를 이용한 방식으로 개발하는 내용이 있기를 바랍니다. ㅠ 

1
김동혁 프로필

클래스형 뷰.. 어떻게 활용법을 다 아신거에요?ㅠ 김동혁 1달 전

http://ccbv.co.uk/ 

사이트에서 클래스형 뷰 보면서 어떻게 상속받고 

어떤 부분을 활용해야되는지 어떻게 아신거죠?

제가 초짜이지만 강의봐서는 따라하기 힘들어보여요 ㅠ

1
김동혁 프로필

이렇게할려면 어떻게 해야되나요? 김동혁 1달 전

현재 todo에 입력하면 index만 봤을 때 출력이

0 김동혁 :: 할일 0

1 김동혁 :: 할일 1

2 김동혁 :: 할일 2

이렇게 아래로 쭉쭉 내려가게 되는데요

출력을 반대로 바꿀 수 있을까요?

신규입력값이 위로가게요~~

2 김동혁 :: 할일 2

1 김동혁 :: 할일 1

0 김동혁 :: 할일 0

3
김동혁 프로필

success_url = reverse_lazy('todo:list') 질문 김동혁 1달 전

success_url = reverse_lazy('todo:list')

이 부분에서 todo:list의 todo는 urls.py에서 정의한 

app_name = 'todo'

이고

list는 

path('list/', views.TodoLV.as_view(), name='list'),

여기서 name으로 지정한 list인가요?

1
Greg Han 프로필

삭제 취소 후 다시 삭제하면 발생하는 에러입니다. 조금 이상합니다.... Greg Han 1달 전

Exception happened during processing of request from ('127.0.0.1', 62552)

Traceback (most recent call last):

  File "/Library/Frameworks/Python.framework/Versions/3.7/lib/python3.7/socketserver.py", line 650, in process_request_thread

    self.finish_request(request, client_address)

  File "/Library/Frameworks/Python.framework/Versions/3.7/lib/python3.7/socketserver.py", line 360, in finish_request

    self.RequestHandlerClass(request, client_address, self)

  File "/Library/Frameworks/Python.framework/Versions/3.7/lib/python3.7/socketserver.py", line 720, in __init__

    self.handle()

  File "/Users/greg_mac/Documents/sd2/python/DjVenv/lib/python3.7/site-packages/django/core/servers/basehttp.py", line 171, in handle

    self.handle_one_request()

  File "/Users/greg_mac/Documents/sd2/python/DjVenv/lib/python3.7/site-packages/django/core/servers/basehttp.py", line 179, in handle_one_request

    self.raw_requestline = self.rfile.readline(65537)

  File "/Library/Frameworks/Python.framework/Versions/3.7/lib/python3.7/socket.py", line 589, in readinto

    return self._sock.recv_into(b)

ConnectionResetError: [Errno 54] Connection reset by peer

5
terecal 프로필

실행이 안되는데 이유를 몰겠어여 terecal 2달 전

html 출력이 잘안되서여  vue를 잘못부른건지 태그가 잘못된건지 알려주시면 감사여

 

코드는

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-Django ToDo App</title>

    <style>
        body {
            text-align: center;
            background-color: #ddd;
        }
        .inputBox {
            margin: auto;
            width: 70%;
            background: white;
            height: 50px;
            border-radius: 50px;
            line-height: 50px;
        }
        .inputBox .name {
            border-style: none;
            border-bottom: 1px solid #ddd;
            width: 70px;
            padding-left: 20px;
        }
        .inputBox .item {
            border-style: none;
            border-bottom: 1px solid #ddd;
            width: 400px;
            margin-left: 50px;
            padding-left: 20px;
        }
        .todoList {
            list-style: none;
            padding: 10px 0;
            text-align: left;
        }
        .todoList li {
            display: flex;
            height: 50px;
            line-height: 50px;
            margin: 0.5rem 0;
            padding: 0 0.9rem;
            background: white;
            border-radius: 5px;
        }
        .removeBtn {
            margin-left: auto;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div id="app">

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

        <div class="inputBox">
            <input class="name" type="text" placeholder="name ...">
            <input class="item" type="text" placeholder="type anything welcomed ...">
            <button>ADD</button>
        </div>

        <ul class="todoList">
            <li v-for="todo in todoItems">
                <span> {{todo.name}} :: {{todo.item}}</span>
                <span class="removeBtn">&#x00D7</span>
            </li>
        </ul>

    </div>

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
              el: '#app',
              data: {
                todoItems:[
                    {name:'김석훈', item:'django와 vue js'},
                    {name:'김석현', item:'django와 react'},
                    {name:'김석진', item:'django와 bootstrap'},
                    {name:'김석민', item:'django와 css'},
                ],
            },
            methods:{},
      }),
    </script>

</body>
</html>

1
Dong Kyun Kang 프로필

속성이 외래키일 경우는 어떻게 해야할지 궁금합니다. Dong Kyun Kang 2달 전

예를 들어 속성이 외래키인 경우에 listview를 통해 응답을 받게 되면 외래키인 속성에 대한 username가 올줄 알았는데 user_id = pk 가 와서요.. 그래서 vue에서 접근해주고 싶지만 django와 달리 뷰에서는 테이블 참조가 안되닌까 django에서 해줘야할 것같은데 응답을 user_id가 아니라 user_name 그리고 category_id가 아니라 category_name을 주고싶은데 잘 안되고 있네요... 

1
Dong Kyun Kang 프로필

UnicodeDecodeError: 'cp949' codec can't decode byte 0xe2 in position 9735: illegal multibyte sequence Dong Kyun Kang 2달 전

post기능 구현중 유니코드에러가 뜨는데 어떻게 해결해야할까요...

1