Пример Django Angular CRUD

В этом поучительном руководстве мы углубимся в искусство создания динамического приложения с полным стеком. Присоединяйтесь к нам, поскольку мы плавно интегрируем Django на основе Python 3 вместе с универсальной Django Rest Framework для надежных API REST. Во внешнем интерфейсе мы используем мощь Angular 16/15/14/13, умело владея такими инструментами, как HttpClient и Router, для создания привлекательного пользовательского интерфейса. Приготовьтесь открыть мир возможностей, поскольку мы проведем вас через создание полнофункционального приложения CRUD, преодолевая разрыв между серверной и внешней сферами.

Интеграция Django + Angular: подробный обзор примеров

Присоединяйтесь к нам в путешествии по созданию полнофункционального обучающего приложения Django и Angular 16/15/14/13, где:

Каждое руководство снабжено уникальным идентификатором, увлекательным заголовком, описательным описанием и статусом, указывающим на его публикацию.
Мы раскрываем возможности создания, извлечения, обновления и удаления учебных пособий, охватывающих весь спектр операций CRUD.
Возможность беспрепятственно находить учебники по их названиям еще больше повышает мастерство нашего приложения.

Приготовьтесь стать свидетелем слияния элегантности бэкенда Django с динамичным интерфейсом Angular, создав гармоничное взаимодействие, кульминацией которого станет надежное и увлекательное обучающее приложение.

Пример архитектуры Django Angular Tutorial

– Django Server экспортирует REST API с помощью Django Rest Framework и взаимодействует с базой данных с помощью модели Django.
– Клиент Angular 15/14/13 отправляет HTTP-запросы и получает HTTP-ответы с помощью модуля HttpClient, показывает данные о компонентах. Мы также используем Angular Router для навигации по страницам.

Обзор

Это API, которые Django App будет экспортировать:

METHODSURLSACTIONSPOST/api/tutorialscreate new TutorialGET/api/tutorialsполучить все TutorialsGET/api/tutorials/:idполучить Tutorial by :idPUT/api/tutorials/:idupdate Tutorial by :idDELETE/api/tutorials/:iddelete Tutorial by :idDELETE/api/tutorialsdelete all TutorialsGET/api/tutorials?title=[ключевое слово]найти все учебники, заголовок которых содержит keyword

Технологии

Питон 3.7
Джанго 2.1.15
Джанго Рест Фреймворк 3.11.0
PyMySQL 0.9.3 (MySQL)/psycopg2 2.8.5 (PostgreSQL)/djongo 1.3.1 (MongoDB)
Джанго-корс-заголовки 3.2.1

Структура проекта

Это структура нашего проекта Django:

– tutorials/apps.py: объявляет класс TutorialsConfig (подкласс django.apps.AppConfig), представляющий приложение Rest CRUD Apis и его конфигурацию.
– RestApis/settings.py: содержит настройки для нашего проекта Django: механизм базы данных, список INSTALLED_APPS с инфраструктурой Django REST, приложение Tutorials, CORS и MIDDLEWARE.
— tutorials/models.py: определяет класс модели данных Tutorial (подкласс django.db.models.Model).
– migrations/0001_initial.py: создается, когда мы выполняем миграции для модели данных, и будет использоваться для создания таблицы/коллекции базы данных.
– tutorials/serializers.py: управляет сериализацией и десериализацией с помощью класса TutorialSerializer (подкласс rest_framework.serializers.ModelSerializer).
– tutorials/views.py: содержит функции для обработки HTTP-запросов и создания Ответы HTTP (с использованием TutorialSerializer).
– tutorials/urls.py: определяет шаблоны URL вместе с функциями запросов в представлениях.
– RestApis/urls.py: также содержит шаблоны URL-адресов, включающие tutorials.urls, это корневые конфигурации URL-адресов.

Установите фреймворк Django REST

Платформа Django REST помогает нам гибко создавать веб-службы RESTful.

Чтобы установить этот пакет, выполните команду:
pip install djangorestframework

Настройте новый проект Django

Давайте создадим новый проект Django с помощью команды:
django-admin startproject bzkRestApis

Когда процесс завершится, вы увидите дерево папок, подобное этому:

Теперь мы открываем settings.py и добавляем фреймворк Django REST в массив INSTALLED_APPS здесь.

INSTALLED_APPS = [
    ...
    # Django REST framework 
    'rest_framework',
]

