写点什么

测试开发【Mock 平台】06 开发:项目管理(二)Atnd 页面搭建经验实战与学习线路梳理

  • 2022 年 6 月 17 日
  • 本文字数:4900 字

    阅读完需:约 16 分钟

测试开发【Mock平台】06开发:项目管理(二)Atnd页面搭建经验实战与学习线路梳理

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


经过一段时间自我磨(折)练(磨),终于算是能较为愉快的上手了 Antd Pro 的运用,以及掌握 React 基本代码开发能力,本篇就结合项目将自己总结的一套循序渐进的页面搭建经验总结下,希望你少走弯路,把更多的精力用在正确的事上。

Antd 页面搭建经验步骤

如果你跟我一样对使用 React 和 Antd 不熟,甚至第一次使用,可以参考笔者以下的经验,这个技巧也在小推团队内部得到有效分享和实践。


步骤 1: 确定交互界面后,先命名创建规范目录和空白页,并配置路由确保页面展示正常。<br />按照官方的建议规范创建必要的文件,并在页面index.jsx中添加最基本的可运行代码,最后如果页面是通过菜单显示转跳,在routes.js 配置菜单,如果保留了多语言还需要提前在语言文件夹中menu.js添加好命名变量。


Tips:在 Mock 平台源代码中大奇已经抽出一个模版页面,前期可作为 COPY 源。


步骤 2: 草稿画出布局,并用相关布局组件占位,确保占位页面占比展示符合预期。

在上一步编译运行没有问题后,不着急编写代码,先在心中或者随手一张纸上,草稿一下将要实现的需求页面的布局,以及可能用到的组件。比如下边以后边 Mock 平台将要实现的接口管理页面需求花了张草图。


Tips:在 CPM 敏捷项目管理中有关工作坊有个说明,“最好利用白板,张贴白纸等低技术含量,但搞互动工具来展示想法”,这里同样适用,即不要非得用什么原型或流程图软件去画出来,初期的设计往往越简单越高效。


步骤 3: 匹配各区域的基础组件,引用并编码不带任何属性的空组件,确保页面无报错并有框架展示。

在布局组件下,填充需要的组件如<Table/>表格,其中不带任何属性,通过页面编译运行查看是否正常,或者通过浏览器开发者模式下 Console 查看是否有错误,如果某些组件没有骨架展示,可以适当增加包含文字展示或者基本属性(title)等,来验证将要使用的组件正常。



步骤 4: 按依赖顺序或者核心组件先实现其 80%左右属性填充和依赖函数编码工作。

划分主次开发的组件,依次进行正式的样式配置和数据交互,比如要实现 Table 的数据展示,先进行 request 数据请求赋予定义函数式变量,然后绑定 dataSource, 这里可以 Ant 对应组件案例,或直接参考其 API。



步骤 5: 依次开发其他组件,配置必要的变量定义,数据请求等,进行联调交互测试等。

在调试好主或者必要部分的开发后,依次开发其他组件,其中数据的定义部分个人建议,用注解做好用途解释和作用域,还要重点关注组件间的数据依赖和传递性,并时常关注 Console 里是否有错误日志,如果尽量即使解决掉。



步骤 6: 组件抽离,简化和优化繁冗页面代码。

页面组件多,交互也复杂,建议在实现基本功能后尽快做优化提取,将其抽离出独立的组件在其对应页引用,此步骤在熟悉 Antd React 开发可放在步骤三后直接先开发自定义组件。如果此自定义组件在其他页面也类似用到,最好变成一个公共的组件。


Tips:在 React 编程中建议遵循其设计思想https://zh-hans.reactjs.org/docs/thinking-in-react.html


最后提炼下我的经验法则


法则一:从页面 0 代码逐步编码,不要以为图省事拷贝场景组件或参考页面全部代码,会让不熟悉前端开发的你不知所措,并且错误改到怀疑人生。耐心一点,一步步来直到你驾驭它。


法则二:多看官方文档,并不要忽略通用部分和建议内容,有问题多利用官方和 Google 搜索,想提高效率多关注 Antd 的生态组件比如 procomponents。多思考多实践,举一反三,培养出属于自己开发思维和体系。


以上是笔者摸着石头过河总结的经验,先亮了出来,没有感觉不要紧,具体的效果还依赖于实践,后边在项目中也会反复提及和应用。

