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.
>> Part 2: VueJs Client
>> Part 3: VueJs Client
Technologies
– django 2.1
– vue 2.6.6
– vue router 3
– axios 0.18.0
Project Overview
Django Server

Our Django Server can work with MySQL Database and provides APIs:
- GET
/customers/
: get all customers - GET
/customers/[id]
: get a customer byid
- GET
/customers/age/[age]
: find all customers byage
- POST
/customers/
: save a customer - PUT
/customers/[id]
: update a customer byid
- DELETE
/customers/[id]
: delete a customer byid
- DELETE
/customers/
: delete all customers
Vue Client
The image below shows overview about Vue Components that we will create:

Project Structure
Django Server

– 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 django.db.models.Model
).
– 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 Customer
model.
– customers/serializers.py: declares CustomerSerializer
class (subclass of rest_framework.serializers.ModelSerializer
) for 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 CustomerSerializer
).
– 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.
Vue Client

– package.json with 3 main modules: vue
, vue-router
, axios
.
– 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 baseUrl
and headers
for axios HTTP methods.
– vue.config.js configures port
for Vue App.