说明：1、api日志页面json格式化显示（大坑）

2、坑1 ，后端使用fastjson转换json到前端会有反斜杠，导致前端jsonview组件识别不出json，这个问题困扰了几个小时，最后通过定义两个data里面的值，用JSON.parse()转换，最后获取到真正的json

ruoyi-ui/package.json

@@ -55,6 +55,7 @@
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
+    "vue-json-viewer": "^2.2.21",
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",

ruoyi-ui/src/main.js

@@ -63,6 +63,10 @@ Vue.use(plugins)
 Vue.use(VueMeta)
 DictData.install()
 
+// json格式化显示
+import JsonViewer from 'vue-json-viewer'
+Vue.use(JsonViewer)
+
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api

ruoyi-ui/src/views/business/openapi/log/index.vue

@@ -52,13 +52,21 @@
       <el-table-column label="请求参数" align="center" prop="request" :show-overflow-tooltip="true"/>
       <el-table-column label="响应参数" align="center" prop="response" :show-overflow-tooltip="true"/>
       <el-table-column label="创建时间" align="center" prop="createTime" :show-overflow-tooltip="true"/>
-        <el-table-column label="是否请求成功" align="center" prop="isSuccess" :show-overflow-tooltip="true">
-          <template slot-scope="scope">
-            <el-tag :type="scope.row.isSuccess==='成功'?'success':'danger'" size="small">{{ scope.row.isSuccess }}</el-tag>
-          </template>
-        </el-table-column>
+      <el-table-column label="是否请求成功" align="center" prop="isSuccess" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          <el-tag :type="scope.row.isSuccess==='成功'?'success':'danger'" size="small">{{ scope.row.isSuccess }}</el-tag>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
+          <el-tooltip class="item" effect="dark" content="点击查看详情" placement="top-start">
+            <el-button circle
+                       type=""
+                       icon="el-icon-view"
+                       @click="handleView(scope.row,scope.index)"
+                       v-hasPermi="['openapi:log:query']"
+            ></el-button>
+          </el-tooltip>
           <el-button
             circle
             type="danger"
@@ -71,6 +79,35 @@
       </el-table-column>
     </el-table>
 
+
+    <el-dialog title="内容详细" :visible.sync="open" width="700px" append-to-body>
+      <el-row>
+        <el-col :span="24">
+          请求参数：
+        </el-col>
+        <el-col :span="24">
+          <json-viewer :value=request
+                       :expand-depth=5
+                       copyable
+                       boxed
+                       sort></json-viewer>
+        </el-col>
+        <el-col :span="24">
+          响应参数：
+        </el-col>
+        <el-col :span="24">
+          <json-viewer :value="response"
+                       :expand-depth=5
+                       copyable
+                       boxed
+                       sort></json-viewer>
+        </el-col>
+      </el-row>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="open = false">关 闭</el-button>
+      </div>
+    </el-dialog>
+
     <pagination
       v-show="total>0"
       :total="total"
@@ -114,6 +151,11 @@ export default {
       },
       // 表单参数
       form: {},
+
+      //json格式数据
+      request: {},
+      response: {},
+
       // 表单校验
       rules: {}
     };
@@ -146,7 +188,7 @@ export default {
         request: null,
         response: null,
         isSuccess: null,
-        createTime:null
+        createTime: null
       };
       this.resetForm("form");
     },
@@ -155,6 +197,13 @@ export default {
       this.queryParams.pageNum = 1;
       this.getList();
     },
+    /** 详细按钮操作 */
+    handleView(row) {
+      this.open = true;
+      this.form = row;
+      this.request = eval('(' + this.form.request + ')');
+      this.response=JSON.parse(this.form.response)
+    },
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");

xjs-business/xjs-business-openapi/src/main/java/com/xjs/common/aop/ApiLogAspect.java

@@ -111,7 +111,9 @@ public class ApiLogAspect {
         }
         entity.setMethod(apiLog.method());
         entity.setRequest(builder.toString());
-        entity.setResponse(jsonResult.toString());
+        if (Objects.nonNull(jsonResult)) {
+            entity.setResponse(jsonResult.toString());
+        }
         if (e != null) {
             entity.setIsSuccess(StatusEnum.ERROR);
         }else {