大家好,我是张大鹏,今天又来给大家分享技术知识了。
在之前的文章中,我们已经学会了如何设计一个 Go1.20 + React18 的前后端分离的权限管理系统,并实现了登录,注销等功能。今天我们来一起学习一下,如何展示用户列表信息。
如图:
这张图是设计完成以后的一个基本界面,从图中我们可以看到,不仅需要展示不同的文字信息,还需要展示状态按钮,还有一些操作按钮。那么该如何实现这样的一些功能呢?
咱们的系统架构中,前端采用了antd这个组件库,在antd组件库中,提供来Table组件用来展示表格数据,Table本身就自带了分页展示的功能。
要使用Table组件,首先我们需要引入组件:
import {Button, Space, Switch, Table} from 'antd';
import type from 'antd/es/table';
因为咱们采用了TypeScript作为底层的开发代码,所以,我们还需要定义表格的数据类型,代码如下:
interface DataType {
key: React.Key
username: string // 用户名
is_active: boolean // 是否激活
fullname: string // 姓名
role: string // 角色
gender: string // 性别
age: number // 年龄
}
然后就是最重要的部分,定义列的类型,其中如果是渲染复杂的数据,比如状态,我们可以使用render自定义显示效果。代码如下:
const columns: ColumnsType = [
{
title: '用户名',
dataIndex: 'username',
},
{
title: '是否激活',
dataIndex: 'is_active',
render: (active) => (
),
},
{
title: '姓名',
dataIndex: 'fullname',
},
{
title: '角色',
dataIndex: 'role',
},
{
title: '性别',
dataIndex: 'gender',
},
{
title: '年龄',
dataIndex: 'age',
},
{
title: '操作',
key: 'action',
render: () => (
详情
修改
删除
),
},
];
在前期开发的时候,为了便于调试,我们可以先构造假数据,等效果基本设计好了再接入后端的数据。比如,我们可以通过以下代码构造一些假数据:
const data: DataType[] = [];
for (let i = 0; i < 46; i++) {
const active = i % 3 === 0
const role = i % 5 === 0 ? "admin" : "user"
const gender = i % 5 === 0 ? "女" : "男"
const age = 20 + i % 10
data.push({
key: i,
username: `zhangdapeng${i}`, // 用户名
is_active: active, // 是否激活
fullname: `张大鹏${i}`, // 姓名
role: role, // 角色
gender: gender, // 性别
age: age, // 年龄
});
}
最后我们使用Table组件进行渲染就可以了:
整体是不是特别简单呢?
antd组件库提供的表格组件还是比较强大易用的,最后渲染出来的效果也比较舒服,还自带分页功能。
不过我们现在渲染的知识假数据罢了,后面如何接入真实的数据呢?切换分页的时候如何切换后端不同的分页数据呢?
本套权限管理系统整体采用 Go1.20 + React18 + MySQL8 进行前后端分离开发,属于大型实战项目,是可以报名进行学习的哈,学费是5000元。另外还可以提供一对一的教学和指导服务哈,欢迎留言或私信咨询。
今天的文章就分享到这里了,谢谢大家~
领取专属 10元无门槛券
私享最新 技术干货