Настройка ядра базы данных

Откройте settings.py и измените объявление DATABASES:

DATABASES = {
    'default': {
        'ENGINE': ...,
        'NAME': '...',
        'USER': 'root',
        'PASSWORD': '123456',
        'HOST': '127.0.0.1',
        'PORT': ...,
    }
}

Настройте новое приложение Django для Rest CRUD Api

Запустите следующие команды, чтобы создать новые руководства по приложениям Django:

cd RestApis
python manage.py startapp tutorials

Обновите дерево каталогов проекта, вы можете видеть, что теперь оно выглядит так:

Теперь откройте tutorials/apps.py, вы увидите класс TutorialsConfig (подкласс django.apps.AppConfig).
Он представляет приложение Django, которое мы только что создали, с его конфигурацией:

from django.apps import AppConfig

class TutorialsConfig(AppConfig):
    name = 'tutorials'

Не забудьте добавить это приложение в массив INSTALLED_APPS в settings.py:

INSTALLED_APPS = [
    ...
    # Tutorials application 
    'tutorials.apps.TutorialsConfig',
]

Настроить CORS

Нам нужно разрешить запросы к нашему приложению Django из других источников.
В этом примере мы собираемся настроить CORS для приема запросов от localhost:8081.

Сначала установите библиотеку django-cors-headers:
pip install django-cors-headers

В settings.py добавьте конфигурацию для CORS:

INSTALLED_APPS = [
    ...
    # CORS
    'corsheaders',
]

Вам также необходимо добавить класс промежуточного программного обеспечения для прослушивания ответов:

MIDDLEWARE = [
    ...
    # CORS
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
]

Примечание. CorsMiddleware следует размещать как можно выше, особенно перед любым промежуточным ПО, которое может генерировать ответы, такие как CommonMiddleware.

Затем установите CORS_ORIGIN_ALLOW_ALL и добавьте хост в CORS_ORIGIN_WHITELIST:

CORS_ORIGIN_ALLOW_ALL = False
CORS_ORIGIN_WHITELIST = (
    'http://localhost:8081',
)

CORS_ORIGIN_ALLOW_ALL: если True, будут приняты все источники (не используйте белый список ниже). По умолчанию False.
CORS_ORIGIN_WHITELIST: список источников, которым разрешено выполнять межсайтовые HTTP-запросы. По умолчанию [].

Определите модель Джанго

Откройте tutorials/models.py, добавьте класс Tutorial в качестве подкласса django.db.models.Model.
Есть 3 поля: название, описание, опубликовано.

from django.db import models

class Tutorial(models.Model):
    title = models.CharField(max_length=70, blank=False, default='')
    description = models.CharField(max_length=200,blank=False, default='')
    published = models.BooleanField(default=False)

Каждое поле указывается как атрибут класса, и каждый атрибут сопоставляется со столбцом базы данных.
Поле id добавляется автоматически.

Перенос модели данных в базу данных

Запустите скрипт Python: python manage.py makemigrations tutorials.

Консоль покажет:

Migrations for 'tutorials':
  tutorials\migrations\0001_initial.py
    - Create model Tutorial

Обновите рабочую область, вы увидите новый файл tutorials/migrations/0001_initial.py.
Он включает код для создания модели данных Tutorial:

# Generated by Django 2.1.15
from django.db import migrations, models

class Migration(migrations.Migration):
    initial = True
    dependencies = [
    ]
    operations = [
        migrations.CreateModel(
            name='Tutorial',
            fields=[
                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
                ('title', models.CharField(default='', max_length=70)),
                ('description', models.CharField(default='', max_length=200)),
                ('published', models.BooleanField(default=False)),
            ],
        ),
    ]

Сгенерированный код определяет класс Migration (подкласс django.db.migrations.Migration).
Он имеет массив операций, содержащий операцию для создания таблицы модели Tutorial: migrations.CreateModel().

Вызов этого создаст новую модель в истории проекта и соответствующую ей таблицу в базе данных.

Чтобы применить сгенерированный выше перенос, запустите следующий скрипт Python:
python manage.py migrate tutorials

Консоль покажет:

Operations to perform:
  Apply all migrations: tutorials
Running migrations:
  Applying tutorials.0001_initial... OK

В настоящее время вы можете видеть, что таблица/коллекция для модели Tutorial была создана автоматически с именем: tutorials_tutorial в базе данных.

Создайте класс Serializer для модели данных

