测试开发【Mock平台】09开发:项目管理(五)搜索、删除和Table优化

这篇具有很好参考价值的文章主要介绍了测试开发【Mock平台】09开发:项目管理(五)搜索、删除和Table优化。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

【Mock平台】为系列测试开发教程,从0到1编码带你一步步使用Spring Boot 和 Antd React框架完成搭建一个测试工具平台,希望作为一个实战项目对各位的测试开发学习之路有帮助,大奇一个专注测试技术干货原创与分享的家伙。

Mock平台系统项目基本配置,我们已经完成了展示,增加、修改,这个模块的进度其实已经差不多80%了,在本分享中将收下尾,为数据表格配置分页,实现简单搜索功能,以及删除功能,还会掌握如何自定义格式化列数据。

1.优化Table展示

表格形式的数据,一般未来累计超过20条的非常建议为其增加分页功能,在antd中Table组件有自带这个配置,但在之前的逻辑实现中特意关掉了,内部其实嵌套的也是Pagination分页组件,下边将详细演示内嵌和独立使用两种形式。

1.1 Pagination组件

分页组件在数据量大且加载/渲染所有数据将花费很多时间时,可以利用分页器组件进行页码浏览,要使用它需要导入组件 import{ Pagination }from'antd';其中基础配置属性** **total总数量,会根每页条数 pageSize(默认是10条)计算多少页,另外还有一个重要方法 onChange指页码或 pageSize 改变时回调,function(page, pageSize)参数是改变后的页码及每页条数。

参考官方例子给项目列表Table下方增加此组件,为了先做个演示测试,数据固定给50条,并主动开启

  • showSizeChanger 展示 pageSize 切换器,组件默认 total 大于 50 时为 true
  • pageSizeOptions 数组 指定每页可以显示多少条
import{ Pagination }from'antd';

/* 分页相关 */
const pageChange = (page, pageSize) => {
  console.log(`分页变化值 Page:${page}, PageSize:${pageSize}`);
}

...省略...
</Table>
<br/>  
<Pagination
  total={100}
  onChange={pageChange}
  showSizeChanger={true}
  pageSizeOptions={[5,10,20,30,50]}
/>

当点击切换页,下拉选择改变每页显示的数量时候,可以直观的看到的两个参数数值的变化,如下图:
测试开发【Mock平台】09开发:项目管理(五)搜索、删除和Table优化,Mock平台,前端,javascript,开发语言

因此在实现项目表格分页上,只需要在onChange里请求之前文章后服务分页查询接口,并将统计的总数动态赋值,就能实现优化改造。这里参考代码有些注意的地方:

  • 不要忘记server.js 的接口配置;
export async function searchProducts(params) {
  return request('/api/mock/project/search', {
    method: 'GET',
    params
  });
}
  • 定义了些中间变量存储各类数据;
  • 换了fetchData方法函数替代原有请求列表,并且是参数化请求,避免React闭包问题;
  • 列表查询接口还有一个项目名称模糊查询字段,组合请求参数时不要忘记;
  // const {data:useProjectList, error, loading, run: reloadProjectList} = useRequest(getProductList);
  const [data, setData] = useState();
  const [loading, setLoading] = useState(false);
  const [current, setCurrent] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [total, setTotal] = useState();
  const fetchData = (name, current, pageSize) => {
    setLoading(true);
    searchProducts({name:name, current:current, pageSize: pageSize})
      .then(reps => {
        setData(reps.data);
        setTotal(reps.total);
        setLoading(false);
      });
  };

  /* 分页相关 */
  const pageChange = (page, pageSize) => {
    setCurrent(page);
    setPageSize(pageSize);
    fetchData('', page, pageSize);
  }

  // 页面首次请求项目列表数据初始化
  useEffect(() => {
    fetchData('', current, pageSize);
  }, []);


  • 对原有数据来要做变方法和变量替换,核心部分如下,其他根据IDE提示解决或者参考源代码;
<Table
  loading={loading}
  rowKey="id"
  pagination={false}
  columns={projectColumns}
  dataSource={data}
/>
<br/>
<Pagination
  total={total}
  current={current}
  pageSize={pageSize}
  onChange={pageChange}
  showSizeChanger={true}
  pageSizeOptions={[5,10,20,30,50]}
/>

代码开发调试效果如演示GIF
测试开发【Mock平台】09开发:项目管理(五)搜索、删除和Table优化,Mock平台,前端,javascript,开发语言

这里其实有个问题,就是当切换每页数量时候,当前选中页面还是之前的,如果条数从小条切到大,就有当前页数超出新的页数量总数情况,解决办法如果pageSize有变更,初始化默认页为第一页。

