Django + Angular 6 example | Django Rest Framework + MySQL CRUD example – Part 1: Overview

django-angular-6-django-rest-api-mysql-angular-django-project-structure-feature-image

In this tutorial series, we show you Angular 6 Http Client & Django Server example that uses Django to do CRUD with MySQL and Angular 6 as a front-end technology to make request and receive response.

>> Part 2: Django Server
>> Part 3: Angular Client

Technologies

– Django 2.1
– Angular 6
– RxJS 6

Video

Project Overview

1. Django Server

django-angular-6-django-rest-api-mysql-angular-server-architecture

With this system, we can use Angular Client to work with MySQL Database via Django Server which has 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
2. Angular 6 Client

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

django-angular-6-django-rest-api-mysql-angular-client-architecture

Project Structure

1. Django Server

django-angular-6-django-rest-api-mysql-angular-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.

2. Angular 6 Client

django-angular-6-django-rest-api-mysql-angular-project-structure

In this example, we focus on:
– 4 components: customers-list, customer-details, create-customer, search-customer.
– 3 modules: FormsModule, HttpClientModule, AppRoutingModule.
customer.ts: class Customer (id, firstName, lastName)
customer.service.ts: Service for Http Client methods

Next, we will create Django server to do CRUD with MySQL (including finder method).
>> Part 2: Django + Angular 6 example | Django Rest Framework + MySQL CRUD example – Part 2: Django Server

By grokonez | February 22, 2019.



Related Posts


1 thought on “Django + Angular 6 example | Django Rest Framework + MySQL CRUD example – Part 1: Overview”

  1. its keeps saying i need to update mysqlclient from 0.9.3 to 1.3.13…but I DID, upgraded to 1.4.2….still getting error – django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.13 or newer is required; you have 0.9.3.

Got Something To Say:

Your email address will not be published. Required fields are marked *

*