Vue实现自动化平台（五）--用例编辑页面

news2024/11/16 22:01:14

上一章：Vue实现自动化平台（四）--接口管理页面的实现_做测试的喵酱的博客-CSDN博客

github地址：https://github.com/18713341733/vuemiaotest 

这个目前只是用来练手的，项目还没成型。等以后我写完了，再更新一下项目链接。 

 

一、编辑用例页面样式展示

编辑用例页面，样式展示来源于postman的样式。

二、整体代码

2.1 插件安装

本章需要安装2个插件。

方式一：nmp命令安装

npm install vue-json-views

注意，我们使用的vue2, 所以这里是 vue2-ace-editor

nmp install vue2-ace-editor

方式二：vue ui 安装依赖

vue ui 

先选中自己的项目

安装下面两个依赖

vue-json-views

vue2-ace-editor

 

 

2.2 整体代码

Cases.vue

<template>
	<div class="caseEdit">
		<el-card class="box-card">
			<!-- 顶部的面包屑 -->
			<div slot="header" class="clearfix">
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item>用例管理</el-breadcrumb-item>
					<el-breadcrumb-item>用例编辑</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<!-- 显示主体内容的卡片 -->
			<el-card class="box-card">
				<el-divider content-position="left"><span style="color: #409EFF; font-weight: bold;">Api</span>
				</el-divider>
				<!-- api请求的基本信息 -->
				<el-row :gutter="20">
					<!-- 请求方法选择 -->
					<el-col :span="3">
						<el-select v-model="caseInfo.method" placeholder="请求方法">
							<el-option label="GET" value="GET"></el-option>
							<el-option label="POST" value="POST"></el-option>
							<el-option label="PUT" value="PUT"></el-option>
							<el-option label="DELETE" value="DELETE"></el-option>
							<el-option label="PATCH" value="PATCH"></el-option>
							<el-option label="HEAD" value="HEAD"></el-option>
							<el-option label="OPTION" value="OPTION"></el-option>
						</el-select>
					</el-col>
					<!-- host地址输入 -->
					<el-col :span="9">
						<el-input placeholder="host地址" v-model="caseInfo.host">
							<template slot="prepend">Host</template>
						</el-input>
					</el-col>
					<!-- 接口地址输入 -->
					<el-col :span="9">
						<el-input placeholder="接口路径" v-model="caseInfo.interface">
							<template slot="prepend">接口地址</template>
						</el-input>
					</el-col>
					<!-- 运行按钮 -->
					<el-col :span="3">
						<el-button type="primary" icon="el-icon-s-promotion">Run</el-button>
					</el-col>
				</el-row>
				<el-divider content-position="left"><span style="color: #409EFF; font-weight: bold;">Request</span>
				</el-divider>
				<!--用例信息 -->
				<el-tabs type="border-card">
					<!-- 请求头 -->
					<el-tab-pane label="请求头">
						<el-row :gutter="20" v-for='(header,index) in caseInfo.headers' :key='index' style="margin: 10px;">
							<el-col :span="6">
								<el-input v-model.lazy="header.key" placeholder="KEY"></el-input>
							</el-col>
							<el-col :span="12">
								<el-input v-model.lazy="header.value" placeholder="VALUE"></el-input>
							</el-col>
							<el-col :span="6">
								<el-button type="danger" icon="el-icon-delete" @click='deleteInputRow(header,"headers")'></el-button>
							</el-col>
						</el-row>
					</el-tab-pane>
					<!-- 请求参数 -->
					<el-tab-pane label="请求参数">
						<el-tabs>
							<el-tab-pane label="application/json" >
								<editor height="300" width="100%" ref="editor" :content="caseInfo.json"
								    v-model="caseInfo.json" :options="{
								    enableBasicAutocompletion: true,
								    enableSnippets: true,
								    enableLiveAutocompletion: true,
								    tabSize:2,
								    fontSize:20,
								    showPrintMargin:false,}" :lang="'json'" @init="editorInit">
								</editor>
								<el-button type="primary" size="mini" @click='jsonFormat'>json格式化</el-button>
								
							</el-tab-pane>
							<el-tab-pane label="Params" >
								<el-row :gutter="20" v-for='(par,index) in caseInfo.params' :key='index' style="margin: 10px;">
									<el-col :span="6">
										<el-input v-model.lazy="par.key" placeholder="KEY"></el-input>
									</el-col>
									<el-col :span="12">
										<el-input v-model.lazy="par.value" placeholder="VALUE"></el-input>
									</el-col>
									<el-col :span="6">
										<el-button type="danger" icon="el-icon-delete" @click='deleteInputRow(par,"params")'></el-button>
									</el-col>
								</el-row>
							
							</el-tab-pane>
							<el-tab-pane label="application/X-www-urlencoded" >
								<el-row :gutter="20" v-for='(val,index) in caseInfo.data' :key='index' style="margin: 10px;">
									<el-col :span="6">
										<el-input v-model.lazy="val.key" placeholder="KEY"></el-input>
									</el-col>
									<el-col :span="12">
										<el-input v-model.lazy="val.value" placeholder="VALUE"></el-input>
									</el-col>
									<el-col :span="6">
										<el-button type="danger" icon="el-icon-delete" @click='deleteInputRow(val,"data")'></el-button>
									</el-col>
								</el-row>
								
							</el-tab-pane>
						</el-tabs>

					</el-tab-pane>
					<el-tab-pane label="响应提取">响应提取</el-tab-pane>
					<el-tab-pane label="用例断言">用例断言</el-tab-pane>
					<el-tab-pane label="数据库校验">数据库校验</el-tab-pane>
				</el-tabs>
				<el-button type="info" size="mini" @click='dialogVisible=true'>用例详情</el-button>	
			</el-card>
		</el-card>
		<el-dialog
		  title="提示"
		  :visible.sync="dialogVisible"
		  width="60%">
		  <json-view :data="caseInfo" style="height: 600px; scroll" />
		  <span slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
		  </span>
		</el-dialog>


	</div>