const pageChange = (page, size) => {
    // 如果改变了size 将其page设置为第一页
    let tmpPage = 1;
    if(size !== pageSize){
      tmpPage = 1
    } else {
      tmpPage = page;
    }
    setCurrent(tmpPage);
    setPageSize(size);
    fetchData('', tmpPage, size);
 }

1.2 Table自带分页

对于Table组件是有内置的分页功能,其实也就是Pagination组件,并对其做了封装得以使用更简单

https://ant.design/components/table-cn/#components-table-demo-ajax

测试开发【Mock平台】09开发:项目管理(五)搜索、删除和Table优化,Mock平台,前端,javascript,开发语言

有了上边1.1基础,改造起来就简单多了,只需将Pagination部分内容以JSON赋值方式赋值给Table中的pagination即可。

<Table
  loading={loading}
  rowKey="id"
  pagination={
    {
      total:total,
      current:current,
      pageSize:pageSize,
      onChange: pageChange,
      showSizeChanger:true,
      pageSizeOptions:[5,10,20,30,50]
    }
  }
  columns={projectColumns}
  dataSource={data}
/>

可以看到包括样式在内,自动展示了分页,并且尝试测试切换也均正常,不过我的例子中单独的变量定义的有点多,你们可以尝试参考官方Table远程加载数据例子再优化一版。
测试开发【Mock平台】09开发:项目管理(五)搜索、删除和Table优化,Mock平台,前端,javascript,开发语言

1.3 列表数据格式化

在表格数据展示中其中我们可以看到类型一栏显示还是数据库里的字段,所以这里说明下如何实现格式展示,方法和操作相似,使用 render 自定义请求一个方法,此方法根据类型判断返回相应文字和组件。

const formatType = (txtType) =>{
    if (txtType === 'public') {
      return <Tag>公共项目</Tag>
    } else if (txtType === 'private') {
      return <Tag>私有项目</Tag>
    } else {
      return <Tag>未知类型</Tag>
    }
  }

  // 表单列
  const projectColumns = [
    ...
    {dataIndex:"type",title:"类型",
      render: (text, _) => (formatType(text)),
    },
    ...
  ]

代码中实现的是将英文关键词转换成对应的中文进行显示,并用Tag标签包裹。
测试开发【Mock平台】09开发:项目管理(五)搜索、删除和Table优化,Mock平台,前端,javascript,开发语言

之后其他想做数据格式化展示,或多列合并一条,再或根据不同值展示不同样式等等,都可以使用此方法,当然后边有一种 ProTable 高级表格的时候,它提供多种类型数据展示提供了内置格式化,后续用到再进行详细说明。

2.搜索功能

在优化Table显示需求中替换带分页查询的接口时,我们预留的一个searchName 参数,对于多数据的展示如果能有个主要信息的搜索功能才比较完美,这里利用 Grid栅格Form行内表单 组件实现。

https://ant.design/components/grid-cn/
https://ant.design/components/form-cn/#components-form-demo-layout

Grid 用于布局,基于行(row)和列(col)来定义信息区块的外部框架,笔者因为对CSS不熟,不能熟练的用于DIV做一些样式布局,所以就常用栅格来控制行和列来达到想要的区域块布局效果。
**Form **行内是表单布局一种,一行的显示样式,常用于搜索、快捷编辑等场景。
参考两个组件官方API说明,最终我们要实现如下的页面效果:
测试开发【Mock平台】09开发:项目管理(五)搜索、删除和Table优化,Mock平台,前端,javascript,开发语言

这里由于之前表单的操作已经实战过Form的用法,所以就直接给出了参考代码,其中style是简单样式,实现右边6个栅格区域按钮靠右对齐。

 <Row>
   <Col span={18}>
     <Form layout="inline"
           onFinish={...todo实现提交代码...}
     >
       <Form.Item name="searchName" label="项目名称">
         <Input></Input>
        </Form.Item>
        <Form.Item>
           <Button htmlType="submit">搜索</Button>
        </Form.Item>
     </Form>
   </Col>
   <Col span={6}>
     <Button
      onClick={addAction}
      type="primary"
      style={{
             marginBottom: 16,
             marginRight: 20,
             float: "right"
            }}
      >
        项目添加
      </Button>
    </Col>
</Row>

最后补充下表单提交的实现代码

// 搜索
const onSearch = (values) => {
  fetchData(values.searchName, current, pageSize)
};

// return 内表单修改部分
<Form layout="inline"
  onFinish={onSearch}
