Django + Angular2：データベースからデータをフェッチする方法は？

Question

私は、HTMLページのフロントエンドとしてangular2を使用しています。私はpostgresqlを使用するdjangoプロジェクトを持っています。 djangoプロジェクトでangular2を使用してdjangoモデルとデータベースに接続し、読み取り、更新などの基本操作（CRUD）を実行する最良の方法はどれですか？

現在、データベースからデータを動的に取得する必要があります。 （例：ユーザーが商品リストから商品をクリックすると、商品の詳細をデータベースから取得してユーザーに表示されます）

アドバイスや参考資料のリンクが参考になります。

Answer 1

Djangoを使用してREST APIエンドポイントを作成します（標準的なREST APIにはDRFを使用するか、バニラのdjangoを使用してリクエストのjson応答を生成し、REST APIを呼び出します）。 EXのために

： /product/:idはあなたがそれらのAPIのthrought要求と応答を取得し、あなたがやりたいために角度を使用するとジャンゴ

における特定の製品の詳細を取得するために作成したAPIエンドポイントですそのデータ。 EXのために

： は、ユーザーがその製品をクリックしたときにPK = 1と製品の詳細情報を取得するために/product/1にGET要求を行います。

Browse through Githubいくつかのインスピレーションのために。

Answer 2

アウトdjango-rest-framework

DRFは、建物の残りの部分は風をアプリになりDjangoのアプリです。 quick tutorialをチェックして、プロジェクトでDRFを使用する方法を理解してください。

Answer 3

私は最近あなたが持っている同様のプロジェクトに取り組んでいます。私のアプローチは、上記の@ praba230890のようなものです。ここで

は...ジャンゴ

いくつかのサンプルです urls.pyで

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 
    ) 

で

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

あなたはdjango-cros-headersをインストールする必要がありますCROSエラーが発生した場合また、あなたはあなたのsettings.pyを設定するには、英雄で

Angular2

API-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); 
    } 
} 

が必要になります。TSコンポーネントファイルで

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サービスを注入し、データを取得するためにAPIを使用して、クラスにキャスト。それらのデータを使用することができます。

PS。私は資格とセキュリティの部分に触れていない。安全なAPI通信のために実装された何らかの認証を必要とすると思います。 （私の場合、GETだけが許されているので、後でセキュリティ部分を入れます）

これは役に立ちます。