Давайте создадим класс TutorialSerializer, который будет управлять сериализацией и десериализацией из JSON.

Он наследуется от суперкласса rest_framework.serializers.ModelSerializer, который автоматически заполняет набор fields и validators по умолчанию. Здесь нам нужно указать класс модели.

учебники/serializers.py

from rest_framework import serializers 
from tutorials.models import Tutorial
 
 
class TutorialSerializer(serializers.ModelSerializer):
 
    class Meta:
        model = Tutorial
        fields = ('id',
                  'title',
                  'description',
                  'published')

Во внутреннем классе Meta мы объявляем 2 атрибута:

model: модель сериализатора
fields: кортеж имен полей для включения в сериализацию.

Определение функций Routes to Views

Когда клиент отправляет запрос для конечной точки с помощью HTTP-запроса (GET, POST, PUT, DELETE), нам нужно определить, как сервер будет реагировать, определив маршруты.

Это наши маршруты:

/api/tutorials: ПОЛУЧИТЬ, ОТПРАВИТЬ, УДАЛИТЬ
/api/tutorials/:id: ПОЛУЧИТЬ, ПОСТАВИТЬ, УДАЛИТЬ
/api/tutorials/published: ПОЛУЧИТЬ

Создайте urls.py внутри обучающего приложения с urlpatterns, содержащим urls для сопоставления с функциями запроса в views.py:

from django.conf.urls import url 
from tutorials import views 
 
urlpatterns = [ 
    url(r'^api/tutorials$', views.tutorial_list),
    url(r'^api/tutorials/(?P<pk>[0-9]+)$', views.tutorial_detail),
    url(r'^api/tutorials/published$', views.tutorial_list_published)
]

Не забудьте включить эти шаблоны URL в настройки корневого URL.
Откройте bzkRestApis/urls.py и измените содержимое с помощью следующего кода:

from django.conf.urls import url, include 
 
urlpatterns = [ 
    url(r'^', include('tutorials.urls')),
]

Запись представлений API

Мы собираемся создать эти функции API для операций CRUD:
– tutorial_list(): ПОЛУЧИТЬ список руководств, отправить новое руководство, УДАЛИТЬ все руководства
– tutorial_detail(): ПОЛУЧИТЬ / ПОЛУЧИТЬ / УДАЛИТЬ руководство по 'id'< br /> – tutorial_list_published(): ПОЛУЧИТЬ все опубликованные туториалы

Откройте tutorials/views.py и напишите следующий код:

from django.shortcuts import render
...
@api_view(['GET', 'POST', 'DELETE'])
def tutorial_list(request):
    # GET list of tutorials, POST a new tutorial, DELETE all tutorials
 
 
@api_view(['GET', 'PUT', 'DELETE'])
def tutorial_detail(request, pk):
    # find tutorial by pk (id)
    try: 
        tutorial = Tutorial.objects.get(pk=pk) 
    except Tutorial.DoesNotExist: 
        return JsonResponse({'message': 'The tutorial does not exist'}, status=status.HTTP_404_NOT_FOUND) 
 
    # GET / PUT / DELETE tutorial
    
        
@api_view(['GET'])
def tutorial_list_published(request):
    # GET all published tutorials

Запустите сервер Django Rest Api

Запустите наш проект Django с помощью команды: python manage.py runserver 8080.
Консоль показывает:

Performing system checks...
System check identified no issues (0 silenced).
Django version 2.1.15, using settings 'RestApis.settings'
Starting development server at http://127.0.0.1:8080/
Quit the server with CTRL-BREAK.

Угловой интерфейс

– Компонент App представляет собой контейнер с router-outlet. У него есть навигационная панель, которая ссылается на пути маршрутов через routerLink.

– Компонент TutorialsList получает и отображает Учебники.
– Компонент TutorialDetails имеет форму для редактирования деталей Учебника на основе :id.
– Компонент AddTutorial имеет форму для отправки нового Учебника.

– Эти компоненты вызывают методы TutorialService, которые используют Angular HTTPClient для отправки HTTP-запросов и получения ответов.

Технологии

Угловой 16/15/14/13
Угловой HTTP-клиент
Угловой маршрутизатор
Начальная загрузка 4

