4.md

继续感受复制粘贴的强大

在前端我们完成了用户、角色、部门、模块的基本列表展示及创建编辑功能.
现在我们再来玩一玩详情页，同样的，我们先完成一个模块，然后采用复制粘贴替换大法.
在详情页中，我们不仅展示基本信息，同时会进行各种关联关系的管理.

tag: 0.3.3

后端

涉及文件

account/urls/user.py
account/apis/user.py
account/controllers/user.py
account/urls/department.py
account/apis/department.py
account/controllers/department.py
account/controllers/role.py

代码

account/controllers/user.py:

def get_roles_by_user_id(obj_id, operator=None):
    '''
    获取用户关联角色列表
    '''
    objs = RoleUserModel.objects.filter(user_id=obj_id).select_related('role').all()
    data_list = []
    for obj in objs:
        data = obj.to_dict()
        data['role'] = obj.role.to_dict()
        data_list.append(data)
    data = {
        'total': len(data_list),
        'data_list': data_list,
    }
    return data

我们拿其中一个方法举例，我们在取用户关联角色时，是在关联的model上筛选，但是我们还需要有角色的信息.
所以我们在关联model上筛选时，增加select_related('role')就会在此次筛选时，提前取出来对应的角色信息.
这是django官方文档中提到过的，会增加查询速度.

前端

涉及文件

src/api/system
src/components/Field
src/components/Tile

概念

这里还是使用复制粘贴大法.
先完成User详情页的开发，然后在通过复制粘贴的手段，快速实现其它模块.
代码如果想更容易维护，那么就要适当的封装和拆分.
然后就是在功能设计上，因为我这个最后完成是一个管理系统，管理系统一个重要的环节就是方便.
所以在各种对象之间，都有快速跳转至对应对象的按钮，也就是查看功能.

代码

src/api/system目录下增加对应的url及接口.

---

src/router/modules/system.js:

{
  path: 'user/:id(\\d+)',
  component: () => import('@/views/system/user/detail'),
  name: 'UserDetail',
  hidden: true,
  meta: { title: '用户详情', noCache: false, sign: 'user' }
},

这里详情页的路由要注意一下，我们详情页就要一个对象id参数，其它都进入后重新获取.

---

src/components/Field:
这个目录下比较有意思了，因为在开发过程中有很多地方要查找部门、角色、用户.
因此我们把这种经常需要使用的功能封装成小组件。这样在以后需要用的时候直接引用就可以了.
CopyField是具有复制功能的字段展示.
EnterField是我们在编辑一个长文本时，里面可能有回车，但是在前端展示的时候，回车可能没有效果.
因此使用EnterField字段可以正确的展示出\n.
RoleField/DepartmentField/UserField这三个字段就是我前面说的可能很多地方会用到，提前封装成组件.

---

src/views/system/user/detail.vue:
我们所有模块的详情页都取名叫detail.vue，一般这个页面我分成两部门.
上面是用来展示对象的基本信息的也就是BaseInfo.vue的内容.
下面我会弄成一个tabs，用来分别展示不同的关联信息等.
比如，User模块的详情页,tabs就分成了角色列表、部门列表等选项卡，以后可能还会增加.
而且写这些功能的时候，就像在搭积木一样，全部分开来写，最后组合.
前面BaseInfo.vue，为了方便展示信息，我又封装了一个src/components/Tile用来平铺展示信息使用.