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

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

整体布局分左右，左边调试，右边显示接口列表

左侧：

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

右侧：

分项目和三方两个不同列表展示，从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 ,// 如果需要该属性为必需，则设置为 truedefault:[]}
})

页面整体框架到此就搭建好了

三、函数功能

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

添加接口

<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 = trueformData.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 = falseElNotification({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 = trueformData.name = item.nameformData.url = item.urlformData.method = item.methodformData.type = item.type// 保存当前编辑接口的IDeditInterId = item.id
}
// 编辑完成，调用后端修改接口信息的方法
async function updateInterFace() {const response = await api.editInterFaceApi(editInterId, formData)if (response.status === 200) {// 关闭窗口isShowDrawer.value = falseElNotification({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接收数据。