Django + Angular2: Как получить данные из базы данных?

Question

Я использую angular2 как передний конец в своих html-страницах. У меня есть проект django, который использует postgresql. Каков наилучший подход к использованию углового2 в проекте django для подключения к моделям django и базе данных для выполнения основных операций (CRUD), таких как Read, Update и т. Д.?

В настоящее время мне нужно получить данные из базы данных динамически. (например, если пользователь нажимает на продукт из списка продуктов, то информация о продукте должна быть извлечена из базы данных, и она отображается пользователю)

Любая ссылка на консультацию или ссылочный пример будет полезной.

Answer 1

Создайте конечные точки REST api с помощью Django (используйте DRF для стандартного REST api или просто используйте vanilla django для генерации ответа json для запросов и назовите его REST api).

Для экс: /product/:id конца апите момент вы создали для извлечения деталей конкретного продукта в Django

Затем используйте Угловым запросить Повсеместно эти API, и получить ответы и делать все, что вы хотите с это данные.

Для: сделать запрос до /product/1, чтобы получить информацию о продукте с помощью PK = 1, когда пользователь нажимает на этот продукт.

Browse through Github для некоторого вдохновения.

Answer 2

заказ django-rest-framework

ФПИ является Джанго приложение, которое делает строительство ReST приложения ветер. Оформить заказ quick tutorial, чтобы узнать, как использовать DRF в вашем проекте.

Answer 3

Я недавно работаю над аналогичным проектом, который у вас есть. Мой подход похож на @ praba230890, упомянутый выше.

Вот некоторые образцы ...

Джанго

В views.py

class HView(APIView): 
    def get(self, request, format=None): 
    request_hero_id = request.query_params.get('id', None) 
    if request_hero_id: 
     return Response(
     { 
      'id': 1, 
      'name': 'test', 
      'position': 'mid' 
     }, 
     status=status.HTTP_200_OK 
    ) 
    return Response(
     { 'error': 'does not exist' }, 
     status=status.HTTP_404_NOT_FOUND 
    ) 

class HsView(APIView): 
    def get(self, request, format=None): 
    return Response(
     [ 
     { 
      'id': 1, 
      'name': 'test', 
      'position': 'mid' 
     }, 
     { 
      'id': 2, 
      'name': 'test', 
      'position': 'mid' 
     } 
     ], 
     status=status.HTTP_200_OK 
    ) 

В urls.py

urlpatterns = [ 
    url(r'^admin/', admin.site.urls), 
    url(r'', include('shweb.urls')), 
] 

Вам нужно будет установить django-cros-headers если вы столкнулись с ошибками CROS. Кроме того, вам нужно будет настроить ваш settings.py

Angular2

В Апи-service.service.ts

import { Injectable } from '@angular/core'; 
import { Http, Headers } from '@angular/http'; 

import 'rxjs/add/operator/toPromise'; 

import { Hero } from '../utils/hero'; 

@Injectable() 
export class ApiService { 
    /** Modify this later */ 
    private backend_api_url: string = 'http://localhost:8000/api/'; 
    private api_headers: Headers = new Headers(
    { 'Content-Type': 'application/json' } 
); 

    constructor(private http: Http) { } 

    getHero(id: number): Promise<Hero>{ 
    const url = `${this.backend_api_url}htest/?id=${id}`; 

    return this.http.get(url).toPromise().then(
     response => response.json() as Hero 
    ).catch(this.handleError); 
    } // END getHero 

    getHeroes(): Promise<Hero[]>{ 
    const url = `${this.backend_api_url}htests`; 
    console.log(url); 
    return this.http.get(url).toPromise().then(
     response => { 
     console.log(response.json()); 
     return response.json() as Hero[]; 
     } 
    ).catch(this.handleError); 
    } // END getHeroes 

    private handleError(error: any): Promise<any>{ 
    console.error('An error occurred', error); // TODO: update this 
    return Promise.reject(error.message || error); 
    } 
} 

В героя.ц

export class Hero{ 
    id: number; 
    name: string; 
    position: string; 
} 

В файле компонента, впрыснуть Апи-сервис в компоненте

@Component({ 
    selector: 'app-dashboard', 
    templateUrl: './dashboard.component.html', 
    styleUrls: ['./dashboard.component.css'] 
}) 
export class DashboardComponent implements OnInit{ 
    title: string = 'Dashboard'; 
    heroes: Hero[] = []; 

    constructor(private apiService: ApiService){} 

    ngOnInit(): void{ 
    this.getHeroes(); 
    } 

    getHeroes(): void{ 
    this.apiService.getHeroes().then(heroes => this.heroes = heroes); 
    } // END getHeroes 
} 

В принципе, используя API для извлечения данных и клали в классе; то вы можете использовать эти данные.

PS. Я не касался учетных данных и частей безопасности. Я считаю, что для обеспечения безопасного взаимодействия API необходимо выполнить некоторую аутентификацию. (В моем случае разрешены только GET. Поэтому я поставил запасную часть позже.)

Надеюсь, это поможет!