说明：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

@@ -1,86 +1,90 @@
-import Vue from 'vue'
+import Vue from 'vue'
-
+
-import Cookies from 'js-cookie'
+import Cookies from 'js-cookie'
-
+
-import Element from 'element-ui'
+import Element from 'element-ui'
-import './assets/styles/element-variables.scss'
+import './assets/styles/element-variables.scss'
-
+
-import '@/assets/styles/index.scss' // global css
+import '@/assets/styles/index.scss' // global css
-import '@/assets/styles/ruoyi.scss' // ruoyi css
+import '@/assets/styles/ruoyi.scss' // ruoyi css
-import App from './App'
+import App from './App'
-import store from './store'
+import store from './store'
-import router from './router'
+import router from './router'
-import directive from './directive' // directive
+import directive from './directive' // directive
-import plugins from './plugins' // plugins
+import plugins from './plugins' // plugins
-import { download } from '@/utils/request'
+import { download } from '@/utils/request'
-
+
-import './assets/icons' // icon
+import './assets/icons' // icon
-import './permission' // permission control
+import './permission' // permission control
-import { getDicts } from "@/api/system/dict/data";
+import { getDicts } from "@/api/system/dict/data";
-import { getConfigKey } from "@/api/system/config";
+import { getConfigKey } from "@/api/system/config";
-import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
+import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
-// 分页组件
+// 分页组件
-import Pagination from "@/components/Pagination";
+import Pagination from "@/components/Pagination";
-// 自定义表格工具组件
+// 自定义表格工具组件
-import RightToolbar from "@/components/RightToolbar"
+import RightToolbar from "@/components/RightToolbar"
-// 富文本组件
+// 富文本组件
-import Editor from "@/components/Editor"
+import Editor from "@/components/Editor"
-// 文件上传组件
+// 文件上传组件
-import FileUpload from "@/components/FileUpload"
+import FileUpload from "@/components/FileUpload"
-// 图片上传组件
+// 图片上传组件
-import ImageUpload from "@/components/ImageUpload"
+import ImageUpload from "@/components/ImageUpload"
-// 图片预览组件
+// 图片预览组件
-import ImagePreview from "@/components/ImagePreview"
+import ImagePreview from "@/components/ImagePreview"
-// 字典标签组件
+// 字典标签组件
-import DictTag from '@/components/DictTag'
+import DictTag from '@/components/DictTag'
-// 头部标签组件
+// 头部标签组件
-import VueMeta from 'vue-meta'
+import VueMeta from 'vue-meta'
-// 字典数据组件
+// 字典数据组件
-import DictData from '@/components/DictData'
+import DictData from '@/components/DictData'
-
+
-// 全局方法挂载
+// 全局方法挂载
-Vue.prototype.getDicts = getDicts
+Vue.prototype.getDicts = getDicts
-Vue.prototype.getConfigKey = getConfigKey
+Vue.prototype.getConfigKey = getConfigKey
-Vue.prototype.parseTime = parseTime
+Vue.prototype.parseTime = parseTime
-Vue.prototype.resetForm = resetForm
+Vue.prototype.resetForm = resetForm
-Vue.prototype.addDateRange = addDateRange
+Vue.prototype.addDateRange = addDateRange
-Vue.prototype.selectDictLabel = selectDictLabel
+Vue.prototype.selectDictLabel = selectDictLabel
-Vue.prototype.selectDictLabels = selectDictLabels
+Vue.prototype.selectDictLabels = selectDictLabels
-Vue.prototype.download = download
+Vue.prototype.download = download
-Vue.prototype.handleTree = handleTree
+Vue.prototype.handleTree = handleTree
-
+
-// 全局组件挂载
+// 全局组件挂载
-Vue.component('DictTag', DictTag)
+Vue.component('DictTag', DictTag)
-Vue.component('Pagination', Pagination)
+Vue.component('Pagination', Pagination)
-Vue.component('RightToolbar', RightToolbar)
+Vue.component('RightToolbar', RightToolbar)
-Vue.component('Editor', Editor)
+Vue.component('Editor', Editor)
-Vue.component('FileUpload', FileUpload)
+Vue.component('FileUpload', FileUpload)
-Vue.component('ImageUpload', ImageUpload)
+Vue.component('ImageUpload', ImageUpload)
-Vue.component('ImagePreview', ImagePreview)
+Vue.component('ImagePreview', ImagePreview)
-
+
-Vue.use(directive)
+Vue.use(directive)
-Vue.use(plugins)
+Vue.use(plugins)
-Vue.use(VueMeta)
+Vue.use(VueMeta)
-DictData.install()
+DictData.install()
-
+
-/**
+// json格式化显示
- * If you don't want to use mock-server
+import JsonViewer from 'vue-json-viewer'
- * you want to use MockJs for mock api
+Vue.use(JsonViewer)
- * you can execute: mockXHR()
+
- *
+/**
- * Currently MockJs will be used in the production environment,
+ * If you don't want to use mock-server
- * please remove it before going online! ! !
+ * you want to use MockJs for mock api
- */
+ * you can execute: mockXHR()
-
+ *
-Vue.use(Element, {
+ * Currently MockJs will be used in the production environment,
-  size: Cookies.get('size') || 'medium' // set element-ui default size
+ * please remove it before going online! ! !
-})
+ */
-
+
-Vue.config.productionTip = false
+Vue.use(Element, {
-
+  size: Cookies.get('size') || 'medium' // set element-ui default size
-new Vue({
+})
-  el: '#app',
+
-  router,
+Vue.config.productionTip = false
-  store,
+
-  render: h => h(App)
+new Vue({
-})
+  el: '#app',
+  router,
+  store,
+  render: h => h(App)
+})

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">
+      <el-table-column label="是否请求成功" align="center" prop="isSuccess" :show-overflow-tooltip="true">
-          <template slot-scope="scope">
+        <template slot-scope="scope">
-            <el-tag :type="scope.row.isSuccess==='成功'?'success':'danger'" size="small">{{ scope.row.isSuccess }}</el-tag>
+          <el-tag :type="scope.row.isSuccess==='成功'?'success':'danger'" size="small">{{ scope.row.isSuccess }}</el-tag>
-          </template>
+        </template>
-        </el-table-column>
+      </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 {