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

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

(20개의 수강평)

159명의 수강생

33,000원

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

테스트2 강정훈 1달 전

테스트2입니다.

0
매니저 고트 프로필

테스트입니다. 매니저 고트 1달 전

이메일 발송 테스트

0
terecal 프로필

할일 수정을 구현하려고 하는데여 terecal 1달 전

안녕하세여 강사님

 

할일 수정을 구현하려고 하는데여

 

폼 정보를 어떻게 넘겨야 되는지도 잘몰겠어요 설명해주시면 감사여 

 

그리고 제가 아는 한에서는 vue js의 좋은점이 jquery의 많은 기능을 jquery 없이 구현할수 있고 더 좋다라고 알고 있는데  어떤식으로 추가적인 학습을 해야할지 감이 잘안와요 ;

 

업데이트뷰, 체크 박스를 체크한뒤 체크한 항목을 삭제 팝업 띄우기, 더보기 버튼, 무한 스크롤 ,파일 업로드, 이미지 출력등 알아야 할것은 많은것 같은데  폼데이터를 보내는것부터 막히니까 막막한데 책을 구입해서 학습을 해야 될까여? 

 

1
강원탁 프로필

form 에서 데이터를 수정하려고하는데 커서를 다른 input으로 변경시 강원탁 1달 전

form 에서 데이터를 수정하려고하는데 커서를 다른 input으로 변경시 다 사라지는데요.

 

이것저것 테스트한 결과 키보드 입력값이 아닌 $('.name').val(수정값);으로 넣었을때 위와 같은 증상이 일어나는데 Vue에서는 이런 경우 어떻게 처리를 해줘야 하죠 ??

1
강원탁 프로필

생성 삭제 리스트는 잘봤습니다.. 강원탁 1달 전

 혹시 업데이트는장고쪽 소스코드를 어떤식으로 짜야되는지 가이드좀 부탁드리겠습니다.

1
terecal 프로필

csrf token 문제가 해결이 안되요 terecal 2달 전

딜리트뷰에 데코레이터로 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 3달 전

Vue only 방식으로

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

그런데 실행시키면

 

span 태그에

 

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

 

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

todoItems 의 값들이 잘뿌려지고

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

 

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

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

원인이 무엇일까요 ? 

 

2
SeJin Kang 프로필

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

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

보통 파이썬 개발자분들은

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

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

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

 

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

궁금하네요  

3
김동혁 프로필

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

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

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

크롬으로 뜨면 

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

이게 잘 먹히는데

ie11로 하면 

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

1
김동혁 프로필

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

현재 Todo메뉴의

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

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

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

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

 

질문 1.

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

 

질문 2. 

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

즉 vue파일 하나가 있고, 

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

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

1
김동혁 프로필

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


<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
김동혁 프로필

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

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

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

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

1
김동혁 프로필

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

http://ccbv.co.uk/ 

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

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

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

1
김동혁 프로필

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

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

0 김동혁 :: 할일 0

1 김동혁 :: 할일 1

2 김동혁 :: 할일 2

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

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

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

2 김동혁 :: 할일 2

1 김동혁 :: 할일 1

0 김동혁 :: 할일 0

3
김동혁 프로필

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

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