1. antd

1.1 进入ant.design官网做初步了解

1.2 安装antd

1.3 动手实际操作

2. ant design pro

2.1 antd pro介绍

2.2 antd pro安装

2.3 andt pro 项目目录介绍

2.4 函数式组件的扩展

2.4.1 函数式组件的state, 用React.useState()

2.4.2 函数式组件的 props

2.4.3 函数式组件的ref，用React.useRef

2.4.4 函数式组件的componentDidMount(), 用React.useEffect替代

2.4.5 函数组件的componentWillUnmount()

1. antd

1.1 进入ant.design官网做初步了解

（1）什么是antd：

antd是基于Ant Design设计体系的React UI组件库，主要用于研发企业级中后台产品。

React：用于动态构建用户界面的JS库，只关注于视图。由facebook开源。

（2）一些常用组件：

ProComponents,

ProTable(高级，属性多，样式复杂，直接使用，提升了开发效率) 。

（3）官网：Ant Design of React - Ant Design

1.2 安装antd

【说在前面】

具体的操作命令，可能会随着官网的更新而更新，一切以官网的为准。

步骤：

（1）VScode里面创建一个antd项目：create-react-app antd

（2）cd antd

（3）npm install -g yarn

（4）yarn add antd

（5）yarn

（6）yarn start

说明：其实，这里的启动的页面，类似之前React其他案例。只是这里安装了antd组件库之后，在后面就可以直接使用antd的很多组件, 比如<Button > </Button>。

1.3 动手实际操作

试着在App.js中直接引用antd组件库的一些组件，具体组件的效果，代码，每个组件的API属性等，都可以在https://ant.design/ 页面上查找

2. ant design pro

2.1 antd pro介绍

（1）antd首页下拉，找到antd pro

（2）官网详细介绍：ProComponents

2.2 antd pro安装

（1）yarn create umi auto-platform (这个名称自己定义)

（2）依次选：Ant Design Pro， Pro V4, TypeScript, simple, antd@4

（3）cd auto-platform

（4）yarn

（5）yarn start

补充：

（1）要先安装git然后重启，否则(2)失败

（2）切换yarn镜像

yarn config get registry 查看当前源

yarn config set registry https://registry.npm.taobao.org 切换为淘宝源

yarn config set registry https://registry.yarnpkg.com 切换为自带的

2.3 andt pro 项目目录介绍

（1）上述安装启动后，在VScode中生成一个项目目录，目录下包含很多文件。

（2）src/pages目录：下存放很多代码，重要！！！我们编写的页面代码，也放在该目录下。

（3）mock目录：可以做模拟接口返回，针对前后端分离的情况, package.json下有Mock信息。

listTableList.ts

notices.ts

route.ts

user.ts

（4）config目录

config.dev.ts

config.ts

defaultSettings.ts

proxy.ts 后续前后端联调的时候，要配置后端的ip和端口等信息

routes.ts 路由中的信息，对应到src下的具体每个页面的信息！！！非常重要！！！

（5）怎么加一个页面？

首先，在config/routes.ts下加信息：

然后，要去加一个页面，怎么加？

去src/page/下加一个目录CreateCase, 然后new一个index.tsx, 接下来编程实现创建一个类组件或者功能组件。

（6）补充：

1）BEJSON网页，可以格式化校验页面的response结果：JSON在线校验格式化工具

2）实际开发时，更多的是在封装好的组件上选择使用哪些属性，选好，拼装，然后往里面写变化的参数等。

2.4 函数式组件的扩展

（比如如何使用类似state...） hooks

2.4.1 函数式组件的state, 用React.useState()

（1）返回的是一个数组，数组中有2个元素。

第一个是值，是state的key, 比如count.

第二个是函数，用来修改第一个值, 比如setCount (这俩名字都可以自己起)

（2）括号里可以设默认值。

（3）示例代码。

多个变量要定义为多个const [count, setCount] = React.useState(0)。

补：类式组件中state可以写成JSON的形式（键值对）

函数式组件开头可以写成 const Welcome: React.FC = () => {}. 官方写法，规范使用

function Welcome(){const [count, setCount] = React.useState(0)  //括号里可以设默认值0const [name, setName] = React.useState("Sheryl")  //初始化nameconst add = () => {setCount(count + 1)}const changeName = () => {setName("Lily")}return (<div><h2> 当前数值为{count}, 名字为{name}</h2><button onClick={add}>+1</button><button onClick={changeName}>change name</button></div>);
}

2.4.2 函数式组件的 props

其实就是函数定义时传的参数，形参

const Welcome: React.FC = (a) => { //a就是参数，从外部传进该函数组件类似props.......
}

2.4.3 函数式组件的ref，用React.useRef

function Welcome(){myRef = React.useRef()   //声明 refshow = () => {alert(myRef.current.value)   //通过ref获取它所对应的标签的内容}return (<div><input type="text" ref={myRef} />  //用ref表示该标签<button onClick={show}>click</button></div>);
}

