推荐|【P59】JMeter 用表格查看结果（View Results in Table）

【P59】JMeter 用表格查看结果（View Results in Table）

23-11-18 10:20

4237

9194

blog.csdn.net

文章目录

一、用表格查看结果（View Results in Table）参数说明

可以将取样器请求以表格的方式分析展示

使用场景：一般在调试测试计划期间用来查看取样器结果，负载期间使用会消耗大量资源，慎用

使用频率：一般

右键 >>> 添加 >>> 监听器 >>> 用表格查看结果（View Results in Table）

在这里插入图片描述

所有数据写入一个文件（Write results to file / Read from file）

（1）、文件名（Filename）：可以通过浏览，选择一个文件，这样jmeter在执行的过程中，会将所有的信息输出到文件，也支持打开一个结果文件进行浏览

（2）、显示日志内容（Log/Display Only）：

仅日志错误：表示只输入报错的日志信息
仅成功日志（Successes）：表示只输出正常响应的日志信息
不勾选：表示输出所有的信息

（3）、配置（Configuer）：配置需要输出的内容（建议默认。后续如果加载进此保存的文件可能会不知道啥格式）

参数

Sample #：每个请求的序号
Start Time：每个请求开始时间。（时：分：秒.毫秒）
Thread Name：每个线程的名称（线程序号-第N次循环次数）
Label：每个请求的自定义名称（无修改时默认显示请求类型，如Http，FTP等请求）
Sample Time(ms)：每个请求的响应时间。（单位：毫秒）
Status：请求状态，如果为勾则表示成功，如果为叉表示失败
Bytes：响应的字节数，请求的字节数
Sent Bytes：发送的字节数
Latency：延迟的时间，等待时长。（单位：毫秒）
Connect Time(ms)：连接服务器的时间。（单位：毫秒）

（1）、样本数目：所有请求个数，样本数目 = 线程数（请求用户数）* 请求次数。（单位：个）

（2）、最新样本：最新样本响应时间，表示服务器响应最后一个请求的时间。（单位：毫秒）

（3）、平均：所有请求的平均响应时间。（单位：毫秒）

（4）、偏离：服务器响应时间变化、离散程度测量值的大小，或者，换句话说，就是数据的分布

二、准备工作

慕慕生鲜： http://111.231.103.117/#/login

进入网页后，登录，页面提供了账户和密码
搜索框输入“虾”
右键检查或按F12，打开调试工具，点击搜索

在这里插入图片描述

三、测试计划设计

（1）、测试计划右键 <<< 添加 <<< 配置元件 <<< 用户定义的变量

在这里插入图片描述

添加一个参数：ip，值为 111.231.103.117

（2）、测试计划右键 <<< 添加 <<< 测试片段 <<< 测试片段

在这里插入图片描述

名称：HTTP测试片段

（3）、在网页中，调试中点击网络，找到请求，点击负载，复制参数值

在这里插入图片描述

（4）、HTTP测试片段右键 <<< 添加 <<< 取样器 <<< HTTP请求

在这里插入图片描述

协议：GET
路径：/product/list
点击从剪切板添加，会自动添加；也可手动添加

（5）、HTTP请求右键 <<< 添加 <<< 配置元件 <<< HTTP请求默认值

在这里插入图片描述

协议：http
服务器名称或IP：${ip}

使用参数 ${ip} 获取

端口：8083
内容编码：utf-8

（6）、在网页中，调试中点击网络，找到请求，点击标头找到请求标头，复制所有请求标头

在这里插入图片描述

（7）、HTTP请求右键 <<< 添加 <<< 配置元件 <<< HTTP信息头管理器

在这里插入图片描述

点击从剪切板添加，会将复制的值自动添加进去

如图，可以将地址使用变量 ${ip} 进行获取

（8）、测试计划右键 <<< 添加 <<< 线程（用户）<<< 线程组

在这里插入图片描述

线程数：80
Ramp-Up时间（秒）：80
勾选永远
其它参数默认即可

（9）、线程组右键 <<< 添加 <<< 逻辑控制器 <<< 模块控制器

在这里插入图片描述

点击选择 “HTTP测试片段”

（10）、测试计划右键 <<< 添加 <<< 监听器 <<< 用表格查看结果

（11）、点击启动，过几秒后，点击停止，点击用表格查看结果，进行查看

在这里插入图片描述

用表格查看结果：使用不多；在调试计划时使用，参数不全，比如输入输出；在性能测试时，有性能问题；平时做轻量级图形界面压测时用