实战项目管理数据展示

需求实战先从一个简单但很重要基础内容入手,接口项目的管理首先需要进行展示,通常做法就是查询列表数据,然后通过表格形式进行绑定展示,对应 Antd Design 的组件就是 <Table>[1] 表格,先看下基础样式。



Table 组件

场景是当有大量结构化的数据需要展现,需要对数据进行排序、搜索、分页、自定义操作等复杂行为时使用,再看下 Table 的 API 说明(全部请移步官方),这里如 columnsdataSource等构成组件的快速应用。


和使用 Element UI 组件很类似,引用组件然后绑定数据源和相关属性,这里说点和之前系列 Vue 使用上的不同点,Antd 相关组件是按需在实现页面进行绑定,React 框架中数据处理也是按需调用,而不是响应式的。


// 引入组件依赖import { Table, } from 'antd';
const Project = () => { return ( <> {/*使用表格组件*/} <Table></Table> </> )}
复制代码


往下就是要掌握表,列描述数据对象Column的配置,有两种形式:

1.数据对象

简单来讲就是额外定义一个数组对象变量,内部 JSONObject 包含最基本的 dataIndex 列数据在数据项中对应的路径,即对应接口返回 JSON 列表对象的 key,当尤其数据时候就会自动匹配,还有 title 列头显示文字,以及render生成复杂数据的渲染函数,参数分别为当前行的值,当前行数据,行索引。


以上篇的全量项目列表接口返回距离就可以有如下使用配置:

const projectColumns = [  {dataIndex:"id",title:"编号",},  {dataIndex:"name",title:"名称",},  {dataIndex:"option",title:"操作",    render: (text, record) => (      <>        <a>编辑</a>        <a>删除</a>      </>    ),  },]
const Project = () => { return ( <> {/*使用表格组件*/} <Table columns={projectColumns}></Table></>)}
复制代码

2.使用 JSX 风格

JSX 风格的 API 需要 Antd 版本大于 2.5.0,是一个描述 columns 的语法糖,使用 Column 和 ColumnGroup 子组件展示,不过其中属性作用是和数据对象方式一样的。

const { Column } = Table;
const Project = () => { return ( <> {/*JSX风格*/} <Table> <Column title="编号" dataIndex="id" key="id" /> <Column title="名称" dataIndex="name" key="name" /> <Column title="操作" dataIndex="option" key="option" render={(text, record) => [ <a>编辑</a>, <a>删除</a> ]}/>/> </Table> </> )}
复制代码


以上两种都能实现表格列表的定义,至于使用怎么使用看个人习惯,如果以前写 HTML 或者 Vue 第二种比较习惯,但就个人而言是比较推荐第一种,因为后边在升级高级表组件,使用其他组件或是代码风格都更统一。


关于列 Column 这块还有多种设置属性,能够方便满足表格一些常见交互需求,比如 ellipsis 超长自动省略、width 列宽、sorter 排序等等,截图只列出了部分,实际按需使用。<br />



但无论哪种方式,都可以轻松地实现一个最基本的表格展示配置,这里先简单绑定一条 Mock 数据看下效果,接口请求和数据绑定方法将在下边具体展开。


数据请求和绑定

基本版本的 Table 数据绑定是通过dataSource直接绑定,格式就是数组 JSON,不过先要讲解下如何远程数据请求和数据存储,在之前 Antd pro 目录结构中演示过,对于后端的接口一般在其server.js定义异步的 JavaScript 方法,使用网络请求是request[2] 这里分别举 GET 和 POST 两个例子。

import { request } from 'umi';
/** Get方法请求-带参 */export async function getApi(getParams) { return request('/api/get', { method: 'GET', params: getParams });}
/** POST方法请求-带参 */export async function postApi(reqBody) { return request('/api/post', { method: 'POST', data: reqBody });}
复制代码


在具体的页面实现通过方法调用自己处理整个返回,或使用官方推荐 useRequest[3]的 Hook 插件做规范化处理,两种方式的例子代码:

import React, { useState, useRef, useEffect } from "react";import { useRequest } from 'umi';
// 导入sever接口请求方法import { getProductList } from "@/pages/Project/service";

