一步一步搭建react后台系统6之用户列表

author author     2023-04-06     254

关键词:

参考技术A 获取分页数据

第一次调用接口的时候, 先新增数据, 之后每次从这里面拿出数据。
一般列表接口 都有以下几个变量
这里根据 页码和每页条数拿到请求的数据并返回回去。
total 总条数
page 页码
pageSize 每页条数
data: [] 数据列表

修改用户列表

删除用户数据

新增用户

新增全局变量

这里拿的同样是ant里面的table表格组件里面的内容, 这里选择的是可以手动开关某些功能的那个表格组件。

表格组件,
这个组件使用的是table中可编辑组件

ant可编辑组件中自带的, 经过拆分放在这个文件夹内

ant可编辑组件中自带的, 经过拆分放在这个文件夹内

这个文件在table组建中, 是非常重要的一个文件, 里面放着一些数据, 主要用来操作表格。

记住以下几点

这里就是调用各个组件, 并传递组件的数据。
这里需要重写继承的属性和方法, 以达到自己想要的功能。
通过modelVisible, modelLoading 控制添加组件的请求状态和显示状态

这里是新增数据组件

请注意下马几个react声明周期

像之前把请求直接写在页面中, 是一个不太好的行为,
如果我们把接口地址全部提取出来, 放到一个文件夹内, 这样方便修改与后面的维护

把请求的方法全部放入到这个文件内。
好处

这个表格使用了动画,因此引入文件

这里, 我们的table封装就弄好了, 虽然看起来文件很多, 但是用起来却很方便, 各种功能不用再次写一遍, 只需要重写需要修改的方法便可以达到再次利用。 后期主要修改clomus与data数据, 里面的各种功能都可通过开关控制。 是不是很方便?

我们后台生成数据的时候, 是带有description属性的。 我们这不做多修改, 添加这个数据九号。

继承的时候, 重写数据。

把 index 换成index2 , 无缝对接。

而添加功能, 需要自己添加多一个Input, 其他可不变。 这里就不进行演示了。

github地址
git版本 验证table组件是可重用

一步一步搭建svn服务之主干分支操作

    公司的项目越来越大,开发人员越来越多,项目中有不同的里程碑,也就是不同版本。软件开发的过程中,如果发现上一个版本有一个紧急BUG,并且需要立即发包修复。这个时候就进退两难,如果你做了版本管理,直接切换... 查看详情

一步一步学vue

本篇完成如下场景:1、系统包含首页、客户信息查询、登录三个模块2、默认进入系统首页,如果要进行用户查询,则需要进行登录授权3、查询用户后点击列表项,则进入详情页面基于上述场景需求描述,在客户端我们考虑,需... 查看详情

一步一步搭建springcloud

一、springcloud简介SpringCloud是一系列框架的有序集合。它利用SpringBoot的开发便利性巧妙地简化了分布式系统基础设施的开发,如服务发现注册、配置中心、消息总线、负载均衡、断路器、数据监控等,都可以用SpringBoot的开发风格... 查看详情

centos7一步一步搭建lamp

一、准备环境1、系统版本[[email protected] ~]# cat /proc/versionLinuxversion3.10.0-514.16.1.el7.x86_642、关防火墙[[email protected] ~]# systemctl disable firewalld3、准备yum源[ 查看详情

springboot+vue单页完整版增删改查练习(学校+老师的简单系统)(一步一步详教)(代码片段)

Springboot+Vue完整版增删改查练习一、需求介绍二、搭建后端环境1.1创建项目1.2导入Pom文件三、前端项目创建数据库准备需求一、显示首页需求2:学校列表前端显示后端编写需求3:添加学校前端编写后端编写需求4:... 查看详情

从 React Native init 一步一步地 React Native Web

】从ReactNativeinit一步一步地ReactNativeWeb【英文标题】:Reactnativewebstepbystepfromreactnativeinit【发布时间】:2021-07-2304:59:04【问题描述】:谁能给我一步一步从一个新的reactnative项目安装reactnativeweb?1)初始化反应原生2)npminstallreact-domrea... 查看详情

