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

7 thoughts 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.

  2. Undeniably believe that which you said. Your favorite justification seemed to be on the net the easiest thing to be aware of. I say to you, I definitely get irked while people think about worries that they plainly do not know about. You managed to hit the nail upon the top and also defined out the whole thing without having side-effects , people can take a signal. Will likely be back to get more. Thanks

  3. Hey there! I just wanted to ask if you ever have any issues with hackers? My last blog (wordpress) was hacked and I ended up losing months of hard work due to no back up. Do you have any methods to prevent hackers?

  4. You really make it seem so easy with your presentation but I find this topic to be actually something which I think I would never understand. It seems too complex and very broad for me. I’m looking forward for your next post, I will try to get the hang of it!

  5. 573405 357115Thanks for the post. I like your writing style – Im trying to start a blog myself, I believe I may well read thru all your posts for some suggestions! Thanks once a lot more. 527136

  6. The tips you provided here are extremely precious. It turned out this sort of pleasurable surprise to acquire that watching for me after i awakened today. There’re constantly to the point and to comprehend. Thanks a ton to the valuable ideas you’ve got shared here.

Leave a Reply

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