Comprehensive Practice

# provinces/models.py
from django.db import models


class Province(models.Model):
    name       = models.CharField(max_length=50, verbose_name="Province name", unique=True)
    area       = models.FloatField(verbose_name="Area (10,000 km²)")
    population = models.FloatField(verbose_name="Population (100 million)")
    gdp        = models.FloatField(verbose_name="GDP (trillion CNY)")

    class Meta:
        db_table      = "tb_province"
        verbose_name  = "Province"
        ordering      = ["-gdp"]   # Default: order by GDP descending

# provinces/serializers.py
from rest_framework import serializers
from .models import Province


class ProvinceSerializer(serializers.ModelSerializer):
    class Meta:
        model  = Province
        fields = "__all__"
        extra_kwargs = {
            "id": {"read_only": True},
        }

# provinces/views.py
from rest_framework.viewsets import ModelViewSet
from rest_framework.filters import SearchFilter, OrderingFilter
from rest_framework.pagination import PageNumberPagination
from .models import Province
from .serializers import ProvinceSerializer


class StandardPagination(PageNumberPagination):
    page_size             = 10
    page_size_query_param = "size"
    max_page_size         = 100


class ProvinceViewSet(ModelViewSet):
    queryset         = Province.objects.all()
    serializer_class = ProvinceSerializer
    pagination_class = StandardPagination
    filter_backends  = [SearchFilter, OrderingFilter]
    search_fields    = ["name"]
    ordering_fields  = ["id", "gdp", "population", "area"]
    ordering         = ["-gdp"]    # Default: GDP descending

# provinces/urls.py
from rest_framework.routers import DefaultRouter
from . import views

router = DefaultRouter()
router.register("provinces", views.ProvinceViewSet)

urlpatterns = router.urls

# Project-level urls.py
from django.urls import path, include

urlpatterns = [
    path("api/", include("provinces.urls")),
]

pip install django-cors-headers

# settings.py
INSTALLED_APPS = [
    ...
    'corsheaders',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',   # Must come before CommonMiddleware
    'django.middleware.common.CommonMiddleware',
    ...
]

# Allow specific origins (replace with real domain names in production)
CORS_ALLOWED_ORIGINS = [
    "http://localhost:5173",    # Vite dev server
    "http://localhost:3000",    # Create React App dev server
]

# Or open all origins during development (disable in production)
# CORS_ALLOW_ALL_ORIGINS = True

class CORSMixin:
    """Mix into a view class to add CORS headers to all responses."""
    def finalize_response(self, request, response, *args, **kwargs):
        response = super().finalize_response(request, response, *args, **kwargs)
        response["Access-Control-Allow-Origin"]  = "*"
        response["Access-Control-Allow-Methods"] = "GET, POST, PUT, PATCH, DELETE, OPTIONS"
        response["Access-Control-Allow-Headers"] = "Content-Type, Authorization"
        return response

npm create vite@latest frontend -- --template vue
cd frontend
npm install axios

// src/api/provinces.js
import axios from 'axios'

const api = axios.create({
  baseURL: 'http://127.0.0.1:8000/api/',
  timeout: 5000,
})

export const getProvinces = (params) => api.get('provinces/', { params })
export const createProvince = (data) => api.post('provinces/', data)
export const updateProvince = (id, data) => api.put(`provinces/${id}/`, data)
export const deleteProvince = (id) => api.delete(`provinces/${id}/`)

// src/components/ProvinceTable.vue
<script setup>
import { ref, onMounted } from 'vue'
import { getProvinces, deleteProvince } from '../api/provinces'

const provinces = ref([])
const total = ref(0)
const page = ref(1)

async function load() {
  const res = await getProvinces({ page: page.value, size: 10 })
  provinces.value = res.data.results
  total.value = res.data.count
}

async function remove(id) {
  await deleteProvince(id)
  load()
}

onMounted(load)
</script>