id="article_content" class="article_content clearfix"> id="content_views" class="htmledit_views">

极致的灵活度满足工程美学：用Vue Flow绘制一个完美流程图

极致的灵活度满足工程美学：用Vue Flow绘制一个完美流程图

Vue Flow的入门门槛要高不少，毕竟找不到中文文档，反正我是不太喜欢看纯英文的文档的。不过没关系，看完这篇还用不好Vue Flow请来找我麻烦。

一、环境要求

Node.js v20 或更高版本

Vue 3.3 或更高版本

前者，没有装nvm建议装一个nvm，noder没有nvm是行不通的。后者意味着Vue Flow不支持Vue2，据说有些辅助组件可以让部分功能在Vue中使用。

Tips:

如果把我的源码抄过去都跑不动，要么是依赖没有装好，要么是依赖的版本不对，Vue Flow的版本更迭是会伴随着API的更迭的，所以可以安装特定版本的Vue Flow来解决问题。我的Vue Flow版本是：v1.39.0

package.json：

"@vue-flow/background": "^1.3.0",

"@vue-flow/controls": "^1.1.2",

"@vue-flow/core": "^1.38.5",

"@vue-flow/minimap": "^1.5.0",

二、初识Vue Flow

2.1、安装Vue Flow

根据自己的包管理器安装

不习惯用add就用install，也没问题

npm add @vue-flow/core

pnpm add @vue-flow/core

yarn add @vue-flow/core

2.2、Vue Flow构成

在 Vue Flow 中，图由节点和边组成，每个节点或边都需要一个唯一的ID，节点还需要 XY 位置，而边需要 source 和 target 节点 ID，具体参照下方示例中的数据。

2.3、一个小坑

我最开始在官网上找案例的时候，发现除了教程案例以外的所有多组件案例都跑不动。不要只顾着怀疑自己，因为官网上的案例就是跑不动的。

原因在于：

为了确保 Vue Flow 正确显示，请确保包含必要的样式。

/* these are necessary styles for vue flow */

@import '@vue-flow/core/dist/style.css';

/* this contains the default theme, these are optional styles */

@import '@vue-flow/core/dist/theme-default.css';

是的，官网复杂案例全都没有添加这两行代码，估计是写文档的程序员被push的太狠了，抓紧写了几个案例就把代码放上来，没有意识到自己是全局引入（我猜的）了这两行代码，并且没有做任何提示。

但对于我们来说，只是为了画几个流程图的话，全局引入只会让代码变得冗余。局部引入就够了，把这两行放到style中官网的复杂案例就都可以执行了。

2.4、入门案例

请注意，这个代码确定能跑，如果跑不动请先检查依赖。

结构非常简单，定义了一个节点数据数组，一个连线数据数组，然后绑定给VueFlow组件即可。

 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1">

class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"> class="hljs-ln-code"> class="hljs-ln-line">// 在script中引入 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"> class="hljs-ln-code"> class="hljs-ln-line">import sunNode from "./sunNode.vue"; class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"> class="hljs-ln-code"> class="hljs-ln-line"> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"> class="hljs-ln-code"> class="hljs-ln-line"><template> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"> class="hljs-ln-code"> class="hljs-ln-line"> <div class="layout-flow"> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"> class="hljs-ln-code"> class="hljs-ln-line"> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"> class="hljs-ln-code"> class="hljs-ln-line"> <VueFlow class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"> class="hljs-ln-code"> class="hljs-ln-line"> :nodes="nodes" class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="9"> class="hljs-ln-code"> class="hljs-ln-line"> :edges="edges" class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="10"> class="hljs-ln-code"> class="hljs-ln-line"> @nodes-initialized="layoutGraph('TB')" class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="11"> class="hljs-ln-code"> class="hljs-ln-line"> > class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="12"> class="hljs-ln-code"> class="hljs-ln-line"> <template #node-sun="props"> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="13"> class="hljs-ln-code"> class="hljs-ln-line"> <div class="sunNode"> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="14"> class="hljs-ln-code"> class="hljs-ln-line"> <span>{{ props.data.label }}span> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="15"> class="hljs-ln-code"> class="hljs-ln-line"> div> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="16"> class="hljs-ln-code"> class="hljs-ln-line"> template> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="17"> class="hljs-ln-code"> class="hljs-ln-line"> VueFlow> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="18"> class="hljs-ln-code"> class="hljs-ln-line"> div> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="19"> class="hljs-ln-code"> class="hljs-ln-line"> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="20"> class="hljs-ln-code"> class="hljs-ln-line">template> class="hide-preCode-box">

