feat:前端项目,完成在线调试功能

ui/yangyi-open-api-platform-ui/src/commom/api/interfaceInfo.js

@@ -84,5 +84,11 @@ export function updateInterfaceParam(data) {
         data
     })
 }
-
+export function onlineDebug(data) {
+    return request({
+        url: '/interfaceInfo/onlineDebug',
+        method: 'post',
+        data
+    })
+}
 

ui/yangyi-open-api-platform-ui/src/views/interfaceInfo/detail.vue

@@ -133,6 +133,53 @@
       </el-descriptions>
     </el-card>
 
+    <!--在线调试参数表单-->
+    <el-card class="info-card" shadow="never">
+      <template #header>
+        <div class="card-header">
+          <el-icon><Document /></el-icon>
+          <span>调试参数</span>
+        </div>
+      </template>
+
+      <el-descriptions :column="4" border>
+
+        <template v-for="(param,index) in onlineDebugParam.params" :key="index">
+          <el-descriptions-item label="参数名称">
+            {{ param.name }}
+          </el-descriptions-item>
+
+          <el-descriptions-item label="参数类型">
+            <span class="url-text">{{ param.type == 0 ? 'QUERY' : 'BODY' }}</span>
+          </el-descriptions-item>
+
+          <el-descriptions-item label="参数数据类型">
+            <el-tag :type="getParamType(param.paramType)">
+              {{ param.paramType }}
+            </el-tag>
+          </el-descriptions-item>
+
+          <el-descriptions-item label="参数值">
+            <el-input v-model="param.value" placeholder="请输入参数值"/>
+            <!--{{ param.description }}-->
+          </el-descriptions-item>
+        </template>
+      </el-descriptions>
+    </el-card>
+    <!-- 在线调试结果 -->
+    <el-card class="info-card" shadow="never">
+      <template #header>
+        <div class="card-header">
+          <el-icon><Finished /></el-icon>
+          <span>调试结果</span>
+        </div>
+      </template>
+
+      <div class="code-block">
+        <!--<textarea v-model="onlineDebugResult" readonly style="width: 100%; height: 200px; border: none; background-color: #f5f7fa; padding: 10px; font-size: 14px; line-height: 1.5; color: #606266; font-family: Consolas, Menlo, Monaco, 'Courier New', monospace;"></textarea >-->
+        <pre>{{ formatJson(onlineDebugResult) }}</pre>
+      </div>
+    </el-card>
     <!-- 操作按钮 -->
     <div class="action-buttons">
       <el-button @click="handleBack">
@@ -158,7 +205,7 @@ import {
   VideoPlay
 } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
-import {getInterfaceById, getInterfaceParamByInterfaceInfoId} from "../../commom/api/interfaceInfo.js";
+import {getInterfaceById, getInterfaceParamByInterfaceInfoId, onlineDebug} from "/src/commom/api/interfaceInfo.js";
 
 const route = useRoute()
 const router = useRouter()
@@ -186,70 +233,26 @@ const params = ref([
     description: '名称'
   }
 ])
