Gerapy二次开发：用户管理专栏页面样式与功能设计

欢迎加入Gerapy二次开发教程专栏！
本专栏专为新手开发者精心策划了一系列内容，旨在引领你深入探索Gerapy框架的二次迭代之旅。
本专栏将全面剖析Gerapy与Vue的源码架构，让你从内部了解它们的运作机制。
我们将分享实用的技巧，教你如何有效修复Gerapy中的异常问题，如何在现有基础上添加多样化的功能，以及如何对已有功能进行重构优化。

写在前面

读完本篇博客你可以学习到的知识：

• 用户管理所需要的功能和业务逻辑
• 如何复用项目已有功能代码并重构为己用

用户管理专栏

背景

Django项目都会有一个管理员界面（http://127.0.0.1:8000/admin/），本身是可以进行用户管理的，且功能基本都有。

不过这里我们想让所有用户都看平台用户列表，只是说只有管理员才给新增与编辑权限，另外一个就是要实现对于工作人员离开可以不直接删除数据而是修改权限。

功能明确

• 新增用户管理专栏
• 主页展示用户列表，支持翻页，且管理员支持新增、编辑与删除
• 需要用户新增页面、编辑页面
• 翻页功能需要抽离为组件，便于其它地方需要用户

关联数据库

Gerapy项目使用的是sqlite数据库，pycharm可视化的话需要安装对应的组件包，双击查看时会提示安装

这里我们就直接操作已有的auth_user数据库即可，对其增删改查来实现目的

效果预览

专栏主页

新增用户页

编辑用户页

专栏复用

用户管理专栏的功能其实跟任务管理专栏是一样的，不过没有它复杂，所以这里我们先直接复用任务管理专栏的代码，后续再逐一优化。

1. 新增account目录，然后把task下所有的文件都复制过去，记住不要在编辑器复制，需要在文件资源管理器那复制过去，不然可能打包失败。
   

2. 如下图，在components/Left.vue增加一个el-menu-item
   

   <el-menu-item class="menu-list" index="/account">
   	<i class="icon fa fa-users"></i>
   	<span class="text" v-text="$lang.menus.accounts"></span>
   </el-menu-item>
   

3. 还在langs/zh.js中添加参数，如下图：
   

4. 因为我们新增了专栏，那么肯定需要给专栏添加映射规则，在router.js中参考前面task的定义复用即可，如下图：
   

   {
       path:"/account",
       name: "accountIndex",
       component: () => import("./views/account/Index.vue"),
   },
   {
       path: "/account/create",
       name: "accountCreate",
       component: () => import("./views/account/Create.vue"),
   },
   {
       path: "/account/:id/edit",
       name: "accountEdit",
       component: () => import("./views/account/Edit.vue"),
   },
   

5. 搞定后，打包Vue代码，重启后端服务，刷新浏览器界面
   

总结

前面我们布局好了用户管理专栏，接下来就是逐一对其进行“打磨加工”了。