一步一步搭建vue

一步一步搭建自己搭建类似与vue-cli的框架第一步:搭建项目目录结构进入项目目录1.vue_demo>npminit-y(如果没有y则需要自己去写配置信息)2.安装依赖包vuedemo>npminstallvuewebpackwebpack-dev-servervue-loadervue-html-loadercss-loadervue-style-loadervue... 查看详情

jumpservice一步一步安装(代码片段)

一步一步安装(CentOS)本文档旨在帮助用户了解各组件之间的关系,生产环境部署建议参考 进阶安装文档云服务器快速部署参考 极速安装安装过程中遇到问题可参考 安装过程中常见的问题测试推荐环境CPU:64位双核处理器... 查看详情

springcloud项目一步一步搭建springcloudstream(代码片段)

...是屏蔽各种消息队列的区别,对消息队列的API进行进一步的抽象,使得在springcloud里面能更加方便的集成各种消息系统。通过使用springcloudStream,可以有效简化开发人员对消息中间件的使用复杂程度,让系统开发人... 查看详情

项目实战15.1—企业级堡垒机jumpserver一步一步搭建(代码片段)

本文收录在Linux运维企业架构实战系列环境准备系统:CentOS7IP:192.168.10.101关闭selinux和防火墙#CentOS7$setenforce0#可以设置配置文件永久关闭$systemctlstopiptables.service$systemctlstopfirewalld.service#CentOS6$setenforce0$serviceiptablesstop&n 查看详情

个人网站一步一步搭建——原型图

  彭欣的个人博客原型草图  整体界面分为“首页”、“技术宅”、“心情篇”、“小随笔”,“我的资料”,五个主要的版块          &n 查看详情

一步一步实现混合驱动自动化测试框架的搭建(代码片段)

一步一步实现混合驱动自动化测试框架的搭建实现功能:登录126邮箱,添加联系人,然后发送邮件,带附件 数据驱动框架结构:Action:   封装的操作元素的函数,如login,添加联系人。。。conf:日志配置文件定位... 查看详情

一步一步实现javaweb项目:登陆

“请输入您的账户及密码”类似于这样的语句你一定不陌生,现如今只要是app基本都是需要这样的操作的,毕竟是大数据时代,用户信息的合法收集便于更好的服务用户已经是现如今比较常见的手法。今天为你道来:打开APP,映... 查看详情

ansible一步一步从入门到精通

一:本地基础测试环境搭建使用vmware或者virtualbox创建一个linux虚拟机(我的是centos6.6),关闭iptables和selinux将上面的服务器地址加入上一篇bolg的hosts文件中exampegroup中同样配置ssh秘钥验证二:你的第一个playbook新建ntp.yml如下:---&nb... 查看详情

一步一步学习vue

本篇继续介绍vue-router,我们需要要完成这样个demo:《分页显示文章列表》;这里我们以博客园首页列表为例简化处理:按照上图框选所示,简单分为蓝色部分文章组件(ArticleItemComponent),橙色框选部分列表组件(ArticleListCompon... 查看详情

hadoop集群搭建准备环境,手把手教你一步一步搭建,超详细(代码片段)

...手实验使用。​在主机准备好了之后,就是最开始的一步,重装系统,之前搭建系统使用的是Ubuntu20.0.4版本,但是这次改用了一下linux版本,使用的是CentOS7.5发行版本。重装系统的步骤就不多少,大概就是... 查看详情

由浅入深理解latentdiffusion/stablediffusion:一步一步搭建自己的stablediffusionmodels

...和读者一起遨游diffusionmodels的世界!本文主要介绍带大家一步步搭建自己的stablediffusi 查看详情

一步一步学ef系列6ioc之autofac

前言     之前的前5篇作为EF方面的基础篇,后面我们将使用MVC+EF并且使用IOC,Repository,UnitOfWork,DbContext来整体来学习。因为后面要用到IOC,所以本篇先单独先学习一下IOC,我们本本文单独主要学习Autofac,其实... 查看详情