Introduction
Good day. Today I'll show you how to create an API for your website and how this API can be used from the client side. I'm writing the backend in Django, and the Django REST framework will handle the creation and configuration of the API. The frontend will be written in Axios.
I will demonstrate the process of connecting the REST API using the example of a regular Preset model in a Backend application.
The process of implementing a REST API on a website
The process of creating or implementing a Django REST API for a website can be described in the following steps:
- You need to create or have an existing Django project
- Configure and install the necessary packages
- Create the models you want to use on the client-side
- Create serializers for them.
- Create views (handlers) for them
- Connect routes and paths
- Write and configure the website's frontend to work with the API
Let's take everything in order, so let's start with configuring and installing the necessary packages.
Installing the required packages and setting up the project
You need to install and enable the following Python modules:
- django-cors-headers: to enable Cross-Origin Resource Sharing (CORS) for communication between the React application and the Django API.
- djangorestframework: this is a Django application that allows us to easily build an API for our website.
- django: our website's backend, database management.
Now, we enable the newly installed modules in settings.py:
Creating Models
The next step is to decide which models we want to work with. Here's the full code for the model we'll use for serialization. In your application's models.py file, create the model:
This is just an example and you are free to create your own model with your own fields and methods.
Creating serializer classes
After creating the necessary models, we'll need serializers. To do this, import the serializers module from rest_framework and specify the fields we want to serialize. Create a serializers.py file in your application and add the following:
There's nothing special about these serializers. We create a class using inheritance. Then we select the model and fields we want to serialize. We move on to the views.
Creating views for serializers
Now, we need to see what we're adding, removing, or changing. We need to create views in the views.py file:
Setting up view routes
And the final touch. To finally see the REST API in action, we need to include the previously created view class, PresetModelView. To do this, add a new router to your application's urls.py file:
Okay, done. Let's see what we've got. Go to localhost:8000/api/ , you'll see something like this:
As you can see from the image, we've successfully connected and configured our route. Let's go to any of the provided links, for example, localhost:8000/api/preset/. So, I have two accounts, dima and some, each with its own presets. Let's see how user filtering works:
User some
User dima
As you can see, the first user has only one preset with ID 3. The second has two presets with IDs 1 and 2.
Working with the API from the client-side
Working with the API from the client-side is very simple. You just need to make the appropriate AJAX request and process the response. For example, this will get all available records in the Preset model.
Additional REST Framework Configuration
You're probably wondering: This all sounds great, but you just want to get the JSON file on the client side and do what you're supposed to. I was also itching for this, and I found a rather elegant solution to this problem.
Look, in development mode, we'll see previous pages in images, but if we change the mode (i.e., set debug=False in settings.py), we'll get responses like this:
I have a special extension in Firefox that creates this beautiful thing. It's called JSONView, by the way, and it's also available for Chrome.
To achieve this, simply add the following lines to the end of your settings.py file:
We simply change the default renderer and get what we get... a JSON file.
Conclusion
So, we've finished setting up our website's API using the Django REST framework. Sure, it might seem a bit confusing and overly complicated at first, but trust me, when your project becomes a little more complex than a single-page landing page, you'll immediately remember the REST framework. It's not so complicated after all ( • • )
