以下是使用
Django自带的
django-cities和
django-countries应用程序的URL配置示例，并结合Vue 3
前端框架进行调用的示例：
1. 首先您需要安装vue-axios和vue-router：
```
npm install vue-axios vue-router --save
```
2. 在您的Vue 3项目中创建路由：
```javascript
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：
```javascript
<
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>
```
```javascript
<
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视图：
```python
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视图：
```python
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
前端框架进行调用的示例，您可以根据自己的需要进行修
改和扩展。
最低0.47元/天 解锁文章
452
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
