vue.jsからdjangoへのデータ受け渡し方
vue.jsからdjangoへのデータの送り方を教えてください。
またフレームワークから他のフレームワークを連携？させることを指す言葉があれがそちらも教えていただきたいです。
現在djangoを使って知人を管理するシステムを作っています。
その際form画面で動的処理を行いたいためvue.jsを使用しました。
内容としては「1月を選択した際31日まで表示」「4月を選択した場合30日まで表示」を動的処理したくてvue.jsを使用しました
以下が実際のform画面です
上の月日がdjangoのformで表示したのもので
下の月日がvue.jsを使って表示しているものです
create.html
<form method="post" action="">
{% csrf_token %}
<body>
月{{ form.month}}
日{{ form.days}}
<div id="app">
<label>月</label>
<select v-model="selectedKey" v-on:change="set">
<option v-for="item in month">
[[ item ]]
</option>
</select>
<label>日</label>
<select>
<option v-if="selectedItem" v-for="item in selectedItem">
[[ item.name ]]
</option>
</select>
</div>
<script>
var app = new Vue({
el: '#app',
delimiters: ["[[","]]"],
data: {
selectedKey: "",
selectedItem: "",
month:[1,2,3,4,5,6,7,8,9,10,11,12],
items: {
1 : [
{ name: 1 },
{ name: 2 },
{ name: 3 },
{ name: 4 },
{ name: 5 },
],
2: [
{ name: 6 },
{ name: 7 },
{ name: 8 },
{ name: 9 },
{ name: 10 },
],
}
},
methods:{
selected: function(){
this.selectedItem = this.items[this.selectedKey];
},
set: function(){
if (this.selectedKey == 1 || this.selectedKey == 3 || this.selectedKey == 5 || this.selectedKey == 7 || this.selectedKey == 8 || this.selectedKey == 10|| this.selectedKey == 12)
return this.selectedItem = this.items[1]
else
return this.selectedItem = this.items[2]
}
}
});
</script>
forms.py
class HumanCreateFrom(forms.Form):
#名前
name = forms.CharField(
required=True,
)
#年齢
age = forms.IntegerField(
required=True,
)
#アルバイト先
part = forms.CharField(
required=False,
)
#勤め先
belongs = forms.CharField(
required=False,
)
#出会い
encounter = forms.ChoiceField(
required=True,
widget=forms.widgets.Select,
choices= CATEGORY
)
#最寄り駅
station = forms.CharField(
required=False,
)
month = forms.ChoiceField(
choices = YEAER_MONTH,
required=True,
)
days = forms.ChoiceField(
required=False,
choices = DAY,
)
#好きなもの
like = forms.CharField(
required=False,
)
#嫌いなもの
hate = forms.CharField(
required=False,
)
#エピソード
ep = forms.CharField(
required=False,
)
view.py
from django.shortcuts import render,get_object_or_404,redirect, resolve_url
from django.views.generic import CreateView,ListView,DetailView,UpdateView,DeleteView
from django.urls import reverse_lazy
from django.http import HttpResponse
from .forms import DAY2, HumanCreateFrom
from .models import humanList
from django.http.response import HttpResponse
class HumanCreate(CreateView):
template_name = 'create.html'
model = humanList
fields =('name','age','part','belongs','encounter','station','month','days','like','hate','ep')
success_url = reverse_lazy('list')
class ListHuman(ListView):
template_name = 'list.html'
model = humanList
success_url = reverse_lazy('create')
class HumanDetail(DetailView):
template_name = 'detail.html'
model = humanList
success_url = reverse_lazy('list')
class HumanUpdate(UpdateView):
template_name = 'update.html'
model = humanList
success_url = reverse_lazy('list')
fields =('name','age','part','belongs','encounter','station','month','days','like','hate','ep')
class HumanDelete(DeleteView):
template_name = 'delete.html'
model = humanList
success_url = reverse_lazy('list')
fields =('name','age','part','belongs','encounter','station','month','days','like','hate','ep')
class HumanForm(CreateView):
template_name = 'create.html'
model = humanList
fields =('name','age','part','belongs','encounter','station','month','days','like','hate','ep')
success_url = reverse_lazy('list')
# def humankomi(request):
# f = HumanForm()
# return HttpResponse(f)
def human_new(request):
form = HumanCreateFrom(request.POST or None)
# is_validはバリケードするメソッド
if form.is_valid():
Person = humanList()
# cleaned_dataを使うことで自動でデータの整形をしてくれる
Person.name = form.cleaned_data['name']
Person.age = form.cleaned_data['age']
Person.part = form.cleaned_data['part']
Person.belongs = form.cleaned_data['belongs']
Person.encounter = form.cleaned_data['encounter']
Person.station = form.cleaned_data['station']
Person.month = form.cleaned_data['month']
Person.days = form.cleaned_data['days']
Person.like = form.cleaned_data['like']
Person.hate = form.cleaned_data['hate']
Person.ep = form.cleaned_data['ep']
# Person. = form.cleaned_data['']
humanList.objects.create(
name=Person.name,
age = Person.age,
part = Person.part,
belongs = Person.belongs,
encounter = Person.encounter,
station = Person.station,
month = Person.month,
days = Person.days,
like = Person.like,
hate = Person.hate,
ep = Person.ep
)
return redirect('list')
return render(request,'create.html',{'form':form})
0 likes