Vue接口平台学习六——接口列表及部分调试页面

news2025/4/15 6:55:27

一、实现效果图及界面布局简单梳理

在这里插入图片描述
整体布局分左右，左边调试，右边显示接口列表

左侧：

一个输入框+按钮；下面展示信息，大部分使用代码编辑器就好了，除了请求体传文件类型需要额外处理。然后再下方显示响应信息，这个后续很多地方都会展示结果，额外拆成一个组件。

右侧：

分项目和三方两个不同列表展示，从Prostore存储的数据中读取，对不同选择传递不同数据，分别展示。

二、页面内容具体实现

2.0 整体布局

整体布局两个div，card样式。

  <div class="main_box">
    <!-- 左侧内容 -->
    <div class="card left_box"></div>
    <!-- 右侧内容 -->
    <div class="card right_box"></div>
  </div>

flex布局，再给个高度，就ok了

.main_box {
  display: flex;
  height: calc(100% - 42px);

  .left_box {
    padding: 5px;
    flex: 1;
  }

  .right_box {
    padding: 5px;
    flex: 1;
  }

在这里插入图片描述

2.1 左侧-接口调试

title部分

上面就一个title

<div class="title">接口调试</div>

 .title {
   font-weight: bold;
   text-align: center;
   height: 40px;
   line-height: 40px;
 }

下面部分内容有点多，拆开成一个组件单独来写。
新建一个InterFaceDebug.vue来写下面内容，在页面中引用这个组件

<!-- 左侧内容 -->
<div class="card left_box">
	<!-- 标题 -->
	<div class="title">接口调试</div>
	<!-- 接口调试组件 -->
	<InterFaceDebug></InterFaceDebug>
</div>

import InterFaceDebug from './components/InterfaceDebug.vue'

下面的调试组件部分

url输入框

 <div style="display: flex">
   <el-input v-model="caseData.interface.url" placeholder="输入接口地址">
     <template #prepend>
       <el-select v-model="caseData.interface.method" placeholder="选择请求方法" style="width: 115px">
         <el-option label="GET" value="get"/>
         <el-option label="POST" value="post"/>
         <el-option label="PUT" value="put"/>
         <el-option label="PATCH" value="patch"/>
         <el-option label="DELETE" value="delete"/>
       </el-select>
     </template>
   </el-input>
   <el-button type="primary">运行</el-button>
 </div>

根据接口文档，定义一些需要的内容

const caseData = reactive({
  interface: {
    method: "get",
    url: ""
  },
  headers: '{}',
  request: {
    json: '{}',
    data: '{}',
    params: '{}'
  },
  file: [],
  setup_script: '',
  teardown_script: ''
})
let bodyType = ref('json')

然后是请求信息

<!--请求信息-->
<el-divider content-position="left">请求信息</el-divider>
<el-tabs type="border-card" class="demo-tabs">
  <el-tab-pane label="请求头(headers)">
    <Editor lang="json" v-model="caseData.headers"></Editor>
  </el-tab-pane>
  <el-tab-pane label="查询参数(params)">
    <Editor lang="json" v-model="caseData.request.params"></Editor>
  </el-tab-pane>
  <el-tab-pane label="请求体(Body)" :disabled="caseData.interface.method === 'get'">
    <el-radio-group v-model="bodyType">
      <el-radio label="json">Json</el-radio>
      <el-radio label="data">X-www-form-urlencoded</el-radio>
      <el-radio label="form-data">form-data</el-radio>
    </el-radio-group>
    <!-- json参数 -->
    <div v-if='bodyType==="json"'>
      <Editor lang="json" v-model="caseData.request.json"></Editor>
    </div>
    <div v-else-if='bodyType==="data"'>
      <Editor lang="json" v-model="caseData.request.data"></Editor>
    </div>
    <div v-else>
      <!-- 这里比较复杂 后面再来处理--> 
    </div>
  </el-tab-pane>
  <el-tab-pane label="前置脚本">
    <Editor lang="python" v-model="caseData.setup_script"></Editor>
  </el-tab-pane>
  <el-tab-pane label="后置脚本">
    <Editor lang="python" v-model="caseData.teardown_script"></Editor>
  </el-tab-pane>
</el-tabs>

请求体部分做了一个判断，如果是get请求就禁用点击

:disabled="caseData.interface.method === 'get'"

再下方是响应信息

<el-divider content-position="left">响应信息</el-divider>
<!-- 响应信息内容比较多，后面再处理-->

大致就得到了下面的界面
在这里插入图片描述
左边部分还有比较复杂的未完善内容。后续再来完善

  1. 请求体是form-data的情况，上传文件等
  2. 请求响应信息的结果展示

现在先处理简单的右边 列表显示部分。

2.2 右侧-接口列表()

前置准备

在最开始进入home页面时，可以先获取项目中所有接口列表，保存起来。然后切换到接口列表时，可以直接读取使用。

1.在ProStore定义获取接口函数及存储变量：
// ProStore.js
// 保存接口列表
interfaces: [],

getters: {
	// 项目接口
	interfaces1() {
		return this.interfaces.filter((item) => {
			return item.type === '1'
		})
	},
	// 第三方接口
	interfaces2() {
		return this.interfaces.filter((item) => {
			return item.type === '2'
		})
	},
},
actions: {
	// 获取项目下面所有的接口
	async getInterFaceList() {
		const response = await api.getInterFaceListApi(this.pro.id)
		if (response.status === 200) {
			this.interfaces = response.data
		}
	},
	。。。。
2. 在ProjectApi.js定义接口列表

为了避免后续麻烦，这里把interface相关的全部定义了

//========================   interface相关 =============================
    // 添加接口
    createInterFaceApi(params) {
        return request.post('/api/TestInterFace/interfaces/', params)
    },
    // 获取接口列表
    getInterFaceListApi(pro_id) {
        return request.get('/api/TestInterFace/interfaces/', {
            params: {
                project: pro_id
            }
        })
    },
    // 编辑接口
    editInterFaceApi(id, params) {
        return request.patch(`/api/TestInterFace/interfaces/${id}/`, params)
    },
    // 删除接口
    deleteInterFaceApi(id) {
        return request.delete(`/api/TestInterFace/interfaces/${id}/`)
    },
3.在进入Home页面时调用接口获取数据存储
//HomeView.vue
// 获取项目所有的接口
pstore.getInterFaceList()
4.定义组件InterFaceList复用。

由于有项目接口，和第三方接口 2种不同类型，同样的内容，就拆成组件复用。将不同的数据传递给组件

<div class="card right_box">
	<div class="title">项目接口管理</div>
	<el-tabs type="border-card" class="demo-tabs">
		<el-tab-pane label="项目接口">
			<InterFaceList :interface='pstore.interfaces1'></InterFaceList>
		</el-tab-pane>
		<el-tab-pane label="第三方接口">
			<InterFaceList :interface='pstore.interfaces2'></InterFaceList>
		</el-tab-pane>
	</el-tabs>
</div>

InterFaceList组件(⭐️)

<el-button size="small" type="primary" plain>添加接口</el-button>
<el-table :data="props.interface" style="width: 100%">
	<el-table-column prop="name" label="接口名称" width="150" align="center"/>
	<el-table-column prop="url" label="接口地址" width="200" align="center" />
	<el-table-column prop="method" label="请求方法" align="center"/>
	<el-table-column label="操作" align="right" header-align="center">
		<template #default="scope">
			<el-button size="small" icon='Edit' type="primary" plain></el-button>
			<el-button size="small" icon='Delete' type="danger"
				plain></el-button>
		</template>
	</el-table-column>
</el-table>

// 定义组件的porps，接收传递过来的值
const props = defineProps({
	interface: {
		type: Array, 
		required: true ,// 如果需要该属性为必需，则设置为 true
		default:[]
	}
})

页面整体框架到此就搭建好了
在这里插入图片描述

三、函数功能

这里主要是接口列表的函数功能，调试页面的内容还未完成。

添加接口

<el-button @click="clickAdd"  size="small" type="primary" plain>添加接口</el-button>

可以做一个弹窗，点击添加/编辑 时，使用插槽定义弹窗名字，创建就展示创建，编辑再展示编辑再展示。

<!-- 弹框 -->
	<el-drawer v-model="isShowDrawer">
		<template #header>
			<b>{{dlgTitle}}</b>
		</template>
		<template #default>
			<!-- 添加的表单 -->
			<el-form :model="formData">
				<el-form-item label="接口名称">
					<el-input v-model="formData.name" />
				</el-form-item>
				<el-form-item label="接口地址">
					<el-input v-model="formData.url" />
				</el-form-item>
				<el-form-item label="请求方法">
					<el-select style="width: 100%;" v-model="formData.method">
						<el-option label="GET" value="get" />
						<el-option label="POST" value="post" />
						<el-option label="PUT" value="put" />
						<el-option label="PATCH" value="patch" />
						<el-option label="DELETE" value="delete" />
					</el-select>
				</el-form-item>
				<el-form-item label="接口类型">
					<el-select style="width: 100%;" v-model="formData.type">
						<el-option label="项目接口" value="1" />
						<el-option label="第三方接口" value="2" />
					</el-select>
				</el-form-item>
			</el-form>
		</template>
		<template #footer>
			<div style="flex: auto">
				<el-button @click="isShowDrawer=false">取消</el-button>
				<el-button v-if='dlgTitle==="添加接口"' type="primary" @click='addInterface'>确定</el-button>
				<el-button v-else type="primary" @click='updateInterFace'>确定</el-button>
			</div>
		</template>
	</el-drawer>

// 是否显示添加接口的窗口
	let isShowDrawer = ref(false)
	let dlgTitle = ref('添加接口')
	let formData = reactive({
		name: "",
		url: "",
		method: "get",
		type: "1",
		project: pstore.pro.id,
	})
	// 点击添加按钮执行
	function clickAdd() {
		dlgTitle.value = '添加接口'
		isShowDrawer.value = true
		formData.name = ''
		formData.url = ''
		formData.method = 'get'
		formData.type = '1'
	}

	// 点击确认添加执行
	async function addInterface() {
		const response = await http.pro.createInterFaceApi(formData)
		if (response.status === 201) {
			// 关闭窗口
			isShowDrawer.value = false
			ElNotification({
				title: '添加成功',
				type: 'success',
			})
		}
		// 刷新页面数据
		pstore.getInterFaceList()
	}

在这里插入图片描述

编辑接口

编辑按钮按绑定编辑时间

<el-button @click='clickEdit(scope.row)' size="small" icon='Edit' type="primary" plain></el-button>

// 保存当前编辑接口的ID
let editInterId = null
// 点击编辑接口
function clickEdit(item) {
	// 显示编辑框
	dlgTitle.value = '编辑接口'
	isShowDrawer.value = true
	formData.name = item.name
	formData.url = item.url
	formData.method = item.method
	formData.type = item.type
	// 保存当前编辑接口的ID
	editInterId = item.id
}
// 编辑完成，调用后端修改接口信息的方法
async function updateInterFace() {
	const response = await api.editInterFaceApi(editInterId, formData)
	if (response.status === 200) {
		// 关闭窗口
		isShowDrawer.value = false
		ElNotification({
			title: '修改成功',
			type: 'success',
		})
		// 刷新页面数据
		pstore.getInterFaceList()
	}
}

在这里插入图片描述
这里内容有点长换行显示了，做个小修改，超长部分省略显示，鼠标悬浮再显示完全，增加 show-overflow-tooltip 属性

<el-table-column prop="name" label="接口名称" width="150" align="center" show-overflow-tooltip/>

在这里插入图片描述

删除接口

<el-button @click='deleteInterFace(scope.row.id)' size="small" icon='Delete' type="danger" plain></el-button>

同样做2次确认

// 删除接口的方法
function deleteInterFace(id) {
	ElMessageBox.confirm(
		'删除操作不可恢复，请确认是否要删除该接口?',
		'提示', {
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning',
		}
	).then(async () => {
		// 调用后端接口进行删除
		const response = await api.deleteInterFaceApi(id)
		if (response.status === 204) {
			ElNotification({
				title: '删除成功',
				type: 'success',
			})
			// 刷新页面数据
			pstore.getInterFaceList()
		}
	}).catch(() => {
		ElMessage({
			type: 'info',
			message: '已取消删除操作',
		})
	})
}

总结

大致就是elment的组件使用，消息提示，table数据展示等，此外用到了代码编辑器。pinia数据存储调用，还有组件传递数据，props接收数据。

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

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

相关文章

【C语言】预处理（下）（C语言完结篇）

【C语言】预处理（下）（C语言完结篇）

一、#和## 1、#运算符 这里的#是一个运算符&#xff0c;整个运算符会将宏的参数转换为字符串字面量&#xff0c;它仅可以出现在带参数的宏的替换列表中&#xff0c;我们可以将其理解为字符串化。 我们先看下面的一段代码&#xff1a; 第二个printf中是由两个字符串组成的&am…
阅读更多...
低频rfid手持机，助力动物耳标智能化管理

低频rfid手持机，助力动物耳标智能化管理

低频RFID手持机&#xff0c;助力动物耳标智能化管理&#xff0c;正逐步成为现代畜牧业不可或缺的工具。它不仅能够高效读取动物耳标中的信息&#xff0c;如唯一识别码、疫苗接种记录、健康状态等&#xff0c;还极大地提升了数据录入的准确性和时效性。 1.精准识别与追踪‌ 通过…
阅读更多...
【从零开始学习JVM | 第三篇】虚拟机的垃圾回收学习（一）

【从零开始学习JVM | 第三篇】虚拟机的垃圾回收学习（一）

堆空间的基本结构 Java 的自动内存管理主要是针对对象内存的回收和对象内存的分配。同时&#xff0c;Java 自动内存管理最核心的功能是 堆 内存中对象的分配与回收。 Java 堆是垃圾收集器管理的主要区域&#xff0c;因此也被称作 GC 堆&#xff08;Garbage Collected Heap&am…
阅读更多...
Jieba分词的原理及应用（三）

Jieba分词的原理及应用（三）

前言 “结巴”中文分词&#xff1a;做最好的 Python 中文分词组件 上一篇文章讲了使用TF-IDF分类器范式进行企业级文本分类的案例。其中提到了中文场景不比英文场景&#xff0c;在喂给模型之前需要进行分词操作。 分词的手段有很多&#xff0c;其中最常用的手段还是Jieba库进行…
阅读更多...
Openlayers：flat样式介绍

Openlayers：flat样式介绍

在前段时间我在使用WebGL矢量图层时接触到了flat样式&#xff0c;我对其十分的感兴趣&#xff0c;于是我花了几天的时间对其进行了了解&#xff0c;在这篇文章中我将简单的介绍一下flat样式的使用方式以及我对其的一些理解。 一、了解flat样式 1.什么是flat样式&#xff1f; …
阅读更多...
149页研读——华为基于IPD全过程研发质量管理【附全文阅读】

149页研读——华为基于IPD全过程研发质量管理【附全文阅读】

本文介绍了IPD（集成产品开发）的全过程研发质量管理，强调了以客户需求为导向，通过跨部门协同、资源整合、快速响应等方式提高研发效率和成功率。文章详细阐述了IPD研发管理体系的精要，包括其核心思想、优势、框架以及核心理念。 其中，跨领域平台与技术研发、端到端流程与项…
阅读更多...
Oracle 23ai Vector Search 系列之5 向量索引（Vector Indexes）

Oracle 23ai Vector Search 系列之5 向量索引（Vector Indexes）

文章目录 Oracle 23ai Vector Search 系列之5 向量索引Oracle 23ai支持的向量索引类型内存中的邻居图向量索引 (In-Memory Neighbor Graph Vector Index)磁盘上的邻居分区矢量索引 (Neighbor Partition Vector Index) 创建向量索引HNSW索引IVF索引 向量索引示例参考 Windows 环…
阅读更多...
vue模拟扑克效果

vue模拟扑克效果

vue模拟扑克效果 效果图&#xff1a; step1:C:\Users\wangrusheng\PycharmProjects\untitled18\src\views\Home.vue <template><div class"poker-container"><!-- 使用复合数据对象实现双行显示 --><divv-for"(card, index) in POKER_…
阅读更多...
Android12源码编译之预置Android Studio项目Android.mk文件编写

Android12源码编译之预置Android Studio项目Android.mk文件编写

1、在AndroidManifest.xml文件中添加package"com.sprd.silentinstalldemo"属性&#xff0c;因为新版本的Android Studio默认生成的AndroidManifest.xml是没有这个属性值的 <?xml version"1.0" encoding"utf-8"?> <manifest xmlns:an…
阅读更多...
Spring Boot 测试详解，包含maven引入依赖、测试业务层类、REST风格测试和Mock测试

Spring Boot 测试详解，包含maven引入依赖、测试业务层类、REST风格测试和Mock测试

Spring Boot 测试详解 1. 测试依赖引入 Spring Boot 默认通过以下 Maven 依赖引入测试工具&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</s…
阅读更多...
leetcode刷题日记——螺旋矩阵

leetcode刷题日记——螺旋矩阵

[ 题目描述 ]&#xff1a; [ 思路 ]&#xff1a; 题目要求按顺时针顺序给出m行n列的矩阵的数组按照题目所给的顺序挨个插入答案数组中运行如下 int* spiralOrder(int** matrix, int matrixSize, int* matrixColSize, int* returnSize) {*returnSize matrixSize * matrixCol…
阅读更多...
模板引擎语法-标签

模板引擎语法-标签

模板引擎语法-标签 文章目录 模板引擎语法-标签[toc]一、用于进行判断的{% if-elif-else-endif %}标签二、关于循环对象的{% for-endfor %}标签三、关于自动转义的{% autoescape-endautoescape %}标签四、关于循环对象的{% cycle %}标签五、关于检查值是否变化的{% ifchange %}…
阅读更多...
深度学习学习笔记

深度学习学习笔记

目录 摘要 Abstracts 简介 Hourglass Module&#xff08;Hourglass 模块&#xff09; 网络结构 Intermediate Supervision&#xff08;中间监督&#xff09; 训练过程细节 评测结果 摘要 本周阅读了《Stacked Hourglass Networks for Human Pose Estimation》&#xf…
阅读更多...
当Browser Use遇见A2A：浏览器自动化与智能体协作的“冰与火之歌“

当Browser Use遇见A2A：浏览器自动化与智能体协作的“冰与火之歌“

——一场正在改写数字文明的技术奇遇 第一章 浏览器革命&#xff1a;从"手动挡"到"自动驾驶" 1.1 传统自动化工具的"中年危机" 还记得2023年那个抓狂的凌晨吗&#xff1f;你蹲守演唱会门票时&#xff0c;Selenium脚本因为验证码识别失败第108次…
阅读更多...
(已解决)如何安装python离线包及其依赖包 2025最新

(已解决)如何安装python离线包及其依赖包 2025最新

字数 305&#xff0c;阅读大约需 2 分钟 没有网络的Linux服务器上&#xff0c;如何安装完整的、离线的python包 1. 写入待安装的包 新建requirement.txt, 写入待安装的包 和 包的版本 如 flwr1.13.0 2.使用命令行直接下载 pip download -d flwr_packages -r requirements.tx…
阅读更多...
豪越赋能消防安全管控，解锁一体化内管“安全密码”

豪越赋能消防安全管控，解锁一体化内管“安全密码”

在消防安全保障体系中&#xff0c;内部管理的高效运作是迅速、有效应对火灾及各类灾害事故的重要基础。豪越科技凭借在消防领域的深耕细作与持续创新&#xff0c;深入剖析消防体系内部管理的痛点&#xff0c;以自主研发的消防一体化安全管控平台&#xff0c;为行业发展提供了创…
阅读更多...
拓扑排序 —— 2. 力扣刷题207. 课程表

拓扑排序 —— 2. 力扣刷题207. 课程表

题目链接&#xff1a;https://leetcode.cn/problems/course-schedule/description/ 题目难度&#xff1a;中等 相关标签&#xff1a;拓扑排序 / 广度优先搜搜 BFS / 深度优先搜索 DFS 2.1 问题与分析 2.1.1 原题截图 2.1.2 题目分析 首先&#xff0c;理解题目后必须马上意识到…
阅读更多...
【STM32】ST7789屏幕驱动

【STM32】ST7789屏幕驱动

目录 CubeMX配置 配置SPI 开DMA 时钟树 堆栈大小 Keil工程配置 添加两个group 添加文件包含路径 驱动编写 写单字节函数 写字函数 写多字节函数 初始化函数 设置窗口函数 情况一&#xff1a;正常的0度旋转 情况二&#xff1a;顺时针90度旋转 情况三&#xff1…
阅读更多...
10min速通Linux文件传输

10min速通Linux文件传输

实验环境 在Linux中传输文件需要借助网络以及sshd&#xff0c;我们可通过systemctl status sshd来查看sshd状态 若服务未开启我们可通过systemctl enable --now sshd来开启sshd服务 将/etc/ssh/sshd_config中的PermitRootLogin 状态修改为yes 传输文件 scp scp &#xff08;Sec…
阅读更多...
dify windos,linux下载安装部署，提供百度云盘地址

dify windos,linux下载安装部署，提供百度云盘地址

dify1.0.1 windos安装包百度云盘地址 通过网盘分享的文件&#xff1a;dify-1.0.1.zip 链接: 百度网盘 请输入提取码 提取码: 1234 dify安装包 linux安装包百度云盘地址 通过网盘分享的文件&#xff1a;dify-1.0.1.tar.gz 链接: 百度网盘 请输入提取码 提取码: 1234 1.安装…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023