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

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

(26개의 수강평)

216명의 수강생
33,000원
지식공유자 · 김석훈
31회 수업· 총 4시간 11분수업
평생 무제한 시청
수료증 발급 강의
수강 난이도 초급
김석훈의 다른 강의
연관 로드맵
아직 다른 강의가 없어요 ㅠㅠ
여친없어요 프로필

a 태그 관련 문의드립니다. 여친없어요 1달 전

제가 다른 페이지로 링크를 위해 예를 들어 아래와 같이 작성을 했는데요.

<div v-for="test in tests">

     <a href="{% url 'aa:aa-list' [[test.id]] %}>링크</a>

</div>

이런 경우 [[test.id]]가 django template에 적용이 안되는거 같은데

혹시 해결할 수 있는 방법이 있을까요? ㅠㅠ

1
HandHand 프로필

Django 질문 HandHand 1달 전

안녕하세요 Django에 관심을 가지고 공부중인 학부생입니다.

Django 에서는 Restful API로 DRF(Django Restframework)를 제공하는 것으로 알고 있는데

실전에서는 DRF와 일반 Django 클래스형 뷰 기반 구현 방식 중 어느것을 더 많이 사용하는지 궁금합니다.

향후 Vue.js와 연동하는 웹 애플리케이션을 개발해보고 싶은데 DRF쪽으로 구현해보도록 공부해보는 것이 좋을까요??

1
젬미니 프로필

데이터베이스 젬미니 2달 전

안녕하세요. 좋은 강의 고맙습니다.

강의 내용에 대한 질문은 아니지만 혹시 팁을 얻을 수 있을까해서 질문드립니다.

보통 장고로 프로젝트를 하게 되면 데이터베이스는 기본sqlite를 사용하게 되는 건가요? 자바 프로젝트 같은 경우 JDBC를 이용해서 외부 RDBS프로그램을 사용하는게 보통인것 같은데 장고 강의들은 전부 디폴트로 사용하는 것 같아 실제 비즈니스에서도 그렇게 하는지 궁금합니다.

2
강정훈 프로필

테스트2 강정훈 6달 전

테스트2입니다.

0
매니저 고트 프로필

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

이메일 발송 테스트

0
terecal 프로필

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

안녕하세여 강사님

 

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

 

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

 

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

 

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

 

1
강원탁 프로필

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

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

 

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

1
강원탁 프로필

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

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

1
terecal 프로필

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

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

Vue only 방식으로

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

그런데 실행시키면

 

span 태그에

 

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

 

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

todoItems 의 값들이 잘뿌려지고

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

 

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

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

원인이 무엇일까요 ? 

 

2
SeJin Kang 프로필

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

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

보통 파이썬 개발자분들은

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

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

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

 

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

궁금하네요  

3
김동혁 프로필

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

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

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

크롬으로 뜨면 

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

이게 잘 먹히는데

ie11로 하면 

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

1
김동혁 프로필

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

현재 Todo메뉴의

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

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

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

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

 

질문 1.

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

 

질문 2. 

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

즉 vue파일 하나가 있고, 

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

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

1
김동혁 프로필

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


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

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

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

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

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

1
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스