基于Angular4的Search应用从Django REST API按用户名查数据问题

Hey there! Let's get your Angular 4 Search app fetching the right user data from your Django REST API. I'll walk you through the steps to make this work smoothly.

Step 1:完善Angular组件逻辑 #

First, let's extend your app.component.ts code to send requests with the username parameter, add debouncing to avoid excessive API calls, and store the returned user data:

import { Component } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  username: string = '';
  userData: any = null; // Stores fetched user data
  private searchTimeout: any; // Timer for debouncing

  constructor(private httpClient: HttpClient){}

  onNameKeyUP(event: any) {
    this.username = event.target.value.trim();
    
    // Debounce: Wait 300ms after last input to send request
    clearTimeout(this.searchTimeout);
    this.searchTimeout = setTimeout(() => {
      if (this.username) {
        // Build request parameters
        const params = new HttpParams().set('username', this.username);
        
        // Send GET request to your Django API endpoint
        this.httpClient.get('http://your-django-api-domain/api/users/', { params })
          .subscribe(
            (response) => {
              this.userData = response; // Adjust based on your API's response structure
              console.log('Fetched user data:', this.userData);
            },
            (error) => {
              console.error('Error fetching user data:', error);
              this.userData = null; // Clear data on error
            }
          );
      } else {
        // Clear data if input is empty
        this.userData = null;
      }
    }, 300);
  }
}

Step 2: Update the Angular Template #

Modify app.component.html to add the search input and display user data:

<div class="search-wrapper">
  <input 
    type="text" 
    [(ngModel)]="username" 
    (keyup)="onNameKeyUP($event)" 
    placeholder="Enter username to search"
    class="search-input"
  >

  <!-- Show user details if data exists -->
  <div *ngIf="userData" class="user-card">
    <h3>User Details</h3>
    <p><strong>Username:</strong> {{ userData.username }}</p>
    <p><strong>Email:</strong> {{ userData.email }}</p>
    <!-- Add other fields based on your API response -->
  </div>

  <!-- Show message if no user found -->
  <div *ngIf="username && !userData" class="no-results">
    <p>No matching user found.</p>
  </div>
</div>

Don't forget to import FormsModule in your AppModule to use [(ngModel)] two-way binding:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule // Add this line
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: Configure Django REST API to Filter by Username #

Your API needs to handle the username query parameter to return matching users. Here are two common approaches:

Option 1: Use Django Filter (Recommended)

1. Install the package:

pip install django-filter

2. Update settings.py:

INSTALLED_APPS = [
    # ... other apps
    'django_filters',
]

REST_FRAMEWORK = {
    'DEFAULT_FILTER_BACKENDS': [
        'django_filters.rest_framework.DjangoFilterBackend',
    ]
}

3. Update your user view:

from rest_framework import generics
from django_filters.rest_framework import DjangoFilterBackend
from .models import User
from .serializers import UserSerializer

class UserListAPIView(generics.ListAPIView):
    queryset = User.objects.all()
    serializer_class = UserSerializer
    filter_backends = [DjangoFilterBackend]
    filterset_fields = ['username'] # Allow filtering by username

Option 2: Manual Queryset Filtering

If you prefer not to use third-party libraries, handle the parameter directly in your view:

from rest_framework import generics
from .models import User
from .serializers import UserSerializer

class UserListAPIView(generics.ListAPIView):
    queryset = User.objects.all()
    serializer_class = UserSerializer

    def get_queryset(self):
        queryset = super().get_queryset()
        username = self.request.query_params.get('username')
        if username:
            # Use username__icontains for case-insensitive fuzzy match
            queryset = queryset.filter(username=username)
        return queryset

Step 4: Fix Cross-Origin Issues #

If your Angular app runs on http://localhost:4200 and Django on a different port/domain, enable CORS:

1. Install the package:

pip install django-cors-headers

2. Update settings.py:

INSTALLED_APPS = [
    # ... other apps
    'corsheaders',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', # Place before CommonMiddleware
    'django.middleware.common.CommonMiddleware',
    # ... other middleware
]

CORS_ALLOWED_ORIGINS = [
    "http://localhost:4200",
    # Add production domains here later
]

With these changes, your Angular app will send filtered requests to your Django API and display only the matching user's data as you type!

内容的提问来源于stack exchange，提问作者Zuber