我正在尝试使用 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
分页
<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": [...]
}
我如何改变总行的数据来使分页工作?谢谢,谢谢
简单地说,我添加了我的下一个获取文章,我回答我的问题,因为请求,我现在使用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>