1、接口请求
首先打开views/operation/index.vue文件进行编写页面。
我们先写接口，我们首先在script里引入接口
import { fetchLogList } from '@/api/operation'
然后写获取接口里面的数据，在methods方法里面写。还记得我们封装的返回类，返回的参数是什么嘛，不记得可以去看后端的JsonResult类，我们将数据都封装到了result里面了，我们前端只要去result里面去拿数据即可。数据的请求为JSON格式。
getList() { this.listLoading = true var body = this.listQuery; fetchLogList({body}).then(response => { this.list = response.data.result this.count = response.data.totalSize this.listLoading = false }) },
由于我们这里使用的是JSON格式请求，我们的后端也是接收的JSON，所以我们在传递参数的时候，以现在后端的写法是接收不到参数的（你可以自己实验一下，后端的代码可以先不改动，看看参数是否可以接收到），我们现在先去后端改一下Controller接口的接收参数。（注意其余的接口只要是前端传递参数都要按照以下写）。
我们先写一个公共的类，把接口的接收的参数外边再包一层，和controller包同级下新建一个common包，然后里面添加一个PageRequestApi.java类，用于封装请求的参数，也就是参数外边再包一层大括号。
package com.blog.personalblog.common; import com.fasterxml.jackson.annotation.JsonIgnoreProperties; import javax.validation.Valid; /** * @author: SuperMan * @create: 2022-04-26 **/ @JsonIgnoreProperties( ignoreUnknown = true ) public class PageRequestApi<T> { @Valid private T body = null; public PageRequestApi() { } public PageRequestApi(T body) { this.body = body; } public static <T> PageRequestApi<T> instance(T body) { return new PageRequestApi(body); } public T getBody() { return this.body; } public void setBody(final T body) { this.body = body; } }
写完之后，然后打开OperationLogController.java类，然后将操作日志的接口进行修改，以下代码就是将PageRequest包起来，当做一个泛型。
public JsonResult<Object> OperationLogListPage(@RequestBody @Valid PageRequestApi<PageRequest> pageRequest) { }
我们包起来之后，如何拿到前端传来的参数呢，别着急，我们只需要将PageRequestApi对象下的body获取到就可以拿到传来的参数
@ApiOperation(value = "操作日志列表") @PostMapping("/operationLog/list") public JsonResult<Object> OperationLogListPage(@RequestBody @Valid PageRequestApi<PageRequest> pageRequest) { List<OperationLog> operationLogPage = operationLogService.getOperationLogPage(pageRequest.getBody()); PageInfo pageInfo = new PageInfo(operationLogPage); PageResult pageResult = PageUtil.getPageResult(pageRequest.getBody(), pageInfo); return JsonResult.success(pageResult); }
上边代码看到了吧，只要pageRequest.getBody()就可以获取到了，就比之前深了一层。好了，需要改的就那么多，下面还是进行页面编写。
2、页面编写
页面的编写没什么难度，主要是将我们拿到的数据进行遍历然后展示，我们基本上都是拿表格进行展示数据，这个都是element封装好的，我们直接拿来使用即可。
<template> <el-card class="main-card"> <!-- 设置标题操作日志 --> <div class="title">操作日志</div> <div class="operation-container"></div> <el-table v-loading="listLoading" :data="list" fit highlight-current-row style="width: 90%; margin-top:30px;"> <el-table-column align="center" label="ID" > <template slot-scope="scope"> <span>{{ scope.row.id }}</span> </template> </el-table-column> <el-table-column align="center" label="操作IP"> <template slot-scope="scope"> <span>{{ scope.row.operationIp}}</span> </template> </el-table-column> <el-table-column align="center" label="操作IP地址"> <template slot-scope="scope"> <span>{{ scope.row.operaLocation}}</span> </template> </el-table-column> <el-table-column align="center" label="方法名"> <template slot-scope="scope"> <span>{{ scope.row.methods}}</span> </template> </el-table-column> <el-table-column align="center" label="请求参数"> <template slot-scope="scope"> <span>{{ scope.row.args}}</span> </template> </el-table-column> <el-table-column align="center" label="操作人员"> <template slot-scope="scope"> <span>{{ scope.row.operationName}}</span> </template> </el-table-column> <el-table-column align="center" label="请求方式"> <template slot-scope="scope"> <el-tag :type="tagType(scope.row.operationType)"> {{ scope.row.operationType }} </el-tag> </template> </el-table-column> <el-table-column align="center" label="返回结果"> <template slot-scope="scope"> <span>{{ scope.row.returnValue}}</span> </template> </el-table-column> <el-table-column align="center" label="操作日期"> <template slot-scope="scope"> <span>{{ scope.row.createTime}}</span> </template> </el-table-column> </el-table> </el-card> </template>
这里我在请求方式上面优化了一下页面效果，需要我们在export default中添加个方法。也就是个switch判断，根据后端返回来的数据，来判断是加什么颜色。
computed: { tagType() { return function(type) { switch (type) { case "SYSTEM": return ""; case "LOGIN": return "success"; case "INSERT": return "warning"; case "SELECT": return "warning"; case "UPDATE": return "warning"; case "DELETE": return "danger"; } }; } }
3、分页
然后就是分页。分页作为数据列表的很重要的一部分，总不能把所有的数据全部放到页面上展示出来，显然不是我们想要的，我们上边修改的传参的请求主要是为了分页进行修改的。
我们在el-card标签中添加分页效果。
<!-- 分页 --> <el-pagination class="pagination-container" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="this.listQuery.pageNum" :page-size="this.listQuery.pageSize" :total="count" :page-sizes="[10, 20, 30]" layout="total, sizes, prev, pager, next, jumper" />
添加返回的数据
data() { return { list: null, listLoading: true, count: 0, listQuery: { pageNum: 1, pageSize: 10 } } },
根据官方文档，我们还要写两个方法用来传递页码数。
handleSizeChange(pageSize) { this.listQuery.pageSize = pageSize this.getList() }, handleCurrentChange(pageNum) { this.listQuery.pageNum = pageNum this.getList() }
基本上到这里页面全部写完了，也没啥好说的，多看几遍就可以了，做过html的都差不多还可以，我将这个全部的代码贴出来。看看自己还遗漏了哪些，自行补充。
<template> <el-card class="main-card"> <!-- 设置标题操作日志 --> <div class="title">操作日志</div> <div class="operation-container"></div> <el-table v-loading="listLoading" :data="list" fit highlight-current-row style="width: 90%; margin-top:30px;"> <el-table-column align="center" label="ID" > <template slot-scope="scope"> <span>{{ scope.row.id }}</span> </template> </el-table-column> <el-table-column align="center" label="操作IP"> <template slot-scope="scope"> <span>{{ scope.row.operationIp}}</span> </template> </el-table-column> <el-table-column align="center" label="操作IP地址"> <template slot-scope="scope"> <span>{{ scope.row.operaLocation}}</span> </template> </el-table-column> <el-table-column align="center" label="方法名"> <template slot-scope="scope"> <span>{{ scope.row.methods}}</span> </template> </el-table-column> <el-table-column align="center" label="请求参数"> <template slot-scope="scope"> <span>{{ scope.row.args}}</span> </template> </el-table-column> <el-table-column align="center" label="操作人员"> <template slot-scope="scope"> <span>{{ scope.row.operationName}}</span> </template> </el-table-column> <el-table-column align="center" label="请求方式"> <template slot-scope="scope"> <el-tag :type="tagType(scope.row.operationType)"> {{ scope.row.operationType }} </el-tag> </template> </el-table-column> <el-table-column align="center" label="返回结果"> <template slot-scope="scope"> <span>{{ scope.row.returnValue}}</span> </template> </el-table-column> <el-table-column align="center" label="操作日期"> <template slot-scope="scope"> <span>{{ scope.row.createTime}}</span> </template> </el-table-column> </el-table> <!-- 分页 --> <el-pagination class="pagination-container" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="this.listQuery.pageNum" :page-size="this.listQuery.pageSize" :total="count" :page-sizes="[10, 20, 30]" layout="total, sizes, prev, pager, next, jumper" /> </el-card> </template> <script> import { fetchLogList } from '@/api/operation' export default { name: 'operationLogList', created() { this.getList() }, data() { return { list: null, listLoading: true, count: 0, listQuery: { pageNum: 1, pageSize: 10 } } }, methods: { getList() { this.listLoading = true var body = this.listQuery; fetchLogList({body}).then(response => { this.list = response.data.result this.count = response.data.totalSize this.listLoading = false }) }, handleSizeChange(pageSize) { this.listQuery.pageSize = pageSize this.getList() }, handleCurrentChange(pageNum) { this.listQuery.pageNum = pageNum this.getList() } }, computed: { tagType() { return function(type) { switch (type) { case "SYSTEM": return ""; case "LOGIN": return "success"; case "INSERT": return "warning"; case "SELECT": return "warning"; case "UPDATE": return "warning"; case "DELETE": return "danger"; } }; } } } </script> <style rel="stylesheet/scss" lang="scss" scoped> .pagination-container { float: right; margin-top: 1.25rem; margin-bottom: 1.25rem; } .title { position: absolute; left: 0; font-size: 16px; font-weight: 700; color: #202a34; } </style>
好啦，到这里，我们基本上把操作日志的页面搞完了，可能页面有点丑，后期在优化吧，我们启动后端项目，别忘了启动redis，然后再将前端项目启动起来，登录进入，打开日志中心下的操作日志，看一下是否有数据展示，然后还有分页的效果。
4、中文化
我们看到页面的分页，页数，共多少条之类的都是英文，我们要将这些进行汉化，所以我们打开前端项目，找到src/main.js，然后注释掉以下这一句：
//import locale from 'element-ui/lib/locale/lang/en' // lang i18n
然后添加以下这一句即可
import locale from 'element-ui/lib/locale/lang/zh-CN'
修改完，保存看一下页面是不是出现了汉字，如果是的，说明已经汉化了。
四、总结
好啦，这一篇我们先写到这里吧，我们的操作日志的页面完成了,有想学习java或者技术交流的可以加入我的群：626974338，大家一起学习。还有一个下面的登录日志的页面，我就在这一篇不写了，大家自己先仿照着操作日志的写，下一篇我们再说。