补充，可以程序文件的开头引入 import React， {useState, useRef} from 'react';

下面再引用的时候，就可以直接写 useState, useRef......

2.4.4 函数式组件的componentDidMount(), 用React.useEffect替代

（1）useEffect()的作用：

第一个参数是回调函数，指明对哪些方法做监听。并不完全等同于compoenentDidMount()。

即：页面上state发生了变更的话，会去调这个回调函数。

（2）参数说明：

参数1：回调函数。

参数2：一个数组。通过设置第二个参数，来控制要监听哪些值，当这些值发生变化时，才调用这个回调函数。当第二个参数设置为空数组时，不管页面发生了什么，都不调用回调函数（只在刷新或第一次渲染时调用）。

（3）示例代码：

React.useEffect(() => {setInterval(()=>{console.log(123)}, 1000)
}, [ ])

//注意这里的setCount的参数，要写成箭头函数，而不是setCount(count+1)  ，为什么呢？
React.useEffect(() => {setInterval(()=>{setCount(count => count+1)}, 1000)
}, [ ])

2.4.5 函数组件的componentWillUnmount()

（1）卸载节点：

 //卸载时需要用根节点的ID
const unmount = () => {   ReactDOM.unmountComponentAtNode(document.getElementById('root'))
}

（2）示例代码：

React.useEffect(() => {let timer = setInterval(()=>{setCount(count => count+1)}, 1000)    //声明定时器return () => {clearInterval(timer) //删除定时器}
}, [ ])

说明：

1）删除组件时，注意别忘了先清除定时器，否则报错，组件已经卸载了，但是里面的定时器还在更新, 导致内存泄露。

2）这个清空是在ComponentWillUnmount阶段起作用？

答：

接口自动化平台（一）：antd + antd pro 安装和简介相关推荐

搭建or部署接口自动化平台从零到一的过程
接口自动化部署or搭建目录前言搭建前端环境后端环境部署部署环境前端部署后端部署第一种方式后端部署第二种方式后端部署前言首先感谢cheeath大佬的支持和帮助,自动化平台成功在服 ...
开源接口自动化平台sosotest的使用心得
开始接触接口测试的时候,使用的jmeter,当时还是一个同事给分享了jmeter的基本操作功能. 后来研究接口自动化,想要利用jmeter来做这个,逐渐用上了数据库连接,前置,后置等略微高级一些的功能 ...
第四：SpringBoot生成Api管理mysql内保存的测试数据（接口自动化平台扩展）
本篇文章讲解的是通过api去管理mysql内存储的测试数据,使用的是SpringBoot框架,同样是使用java语句. 关于SpringBoot的环境搭建,在之前的文章内讲解过,本篇不做过多叙述,有疑 ...
01-Httprunner接口自动化第一篇：应用环境与安装
一.应用环境需要安装python:httprunner3,要求python>=3.6,<4.0 需要安装pip 安装方式可参考如下 3.1 https://ke.qq.com/itdoc ...
apache ant 安装_Jmeter+ Ant+jenkins 接口自动化框架实现
一.文件配置 •编写jmeter脚本 •上传jmx脚本到jmeter目录下,新建一个Loadtest目录, •在Tomcat webapp 文件夹下面新建报告输出文件夹testReport: •将jm ...
测试自动化平台 | 测试开发工程师的进阶之路
https://mp.weixin.qq.com/s/WU5h8FW6BT5YZtlsSuCIcw 「摘要」随着近几年国内IT行业高速发展,对测试工程师的要求也越来越高,其作用也越来越重要,但很多测试 ...
Python接口自动化-requests模块之post请求
------·今天距2021年262天·------ 这是ITester软件测试小栈第111次推文在上一篇Python接口自动化测试系列文章:Python接口自动化-requests模块之get请求 ...
python 接口自动化unittest+DingtalkChatbot钉钉机器人消息封装
python 接口自动化unittest+DingtalkChatbot机器人消息封装安装DingtalkChatbot: pip install DingtalkChatbot 钉钉配置机器人: ...
理想中的接口自动化项目
如何评价接口自动化项目我理想中的接口自动化项目,是有一套脚本,能够100%覆盖核心业务场景,能够回归线上频繁出现的问题,能够支持手工无法验证的场景,能够抛出偶现问题,能够包含容易遗漏的边界场景.异常 ...

接口自动化平台（一）：antd + antd pro 安装和简介

1. antd

1.1 进入ant.design官网做初步了解

1.2 安装antd

1.3 动手实际操作

2. ant design pro

2.1 antd pro介绍

2.2 antd pro安装

2.3 andt pro 项目目录介绍

2.4 函数式组件的扩展

2.4.1 函数式组件的state, 用React.useState()

2.4.2 函数式组件的 props

2.4.3 函数式组件的ref，用React.useRef

2.4.4 函数式组件的componentDidMount(), 用React.useEffect替代

2.4.5 函数组件的componentWillUnmount()

接口自动化平台（一）：antd + antd pro 安装和简介相关推荐

最新文章

热门文章