...省略...
const Project = () => {
// 通过页面初始化调用getProductList接口方法,然后手动判断是否成功并赋于定义的变量 const [projectList, setProjectList] = useState([]); useEffect(() => { getProductList().then(resp=>{ if (resp.success) { console.log('接口数据响应成功'); setProjectList(resp.data); } });
},[])
// 使用useRequest自动请求 const {data:useProjectList, error, loading, run: reloadProjectList} = useRequest(getProductList);
return ( <> <Table rowKey="id" columns={projectColumns} {/*两种数据返回后的绑定*/} // dataSource={projectList} dataSource={useProjectList} > </Table> </> )}
复制代码


这里重点说下 useRequest,它默认页面加载的时候就触发的,所以个人开发过程中体验来讲对于一些上来就初始化数据,少量定义 State 变量的时候很是比较方便的,其他好处和特殊场景如想手动大家还是参考官方,后边其他页面实现也会逐步用到的。<br />



项目展示功能

基于 API、基础示例和总结 Antd 搭建经验,我们便可实现 Mock 平台的项目展示功能了,首先别忘了页面创建和路由配置



然后只需要做的是丰富列表字段,选择一种列编码风格,以及数据请求方案,完整如下参考代码如下:

import React, { useState, useRef, useEffect } from "react";import { useRequest } from 'umi';
// 引入组件依赖import { Space, Table } from "antd";// 导入sever接口请求方法import { getProductList } from "@/pages/Project/service";
const projectColumns = [ {dataIndex:"id",title:"编号",}, {dataIndex:"name",title:"名称",}, {dataIndex:"desc",title:"描述",}, {dataIndex:"type",title:"类型",}, {dataIndex:"owner",title:"负责人",}, {dataIndex:"updateDate",title:"更新时间",}, {dataIndex:"option",title:"操作", render: (text, record) => ( <Space> <a>编辑</a> <a>删除</a> </Space> ), },]
const Project = () => {
// 获取全部项目数据 const {data:useProjectList, error, loading, run: reloadProjectList} = useRequest(getProductList);
// 返回渲染的组件 return ( <> {/*使用表格组件*/} <Table loading={loading} rowKey="id" pagination={false} columns={projectColumns} // dataSource={projectList} dataSource={useProjectList} /> </> )}
export default Project;
复制代码


最后上个动态图感受下一个页面从无到有变化过程,虽然很简单的页面,但它体现了一个页面诞生的较为完整的生命周期。



<br />以上是本篇分享的所有内容,万事开头难,接下来会继续实现项目管理这个需求,也会逐步讲解用到的技术和方法论,如果有任何想法和意见欢迎来探讨交流,如果你觉得分享有干货、有帮助到你,记得多多点赞或分享支持,下边按照惯例给出标注的参考链接,同时也给出我总结的一个想先扩展学习 React 的线路建议,希望对有浓厚学习欲望的同学有参考价值。


参考资料

[1] https://ant.design/components/table-cn/

[2] https://pro.ant.design/zh-CN/docs/request

[3] https://ahooks.js.org/zh-CN/hooks/use-request/index

Antd 开发自我学习线路

自上而下递进:

  • 官方 Antd pro 开始教程 - 实操

  • Antd Desgin 组件库 - 概览

  • React 官方扩展学习

  • 概念 快速了解

  • hook 重点学习

  • umi 和 ahook 学习

  • 从 0-1 搭建一个简单的增删改查功能页面

  • procomponents 高级组件切换

  • 尝试将复杂页面抽离成分离组件

  • 按需回顾 Antd 生态项目和建议规范

  • 扩展 5 内容实践更多组件及其多种用法

  • 改造一个公司的项目,或者实战一个练手项目(比如此“Mock 平台”系列)


关于自我学习,最后还要多啰嗦一句,就是要有培养持续学习的动力,遇到问题优先自己解决的能力,多沟通多交流并要有谦虚的态度。

发布于: 2022 年 06 月 17 日阅读数: 39
用户头像

自信人生两百年,会当击水三千里。 2018.02.15 加入

分享一些系列测试平台开发教程,也记录一些自己研究的技术,遇到的问题,总之想分享一些干货内容,愿给这个行业贡献微不足道的力量,不断突破不断成长。

评论

发布
暂无评论
测试开发【Mock平台】06开发:项目管理(二)Atnd页面搭建经验实战与学习线路梳理_测试平台开发教程_大奇测试开发_InfoQ写作社区