class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"> class="hljs-ln-code"> class="hljs-ln-line"> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="17"> class="hljs-ln-code"> class="hljs-ln-line"> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="18"> class="hljs-ln-code"> class="hljs-ln-line"><template> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="19"> class="hljs-ln-code"> class="hljs-ln-line"> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="20"> class="hljs-ln-code"> class="hljs-ln-line"> <VueFlow class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="21"> class="hljs-ln-code"> class="hljs-ln-line"> :nodes="nodes" class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="22"> class="hljs-ln-code"> class="hljs-ln-line"> @node-drag-start="logEvent('drag start', $event)" class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="23"> class="hljs-ln-code"> class="hljs-ln-line"> @node-drag="logEvent('drag', $event)" class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="24"> class="hljs-ln-code"> class="hljs-ln-line"> @node-drag-stop="logEvent('drag stop', $event)" class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="25"> class="hljs-ln-code"> class="hljs-ln-line"> @node-click="logEvent('click', $event)" class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="26"> class="hljs-ln-code"> class="hljs-ln-line"> @node-double-click="logEvent('dblclick', $event)" class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="27"> class="hljs-ln-code"> class="hljs-ln-line"> @node-contextmenu="logEvent('contextmenu', $event)" class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="28"> class="hljs-ln-code"> class="hljs-ln-line"> @node-mouse-enter="logEvent('mouseenter', $event)" class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="29"> class="hljs-ln-code"> class="hljs-ln-line"> @node-mouse-leave="logEvent('mouseleave', $event)" class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="30"> class="hljs-ln-code"> class="hljs-ln-line"> @node-mouse-move="logEvent('mousemove', $event)" class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="31"> class="hljs-ln-code"> class="hljs-ln-line"> /> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="32"> class="hljs-ln-code"> class="hljs-ln-line">template> class="hide-preCode-box">

class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"> class="hljs-ln-code"> class="hljs-ln-line"> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="30"> class="hljs-ln-code"> class="hljs-ln-line"> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="31"> class="hljs-ln-code"> class="hljs-ln-line"><template> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="32"> class="hljs-ln-code"> class="hljs-ln-line"> <VueFlow class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="33"> class="hljs-ln-code"> class="hljs-ln-line"> :nodes="nodes" class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="34"> class="hljs-ln-code"> class="hljs-ln-line"> :edges="edges" class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="35"> class="hljs-ln-code"> class="hljs-ln-line"> @edge-click="logEvent('edge clicked', $event)" class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="36"> class="hljs-ln-code"> class="hljs-ln-line"> @edge-double-click="logEvent('edge double clicked', $event)" class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="37"> class="hljs-ln-code"> class="hljs-ln-line"> @edge-context-menu="logEvent('edge context menu', $event)" class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="38"> class="hljs-ln-code"> class="hljs-ln-line"> @edge-mouse-enter="logEvent('edge mouse enter', $event)" class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="39"> class="hljs-ln-code"> class="hljs-ln-line"> @edge-mouse-leave="logEvent('edge mouse leave', $event)" class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="40"> class="hljs-ln-code"> class="hljs-ln-line"> @edge-mouse-move="logEvent('edge mouse move', $event)" class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="41"> class="hljs-ln-code"> class="hljs-ln-line"> @edge-update-start="logEvent('edge update start', $event)" class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="42"> class="hljs-ln-code"> class="hljs-ln-line"> @edge-update="logEvent('edge update', $event)" class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="43"> class="hljs-ln-code"> class="hljs-ln-line"> @edge-update-end="logEvent('edge update end', $event)" class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="44"> class="hljs-ln-code"> class="hljs-ln-line"> /> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="45"> class="hljs-ln-code"> class="hljs-ln-line">template> class="hide-preCode-box">

class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"> class="hljs-ln-code"> class="hljs-ln-line"> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

文章目录

一、用表格查看结果（View Results in Table）参数说明

二、准备工作

三、测试计划设计

极致的灵活度满足工程美学：用Vue Flow绘制一个完美流程图

一、环境要求

二、初识Vue Flow

2.1、安装Vue Flow

2.2、Vue Flow构成

2.3、一个小坑

2.4、入门案例

三、Vue Flow优秀的自定义功能

3.1、引入

3.2、节点与连线的自定义

①打样（做模板）

②模版取名

③替换模版

3.3、节点与连线的事件

①节点事件

②连线事件

3.4、句柄（handles）

四、一个优质的案例

五、总结

评论记录：