>

输入一个关键点击搜索测试一下OK,但参考代码到这里会有交互缺陷,如果给定的关键词搜索的结果也是多页,那么我在切换页面或者页数量的时候,由于之前代码name都写死的空值,所以又会变成全量查询,这个问题的优化留个思考题吧,看看是你会怎么做?
测试开发【Mock平台】09开发:项目管理(五)搜索、删除和Table优化,Mock平台,前端,javascript,开发语言
ps:项目源代码中有我的优化答案可以进行参考

3.项目删除功能

实现完了编辑功能,操作列里还有一个删除操作,一般为了防止删除这种危险动作是误操作,将会用到上一篇中的确认对话框知识点,不过这里将用到官方例子里的 showPromiseConfirm即确定按钮触发会有等待,明确得到返回成功后关闭对话框。

3.1 删除接口

此接口没在之前的 Mock平台-05开发:项目管理(一)后端接口 准备好,需要现实现,MVC全部的代码如下,不再赘述Springboot API实现知识点,不会或者忘记的翻下系列第五篇回看下。这里需要特别强调下,这里删除是个软删除,所以要对数据库表增加一个字段 is_del (0-默认,1-删除)来做标记,实际删除就是更新此字段为删除状态。

MockProjectMapper.java

/**
* 删除项目,软删除标记is_del=1
* @param id
* @return 影响数量 更新成功默认1
*/
@Update({"UPDATE mock_project SET mp_state=1 WHERE mp_id=#{id}"})
Boolean removeProject(Integer id);

MockProjectService.java

RespResult removeMockProject(Integer id);

MockProjectServiceImpl.java

@Override
public RespResult removeMockProject(Integer id) {

  Boolean markResult = mockProjectMapper.removeProject(id);
  if (markResult){
    return RespResult.success();
  }
  return RespResult.failure(RespCode.DATA_REMOVE_ERROR);
}

MockProjectController.java

@PostMapping(value = "/project/remove")
public RespResult removeProject(@Param("id") Integer id){
  return mockProjectService.removeMockProject(id);
}

3.2 删除交互

对于前度删除功能交互的实现,先按照流程先定义服务请求接口

export async function removeProduct(id) {
  return request('/api/mock/project/remove?id='+id, {
    method: 'POST'
  });
}

动态生成确认对话框需要导入Modal组件里的子项 confirm 主要的三个属性和两个方法

  • title 对话显示的标题
  • icon 引用icon图标组件
  • content 详细的内容,支持ReactNode
  • onOk 点击确定按钮触发
  • onCancel 点击取消按钮触发,不做逻辑处理默认为关闭对话框
const { confirm } = Modal;
import { removeProduct } from "@/pages/Project/service";
....省略...

// 删除操作
const deleteConfirmWithPromise = (record) => {
  confirm({
    title: '删除确认?',
    icon: <ExclamationCircleOutlined />,
    content: `确定要删除【${record?.name}】吗?`,
      async onOk() {
        const result = await removeProduct(record.id);
        if(result.success){
          message.success('删除项目成功!');
          // 成功后刷新
          fetchData(sName, current, pageSize);
        } else{
          message.error('删除项目失败!');
        }
      },
       onCancel() {},
    });
  };

表格操作栏删除按钮添加deleteConfirmWithPromise并把所在行数据传过去。

{dataIndex:"option",title:"操作",
  render: (text, record) => (
  <Space>
    <a onClick={()=>editAction(record)}>编辑</a>
+    <a onClick={()=>deleteConfirmWithPromise(record)}>删除</a>
  </Space>
),},

按例重启前后端服务,进行删除取消/确认/删除成功页面刷新的用例测试。
测试开发【Mock平台】09开发:项目管理(五)搜索、删除和Table优化,Mock平台,前端,javascript,开发语言

花了大篇幅在比较简单需求的项目管理上,是为务牢基础为后边核心逻辑更轻松,另外学习是一个过程,尤其是基础知识薄弱的,一定不要是看会,而是动手实战,进而有自己的想法和移花接木的本领,最终从务实角度来讲能在实际工作中业务上应用,哪怕是务虚为了KPI、“钱途“也要做点什么。

最后预告系列分享开发实战部分终于要进入核心部分的实现,比如分类Tree,接口管理,Mock拦截等实战内容,欢迎长期关注哦!文章来源地址https://www.toymoban.com/news/detail-692773.html