</template>

<script>
	import Editor from 'vue2-ace-editor'
	import jsonView from 'vue-json-views'
	
	export default {
		data() {
			return {
				// 用例详细信息展示的窗口
				dialogVisible:false,
				caseInfo: {
					method: 'GET',
					host: '',
					interface: '',
					headers: [{
						key: '',
						value: ''
					}],
					params:[{
						key: '',
						value: ''
					}],
					data:[{
						key: '',
						value: ''
					}],
					json:'{}'
				}
			}
		},
		methods: {
			// deleteRow(header) {
			// 	console.log(header)
			// 	// 删除headers的一行内容
			// 	this.caseInfo.headers = this.caseInfo.headers.filter(function(item, index) {
			// 		return item !== header
			// 	})
			// },
			// deleteParRow(par) {
			// 	// 删除 params中的一行内容
			// 	console.log(par)
			// 	this.caseInfo.params = this.caseInfo.params.filter(function(item, index) {
			// 		return item !== par
			// 	})
			// },
			
			// 删除行
			deleteInputRow(value,name) {
				//value 要删除的数据，name :表示数据的种类
				console.log('要删除的数据:',value)
				// 删除headers的一行内容
				this.caseInfo[name] = this.caseInfo[name].filter(function(item, index) {
					return item !== value
				})
			},
			// 添加行
			addInputRow(name){
				// name:添加行的数据种类
				const par = this.caseInfo[name]
				// 判断当前数据的长度是否为0
				if (par.length ===0){
					this.caseInfo[name].push({key:'',value:''})
				}
				if (par[par.length-1].key ||par[par.length-1].value){
					this.caseInfo[name].push({key:'',value:''})
				}	
			},
			// json编辑器的初始化方法
			editorInit() {
			    require('brace/theme/chrome')
			    require('brace/ext/language_tools')
			    require('brace/mode/yaml')
			    require('brace/mode/json')
			    require('brace/mode/less')
			    require('brace/snippets/json')
			},
			// json数据格式化
			jsonFormat(){
				// JSON方法：parse:将json字符串 转换为js对象,   stringify:将js对象转换为json字符串
				const jsObj= JSON.parse(this.caseInfo.json)
				this.caseInfo.json = JSON.stringify(jsObj,null,4)
			}	
		},
		watch: {
			// 监听headers中的数据是否发送变化，当发送变化时，则判断最后一行是否有值，
			'caseInfo.headers': {
				handler: function(value, oldVal) {
					this.addInputRow('headers')
					// if (value.length === 0) {
					// 	this.caseInfo.headers.push({key: '',value: ''})
					// }
					// // 判断最后一行是否有值，
					// if (value[value.length - 1].key || value[value.length - 1].value) {
					// 	this.caseInfo.headers.push({
					// 		key: '',
					// 		value: ''
					// 	})
					// }
				},
				deep: true
			},
			'caseInfo.params':{
				deep:true,
				handler:function(value,oldval){
					this.addInputRow('params')
					// const par = this.caseInfo.params
					// // 判断当前数据的长度是否为0
					// if (par.length ===0){
					// 	this.caseInfo.params.push({key:'',value:''})
					// }
					// if (par[par.length-1].key ||par[par.length-1].value){
					// 	this.caseInfo.params.push({key:'',value:''})
					// }
				}
			},
			'caseInfo.data':{
				deep:true,
				handler:function(value,oldval){
					this.addInputRow('data')
				}
			}

		},
		components:{
			Editor,
			jsonView,
		}
		
		



	}
