本项目是基于ant-design开发的一个前端项目，项目的上线地址：http://user-front.66bond.com/

本项目的开发软件：

  • webstorm2021：关注公众号”青椒工具”，发送”webstorm”获取安装包下载链接；

因为我们的前端项目是用户中心，所以需要有一个管理查询用户的页面。主要的步骤：

  • 添加新的目录和页面；
  • 增加新页面的路由；
  • 用户查询页；
1：添加新的目录和页面；

我们在Pages目录下新建Admin目录，然后在Admin下面创建UserManage目录，至于目录里面的文件，我们先尝试直接复制Register目录下的文件（后面再替换修改，前期尽量先跑通）。

图6.1添加用户查询页-裁剪

图1 为查询用户添加目录和文件
2：添加新的路由条目

添加路由还是按照老办法，模仿已有的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{ path: '/welcome', name: '欢迎', icon: 'smile', component: './Welcome' },
{
  path: '/admin',
  name: '管理页',
  icon: 'crown',
  access: 'canAdmin',
  routes: [
    { path: '/admin/sub-page', name: '二级管理页', icon: 'smile', component: './Welcome' },
    /**
     * 新添加的条目;
     */
    {path: '/admin/user-manage', name:'用户管理', icon:'smile', component: './Admin/UserManage'},
    { component: './404' },
  ],
},

设置好路由后，我们在浏览器输入：http://localhost:8000/admin/user-manage，可以看到目标页没有权限访问，如图2所示。

图6.2用户查询页-裁剪

图2 用户查询页没有权限访问

在路由器中，注意到如下的access字段：

1
access: 'canAdmin',

在ant design中，跟全局访问权限有关的是access.ts源代码文件，其中的内容:

1
2
3
4
5
6
export default function access(initialState: { currentUser?: API.CurrentUser } | undefined) {
  const { currentUser } = initialState ?? {};
  return {
    canAdmin: currentUser && currentUser.access === 'admin',
  };
}

我们当前的currrentUser表中，没有access字段，只有userRole字段，如果是管理员，则userRole的值为1。所以修改为：

1
2
3
return {
  canAdmin: currentUser && currentUser.userRole === 1,
};

保存刷新，重新登录后(注意要登录userRole值为1的用户)，发现可以看到user-manage组件(因为当前我们直接复制的Register组件)，如图3所示：

图6.3user-manage-裁剪

图3 正常访问用户管理页

扩展：如果你想新增vip用户，可以模仿上述的思路。

1、在access.ts中增加语句：canVIP: currentUser && currentUser.userRole === 2,

2、在路由表中的条目前，增加 access: ‘canVip’

3：修改完善用户展示页

在修改完善”用户管理”页前，我们先将”/管理页/二级管理页/“删除，简单起见，我们直接删除其在routes.ts中的条目。剩下的事情就是修改Register页面。

我们使用ProTable - 高级表格 - ProComponents (ant.design)中的组件，基于下图中的表格来修改：

图6.4proTable高级表格-裁剪

图4 用户管理参考的组件ProTable

直接将上述组件的代码完全复制，并粘贴到/Admin/UserManage/index.tsx中，再看看上述的UI界面中，可以暂时删除不需要的组件。

  • 1、将参数GithubIssueItem均修改为API.CurrentUser，因为要展示的数据均从CurrentUser获取；
  • 2、选择要罗列数据；选择罗列哪些数据，以及数据是否可以复制、编辑、粘贴等，都可以通过Procolumns来设定；
  • 3、从后台取数据；通过调用后台的/api/user/search接口获取用户列表信息；

步骤2的代码展示如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
const columns: ProColumns<API.CurrentUser>[] = [
  {
    dataIndex: 'id',
    valueType: 'indexBorder',
    width: 48,
  },
  {
    title: '用户名',
    dataIndex: 'userAccount',
    copyable: true,
  },
  {
    title: '用户头像',
    dataIndex: 'avatarUlr',
    copyable: true,
  },
  {
    title: '性别',
    dataIndex: 'gender',
    copyable: true,
  },
  {
    title: '电话',
    dataIndex: 'phone',
    copyable: true,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    valueType: 'date',
    sorter: true,
    hideInSearch: true,
  },
];

步骤3：我们在api.ts中创建一个访问后台/api/user/search接口的方法：

1
2
3
4
5
6
7
/** 从后端获取用户列表 GET /api/user/search */
export async function searchUsers(options?: { [key: string]: any }) {
  return request<API.CurrentUser[]>('/api/user/search', {
    method: 'GET',
    ...(options || {}),
  });
}

然后修改/Admin/UserManage/index.tsx中的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<ProTable<API.CurrentUser>
  columns={columns}
  actionRef={actionRef}
  cardBordered
  request={async (params, sort, filter) => {

    const userList = await searchUsers();
    return {
      data: userList
    }

    // console.log(sort, filter);
    // await waitTime(2000);
    // return request<{
    //   data: CurrentUser[];
    // }>('https://proapi.azurewebsites.net/github/issues', {
    //   params,
    // });

  }}

完成上述修改后，保存刷新登录后台，罗列从后台获取的数据：

图6.5罗列从后台获取的数据-裁剪

图5 列表展示获取自后台的用户数据
4：用户头像渲染

图5中现在的问题是头像不能显示图片，这和条目的渲染有关，我们直接在ProTable的源代码中根据关键词”render”搜索，

查到相关的示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  disable: true,
  title: '标签',
  dataIndex: 'labels',
  search: false,
  renderFormItem: (_, { defaultRender }) => {
    return defaultRender(_);
  },
  render: (_, record) => (
    <Space>
      {record.labels.map(({ name, color }) => (
        <Tag color={color} key={name}>
          {name}
        </Tag>
      ))}
    </Space>
  ),
},

参照上述的示例代码，改写头像部分代码：

1
2
3
4
5
6
7
8
9
10
{
  title: '用户头像',
  dataIndex: 'avatarUlr',
  copyable: true,
  render: (_, record) => (
  <div>
    <img src={record.avatarUlr} width={50}/>
  </div>
  ),
},

render里面有两个参数，第一个”_”表示没有使用到的参数，其中的record默认就是CurrentUser参数。保存刷新后，网页可以显示头像照片：

图6.6-用户头像渲染-裁剪

图6 头像完成渲染
5：性别数据枚举显示

当前的用户性别采用0,1显示，不够直观，能不能让其显示男和女。主要的代码修改如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  title: '性别',
  dataIndex: 'gender',
  copyable: true,
  /**
   * 可枚举的数据类型定义为select.
   */
  valueType: 'select',
  valueEnum:{
    0:{text:"男", status:'Success'},
    1:{text:"女", status:'Default'}
  }
},

选择select后，可以通过性别来查询，而valueEnum中的status主要展示数据显示的颜色，如图7所示：

图6.7枚举数据类型-裁剪

图7 性别数据的枚举与select

图7中的前端已经可以按性别查询，只要完成后台代码支持，就可以很方便地支持按性别查询。

6、参考资料：

本文参考自如下知识星球中的视频教程，更多的完整的相关视频教程，见如下的收费知识星球，近3万人的学习社区，

编程有人同行，学习不再迷茫：

编程导航知识星球