说明:1、api日志页面json格式化显示(大坑)

2、坑1 ,后端使用fastjson转换json到前端会有反斜杠,导致前端jsonview组件识别不出json,这个问题困扰了几个小时,最后通过定义两个data里面的值,用JSON.parse()转换,最后获取到真正的json
pull/254/head
xjs 4 years ago
parent 3e9ee267a4
commit 82d7c2b0d6

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

@ -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)
})

@ -52,13 +52,21 @@
<el-table-column label="请求参数" align="center" prop="request" :show-overflow-tooltip="true"/> <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="response" :show-overflow-tooltip="true"/>
<el-table-column label="创建时间" align="center" prop="createTime" :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"> <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope"> <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 <el-button
circle circle
type="danger" type="danger"
@ -71,6 +79,35 @@
</el-table-column> </el-table-column>
</el-table> </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 <pagination
v-show="total>0" v-show="total>0"
:total="total" :total="total"
@ -114,6 +151,11 @@ export default {
}, },
// //
form: {}, form: {},
//json
request: {},
response: {},
// //
rules: {} rules: {}
}; };
@ -146,7 +188,7 @@ export default {
request: null, request: null,
response: null, response: null,
isSuccess: null, isSuccess: null,
createTime:null createTime: null
}; };
this.resetForm("form"); this.resetForm("form");
}, },
@ -155,6 +197,13 @@ export default {
this.queryParams.pageNum = 1; this.queryParams.pageNum = 1;
this.getList(); this.getList();
}, },
/** 详细按钮操作 */
handleView(row) {
this.open = true;
this.form = row;
this.request = eval('(' + this.form.request + ')');
this.response=JSON.parse(this.form.response)
},
/** 重置按钮操作 */ /** 重置按钮操作 */
resetQuery() { resetQuery() {
this.resetForm("queryForm"); this.resetForm("queryForm");

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

Loading…
Cancel
Save