Question

我在我的html页面中使用angular2作为前端。我有一个使用postgresql的django项目。哪个是在django项目中使用angular2连接到django模型和数据库以执行读取，更新等基本操作（CRUD）的最佳方法？

目前我需要动态地从数据库中获取数据。（例如，如果用户点击产品列表中的产品，则应从数据库中检索产品详细信息并向用户显示）

任何建议或参考示例链接都会有所帮助。

Answer 1

使用Django创建REST api端点（使用DRF用于标准REST api，或者只使用vanilla django为请求生成json响应并将其称为REST api）。

对于前： /product/:id是您为获取Django中特定产品的详细信息而创建的api终点

然后使用Angular通过这些API请求并获取响应，并对该数据执行任何操作。

对于前：向用户/product/1发出获取请求，以便在用户点击该产品时使用PK = 1获取产品的详细信息。

Browse through Github获得一些灵感。

Answer 2

结帐django-rest-framework

DRF是一款django应用程序，可以轻松构建ReST应用程序。查看他们的quick tutorial，了解如何在项目中使用DRF。

Answer 3

我最近正在研究你所拥有的类似项目。我的方法就像上面提到的@ praba230890。

以下是一些样本......

Django

在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')),
]

如果遇到CROS错误，则需要安装django-cros-headers。此外，您还需要配置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);
  }
}

在hero.ts

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

在组件文件中，将api-service注入组件

@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。因此，我将安全部分放在后面。）

希望这会有所帮助！

Django + Angular2：如何从数据库中获取数据？

3 个答案: