整理代码

test-test/src/main/java/com/test/test/controller/TestApiController.java

@@ -2,9 +2,9 @@ package com.test.test.controller;
 
 import java.util.List;
 
+import com.test.test.domain.qo.IDQO;
 import com.test.test.domain.qo.TestApiListQO;
 import jakarta.annotation.Resource;
-import jakarta.servlet.http.HttpServletResponse;
 import org.springframework.validation.annotation.Validated;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PostMapping;
@@ -18,7 +18,6 @@ import com.test.common.core.domain.AjaxResult;
 import com.test.common.enums.BusinessType;
 import com.test.test.domain.TestApi;
 import com.test.test.service.ITestApiService;
-import com.test.common.utils.poi.ExcelUtil;
 import com.test.common.core.page.TableDataInfo;
 
 /**
@@ -36,29 +35,18 @@ public class TestApiController extends BaseController {
      * 查询接口列表
      */
     @GetMapping("/list")
-    public TableDataInfo list(@Validated TestApiListQO testApi) {
+    public TableDataInfo list(@Validated TestApiListQO qo) {
         startPage();
-        List<TestApi> list = testApiService.selectTestApiList(testApi);
+        List<TestApi> list = testApiService.selectTestApiList(qo);
         return getDataTable(list);
     }
 
-    /**
-     * 导出接口列表
-     */
-    @Log(title = "接口", businessType = BusinessType.EXPORT)
-    @PostMapping("/export")
-    public void export(HttpServletResponse response, TestApiListQO testApi) {
-        List<TestApi> list = testApiService.selectTestApiList(testApi);
-        ExcelUtil<TestApi> util = new ExcelUtil<TestApi>(TestApi.class);
-        util.exportExcel(response, list, "接口数据");
-    }
-
     /**
      * 获取接口详细信息
      */
-    @GetMapping(value = "/{id}")
+    @PostMapping(value = "/detail")
-    public AjaxResult getInfo(@PathVariable("id") Long id) {
+    public AjaxResult getInfo(@RequestBody IDQO qo) {
-        return success(testApiService.selectTestApiById(id));
+        return success(testApiService.selectTestApiById(qo.getId()));
     }
 
     /**
@@ -83,8 +71,8 @@ public class TestApiController extends BaseController {
      * 删除接口
      */
     @Log(title = "接口", businessType = BusinessType.DELETE)
-    @PostMapping("/del/{ids}")
+    @PostMapping("/del")
-    public AjaxResult remove(@PathVariable Long[] ids) {
+    public AjaxResult remove(@RequestBody IDQO qo) {
-        return toAjax(testApiService.deleteTestApiByIds(ids));
+        return toAjax(testApiService.deleteTestApiById(qo.getId()));
     }
 }

test-test/src/main/java/com/test/test/controller/TestApiGroupController.java

@@ -2,6 +2,7 @@ package com.test.test.controller;
 
 import java.util.List;
 
+import com.test.test.domain.qo.IDQO;
 import jakarta.annotation.Resource;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PostMapping;
@@ -58,8 +59,8 @@ public class TestApiGroupController extends BaseController {
      * 删除接口节点
      */
     @Log(title = "接口节点", businessType = BusinessType.DELETE)
-    @PostMapping("/del/{id}")
+    @PostMapping("/del")
-    public AjaxResult remove(@PathVariable Long id) {
+    public AjaxResult remove(@RequestBody IDQO qo) {
-        return toAjax(testApiGroupService.deleteTestApiGroupById(id));
+        return toAjax(testApiGroupService.deleteTestApiGroupById(qo.getId()));
     }
 }

test-test/src/main/java/com/test/test/domain/qo/IDQO.java

@@ -0,0 +1,8 @@
+package com.test.test.domain.qo;
+
+import lombok.Data;
+
+@Data
+public class IDQO {
+    private Long id;
+}

test-test/src/main/java/com/test/test/mapper/TestApiMapper.java

@@ -22,10 +22,10 @@ public interface TestApiMapper {
     /**
      * 查询接口列表
      *
-     * @param testApi 接口
+     * @param qo 接口
      * @return 接口集合
      */
-    public List<TestApi> selectTestApiList(TestApiListQO testApi);
+    public List<TestApi> selectTestApiList(TestApiListQO qo);
 
     /**
      * 新增接口

test-test/src/main/java/com/test/test/service/ITestApiService.java

@@ -22,10 +22,10 @@ public interface ITestApiService {
     /**
      * 查询接口列表
      *
-     * @param testApi 接口
+     * @param qo 接口
      * @return 接口集合
      */
-    public List<TestApi> selectTestApiList(TestApiListQO testApi);
+    public List<TestApi> selectTestApiList(TestApiListQO qo);
 
     /**
      * 新增接口

test-test/src/main/java/com/test/test/service/impl/TestApiServiceImpl.java

@@ -34,12 +34,12 @@ public class TestApiServiceImpl implements ITestApiService {
     /**
      * 查询接口列表
      *
-     * @param testApi 接口
+     * @param qo 接口
      * @return 接口
      */
     @Override
-    public List<TestApi> selectTestApiList(TestApiListQO testApi) {
+    public List<TestApi> selectTestApiList(TestApiListQO qo) {
-        return testApiMapper.selectTestApiList(testApi);
+        return testApiMapper.selectTestApiList(qo);
     }
 
     /**

test-test/src/main/resources/mapper/test/TestApiMapper.xml

@@ -24,16 +24,13 @@
         select id, group_id, name, method, uri, header, param, body, del_flag, create_by, create_time, update_by, update_time from test_api
     </sql>
 
-    <select id="selectTestApiList" parameterType="TestApi" resultMap="TestApiResult">
+    <select id="selectTestApiList" parameterType="TestApiListQO" resultMap="TestApiResult">
         <include refid="selectTestApiVo"/>
         <where>
             <if test="groupId != null "> and group_id = #{groupId}</if>
             <if test="name != null  and name != ''"> and name like concat('%', #{name}, '%')</if>
             <if test="method != null  and method != ''"> and method = #{method}</if>
             <if test="uri != null  and uri != ''"> and uri like concat('%', #{uri}, '%')</if>
-            <if test="header != null  and header != ''"> and header = #{header}</if>
-            <if test="param != null  and param != ''"> and param = #{param}</if>
-            <if test="body != null  and body != ''"> and body = #{body}</if>
         </where>
     </select>
 

test-ui/src/api/test/api.js

@@ -12,8 +12,9 @@ export function listApi(query) {
 // 查询接口详细
 export function getApi(id) {
   return request({
-    url: '/test/api/detail/' + id,
+    url: '/test/api/detail',
-    method: 'get'
+    method: 'post',
+    params: {id}
   })
 }
 
@@ -38,8 +39,9 @@ export function updateApi(data) {
 // 删除接口
 export function delApi(id) {
   return request({
-    url: '/test/api/del/' + id,
+    url: '/test/api/del/',
-    method: 'post'
+    method: 'post',
+    params: {id}
   })
 }
 
@@ -55,7 +57,7 @@ export function listGroup() {
 // 新增接口节点
 export function addGroup(data) {
   return request({
-    url: '/test/group',
+    url: '/test/group/add',
     method: 'post',
     data: data
   })
@@ -64,8 +66,8 @@ export function addGroup(data) {
 // 修改接口节点
 export function updateGroup(data) {
   return request({
-    url: '/test/group',
+    url: '/test/group/edit',
-    method: 'put',
+    method: 'post',
     data: data
   })
 }
@@ -73,7 +75,8 @@ export function updateGroup(data) {
 // 删除接口节点
 export function delGroup(id) {
   return request({
-    url: '/test/group/' + id,
+    url: '/test/group/del',
-    method: 'delete'
+    method: 'post',
+    params: {id}
   })
 }

test-ui/src/assets/styles/index.scss

@@ -122,6 +122,7 @@ aside {
 //main-container全局样式
 .app-container {
   padding: 20px;
+  min-height: calc(100vh - 84px);
 }
 
 .components-container {
@@ -180,3 +181,13 @@ aside {
     margin-bottom: 10px;
   }
 }
+
+aside {
+  background: unset !important;
+}
+
+.el-form-item__content {
+  .el-select {
+    width: 100%;
+  }
+}

test-ui/src/router/index.js

@@ -87,6 +87,20 @@ export const constantRoutes = [
         meta: { title: '个人中心', icon: 'user' }
       }
     ]
+  },
+  {
+    path: '/api/add',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: '',
+        component: () => import('@/views/test/api/add'),
+        name: 'ApiAdd',
+        noCache: true,
+        meta: { title: '添加接口', activeMenu: '/api' }
+      }
+    ]
   }
 ]
 

test-ui/src/views/test/api/add.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="app-container">
+    add
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ApiAdd",
+  dicts: ['http_method'],
+  created () {
+    console.log(this.$route.query.groupId)
+  },
+  data() {
+    return {
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {}
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

test-ui/src/views/test/api/index.vue

@@ -1,135 +1,66 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-container>
-      <el-form-item label="接口名称" prop="name">
+      <el-aside width="240px">
-        <el-input
+        <el-menu class="el-menu-vertical-demo">
-          v-model="queryParams.name"
+          <el-menu-item v-for="item in groupList" :index="item.id" :key="item.id" :disabled="item.name">
-          placeholder="请输入接口名称"
+            <span slot="title">{{ item.name }}</span>
-          clearable
+          </el-menu-item>
-          @keyup.enter.native="handleQuery"
+        </el-menu>
-        />
+      </el-aside>
-      </el-form-item>
+      <el-main>
-      <el-form-item label="请求类型" prop="method">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-        <el-select v-model="queryParams.method" placeholder="请输入接口请求类型" clearable @keyup.enter.native="handleQuery">
+          <el-form-item label="接口名称" prop="name">
-          <el-option
+            <el-input v-model="queryParams.name" placeholder="请输入接口名称" clearable @keyup.enter.native="handleQuery"/>
-            v-for="dict in dict.type.http_method"
+          </el-form-item>
-            :key="dict.value"
+          <el-form-item label="请求类型" prop="method">
-            :label="dict.label"
+            <el-select v-model="queryParams.method" placeholder="请输入接口请求类型" clearable @keyup.enter.native="handleQuery">
-            :value="dict.value"
+              <el-option v-for="dict in dict.type.http_method" :key="dict.value" :label="dict.label" :value="dict.value"/>
-          />
+            </el-select>
-        </el-select>
+          </el-form-item>
-      </el-form-item>
+          <el-form-item label="接口路径" prop="uri">
-      <el-form-item label="接口路径" prop="uri">
+            <el-input v-model="queryParams.uri" placeholder="请输入接口路径" clearable @keyup.enter.native="handleQuery"/>
-        <el-input
+          </el-form-item>
-          v-model="queryParams.uri"
+          <el-form-item>
-          placeholder="请输入接口路径"
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-          clearable
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-          @keyup.enter.native="handleQuery"
+          </el-form-item>
-        />
+        </el-form>
-      </el-form-item>
+        <el-row :gutter="10" class="mb8">
-      <el-form-item>
+          <el-col :span="1.5">
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-col>
-      </el-form-item>
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-form>
+        </el-row>
+        <el-table v-loading="loading" :data="apiList">
+          <el-table-column label="接口名称" align="center" prop="name"/>
+          <el-table-column label="接口请求类型" align="center" prop="method"/>
+          <el-table-column label="接口路径" align="center" prop="uri"/>
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
+              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
 
-    <el-row :gutter="10" class="mb8">
+        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
-      <el-col :span="1.5">
+      </el-main>
-        <el-button
+    </el-container>
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['test:api:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['test:api:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['test:api:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['test:api:export']"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="apiList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="接口id" align="center" prop="id" />
-      <el-table-column label="接口名称" align="center" prop="name" />
-      <el-table-column label="接口请求类型" align="center" prop="method" />
-      <el-table-column label="接口路径" align="center" prop="uri" />
-      <el-table-column label="接口请求头" align="center" prop="header" />
-      <el-table-column label="接口查询参数" align="center" prop="param" />
-      <el-table-column label="接口请求体" align="center" prop="body" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['test:api:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['test:api:remove']"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
 
     <!-- 添加或修改接口对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="接口名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入接口名称" />
+          <el-input v-model="form.name" placeholder="请输入接口名称"/>
         </el-form-item>
         <el-form-item label="接口请求类型" prop="method">
-          <el-input v-model="form.method" placeholder="请输入接口请求类型" />
+          <el-select v-model="form.method" placeholder="请选择接口请求类型" clearable>
+            <el-option v-for="dict in dict.type.http_method" :key="dict.value" :label="dict.label" :value="dict.value"/>
+          </el-select>
         </el-form-item>
         <el-form-item label="接口路径" prop="uri">
-          <el-input v-model="form.uri" placeholder="请输入接口路径" />
+          <el-input v-model="form.uri" placeholder="请输入接口路径"/>
-        </el-form-item>
-        <el-form-item label="删除标志" prop="delFlag">
-          <el-input v-model="form.delFlag" placeholder="请输入删除标志" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -141,7 +72,7 @@
 </template>
 
 <script>
-import { listApi, getApi, delApi, addApi, updateApi } from "@/api/test/api";
+import {listApi, getApi, delApi, addApi, updateApi, listGroup, delGroup, addGroup, updateGroup} from "@/api/test/api";
 
 export default {
   name: "Api",
@@ -150,16 +81,11 @@ export default {
     return {
       // 遮罩层
       loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
       // 显示搜索条件
       showSearch: true,
       // 总条数
       total: 0,
+      groupList: [],
       // 接口表格数据
       apiList: [],
       // 弹出层标题
@@ -170,24 +96,29 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
+        groupId: 1,
         name: null,
         method: null,
         uri: null,
-        header: null,
-        param: null,
-        body: null,
       },
       // 表单参数
       form: {},
       // 表单校验
-      rules: {
+      rules: {}
-      }
     };
   },
   created() {
+    this.getGroup();
     this.getList();
   },
   methods: {
+    getGroup() {
+      this.loading = true;
+      listGroup().then(response => {
+        this.groupList = response.data;
+        this.loading = false;
+      })
+    },
     /** 查询接口列表 */
     getList() {
       this.loading = true;
@@ -204,20 +135,7 @@ export default {
     },
     // 表单重置
     reset() {
-      this.form = {
+      this.form = {};
-        id: null,
-        name: null,
-        method: null,
-        uri: null,
-        header: null,
-        param: null,
-        body: null,
-        delFlag: null,
-        createBy: null,
-        createTime: null,
-        updateBy: null,
-        updateTime: null
-      };
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
@@ -230,27 +148,21 @@ export default {
       this.resetForm("queryForm");
       this.handleQuery();
     },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
-    },
     /** 新增按钮操作 */
     handleAdd() {
-      this.reset();
+      this.$tab.openPage("添加接口", "/api/add", {groupId: this.queryParams.groupId});
-      this.open = true;
-      this.title = "添加接口";
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset();
+      this.$tab.openPage("修改接口", "/api/add", {id: row.id || this.ids});
-      const id = row.id || this.ids
+      //
-      getApi(id).then(response => {
+      // this.reset();
-        this.form = response.data;
+      // const id = row.id || this.ids
-        this.open = true;
+      // getApi(id).then(response => {
-        this.title = "修改接口";
+      //   this.form = response.data;
-      });
+      //   this.open = true;
+      //   this.title = "修改接口";
+      // });
     },
     /** 提交按钮 */
     submitForm() {
@@ -274,20 +186,14 @@ export default {
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除接口编号为"' + row.id + '"的数据项？').then(function () {
-      this.$modal.confirm('是否确认删除接口编号为"' + ids + '"的数据项？').then(function() {
+        return delApi(row.id);
-        return delApi(ids);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      }).catch(() => {
+      });
     },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('test/api/export', {
-        ...this.queryParams
-      }, `api_${new Date().getTime()}.xlsx`)
-    }
   }
 };
 </script>