</script>

<style scoped>
</style>

三、知识点

3.1 表单格栅布局

来源：element UI 组件。Layout 布局：Element - The world's most popular Vue UI framework

格栅布局：将一行分成很多块。

3.2 选项卡的实现

来源：element UI 组件，Tabs标签页 Element - The world's most popular Vue UI framework

 

3.3 动态增加输入框

监听器的应用

3.4 json格式数据展示

1、安装依赖

npm install vue-json-views

2、注册为子组件

import jsonView from 'vue-json-views'

components: {

        jsonView,

        }

3、使用组件

<json-view :data="editData" style="height: 420px;overflow-y: scroll" />

3.5 json数据编辑器

实现在页面上编写json格式的数据，对格式进行校验。

1、安装依赖

nmp install vue2-ace-editor

github地址： https://github.com/chairuosen/vue2-ace-editor

2、导入依赖，注册为子组件

import Editor from 'vue2-ace-editor'

// 在页面组件中通过components,注册导入的组件

 3、组件使用

只需要修改v-model就可以了

								<editor height="300" width="100%" ref="editor" :content="caseInfo.json"
								    v-model="caseInfo.json" :options="{
								    enableBasicAutocompletion: true,
								    enableSnippets: true,
								    enableLiveAutocompletion: true,
								    tabSize:2,
								    fontSize:20,
								    showPrintMargin:false,}" :lang="'json'" @init="editorInit">
								</editor>

3.6 输入框的实现

Element - The world's most popular Vue UI framework

 

四、填写header时，自动增加下一行（嵌套监听）

通过监听器watch实现。监听caseInfo中的headers。

监听器能直接监听某个属性。但是如果要监听caseInfo.headers,需要将caseInfo.headers括起来。

‘caseInfo.headers’

4.1 嵌套监听

vue官网地址：

响应式 API：核心 | Vue.js

 多层嵌套的侦听注意：

1、被监听的字段需要用引号引起来

2、使用handler这种方式

4.2 实现逻辑：

1、监听headers中的数据是否发送变化，当发送变化时，则判断最后一行是否有值，

有值，就新增一行。

		watch: {
			// 监听headers中的数据是否发送变化，当发送变化时，则判断最后一行是否有值，
			'caseInfo.headers': {
				handler: function(value, oldVal) {
					if (value.length === 0) {
						this.caseInfo.headers.push({
							key: '',
							value: ''
						})
					}
					// 判断最后一行是否有值，
					if (value[value.length - 1].key || value[value.length - 1].value) {
						this.caseInfo.headers.push({
							key: '',
							value: ''
						})
					}

				},
				deep: true
			}

		},

2、双向绑定，在表单中输入内容，等失去焦点时，再同步数据

