Question

我正在尝试使用DRF分页后端和VueJs Frontend。我正在尝试创建分页链接，但直到现在我只得到第一个数字。我已经将PageNumberPagination添加到了settings.py中。在文章viewset之后：

class ArticleViewSet(viewsets.ModelViewSet):
    queryset = Article.objects.all()
    lookup_field = "slug"
    serializer_class = ArticleSerializer
    permission_classes = [IsAuthenticated, IsAuthorOrReadOnly]
    pagination_class = PageNumberPagination

我用过Bootstrap-Vue Pagination

<div class="col" id="article-list" :articles="articles" v-for="article in articles" :key="article.pk" 
      :per-page="perPage"
      :current-page="currentPage">...</div>

<b-pagination
          v-model="currentPage"
          :total-rows="rows"
          :per-page="perPage"
          aria-controls="articles-list"
        ></b-pagination>

和VueJS脚本：

export default {
  name: "ArticleList",
  components: {
    HelloWorld,
  } ,
  data() {
    return  {
        articles: [],
        next: null,
        loadingArticles: false,
        perPage: 2,
        currentPage: 1,
        size:2,


    }
  },

  methods: {

  getArticles() {
          this.loadingArticles = true;
          let url = "http://localhost:8000/api/articles";
          axios.get(url)
                .then(response => {
                    this.articles = response.data.results;
            });
        },

    },
    computed: {
        rows() {
            console.log(this.articles.length);
            return this.articles.length;

        }
    },

    created() {
        this.getArticles();
    },
};

如果我在浏览器中检查api地址，则可以看到下一个和上一个数据。

{
    "count": 4,
    "next": "http://localhost:8000/api/articles/?page=2",
    "previous": null,
    "results": [...]
}

如何更改总行数据以使分页有效？谢谢

Answer 1

我只是在获取文章的旁边添加了我，我按照要求回答了我的问题，我现在使用vuex，但是VueJs也很相似：

fetchArticles (context) {
    context.commit("fetchStart");
    let endpoint = "articles/"

    if (context.state.next) {
      endpoint = context.state.next;
    }

    return ApiService.get(endpoint)
        .then(data=>{
          console.log(data);

          context.commit("setArticles", data.data.results)
          if (data.data.next) {
            context.commit("setNext", data.data.next);
          } else {
            context.commit("setNext", null)
          }
        })
        .catch((response) => {
        console.log(response);
        context.commit("setError", response.data.errors)
      })
  },

在我的vuetemplate中，我称其为：

<script>
import { mapGetters, mapActions} from "vuex";
export default {
    name: "Articles",
    computed: {
  },
  methods: {
    ...mapActions(['articles/fetchArticles']),
    getArticles() {
        return this.$store.dispatch('articles/fetchArticles');
    },
  },
  created() {
    this.$store.dispatch('articles/fetchArticles').
    then(() => {
            this.isLoading = false;
    })
  }
};
</script>

和我的按钮

      <li class="page-item disabled">
            <button
            v-show="next"
            @click="getArticles"
            class="btn btn-sm btn-primary"
        >Devamı...</button>
        </li>

DRF + VueJS分页错误页数

1 个答案: