Go1.20＋React18 如何前后端分离展示用户列表数据？

大家好，我是张大鹏，今天又来给大家分享技术知识了。

在之前的文章中，我们已经学会了如何设计一个 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元。另外还可以提供一对一的教学和指导服务哈，欢迎留言或私信咨询。

今天的文章就分享到这里了，谢谢大家~