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

上一章：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

三、知识点

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、使用组件

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就可以了

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"

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就可以了

5.2 json数据展示

1、安装依赖

npm install vue-json-views

2、注册为子组件

import jsonView from 'vue-json-views'

components: {

        jsonView,

        }

3、使用组件