ching/dsite
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(recipe list page ): [A] 增加分页

Browse Source 
[A] 增加分页

Signed-off-by: Ching <loooching@gmail.com>
This commit is contained in:
Ching 2021-10-05 22:09:38 +08:00
parent cca2779633
commit a4a61b556f
10 changed files with 64 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
core/pagination.py Normal file
View File

@ -0,0 +1,9 @@
# -*- coding: UTF-8 -*-
from rest_framework import pagination
from rest_framework.response import Response
class PagePaginationWithPageCount(pagination.PageNumberPagination):
def get_paginated_response(self, data):
response = super().get_paginated_response(data)
response.data['page_count'] = self.page.paginator.num_pages
return response

8
dsite/settings.py
View File

@ -1,9 +1,17 @@
from .settings_default import * from .settings_default import *
REST_FRAMEWORK = { REST_FRAMEWORK = {
'DEFAULT_AUTHENTICATION_CLASSES': ( 'DEFAULT_AUTHENTICATION_CLASSES': (
'rest_framework.authentication.BasicAuthentication', 'rest_framework.authentication.BasicAuthentication',
'rest_framework.authentication.SessionAuthentication', 'rest_framework.authentication.SessionAuthentication',
), ),
'DEFAULT_PERMISSION_CLASSES': [
'rest_framework.permissions.DjangoModelPermissionsOrAnonReadOnly'
],
# 'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
'DEFAULT_PAGINATION_CLASS': 'core.pagination.PagePaginationWithPageCount',
'PAGE_SIZE': 10
} }

1
frontend/dist/css/app.0786e41a.css vendored Normal file
View File

@ -0,0 +1 @@
.summit-recipe[data-v-16b31338]{width:100%}.el-pagination{margin:10px 0 0 0}.el-row{margin-bottom:20px;&:last-child{margin-bottom:0}}.el-col,.grid-content{border-radius:4px}.grid-content{min-height:36px}.row-bg{padding:10px 0;background-color:#f9fafc}.content{padding:20px 10px}.re-generate{margin:20px 0;width:100%}.el-tag#meal a:link,.el-tag#meal a:visited{text-decoration:none}.el-tag#meal a:active,.el-tag#meal a:hover{text-decoration:underline}.el-tag{margin:0 5px 0 0}.el-tag+.el-tag{margin:5px 0 0 0}

1
frontend/dist/css/app.6a1f0595.css vendored
View File

@ -1 +0,0 @@
.summit-recipe[data-v-16b31338]{width:100%}.el-row{margin-bottom:20px;&:last-child{margin-bottom:0}}.el-col,.grid-content{border-radius:4px}.grid-content{min-height:36px}.row-bg{padding:10px 0;background-color:#f9fafc}.content{padding:20px 10px}.re-generate{margin:20px 0;width:100%}.el-tag#meal a:link,.el-tag#meal a:visited{text-decoration:none}.el-tag#meal a:active,.el-tag#meal a:hover{text-decoration:underline}.el-tag{margin:0 5px 0 0}.el-tag+.el-tag{margin:5px 0 0 0}

2
frontend/dist/index.html vendored
View File

@ -1 +1 @@
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>frontend</title><link href="/css/app.6a1f0595.css" rel="preload" as="style"><link href="/css/chunk-vendors.8823d44d.css" rel="preload" as="style"><link href="/js/app.b14de476.js" rel="preload" as="script"><link href="/js/chunk-vendors.bb844861.js" rel="preload" as="script"><link href="/css/chunk-vendors.8823d44d.css" rel="stylesheet"><link href="/css/app.6a1f0595.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.bb844861.js"></script><script src="/js/app.b14de476.js"></script></body></html> <!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>frontend</title><link href="/css/app.0786e41a.css" rel="preload" as="style"><link href="/css/chunk-vendors.8823d44d.css" rel="preload" as="style"><link href="/js/app.df0986dc.js" rel="preload" as="script"><link href="/js/chunk-vendors.bb844861.js" rel="preload" as="script"><link href="/css/chunk-vendors.8823d44d.css" rel="stylesheet"><link href="/css/app.0786e41a.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.bb844861.js"></script><script src="/js/app.df0986dc.js"></script></body></html>

2
frontend/dist/js/app.b14de476.js vendored
View File

File diff suppressed because one or more lines are too long

1
frontend/dist/js/app.b14de476.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
frontend/dist/js/app.df0986dc.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
frontend/dist/js/app.df0986dc.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

43
frontend/src/components/recipe_list.vue
View File

@ -30,6 +30,17 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination
background
small
layout="total,prev, pager, next"
hide-on-single-page
@current-change="handleCurrentChange"
v-model:current-page="current_page"
:page-count="page_count"
:total="total_count"
>
</el-pagination>
</template> </template>
<script> <script>
@ -85,6 +96,21 @@ export default {
editRecipe(row) { editRecipe(row) {
router.push({ name: 'RecipeDetail', params: { id: row.id } }); router.push({ name: 'RecipeDetail', params: { id: row.id } });
}, },
handleCurrentChange(val) {
if (val === null) {
return;
}
console.log(`当前页: ${val}`);
axios
.get(config.publicPath + '/recipe/recipe/' + '?page=' + val)
.then(
(response) => (
(this.page_count = response.data.page_count),
(this.total_count = response.data.count),
(this.recipes = response.data.results)
)
);
},
}, },
data: function() { data: function() {
return { return {
@ -93,12 +119,27 @@ export default {
formatRate, formatRate,
formatDifficulty, formatDifficulty,
isRouterAlive: true, isRouterAlive: true,
page_count: 1,
total_count: 0,
current_page: 1,
}; };
}, },
mounted() { mounted() {
axios axios
.get(config.publicPath + '/recipe/recipe/') .get(config.publicPath + '/recipe/recipe/')
.then((response) => (this.recipes = response.data)); .then(
(response) => (
(this.page_count = response.data.page_count),
(this.total_count = response.data.count),
(this.recipes = response.data.results)
)
);
}, },
}; };
</script> </script>
<style>
.el-pagination {
margin: 10px 0 0 0;
}
</style>