用户管理专栏主页面开发
- 写在前面
- 用户权限控制
- 用户列表接口设计
- 主页面开发
- 前端
- account/Index.vue
- langs/zh.js
- store.js
- 后端
- Paginator
- 概述
- 基本用法
- 代码示例
- 属性与方法
- urls.py
- views.py
- 运行效果
- 总结
欢迎加入Gerapy二次开发教程专栏！
本专栏专为新手开发者精心策划了一系列内容，旨在引领你深入探索Gerapy框架的二次迭代之旅。
本专栏将全面剖析Gerapy与Vue的源码架构，让你从内部了解它们的运作机制。
我们将分享实用的技巧，教你如何有效修复Gerapy中的异常问题，如何在现有基础上添加多样化的功能，以及如何对已有功能进行重构优化。
写在前面
读完本篇博客你可以学习到的知识：
- 如何进行用户权限控制
- 如何设计列表页（翻页）接口
- 加深前后端开发经验，利用Django Paginator实现翻页请求
用户权限控制
一般情况下，超级管理员只会有一两个，我们想在前端知道登录用户的身份的话，必须要后端提供对应标识，但是现在已知的接口和缓存都没有存储用户身份标识，那么就需要我们重新开发提供了。
再来看下auth_user表，is_superuser就是用来标识超级管理员身份
这里就有两个方案了：
- 单独开一个接口获取当前登录用户身份
- 由于刚好是操作
auth_user表用到，可以在拿auth_user表数据时顺便计算返回
这里看大家自己的选择，下面我用的是第二个方案，也就是每次请求列表页时，会返回is_superuser字段标识用户身份。
用户列表接口设计
- 接口：
/api/account/list?pageSize=10¤tPage=1 - 请求：
GET - 页数参数：
pageSize，页码参数：currentPage - 响应接口字段：
主页面开发
这是后续我们需要用到的四个文件的作用，Status.vue不需要用到，删除即可
前端
account/Index.vue
下面是全部代码，有些注释，具体的大家得自己熟悉熟悉，没法仔细讲，不过流程是清晰的。
<template>
<div class="panel">
<panel-title :title="$lang.objects.accounts">
<!--新增按钮实现-->
<router-link :to="{ name: 'accountCreate' }" tag="span">
<el-button size="mini" type="success">
<i class="fa fa-plus"></i>
{{ $lang.buttons.create }}
</el-button>
</router-link>
</panel-title>
<div class="panel-body">
<!--遍历accounts-->
<el-table
v-loading="loading"
:data="accounts"
:element-loading-text="$lang.messages.loading"
:empty-text="$lang.messages.noData"
:style="{ width: '100%;' }"
>
<!--各字段呈现实现-->
<el-table-column
:label="$lang.columns.username"
align="center"
prop="username"
min-width="30%"
>
</el-table-column>
<el-table-column
:label="$lang.columns.email"
align="center"
prop="email"
min-width="30%"
>
</el-table-column>
<el-table-column :label="$lang.columns.is_superuser" align="center" min-width="30%">
<template slot-scope="props">
<span v-if="props.row.is_superuser">
<el-button icon="el-icon-check" round size="mini" type="primary"></el-button>
</span>
<span v-else>
<el-button icon="el-icon-close" round size="mini" type="primary"></el-button>
</span>
</template>
</el-table-column>
<el-table-column :label="$lang.columns.is_staff" align="center" min-width="30%">
<template slot-scope="props">
<span v-if="props.row.is_staff">
<el-button icon="el-icon-check" round size="mini" type="primary"></el-button>
</span>
<span v-else>
<el-button icon="el-icon-close" round size="mini" type="primary"></el-button>
</span>
</template>
</el-table-column>
<el-table-column :label="$lang.columns.is_active" align="center" min-width="30%">
<template slot-scope="props">
<span v-if="props.row.is_active">
<el-button icon="el-icon-check" round size="mini" type="primary"></el-button>
</span>
<span v-else>
<el-button icon="el-icon-close" round size="mini" type="primary"></el-button>
</span>
</template>
</el-table-column>
<el-table-column
:label="$lang.columns.date_joined"
align="center"
prop="date_joined"
min-width="30%"
>
</el-table-column>
<el-table-column
:label="$lang.columns.last_login"
align="center"
prop="last_login"
min-width="30%"
>
</el-table-column>
<!--isSupperUserLogin标识超级管理员身份-->
<el-table-column v-if="isSupperUserLogin" :label="$lang.columns.operations" align="center" min-width="50%">
<template slot-scope="props">
<router-link :to="{ name: 'accountEdit', params: { id: props.row.id } }" tag="span">
<!--指定列跳转编辑页-->
<el-button size="mini" type="info">
<i class="fa fa-edit"></i>
{{ $lang.buttons.edit }}
</el-button>
</router-link>
<!--指定列删除-->
<el-button size="mini" type="danger" @click="onSingleDelete(props.row.id)">
<i class="fa fa-remove"></i>
{{ $lang.buttons.delete }}
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script type="text/javascript">
import PanelTitle from "../../components/PanelTitle";
export default {
data() {
return {
accounts: [], // 用户数据列表
loading: true, // 加载中
isSupperUserLogin: true, // 是否是超级管理员身份
totalCount: 0, // 用户数据总数
currentPage: 1, // 当前页码
pageSize: 10, // 页数
};
},
components: {
PanelTitle,
},
created() {
// 页面创建时请求数据
this.getAccountData(this.currentPage, this.pageSize);
},
methods: {
// 请求用户数据
getAccountData(current_page, page_size) {
this.loading = true;
// GET传参方式
this.$http
.get(this.$store.state.url.account.list, {
'params': {
pageSize: page_size,
currentPage: current_page,
}
}
).then(({data: data}) => {
this.accounts = data['rows'];
this.totalCount = data['count'];
this.isSupperUserLogin = data['is_superuser'];
this.loading = false;
}).catch(() => {
this.loading = false;
});
},
// 删除指定用户
deleteAccount(id) {
this.$http
.post(
this.formatString(this.$store.state.url.account.remove, {
id: id,
})
)
.then(() => {
this.$message.success(
this.$store.getters.$lang.messages.successDelete
);
this.loading = false;
this.getAccountData(this.currentPage, this.pageSize);
})
.catch(() => {
this.$message.error(this.$store.getters.$lang.messages.errorDelete);
this.loading = false;
});
},
// 提交删除用户
onSingleDelete(id) {
this.$confirm(
this.$store.getters.$lang.messages.confirm,
this.$store.getters.$lang.buttons.confirm,
{
confirmButtonText: this.$store.getters.$lang.buttons.yes,
cancelButtonText: this.$store.getters.$lang.buttons.no,
type: "warning",
}
).then(() => {
this.deleteAccount(id);
});
},
},
};
</script>
langs/zh.js
需要在columns下增加些配置参数
is_superuser: '超级用户',
is_staff: '工作人员',
is_active: '状态',
date_joined: '加入时间',
last_login: '最后登录时间',
deployed_user_name: '部署者',
deployed_client_name: '部署主机',
deployed_project_name: '部署项目',
deployed_description: '部署描述',
deployed_at: '部署时间',
priority: '优先级',
store.js
需要在url下增加些配置参数
account: {
list: "/api/account/list",
create: "/api/account/create",
info: "/api/account/{id}/info",
update: "/api/account/{id}/update",
remove: "/api/account/{id}/remove",
},
后端
Paginator
这里我们先了解一下Django的翻页器Paginator
概述
Django的Paginator是一个内置的分页组件，用于将大量数据分页显示，从而改善用户体验并减轻服务器压力。使用Paginator可以指定每页显示的数据项数量，并生成一个分页对象，该对象包含了关于总页数、当前页码等信息的方法。
基本用法
引入Paginator类：首先需要从django.core.paginator模块中引入Paginator类。
创建Paginator对象：使用Paginator(object_list, per_page)创建一个分页器对象，其中object_list是要分页的数据列表，per_page是每页显示的数据条数。
获取页面数据：通过调用分页器对象的page(page_number)方法获取特定页面的数据，其中page_number是页码。返回的是一个Page对象，该对象提供了当前页的数据项列表以及其他分页信息，如是否有下一页、上一页等。
代码示例
from django.core.paginator import Paginator
# 假设有一个包含100条数据的列表
objects = ['item1', 'item2', ..., 'item100']
# 创建Paginator对象，每页显示10条数据
paginator = Paginator(objects, 10)
# 获取第一页的数据
page1 = paginator.page(1)
print(page1.object_list) # 输出当前页的数据项列表
print(page1.has_next()) # 检查是否有下一页
print(page1.has_previous()) # 检查是否有上一页
print(page1.number) # 当前页码
属性与方法
paginator.count: 总数据项数paginator.num_pages: 总页数paginator.page_range: 一个范围对象，包含所有页码page.object_list: 当前页的数据项列表page.number: 当前页码page.has_next(): 是否有下一页page.has_previous(): 是否有上一页page.next_page_number(): 下一页的页码（如果有的话）page.previous_page_number(): 上一页的页码（如果有的话）
urls.py
新增两个接口映射
url(r'^api/account/list', views.account_list, name='account_list'),
url(r'^api/account/(\d+)/remove', views.account_remove, name='account_remove'),
views.py
导入需要的包
from django.contrib.auth.models import User
from django.core.paginator import Paginator
方法代码开发，具体实现代码有注释
@log_exception()
@api_view(['GET'])
@permission_classes([IsAuthenticated])
def account_list(request):
"""
account list
:param request: request object
:return: json
"""
if request.method == 'GET':
# 获取单页页数
page_size = int(request.query_params.get('pageSize'))
# 拿到当前页
current_page = int(request.query_params.get('currentPage'))
# 根据主键id顺序排序拿到全部数据对象
accounts = User.objects.order_by('id')
# 创建翻页器Paginator对象，全部数据 单页页数
paginator = Paginator(accounts, page_size)
# 提取指定页码的数据
page_obj = paginator.get_page(current_page)
# model_to_dict：模型数据转字典，定义导出的字段
fields = ['id', 'username', 'email', 'is_superuser', 'date_joined', 'last_login', 'is_staff', 'is_active']
# 最后拼接数据返回
return JsonResponse({
'currentPage': current_page, 'pageSize': page_size, 'count': paginator.count,
'num_pages': paginator.num_pages, 'is_superuser': request.user.is_superuser,
'rows': [model_to_dict(item, fields=fields) for item in page_obj.object_list]})
@log_exception()
@api_view(['POST'])
@permission_classes([IsAuthenticated])
def account_remove(request, account_id):
"""
remove account by account_id
:param request: request object
:param account_id: account id
:return: json
"""
if request.method == 'POST':
# 根据用户id查询并删除
User.objects.filter(id=account_id).delete()
return JsonResponse({'result': '1'})
运行效果
处理好后，打包Vue代码，重新启动后端服务，刷新浏览器。
这里留个坑给大家自己实现，就是删除按钮应该给超级管理员隐藏或者不可用，毕竟他要是删了自己账号还管理个啥！
总结
到这里，我们就实现了主页面开发了，接下来将实现其他页面~
