Django自带的django-cities和django-countries url 加vue3 前端调用配置示例

以下是使用Django自带的django-cities和django-countries应用程序的URL配置示例，并结合Vue 3前端框架进行调用的示例：

1. 首先您需要安装vue-axios和vue-router：

npm install vue-axios vue-router --save

2. 在您的Vue 3项目中创建路由：

import { createRouter, createWebHistory } from 'vue-router'
import CountryDetail from './components/CountryDetail.vue'
import CityDetail from './components/CityDetail.vue'

const routes = [
  {
    path: '/countries/:code',
    name: 'CountryDetail',
    component: CountryDetail,
    props: true
  },
  {
    path: '/cities/:id',
    name: 'CityDetail',
    component: CityDetail,
    props: true
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

3. 在您的Vue 3项目中创建组件并使用axios调用django-countries和django-cities的API：

<template>
  <div>
    <h1>{{ country.name }}</h1>
    <ul>
      <li v-for="city in cities" :key="city.id">
        <router-link :to="{ name: 'CityDetail', params: { id: city.id } }">{{ city.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    code: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      country: {},
      cities: []
    }
  },
  async mounted() {
    try {
      const response = await axios.get(`/api/countries/${this.code}/`)
      this.country = response.data
      const citiesResponse = await axios.get(`/api/cities/?country=${this.country.id}`)
      this.cities = citiesResponse.data
    } catch (error) {
      console.error(error)
    }
  }
}
</script>

<template>
  <div>
    <h1>{{ city.name }}</h1>
    <p>{{ city.country.name }}</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      city: {}
    }
  },
  async mounted() {
    try {
      const response = await axios.get(`/api/cities/${this.id}/`)
      this.city = response.data
    } catch (error) {
      console.error(error)
    }
  }
}
</script>

4. 在您的Django项目的urls.py文件中配置API视图：

from django.urls import path
from cities.views import CityDetailView, CityListAPIView
from django_countries.views import country_detail, CountryListAPIView

urlpatterns = [
    # ...
    path('api/countries/', CountryListAPIView.as_view()),
    path('api/countries/<str:code>/', country_detail),
    path('api/cities/', CityListAPIView.as_view()),
    path('api/cities/<int:pk>/', CityDetailView.as_view()),
    # ...
]

5. 在您的Django项目中创建API视图：

from django_countries import countries
from cities.models import City
from cities.serializers import CitySerializer
from rest_framework.generics import ListAPIView, RetrieveAPIView
from rest_framework.response import Response

class CountryListAPIView(ListAPIView):
    def get(self, request):
        return Response(countries)

class CityListAPIView(ListAPIView):
    serializer_class = CitySerializer

    def get_queryset(self):
        queryset = City.objects.all()
        country_id = self.request.query_params.get('country')
        if country_id:
            queryset = queryset.filter(country_id=country_id)
        return queryset

以上示例是使用Django自带的django-countries和django-cities应用程序的URL配置示例，并结合Vue 3前端框架进行调用的示例，您可以根据自己的需要进行修改和扩展。