フロントエンドおよびバックエンドのログ管理モジュール機能の実装
(elementUIフレームワークを使用)
ログ管理モジュールのレンダリングです。
<!-- 搜索 -->
<div class="log-header">
<div>
<el-input
v-model="LogContent"
placeholder="请输入日志内容"
style="width: 220px; margin-right: 20px"
></el-input>
<el-button type="primary" @click="onSubmit">查询</el-button>
</div>
</div>
<!-- 表格 -->
<el-table
height="calc(100vh - 270px )"
border
stripe
style="width: 100%"
:data="list"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="SuName" label="账号" width="120">
</el-table-column>
<el-table-column prop="SuNickname" label="姓名" width="120">
</el-table-column>
<el-table-column prop="LogAction" label="动作" width="120">
</el-table-column>
<el-table-column prop="LogContent" label="内容" width="120">
</el-table-column>
<el-table-column prop="LogUrl" label="链接" width="120">
</el-table-column>
<el-table-column prop="LogIp" label="IP" width="120"> </el-table-column>
<el-table-column prop="LogCity" label="IP城市" width="120">
</el-table-column>
<el-table-column prop="LogCreateTime" label="时间" width="180">
</el-table-column>
<el-table-column prop="LogBrowserName" label="浏览器名称" width="120">
</el-table-column>
<el-table-column prop="LogSystemName" label="操作系统">
</el-table-column>
<!-- <el-table-column prop="date" label="操作">
<template slot-scope="scope">
<el-button @click="OnLook(scope.row.LogId)" icon="el-icon-view"
>查看</el-button
>
</template>
</el-table-column> -->
</el-table>
<!-- 分页 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page"
:page-sizes="[10, 20, 30, 40, 50, 60, 70, 100]"
:page-size.sync="rows"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
style="margin-top: 20px"
>
</el-pagination>
<script>
export default {
name: "Role",
props: {
tabIndex: {
type: [String, Number],
default: "3",
},
},
data() {
return {
list: [], //数据列表
page: 1, //当前页
rows: 10, //每页的条数
total: 0, //总数
LogContent: "", //根据内容搜索
};
},
mounted() {
// 获取日志列表数据
this.QuerySysLogTable();
},
methods: {
// 根据内容搜索
onSubmit(){
this.QuerySysLogTable()
},
// 每页显示的条数
handleSizeChange(val) {
this.rows = val;
},
// 当前第几页
handleCurrentChange(val) {
this.page = val;
},
// 获取日志列表数据
QuerySysLogTable() {
var newFormData = new FormData();
newFormData.append("page", this.page);
newFormData.append("rows", this.rows);
newFormData.append("tableName", "syslog");
newFormData.append("pagination", "1");
newFormData.append("columnsExists", "0");
// 内容过滤
if (this.LogContent != "") {
newFormData.append(
"wheres",
"[{ 'field': 'LogContent', 'relation': 'Contains','value':'" +
this.LogContent +
"'}]"
);
}
this.$api.QuerySysLogTable(newFormData).then((res) => {
// console.log(res);
this.list = res.data;
this.total = res.total;
});
},
},
};
</script>
<style lang="less">
.log-header {
display: flex;
margin-bottom: 10px;
justify-content: space-between;
}
</style>
インターフェース
// 获取日志数据列表
QuerySysLogTable: function(data) {
return Axios.post('/Setting/QuerySysLog',data)
},