How to connect with Django REST framework to front-end

Question

I'm new on Django REST Framework. I have an index.html where I have simple form for adding items and back-end with Django. I can't understand, how I can connect index.html to Django REST Framework. I have the next code-files:

models.py

from django.db import models

class Book(models.Model):
    title = models.CharField(max_length=100)
    category = models.CharField(max_length=100)

    def __str__(self):
        return self.title

views.py

from django.shortcuts import render
from django.views.generic import TemplateView
from .models import Book
from rest_framework import viewsets
from .serializers import BookSerializer

class Index(TemplateView):
    template_name = "index.html"
    def get_context_data(self):
        context = super(Index, self).get_context_data()
        return context


class BookViewSet(viewsets.ModelViewSet):
    """
    API endpoint that allows users to be viewed or edited.
    """
    queryset = Book.objects.all().order_by('title')
    serializer_class = BookSerializer

urls.py

from django.conf.urls import url, include
from rest_framework import routers
from myapp import views

router = routers.DefaultRouter()
router.register(r'books', views.BookViewSet)

# Wire up our API using automatic URL routing.
# Additionally, we include login URLs for the browsable API.
urlpatterns = [
    url(r'^', include(router.urls)),
    url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework')),
    url(r'^$', views.Index, name='index'),
]

serializers.py

from .models import Book
from rest_framework import serializers

class BookSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = Book
        fields = ('title','category')

And if I run localhost:8000/index I get an error 'Page not found'. I can't understand how correct I should include my html pages to the django code. Should I use a router.register for this?

I'm not super familiar with Django yet, but `url(r'^$', views.Index, name='index')` if that's not your problem, then it's at least the place to start — Wayne Werner, Mar 31 '16 at 20:15
@ Wayne Werner, I suppose, that `url(r'^$', views.Index, name='index')` is a problem, but I don't know how to correct connect to index.html with REST api — , Mar 31 '16 at 20:20
AFAICT that's routing to your `views.py` `class Index`. I don't know enough about Django to know if that's setup properly. If you know how to log, you can setup logging statements to see if that class is being hit. — Wayne Werner, Mar 31 '16 at 20:24

score 9 · Accepted Answer · edited May 23 '17 at 12:30

Let's start by defining what django-rest-framework is and what it is not.

It is a nice toolkit to build web APIs. This means that you can define several endpoints (urls) that will handle incoming requests and will return a response in JSON or XML format.

It is not an html rendering tool though. This means that you can't return a response that contains html code to be rendered as a page in the browser. It will return pure json or xml data.

Now, your questions consists of 2 problems:

You can't access the index.html page.
You don't know how to connect this page with the books endpoint.

Regarding problem 1

Check the TEMPLATES settings. Where is your index.html placed? Does django know where to find it? Check out the TEMPLATES setting and assure you have set it up correctly.

Regarding problem 2

Because of the fact that the django-rest-framework endpoint handles incoming requests, you need to generate such a request. But if you will simply access the endpoint in your browser, the page will load/reload and you will see the data from your endpoint in json form on your page.

For your page to remain the same, but at the same time to make a request to your endpoint, you need to use ajax (Asynchronous JavaScript and XML) from within your index.html page. You can emit an ajax request by using one of the following:

With pure JavaScript, by means of XMLHttpRequest class. See this SO question and answers to see how this is made.
If you use jQuery, it has a jQuery.ajax() method to make an ajax request.
If you use any other frontend framework (angular, backbone, ember, etc.), all they have an implementation of ajax calls. Check their documentation for that.

And basically that's it. Good luck!

DRF *is* an HTML renderer: http://www.django-rest-framework.org/topics/html-and-forms/ — aehlke, Oct 30 '16 at 03:46

Mounir · Answer 2 · 2016-03-31T20:55:00.393

2

Could you try putting the api url after your index like this?

urlpatterns = [
    url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework')),
    url(r'^$', views.Index, name='index'),
    url(r'^', include(router.urls)),
]

Or why not use /api/ for your REST Api urls:

urlpatterns = [
    url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework')),
    url(r'^$', views.Index, name='index'),
    url(r'^api/', include(router.urls)),
]

And be sure that you have added 'rest_framework', to INSTALLED_APPS

EDIT:

To access /index/ you must fix your urls.py:

urlpatterns = [
    url(r'^index/$', views.Index, name='index'),
    url(r'^api/', include(router.urls)),
    url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework')),
]

edited Mar 31 '16 at 20:55

answered Mar 31 '16 at 20:23

Mounir

11,306
2
27
34

I try to put the api url after index, but I get the same error 'Page not found', if I go to the loclalhost:8000/index/. The `'rest framework'` is in `ISTALLED_APPS` – Mar 31 '16 at 20:50
There is no /index/ you must go to localhost:8000, if you want go enable /index/ you must define it on your urls.py `url(r'^index/$', views.Index, name='index'),`, check my edit – Mounir Mar 31 '16 at 20:53

How to connect with Django REST framework to front-end

2 Answers2