v-model.lazy="header.key"
					<!-- 请求头 -->
					<el-tab-pane label="请求头">
						<el-row :gutter="20" v-for='header in caseInfo.headers' :key='header.key' style="margin: 10px;">
							<el-col :span="6">
								<el-input v-model.lazy="header.key" placeholder="KEY"></el-input>
							</el-col>
							<el-col :span="12">
								<el-input v-model.lazy="header.value" placeholder="VALUE"></el-input>
							</el-col>
							<el-col :span="6">
								<el-button type="danger" icon="el-icon-delete" @click='deleteRow(header)'></el-button>
							</el-col>
						</el-row>
					</el-tab-pane>

4.3 实现删除header功能

点击删除按钮，删除这一行header。

1、数据传递：

在点击删除的时候，将这一行的数据作为参数传递给删除的方法。

2、删除的方法：

删除2种方法。1、通过索引删除。2、通过过滤删除。

hIndex ，为获取的索引。

过滤删除

不等于header的过滤出来，给caseInfo.headers 重新赋值。

		methods: {
			deleteRow(header) {
				console.log(header)
				// 删除一行内容
				const newHeaders = this.caseInfo.headers.filter(function(item, index) {
					return item !== header
				})
				this.caseInfo.headers = newHeaders
			},

五、请求参数

与添加header方法是一致的。

参数有2种类型，form表单与json格式。

样式来源，tabs 标签页，element ui

5.1 json 编辑器依赖

5.1.1 依赖安装

本章需要安装2个插件。

方式一：nmp命令安装

npm install vue-json-views

注意，我们使用的vue2, 所以这里是 vue2-ace-editor

nmp install vue2-ace-editor

方式二：vue ui 安装依赖

vue ui 

先选中自己的项目

安装下面两个依赖

vue-json-views

vue2-ace-editor

 

 

5.1.2 json 编辑器使用

实现在页面上编写json格式的数据，对格式进行校验。

1、安装依赖

nmp install vue2-ace-editor

github地址： https://github.com/chairuosen/vue2-ace-editor

2、导入依赖，注册为子组件

import Editor from 'vue2-ace-editor'

// 在页面组件中通过components,注册导入的组件

3、组件使用

只需要修改v-model就可以了

								<editor height="300" width="100%" ref="editor" :content="caseInfo.json"
								    v-model="caseInfo.json" :options="{
								    enableBasicAutocompletion: true,
								    enableSnippets: true,
								    enableLiveAutocompletion: true,
								    tabSize:2,
								    fontSize:20,
								    showPrintMargin:false,}" :lang="'json'" @init="editorInit">
								</editor>

5.2 json数据展示

1、安装依赖

npm install vue-json-views

2、注册为子组件

import jsonView from 'vue-json-views'

components: {

        jsonView,

        }

3、使用组件

<json-view :data="editData" style="height: 420px;overflow-y: scroll" />

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/410459.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

公网远程访问局域网SQL Server数据库【无公网IP内网穿透】

公网远程访问局域网SQL Server数据库【无公网IP内网穿透】

目录 1.前言 2.本地安装和设置SQL Server 2.1 SQL Server下载 2.2 SQL Server本地连接测试 2.3 Cpolar内网穿透的下载和安装 2.3 Cpolar内网穿透的注册 3.本地网页发布 3.1 Cpolar云端设置 3.2 Cpolar本地设置 4.公网访问测试 5.结语 转发自CSDN远程穿透的文章&…
阅读更多...
不用但一定要懂 ---- iOS 之 响应链、传递链 与 手势识别

不用但一定要懂 ---- iOS 之 响应链、传递链 与 手势识别

iOS 事件的主要由&#xff1a;响应连 和 传递链 构成。一般事件先通过传递链&#xff0c;传递下去。响应链&#xff0c;如果上层不能响应&#xff0c;那么一层一层通过响应链找到能响应的UIResponse。 响应链&#xff1a;由最基础的view向系统传递&#xff0c;first view ->…
阅读更多...
c/c++：原码，反码，补码和常见的数据类型取值范围，溢出

c/c++：原码，反码，补码和常见的数据类型取值范围，溢出

