# settings.py
INSTALLED_APPS = [
    ...
    'rest_framework',
    'corsheaders',  # 用于处理跨域请求
    ...
]

# 添加CORS中间件
MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

# 配置CORS
CORS_ORIGIN_ALLOW_ALL = True  # 开发环境下允许所有源，生产环境应限制
# 或指定允许的源
# CORS_ORIGIN_WHITELIST = [
#     'http://localhost:8100',
#     'http://127.0.0.1:8100'
# ]

# 配置DRF
REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework.authentication.TokenAuthentication',
    ],
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.IsAuthenticated',
    ]
}

# views.py
from rest_framework import viewsets
from rest_framework.response import Response
from rest_framework.decorators import action
from .models import YourModel
from .serializers import YourModelSerializer

class YourModelViewSet(viewsets.ModelViewSet):
    queryset = YourModel.objects.all()
    serializer_class = YourModelSerializer

    @action(detail=False, methods=['post'])
    def custom_endpoint(self, request):
        data = request.data
        # 处理数据
        return Response({'status': 'success', 'data': data})

npm install @angular/common @angular/core @angular/http

// src/app/services/api.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private apiUrl = 'http://your-django-server/api/'; // 替换为你的Django服务器地址

  constructor(private http: HttpClient) { }

  // 获取数据
  getData(): Observable<any> {
    return this.http.get(`${this.apiUrl}yourmodel/`);
  }

  // 提交数据
  postData(data: any): Observable<any> {
    const headers = new HttpHeaders({
      'Content-Type': 'application/json',
      // 如果需要认证
      // 'Authorization': 'Token your-token-here'
    });

    return this.http.post(`${thisapiUrl}yourmodel/custom_endpoint/`, data, { headers });
  }

  // 更新数据
  updateData(id: number, data: any): Observable<any> {
    return this.http.put(`${this.apiUrl}yourmodel/${id}/`, data);
  }

  // 删除数据
  deleteData(id: number): Observable<any> {
    return this.http.delete(`${this.apiUrl}yourmodel/${id}/`);
  }
}

// src/app/home/home.page.ts
import { Component } from '@angular/core';
import { ApiService } from '../services/api.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  data: any;

  constructor(private apiService: ApiService) {}

  ionViewDidEnter() {
    this.loadData();
  }

  loadData() {
    this.apiService.getData().subscribe(
      (response) => {
        this.data = response;
      },
      (error) => {
        console.error('Error fetching data:', error);
      }
    );
  }

  submitData() {
    const postData = {
      field1: 'value1',
      field2: 'value2'
    };

    this.apiService.postData(postData).subscribe(
      (response) => {
        console.log('Data submitted successfully:', response);
      },
      (error) => {
        console.error('Error submitting data:', error);
      }
    );
  }
}