clunt
/
RuoYi-Cloud
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

2、坑1 ，后端使用fastjson转换json到前端会有反斜杠，导致前端jsonview组件识别不出json，这个问题困扰了几个小时，最后通过定义两个data里面的值，用JSON.parse()转换，最后获取到真正的json
This commit is contained in:
xjs 2022-01-08 02:34:57 +08:00
parent 3e9ee267a4
commit 82d7c2b0d6
4 changed files with 149 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ruoyi-ui/package.json
View File

@ -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",

176
ruoyi-ui/src/main.js
View File

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

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

@ -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");

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

@ -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 {