django的filter实现统计各类书本的数量并在vue使用

可以使用Django的Aggregation（聚合）函数来实现这个功能。首先通过filter函数筛选出各类书本的QuerySet，然后对这个QuerySet使用annotate函数来进行聚合操作，最后在vue中通过API调用获取统计结果。

具体实现如下：

1. 在models.py中定义Book模型类，包含书本名称和类型字段

class Book(models.Model):
    name = models.CharField(max_length=50)
    category = models.CharField(max_length=50)

2. 在views.py中编写视图函数，用于获取统计结果

from django.db.models import Count

def book_count(request):
    counts = Book.objects.values('category').annotate(count=Count('id'))
    results = {}
    for count in counts:
        results[count['category']] = count['count']
    return JsonResponse(results)

3. 在urls.py中定义API接口路由

from django.urls import path
from . import views

urlpatterns = [
    path('api/book_count/', views.book_count, name='book_count'),
]

4. 在vue中使用axios发送API请求获取统计结果，并渲染到页面

<template>
  <div>
    <div v-for="(count, category) in counts" :key="category">
      {{ category }}: {{ count }}
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      counts: {}
    }
  },
  mounted() {
    axios.get('/api/book_count/')
      .then(response => {
        this.counts = response.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>