一、实现效果图及界面布局简单梳理
整体布局分左右，左边调试，右边显示接口列表
左侧：
一个输入框+按钮；下面展示信息，大部分使用代码编辑器就好了，除了请求体传文件类型需要额外处理。然后再下方显示响应信息，这个后续很多地方都会展示结果，额外拆成一个组件。
右侧：
分项目和三方两个不同列表展示，从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>
<!-- 响应信息内容比较多，后面再处理-->
大致就得到了下面的界面
左边部分还有比较复杂的未完善内容。后续再来完善
- 请求体是form-data的情况，上传文件等
- 请求响应信息的结果展示
现在先处理简单的右边 列表显示部分。
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接收数据。
扫一扫
568
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