到了这里,关于测试开发【Mock平台】09开发:项目管理(五)搜索、删除和Table优化的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 智慧工地项目管理平台源码 项目工程云平台源码 劳务管理、数据预警、视频实时监控、重大危险源和绿色文明施工

    通过运用物联网、大数据、云计算、BIM 等技术,搭建由劳务管理、质量安全数据预警、施工现场视频实时监控、重大危险源和绿色文明施工监控等板块构成的模块化、一站式的信息化管理平台。平台可实现施工现场数据采集、数据综合统计及分析、手机App 应用等,现场数据

    2024年02月11日
    浏览(51)
  • 什么是研发项目管理软件?生命奇点 PowerProject 项目管理平台正式启动,打造大数据领域新标杆

    近日,生命奇点(北京)科技有限公司(以下简称“生命奇点”)与北京奥博思软件公司达成合作,奥博思软件将基于 PowerProject 项目管理系统助力生命奇点实现研发项目的全生命周期管理,提效企业管理效率! 生命奇点目前正处于企业发展的转型期,随着业务的发展与规模

    2024年02月20日
    浏览(80)
  • 项目管理平台-01-jira 入门介绍 缺陷跟踪管理系统,为针对缺陷管理、任务追踪和项目管理的商业性应用软件

    Devops-01-devops 是什么? Devops-02-Jpom 简而轻的低侵入式在线构建、自动部署、日常运维、项目监控软件 代码质量管理 SonarQube-01-入门介绍 项目管理平台-01-jira 入门介绍 缺陷跟踪管理系统,为针对缺陷管理、任务追踪和项目管理的商业性应用软件 项目管理平台-01-Phabricator 入门介

    2024年03月21日
    浏览(51)
  • AJAX——黑马头条-数据管理平台项目

    功能: 登录和权限判断 查看文章内容列表(筛选,分页) 编辑文章(数据回显) 删除文章 发布文章(图片上传,富文本编辑器) 技术: 基于Bootstrap搭建网站标签和样式 集成wangEditor插件实现富文本编辑器 使用原生JS完成增删改查等业务 基于axios与黑马头条线上接口交互

    2024年04月27日
    浏览(31)
  • 基于java的项目管理平台系统设计与实现

    基于java的项目管理平台系统设计与实现 研究背景: 随着企业业务的不断扩张和复杂化,项目管理工作成为了企业运营过程中不可或缺的一部分。传统的项目管理方式通常依赖于手工管理和纸质文档,存在着信息传递不及时、项目管理效率低下、资源利用率不高等问题。为了

    2024年02月02日
    浏览(39)
  • 测试角色在项目各阶段的项目管理tips

    一、前言 项目管理是一个繁杂的过程,每个阶段需要涉及到不同人员、资源的协调配合。每个角色都有自己的定位和任务,为了紧密配合项目经理或无分配项目经理运行项目的场景下确保项目成员共同达成项目目标,不同的角色掌握相应的项目管理意识就尤为重要。 那么,

    2024年02月13日
    浏览(37)
  • YApi-高效、易用、功能强大的可视化接口管理平台——(三)YApi 项目管理

    点击右上角的 + 新建项目,进入新建项目页面: 完善项目信息,指定项目所属分组,点击【+创建项目】: 注:权限公开私有可以在项目创建之后进行设置。 查看创建好的项目: 在项目页点击上方的 设置 Tab 进入项目设置面板,这个面板涵盖了项目的所有配置: 在【项目配

    2024年02月13日
    浏览(42)
  • 图书管理系统项目测试

    添加依赖如下: 在被测试类中使用快捷键 Ctrl+Shift+T,选择要测试的方法,编写测试类,完成单元测试。 (1)登录: 1.输入正确的账号密码,是否正确登录并跳转至主页面 2.账号为空,输入密码,是否提示输入密码 3.输入账号,密码为空,是否提示输入用户名 4.账号密码均为

    2024年02月11日
    浏览(42)
  • IT项目管理之软件测试

    1. 定义 软件测试是使用人工或者自动的手段来运行或者测定某个软件系统的过程,其目的在于检验它是否满足规定的需求或弄清预期结果与实际结果之间的差别。 在软件投入使用前,要经过一系列的严格测试,才能保证交付质量。 2. QC QA QM 对于软件质量而言,QC、QA、QM是三

    2024年02月08日
    浏览(36)
  • 软件测试项目管理系统(STM)

    1.产品介绍 凯云软件测试项目管理系统(Software Testing Management System,简称:STM)是为企业软件测试部门以及第三方软件测试机构打造的统一工作平台。该系统提供规范的测试流程,支持被测件接收、测试需求分析、测试用例设计、测试执行记录、测试问题处理、测试总结等

    2024年02月11日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包