Доброго времени суток
Для начала хотел бы сказать, что я совсем новичок и в джанго, и в vue.
У меня стоит такая задача: у меня реализован бэкенд, нужно написать фронтенд.
В базе данных (в джанго по дефолту стоит SQLite) есть записи, их нужно отобразить. Записи - это сущности-компоненты (Messages). Т.е мне нужно отобразить сообщения из базы данных и отрендерить всё это (используя vue). Причём, отображать надо каждые 10 секунд новые сообщения.
Что реализовано в бэкенде:
Есть база данных из записей, есть модель сообщения (Message), есть сериалайзер, есть вью.
Думаю, целесообразным будет показать код вью и урлов, ведь это ключевой момент.
Views:
from rest_framework import viewsets
from .models import Message
from .serializers import MessageSerializer
from rest_framework.views import APIView
from rest_framework.response import Response
# REST'full
class MessageViewSet(APIView):
# queryset = Message.objects.all().order_by('-created_at')
# serializer_class = MessageSerializer
def get(sefl, request):
messages = Message.objects.all()
serializer = MessageSerializer(messages, many=True)
return Response(serializer.data)
def post(sefl):
pass
def index(request):
return render(request, 'webapp/index.html', {})
Урлы:
from django.conf.urls import url, include
# from .views import index
#from .views import MessageViewSet
#urlpatterns = [
# url(r'^$', views.index, name='index'),
# Test api
# url(r'^api/test', views.test_api, name='test_api'),
#]
from rest_framework import routers
from .views import MessageViewSet
# Создаем router и регистрируем наш ViewSet
router = routers.DefaultRouter()
router.register(r'message', MessageViewSet)
# URLs настраиваются автоматически роутером
urlpatterns = [
url(r'^$', MessageViewSet, name='message'),
# url(r'^api/test', views.test_api, name='test_api')
]
urlpatterns += router.urls
from django.conf.urls import url, include
from django.contrib import admin
from rest_framework.urlpatterns import format_suffix_patterns
from webapp import views
urlpatterns = [
# url(r'^$', include('webapp.urls')),
# url(r'^api/v1/', include('webapp.urls')),
url(r'^admin/', admin.site.urls),
url(r'^message/', views.MessageViewSet.as_view())
]
urlpatterns = format_suffix_patterns(urlpatterns)
Так же вот код сериалайзера:
from rest_framework import serializers
from .models import Message
class MessageSerializer(serializers.ModelSerializer):
class Meta:
model = Message
fields = ('id', 'text', 'readed')
Когда я в браузере ввожу такой урл:
http://127.0.0.1:8000/message/, этот урл обрабатывается и возвращается JSON-представление записей в БД. Например:
[
{
"id": 1,
"text": "First message.",
"readed": false
}
]
Мне же необходимо с помощью Vue оторендерить это дело.
Для этого у меня уже есть Vue-компоненты.
Message.vue
<template>
<div class="message">
<b-card class="mb-2">
<p class="card-text">{{data.text}}</p>
<p>{{data.msg_date}}</p>
<b-button @click="readed">Прочитано</b-button>
</b-card>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'message',
data () {
return {
data: {},
}
},
methods: {
readed: function() {
console.log('Message readed')
// ?...
}
}
}
</script>
<style scoped>
</style>
И Messages.vue
<template>
<div class="messages">
<message
v-for='message in messages'
v-bind:key="message.id"
></message>
</div>
</template>
<script>
import axios from 'axios'
import Message from './Message'
export default {
name: 'messages',
data () {
return {
messages: [1],
data: {}
}
},
mounted () {
this.get_messages()
},
methods: {
// FIXME:
get_messages: function(){
this.intervalid1 = setInterval(() => {
console.log('get')
this.messages.push('3')
axios.get(????)
.then((responce) => {
this.data = responce.data
})
.catch((error) => {
console.log(error)
})
}, 10000)
}
},
components: {
Message
}
}
</script>
<style scoped>
</style>
Правда, я не совсем уверен, верна ли эта практика. Потому вопрос такой: как мне сделать та (исходя из вышеуказанного), чтобы у меня рендерелись Vue-компоненты (которые представляют из себя модель-сообщение), данные которых берутся из БД?
Простой
Простой
