In this tutorial, we will learn how to build a full stack Django + Vue.js example with a CRUD Application. The back-end server uses Django with Rest Framework for REST APIs and interacts with MySQL/PostgreSQL/MongoDB database. Front-end side is made with Vue, Vue Router, Axios & Bootstrap.
Contents
Django Vue.js example Overview
We will build a full-stack Tutorial Application in that:
- Each Tutorial has id, title, description, published status.
- We can create, retrieve, update, delete Tutorials.
- We can also find Tutorials by title.
The images below shows screenshots of our System.
– Create an object:
– Retrieve all objects:
– Click on Edit button to retrieve an object:
On this Page, you can:
- change status to Published using Publish button
- remove the Tutorial from Database using Delete button
- update the Tutorial details on Database with Update button
– Search objects by field title:
Architecture of Django Vue.js example
This is the application architecture we’re gonna build:
– Django exports REST Apis using Django Rest Framework & interacts with Database using Django Model.
– Vue Client sends HTTP Requests and retrieve HTTP Responses using axios, shows data on the components. We also use Vue Router for navigating to pages.
Django Rest Apis Back-end
Overview
These are APIs that Django App will export:
Methods | Urls | Actions |
---|---|---|
POST | /api/tutorials | create new Tutorial |
GET | /api/tutorials | retrieve all Tutorials |
GET | /api/tutorials/:id | retrieve a Tutorial by :id |
PUT | /api/tutorials/:id | update a Tutorial by :id |
DELETE | /api/tutorials/:id | delete a Tutorial by :id |
DELETE | /api/tutorials | delete all Tutorials |
GET | /api/tutorials?title=[keyword] | find all Tutorials which title contains keyword |
Technology
- Django 2.1.15
- Django Rest Framework 3.11.0
- PyMySQL 0.9.3 (for MySQL)/ djongo 1.3.1 (for MongoDB)
- django-cors-headers 3.2.1
Project Structure
This is our Django project structure:
– tutorials/apps.py: declares TutorialsConfig
class (subclass of django.apps.AppConfig
) that represents Rest CRUD Apis app and its configuration.
– bzkRestApis/settings.py: contains settings for our Django project: Database engine, INSTALLED_APPS
list with Django REST framework, Tutorials Application, CORS and MIDDLEWARE
.
– tutorials/models.py: defines Tutorial data model class (subclass of django.db.models.Model
).
– migrations/0001_initial.py: is created when we make migrations for the data model, and will be used for generating database table/collection.
– tutorials/serializers.py: manages serialization and deserialization with TutorialSerializer
class (subclass of rest_framework.serializers.ModelSerializer
).
– tutorials/views.py: contains functions to process HTTP requests and produce HTTP responses (using TutorialSerializer
).
– tutorials/urls.py: defines URL patterns along with request functions in the Views.
– bzkRestApis/urls.py: also has URL patterns that includes tutorials.urls
, it is the root URL configurations.
Implementation
You can find step by step to implement this Django Rest Api Server Application in one of the posts:
- Django CRUD with MySQL example | Django Rest Framework
- Django CRUD with PostgreSQL example | Django Rest Framework
- Django CRUD with MongoDB example | Django Rest Framework
Vue.js Front-end
Overview
– The App
component is a container with router-view
. It has navbar that links to routes paths.
– TutorialsList
component gets and displays Tutorials.
– Tutorial
component has form for editing Tutorial’s details based on :id
.
– AddTutorial
component has form for submission new Tutorial.
– These Components call TutorialDataService
methods which use axios
to make HTTP requests and receive responses.
Technology
- vue: 2.6.10
- vue-router: 3.1.3
- axios: 0.19.0
Project Structure
– package.json contains 3 main modules: vue
, vue-router
, axios
.
– There are 3 components: TutorialsList
, Tutorial
, AddTutorial
.
– router.js defines routes for each component.
– http-common.js initializes axios with HTTP base Url and headers.
– TutorialDataService
has methods for sending HTTP requests to the Apis.
– vue.config.js configures port for this Vue Client.
Implementation
You can find step by step to implement this Vue App in the post:
Vue.js CRUD App with Vue Router & Axios
Or using Vuetify: Vuetify data-table example with a CRUD App
Further Reading
- Django Rest Framework quich start
- Django Model
- Vue Components
- Vue Router
- https://www.npmjs.com/package/axios
Conclusion
Now we have an overview of Django Vue.js example when building a CRUD App. We also take a look at client-server architecture for REST API using Django Rest Framework, as well as Vue.js with Vue Router, Axios project structure for building a front-end app to make HTTP requests and consume responses.
Next tutorials show you more details about how to implement the system (with source code):
– Back-end:
If you want a Typescript version for the Vue App, it is here:
Vue Typescript CRUD Application to consume Web API example
Or serverless with Firebase:
– Vue Firebase Realtime Database: CRUD example
– Vue Firestore: Build a CRUD App example
Happy learning, see you again!
Thanks alot! I’m looking for fullstack with Django & Vue and found your tutorial.
Can I find this project on github??
Yeah, you can find the github source code in the tutorials that I mention at Conclusion section.
Thank you. This is really helpful