Django CRUD Application with VueJs as front-end | VueJs + Django Rest Framework + MySQL example – Part 1: Overview

django-vue-crud-example-django-rest-api-mysql-feature-image

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

django-vue-crud-example-django-rest-api-mysql-server-architecture

Our Django Server can work with MySQL Database and provides APIs:

  • GET /customers/: get all customers
  • GET /customers/[id]: get a customer by id
  • GET /customers/age/[age]: find all customers by age
  • POST /customers/: save a customer
  • PUT /customers/[id]: update a customer by id
  • DELETE /customers/[id]: delete a customer by id
  • DELETE /customers/: delete all customers

Vue Client

The image below shows overview about Vue Components that we will create:

django-vue-crud-example-django-rest-api-mysql-client-components

Project Structure

Django Server

django-vue-crud-example-django-rest-api-mysql-django-project-structure

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

django-vue-crud-example-django-rest-api-mysql-vue-project-structure

package.json with 3 main modules: vuevue-routeraxios.
– 4 components: CustomersListCustomerAddCustomerSearchCustomer.
– 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.

0 0 votes
Article Rating
Subscribe
Notify of
guest
4K Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments