Postman 但是 React
0x00要求
创建一个前后端分离项目，并使用Postman测试后端API
0x01 分析
开始之前
Postman的大名早有所耳闻，以前没有使用它只因为觉得它的功能有些许鸡肋（请求响应而已）
所以我决定写一个Postman的子集（t4t-api），并用它来做一些简单的接口测试。
创建一个前后端项目，为了快速创建项目，前端使用React框架，后端使用SpringBoot。
Postman的界面主要分为三个区域：
（1）请求发起区域
（2）结果显示区域
（3）历史记录区域
下面的前端项目也采用这种功能布局。
0x02 前端
1.创建一个React项目
2.经过一晚上的努力，看看效果
0x03 后端项目
这里的后端项目采用我以前写好的几个项目：
1.文件上传下载项目（还没写完）
页面大概长这样
用手机扫描二维码就可以打开网页，然后点击“Browse”就可以选择要上传的文件，然后点击“UPLOAD”上传。
要测的主要就是这两个接口：
GET请求返回二维码
GET请求返回html
2.SpringMVC 学习项目
前面测了GET,这里测试POST：
0x04 使用Postman测试API
1.测试返回二维码（流）
结果不但获取到了还自动解析成图片。
2.测试返回HTML
为什么图片没有加载出来？
因为图片使用fetch api（类似ajax）获取的，显然这段JavaScript没有执行。
3.获取JSON
为啥age：null？因为我们提交的JSON里面就没有age，因此数据库里也没有。
0x05 使用t4t-api测试
1.测试返回二维码（流）
是滴！我也实现了解析流。
流->Blob->img
2.测试返回HTML
看起来很普通，其实我笨拙地实现了HTML代码格式化和代码高亮。
个人认为我的JSON格式化比Postman的好看。
0x06 使用Curl测试API
为啥是-128？ 因为age是用byte存储的
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 QUANWEI！
相关推荐
2023-02-09
React + Websocket 实现网络聊天室
需求 注册 登陆 群聊 私聊 发送文件 设计技术栈使用 Oracle 数据库存储数据 使用 SpringBoot 搭建 Websocket 服务器 使用 Websocket 协议传输数据 使用 React.js 编写前端页面 数据对象用户登陆信息 LoginInfo{ id :number(10), password :varchar(20), } 用户信息LoginInfo{ name :varchar(20), avatar: email : phone: …} 消息 Message{ from: to: data: dataType: date:} DataType{ TEXT, IMAGE, VIDEO,} 前端实现将 UI 拆解为组件层级结构 使用 React 构建一个静态版本 后端实现测试使用 Postman 进行接口测试 部署使用 Docker 部署服务到腾讯云 聊天静态文件用 Nginx
2023-06-04
React 中的 hook
HookReact中的Hook是React 16.8版本引入的新特性，它可以让函数组件拥有类组件的一些特性，例如状态管理和生命周期方法。使用Hook可以使代码更加简洁、易于理解和维护。 React中常用的Hook包括： useState：用于在函数组件中添加状态管理功能。 useEffect：用于在函数组件中添加生命周期方法。 useContext：用于在函数组件中使用上下文。 useReducer：用于在函数组件中使用Reducer进行状态管理。 useCallback：用于在函数组件中缓存回调函数，避免不必要的重新渲染。 useMemo：用于在函数组件中缓存计算结果，避免不必要的重复计算。 useRef：用于在函数组件中创建可变的引用对象。 使用Hook可以使函数组件具有更多的能力，同时也可以提高代码的可读性和可维护性。 useStateuseState是React中最基础的Hook之一，它可以让函数组件拥有状态管理的能力。使用useState需要先导入： 12import React, { useState } from...
2023-06-23
GraphQL Apollo
Step 1: 创建项目1234mkdir graphql-examplecd graphql-examplenpm init --yes && npm pkg set type="module" Step 2: 安装依赖12npm install @apollo/index graphql 使用JS 1touch index.js 修改 package.json 添加启动 12345678{ // ...etc. "type": "module", "scripts": { "start": "node index.js" } // other dependencies} Step 3: 定义 GraphQL schemaindex.js 12345678910111213141516171819202122import { ApolloServer }...
2023-06-21
GraphQL
GraphQL一种用于 API 的查询语言GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间推移而演进，还能用于构建强大的开发者工具。 描述你的数据 12345type Project { name: String tagline: String contributors: [User] } 请求你所要的数据 12345{ project(name: "GraphQL") { tagline }} 得到可预测的结果 12345{ "project": { "tagline": "A query language for APIs" }} 特点请求你所要的数据不多不少 向你的 API...
2023-06-11
Webscoket 核心
Webscoket 核心是什么一种服务端/浏览器端双向推送技术 为什么因为 HTTP 协议有一个缺陷：通信只能由客户端发起 怎么用构造函数（返回一个 WebSocket 对象） 1WebSocket(url[, protocols]) Constant Value WebSocket.CONNECTING 0 WebSocket.OPEN 1 WebSocket.CLOSING 2 WebSocket.CLOSED 3 属性 解释 binaryType 使用二进制的数据类型连接。 bufferedAmount 只读 未发送至服务器的字节数。 extensions 只读 服务器选择的扩展。 onclose 用于指定连接关闭后的回调函数。 onerror 用于指定连接失败后的回调函数。 onmessage 用于指定当从服务器接受到信息时的回调函数。 onopen 用于指定连接成功后的回调函数。 protocol 只读 服务器选择的下属协议。 readyState 只读...