How to connect Django , Django Rest framework and Vue.JS part(1/2)

First of all this is my first blog, if you see any mistake please let me know to correct it.

If you wanna follow along you can clone the project https://github.com/chapimenge3/Django-VueJs

First let see recap what is Django ? what is VueJs ?

Django is a Python-based free and open-source web framework that follows the model-template-views architectural pattern. It is maintained by the Django Software Foundation, an American independent organization established as a 501 non-profit.[Wikipedia]

Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members.[Wikipedia]

Let’s dive

The project we are going to do is Todo Application. The features are

1. See all the Todos
2. See one to-do by requesting id
3. CRUD operation on Todo
4. Mark the todo is completed or not

So first we create folder for our project

$ mkdir TodoApp # folder creation
$ cd TodoApp    # go to the directory 
$ mkdir Backend # create folder for back-end
$ mkdir Frontend # create folder for front-end

Now let’s Build the Backend

$ cd Backend  # go to the backend directory
$ pip install virtualenv # install virtual enviroment
$ virtualenv env # creat the enviroment
$ source env/bin/activate # activate the enviroment
$ pip install django djangorestframework # install django + drf
$ django-admin startproject Backend # create django project 
$ cd Backend # go to the Backend directory

Now we created the Django project in our backend directory , we can start the fun by coding the backend.

First let’s create an Django app for our backend app and let’s call it Todo.

$ python3 manage.py startapp Todo

After this register the new created app and the django rest framework app to

# Backend/settings.py
INSTALLED_APPS = [
     ...
     'rest_framework',
     'Todo'
]

Next we can create the model for our Todo app .

Todo/models.py

After creating model for our app we have to make migrations. open terminal and make migrations and migrate them.

$ python3 manage.py makemigrations
$ python3 manage.py migrate 

Next let’s create serializer for our Model. here i assume you know a little bit about Django rest framework serializers. If not let’s recap quickly , So Serializers allow complex data such as querysets and model instances to be converted to native Python datatypes that can then be easily rendered into JSON, XML or other content types. So create a file called serializers.py and write the code below.

Todo/serializers.py

After we created serializers class for our model, let move to do the Views.py file to add our view logic.

Thanks to Django Rest Framework they provide a great way to write our view which is Viewset. A ViewSet class is simply a type of class-based View, that does not provide any method handlers such as .get() or .post(), and instead provides actions such as .list() and .create().

views.py

we are almost there, so keep up guys 😂 💪🏼💪🏼💪🏼💪🏼💪🏼💪🏼

So far we do Model , Serializer and the view right . one thing left to finish the backend that is setting up the url, so let do that real quick.

open your project Backend/urls.py .Add the below code

Backend/urls.py

As you can see the above code we set up our home root to our Todo app, so we will add the rest of the endpoints in the Todo app urls.py

Now Create file called urls.py in Todo directory

Todo/urls.py and add the following code .

we are all done. The above code will set our end points todo to handle the create , list , update and delete action of Todo model.

Finally Spin up the server

python manage.py runserver

open your browser and navigate to 127.0.0.1:8000/todo/

you can see there is empty list and the text box to add Todo. Add some todo using the text box and if you want to see specific todo navigate to 127.0.0.1:8000/todo/:id_todo and you will see the details.

Thank you for reading Visit the part two of this write up to do the front-end development using Vue.

Enjoy.