In this tutorial series, we show you VueJs Http Client & Django Server example that uses Django to do CRUD with MySQL and VueJs as a front-end technology to make request and receive response.
– django 2.1
– vue 2.6.6
– vue router 3
– axios 0.18.0
Our Django Server can work with MySQL Database and provides APIs:
/customers/: get all customers
/customers/[id]: get a customer by
/customers/age/[age]: find all customers by
/customers/: save a customer
/customers/[id]: update a customer by
/customers/[id]: delete a customer by
/customers/: delete all customers
The image below shows overview about Vue Components that we will create:
– customers/apps.py: declares
CustomersConfig class (subclass of the
django.apps.AppConfig) that represents our Django app and its configuration.
– gkzRestApi/settings.py: configures settings for the Django project, including
INSTALLED_APPS list with Django REST framework and Customers Application.
– customers/models.py: defines
Customer data model class (subclass of the
– migrations/0001_initial.py: is generated by
makemigrations command, includes the code to create the
Customer model, will be run by
migrate to generate MySQL database table for
– customers/serializers.py: declares
CustomerSerializer class (subclass of
Customer instances to manage serialization to JSON and deserialization from JSON.
– customers/views.py: contains methods to process HTTP requests and produce HTTP responses (using
– customers/urls.py: defines
urlpatterns to be matched with request functions in the views.py.
– gkzRestApi/urls.py: defines root URL configurations that includes the URL patterns declared in customers/urls.py.
– package.json with 3 main modules:
– 4 components: CustomersList, Customer, AddCustomer, SearchCustomer.
– router.js defines
routes, each route has a path and maps to a component.
– http-common.js initializes HTTP Client with
headers for axios HTTP methods.
– vue.config.js configures
port for Vue App.