c/c&#xff1a;原码&#xff0c;反码&#xff0c;补码和常见的数据类型取值范围&#xff0c;溢出 2022找工作是学历、能力和运气的超强结合体&#xff0c;遇到寒冬&#xff0c;大厂不招人&#xff0c;此时学会c的话&#xff0c; 我所知道的周边的会c的同学&#xff0c;可手握…
阅读更多...
前脚我的 GPT4 被封，后脚收到了文心一言的邀请账号

前脚我的 GPT4 被封，后脚收到了文心一言的邀请账号

大家好&#xff0c;我是二哥呀。 一早醒来&#xff0c;我的 ChatGPT Plus 账号就惨遭封禁&#xff0c;很不幸&#xff0c;我刚冲的 Plus 会员&#xff0c;用了不到一周的时间&#xff08;&#x1f62d;&#xff09;。 我没用亚洲的IP&#xff0c;所以网上传的那些不使用亚洲IP…
阅读更多...
vuex中的 mapState， mapMutations

vuex中的 mapState， mapMutations

vuex中的 mapState&#xff0c; mapMutations Start 今天使用vuex的过程中&#xff0c;遇到 mapState&#xff0c; mapMutations 这么两个函数&#xff0c;今天学习一下这两个函数。 本文介绍的vuex基于 vuex3.0 1. 官方文档说明 1.1 mapState 官方解释 点击这里&#xff1…
阅读更多...
深入理解IP地址

深入理解IP地址

我们在浏览器中直接输入IP地址就可以访问某一个神秘的网站&#xff0c;那么这个IP地址是如何划分的呢&#xff1f; IP&#xff0c;英文全写为Internet Protocol&#xff0c;指TCP/IP网络体系中的网际互联协议&#xff0c;工作在OSI模型的网络层(简单了解即可)。 更多内容欢迎访…
阅读更多...
数据分析之Matplotilb数据可视化

数据分析之Matplotilb数据可视化

文章目录1.Matplotilb 基础plt.show()函数plt.plot()函数基本用法例子坐标轴显示的范围传入Numpy数组传入多组数据线条属性使用plt.plot()的返回值来设置线条属性plt.setp()修改线条性质子图plt. subplot (numrows, numcols,fignum)形式3.电影数据绘图(1)绘制每个国家或地区的电…
阅读更多...
Python的输入与输出

Python的输入与输出

✅作者简介&#xff1a;CSDN内容合伙人、阿里云专家博主、51CTO专家博主、新星计划第三季python赛道Top1&#x1f3c6; &#x1f4c3;个人主页&#xff1a;hacker707的csdn博客 &#x1f525;系列专栏&#xff1a;零基础入门篇 &#x1f4ac;个人格言&#xff1a;不断的翻越一座…
阅读更多...
力扣-刷题记录

力扣-刷题记录

189. 轮转数组 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 力扣https://leetcode.cn/problems/rotate-array/description/ void rotate(int* nums, int numsSize, int k){if(k > numsSize){k % numsSize;}if(k0){f…
阅读更多...
GlusterFS（GFS）分布式文件系统

GlusterFS（GFS）分布式文件系统

目录 一.文件系统简介 1.文件系统的组成 2.文件系统的作用 3.文件系统的挂载使用 二.GlusterFS概述 1.GlusterFS是什么&#xff1f; 2.GlusterFS的特点 3.GlusterFS术语介绍 3.1 Brick&#xff08;存储块&#xff09; 3.2 Volume&#xff08;逻辑卷&#xff09; 3.3…
阅读更多...
Qt Quick - 菜单综述

Qt Quick - 菜单综述

Qt Quick - 菜单综述使用总结一、概述二、菜单控件三、MenuBar 控件一、概述 菜单这一类&#xff0c;给我们提供了很多的便捷封住。 控件名功能Menu弹出式菜单&#xff0c;可以用作上下文菜单或弹出式菜单&#xff0c;也就是可以单独菜单上用&#xff0c;或者在鼠标右键&…
阅读更多...
新能源汽车的充电、电池包的组成、充电的设备

新能源汽车的充电、电池包的组成、充电的设备