-
-// 模拟接口数据
-const mockInterfaceData = {
-  '1': {
-    id: '1',
-    name: '获取用户信息',
-    description: '根据用户ID获取用户的详细信息，包括基本信息、角色和权限等',
-    url: '/api/v1/users/{id}',
-    requestHeader: '{\n  "Content-Type": "application/json",\n  "Authorization": "Bearer {token}"\n}',
-    responseHeader: '{\n  "Content-Type": "application/json",\n  "X-RateLimit-Limit": "100",\n  "X-RateLimit-Remaining": "99"\n}',
-    status: 1,
-    method: 'GET',
-    userId: 'admin',
-    createTime: new Date('2024-01-15 10:30:00')
-  },
-  '2': {
-    id: '2',
-    name: '创建用户',
-    description: '创建新的用户账户，需要提供用户名、邮箱和密码等必要信息',
-    url: '/api/v1/users',
-    requestHeader: '{\n  "Content-Type": "application/json",\n  "Authorization": "Bearer {token}"\n}',
-    responseHeader: '{\n  "Content-Type": "application/json",\n  "Location": "/api/v1/users/{id}"\n}',
-    status: 1,
-    method: 'POST',
-    userId: 'admin',
-    createTime: new Date('2024-01-16 14:20:00')
-  },
-  '3': {
-    id: '3',
-    name: '更新用户信息',
-    description: '更新指定用户的个人信息，可以修改用户名、邮箱、头像等字段',
-    url: '/api/v1/users/{id}',
-    requestHeader: '{\n  "Content-Type": "application/json",\n  "Authorization": "Bearer {token}",\n  "If-Match": "{etag}"\n}',
-    responseHeader: '{\n  "Content-Type": "application/json",\n  "ETag": "{new_etag}"\n}',
-    status: 0,
-    method: 'PUT',
-    userId: 'admin',
-    createTime: new Date('2024-01-17 09:15:00')
-  },
-  '4': {
-    id: '4',
-    name: '删除用户',
-    description: '从系统中永久删除指定的用户账户，此操作不可逆，请谨慎使用',
-    url: '/api/v1/users/{id}',
-    requestHeader: '{\n  "Content-Type": "application/json",\n  "Authorization": "Bearer {token}"\n}',
-    responseHeader: '{\n  "Content-Type": "application/json"\n}',
-    status: 1,
-    method: 'DELETE',
-    userId: 'admin',
-    createTime: new Date('2024-01-18 16:45:00')
-  },
-  '5': {
-    id: '5',
-    name: '查询用户列表',
-    description: '分页查询用户列表信息，支持条件筛选和排序',
-    url: '/api/v1/users/list',
-    requestHeader: '{\n  "Content-Type": "application/json",\n  "Authorization": "Bearer {token}"\n}',
-    responseHeader: '{\n  "Content-Type": "application/json",\n  "X-Total-Count": "100",\n  "X-Page-Size": "20"\n}',
-    status: 1,
-    method: 'GET',
-    userId: 'admin',
-    createTime: new Date('2024-01-19 11:20:00')
-  }
-}
+const onlineDebugParam = ref({
+  path:'',
+  params:[{
+    name:'',
+    value:'',
+    type:0,
+    paramType:''
+  }]
+})
+const onlineDebugResult = ref('')
+
+const onlineDebugForm = ref({
+  path:'',
+  params:[{
+    name:'',
+    value:'',
+    type:0,
+    paramType:''
+  }]
+})
 
 // 根据HTTP方法获取对应的标签类型
 const getMethodType = (method) => {
@@ -306,16 +309,25 @@ const handleBack = () => {
 
 // 测试接口
 const handleTestInterface = () => {
-  ElMessage.info(`开始测试接口: ${interfaceData.value.name}`)
-  // 这里可以添加接口测试逻辑
+  Object.assign(onlineDebugForm,onlineDebugParam)
+  onlineDebug(onlineDebugForm.value).then(res=>{
+    if(res.code === 200){
+      ElMessage.success(res.msg)
+      onlineDebugResult.value = res.data
+    }else{
+      ElMessage.error(res.message)
+    }
+  })
 }
 
+
 // 获取接口详情
 const fetchInterfaceDetail = () => {
   const id = route.params.id
   getInterfaceById(id).then((res)=>{
     if(res.code === 200){
       interfaceData.value = res.data
+      onlineDebugParam.value.path = interfaceData.value.url
     }else{
       ElMessage.error(res.message)
       handleBack()
@@ -328,6 +340,7 @@ const fetchInterfaceParam = () =>{
   getInterfaceParamByInterfaceInfoId(id).then(res =>{
     if(res.code === 200){
       params.value = res.data
+      Object.assign(onlineDebugParam.value.params, res.data)
     }else{
       ElMessage.error(res.message)
     }