– tutorial.model.ts экспортирует модель основного класса: Tutorial.
– Есть 3 компонента: tutorials-list, tutorial-details, add-tutorial.
– tutorial.service имеет методы для отправки HTTP-запросов к API.
– app-routing .module.ts определяет маршруты для каждого компонента.
— компонент app содержит представление маршрутизатора и панель навигации.
— app.module.ts объявляет компоненты Angular и импортирует необходимые модули.

Настроить угловой проект

Давайте откроем cmd и используем Angular CLI для создания нового проекта Angular с помощью следующей команды:

ng new angular-16-crud
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

Нам также нужно сгенерировать некоторые компоненты и сервисы:

ng g s services/tutorial
ng g c components/add-tutorial
ng g c components/tutorial-details
ng g c components/tutorials-list
ng g class models/tutorial --type=model

Настроить модуль приложения

Откройте app.module.ts и импортируйте FormsModule, HttpClientModule:

...
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [ ... ],
  imports: [
    ...
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Определить маршруты для Angular AppRoutingModule

Есть 3 основных маршрута:
– /tutorials для tutorials-list компонента
– /tutorials/:id для tutorial-details компонента
– /add для add-tutorial компонента

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TutorialsListComponent } from './components/tutorials-list/tutorials-list.component';
import { TutorialDetailsComponent } from './components/tutorial-details/tutorial-details.component';
import { AddTutorialComponent } from './components/add-tutorial/add-tutorial.component';
const routes: Routes = [
  { path: '', redirectTo: 'tutorials', pathMatch: 'full' },
  { path: 'tutorials', component: TutorialsListComponent },
  { path: 'tutorials/:id', component: TutorialDetailsComponent },
  { path: 'add', component: AddTutorialComponent }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Определите класс модели

Наш основной класс модели Tutorial будет экспортирован в tutorial.model.ts с 4 полями:

id
title
description
published

модели/tutorial.model.ts

export class Tutorial {
  id?: any;
  title?: string;
  description?: string;
  published?: boolean;
}

Создать службу данных

Этот сервис будет использовать Angular HttpClient для отправки HTTP-запросов.
Как видите, в его функции входят операции CRUD и метод поиска.

services/tutorial.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Tutorial } from '../models/tutorial.model';
const baseUrl = 'http://localhost:8080/api/tutorials';
@Injectable({
  providedIn: 'root'
})
export class TutorialService {
  constructor(private http: HttpClient) { }
  getAll(): Observable<Tutorial[]> {
    return this.http.get<Tutorial[]>(baseUrl);
  }
  get(id: any): Observable<Tutorial> {
    return this.http.get(`${baseUrl}/${id}`);
  }
  create(data: any): Observable<any> {
    return this.http.post(baseUrl, data);
  }
  update(id: any, data: any): Observable<any> {
    return this.http.put(`${baseUrl}/${id}`, data);
  }
  delete(id: any): Observable<any> {
    return this.http.delete(`${baseUrl}/${id}`);
  }
  deleteAll(): Observable<any> {
    return this.http.delete(baseUrl);
  }
  findByTitle(title: any): Observable<Tutorial[]> {
    return this.http.get<Tutorial[]>(`${baseUrl}?title=${title}`);
  }
}

Создание угловых компонентов

Как вы уже знаете, есть 3 компонента, соответствующие 3 маршрутам, определенным в AppRoutingModule.

Добавить новый компонент предмета
Список элементов Компонент
Детали элемента Компонент

Запустите угловое приложение

Вы можете запустить это приложение с помощью команды: ng serve --port 8081.
Если процесс прошел успешно, откройте браузер с URL-адресом: http://localhost:8081/ и проверьте его.

Спасибо, что дочитали до конца. Пожалуйста, следите за автором и этой публикацией. Посетите Stackademic, чтобы узнать больше о том, как мы демократизируем бесплатное обучение программированию по всему миру.

Пример Django Angular CRUD

Обзор

Технологии

Структура проекта

Установите фреймворк Django REST

Настройте новый проект Django

Настройка ядра базы данных

Настройте новое приложение Django для Rest CRUD Api

Настроить CORS

Определите модель Джанго

Перенос модели данных в базу данных

Создайте класс Serializer для модели данных

Определение функций Routes to Views

Запись представлений API

Запустите сервер Django Rest Api

Угловой интерфейс

Технологии

Настроить угловой проект

Настроить модуль приложения

Определить маршруты для Angular AppRoutingModule

Определите класс модели

Создать службу данных

Создание угловых компонентов

Запустите угловое приложение

Похожие вопросы