一、新能源汽车的电池包 1、电动汽车电池包的组成 电动汽车的电池包主要由电池单体、模组构成。 电池单体指的是单个独立的锂电池&#xff0c;将多个电池单体组合在一起就成了模组&#xff0c;再把多个模组组合起来最终构成电池包。 不过这里有个特例&#xff0c;那就是比亚…
阅读更多...
数据挖掘(2.4)--数据归约和变换

数据挖掘(2.4)--数据归约和变换

目录 1.数据归约 1.1数据立方体聚合 1.2特征选择 1.3数据压缩 1.4其他数据归约方法 回归分析 直方图 聚类 简单随机采样&#xff08;SAS&#xff09; 2.数据离散化 2.1基于信息增益的离散化 2.2基于卡方检验的离散化 2.3基于自然分区的离散化 3.概念层次生成 1.数…
阅读更多...
3款免费好用的电脑录屏工具

3款免费好用的电脑录屏工具

案例&#xff1a;电脑录屏工具哪款免费又好用&#xff1f; “我想要挑选一款适合自己的好用的电脑录屏软件&#xff0c;但是我尝试了很多款录屏软件结果都不尽人意。免费版的软件功能少&#xff0c;录制效果差&#xff0c;想要高级功能需要付费解锁。想问问大家有没有免费好用…
阅读更多...
如何搭建chatGPT4.0模型-国内如何用chatGPT4.0

如何搭建chatGPT4.0模型-国内如何用chatGPT4.0

国内如何用chatGPT4.0 在国内&#xff0c;目前可以通过以下途径使用 OpenAI 的 ChatGPT 4.0&#xff1a; 自己搭建模型&#xff1a;如果您具备一定的技术能力&#xff0c;可以通过下载预训练模型和相关的开发工具包&#xff0c;自行搭建 ChatGPT 4.0 模型。OpenAI提供了相关的…
阅读更多...
day81【leetcode】打家劫舍专题

day81【leetcode】打家劫舍专题

文章目录前言一、打家劫舍&#xff08;力扣198&#xff09;【相邻两间房不能偷】二、打家劫舍 II&#xff08;力扣213&#xff09;【围成一圈 相邻两间房不能偷】三、打家劫舍 III&#xff08;力扣337&#xff09;【树形DP】每日一题day81&#xff1a;链表中的下一个更大节点&a…
阅读更多...
Java：jdk的安装以及hello world

Java：jdk的安装以及hello world

由于本人头发较多&#xff0c;常常被认为是不用功的程序员&#xff1b;故&#xff0c;我来学学Java&#xff0c;希望我变秃了也变强了&#xff01; 首先是java的安装&#xff0c;根据我司java的建议&#xff0c;安装了jdk8与jdk17&#xff01;因为在众多的版本中&#xff0c;只…
阅读更多...
3.7——静态成员

3.7——静态成员

静态数据成员 静态成员&#xff0c;指的是在c类中声明成员时可以加上static关键字&#xff0c;这样声明的成员就叫做静态成员&#xff08;包括数据成员和成员函数&#xff09;。即声明为static的类成员或者成员函数便能在类的范围内同享。 说明&#xff1a; 1&#xff09;静态数…
阅读更多...
WordGPT正式版4.0安装教程

WordGPT正式版4.0安装教程

下载 https://www.xsoftnet.com/share/a0004MZyPvB5k.html产品介绍&#xff1a; WordGPT正式版来了&#xff0c;V4.0震撼发布&#xff0c;兼容Office与WPS&#xff0c;集提纲生成、内容创作、文本补全、文章润色、归纳总结、自定义提示词、快捷排版为一体的多场景智能文案创作…
阅读更多...
IT知识百科：什么是超融合数据中心网络？

IT知识百科：什么是超融合数据中心网络？

超融合数据中心网络&#xff08;Hyper-Converged Data Center Network&#xff09;是一种基于软件定义网络&#xff08;SDN&#xff09;和虚拟化技术的新型数据中心网络架构。该架构将计算、存储和网络三大要素融合在一起&#xff0c;实现了网络、计算、存储资源的统一管理&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023