若前端使用 layui 框架，需要 json 格式的数据，所以利用该类生成 json 数据
package com.example.file_monitor; import lombok.Data; import lombok.NoArgsConstructor; import org.springframework.stereotype.Component; import java.util.List; @Data @NoArgsConstructor @Component public class ApiJson { private int code; private String msg; private int count; private List<FileInfo> data; public ApiJson(int code,String msg,int count,List<FileInfo> data){ this.code=code; this.msg=msg; this.count=count; this.data=data; } } 四、前端实现（layui)借助 ajax 与后端进行数据交换
例如：
借助 layui table 实现表格的生成
借助 Echarts 实现统计图的生成 echarts
详情见 github 项目：（还没上传）
之前使用的是 layui 搭建前端，最近在学 Vue，所以打算利用 Vue 前后端分离重写一下前端。
目录结构：
FileMon 中划分为三大部分：头部（导航栏NavMenu)、侧边栏（图Echart）、main （表格）。
<template> <el-container> <el-header> <NavMenu></NavMenu> </el-header> <el-container> <el-aside> <Echart ref="ac_e"></Echart> </el-aside> <el-container> <el-main> <Table ref="ac_t" @exchange="exchange()"></Table> </el-main> </el-container> </el-container> </el-container> </template> <script> import NavMenu from './common/NavMenu.vue' import Table from './common/Table.vue' import Echart from './common/Echart.vue' export default { name: 'FileMon', components:{ NavMenu,Table,Echart }, methods: { exchange: function() { this.$refs.ac_e.$data.ac = this.$refs.ac_t.$data.ac this.$refs.ac_e.loads() } } } </script> <style> </style> 5.3 NavMenu <template> <el-menu :default-active="activeIndex2" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <el-menu-item index="1"></el-menu-item> <div> <h2>远程文件监控系统</h2> </div> </el-menu> </template> <script> export default { name: 'NavMenu' } </script> <style> </style> 5.4 表格 <template> <el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"> <el-table-column label="ID" prop="id"> </el-table-column> <el-table-column label="操作类型" prop="action"> </el-table-column> <el-table-column label="文件名" prop="name"> </el-table-column> <el-table-column label="日期" prop="time"> </el-table-column> <el-table-column> <template slot="header" slot-scope="scope"> <el-input v-model="search" size="mini" placeholder="输入关键字搜索"/> </template> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button> </template> </el-table-column> </el-table> </template> <script> export default { name: 'Table', data: function() { return { tableData: [], search: '', ac: [0,0,0,0] //统计文件各类操作数量，供绘制饼图 } }, methods: { handleEdit(index, row) { console.log(index, row) }, handleDelete(index, row) { this.$axios.get('delete?id='+row.id).then(resp =>{ console.log(resp.data) if( resp.data != 0){ this.$alert('删除成功') this.loads() //每次删除后更新一下表格中的数据 } }) }, loads(){ this.$axios.get('/all').then(resp =>{ if( resp){ this.tableData = resp.data this.counts() //每次更新表格数据后，统计各类操作数量 this.$emit('exchange') } }) }, counts(){ var i for( i in this.tableData){ //这个 for 循环 i 是列表tableData的索引 if(this.tableData[i].action == 'File Added') {this.ac[0] = this.ac[0]+1} else if(this.tableData[i].action == 'File Deleted') {this.ac[1] = this.ac[1]+1} else if(this.tableData[i].action == 'File Modified') {this.ac[2] = this.ac[2]+1} else {this.ac[3] = this.ac[3]+1} } } }, mounted:function(){ this.loads() } } </script> <style> </style> 5.5 饼图 <template> <div> <!--卡片视图区域--> <el-card> <!-- 2、为ECharts准备一个具备大小（宽高）的Dom --> <div></div> </el-card> </div> </template> <script> import * as echarts from 'echarts' //引入 echarts export default { name: 'Echart', data: function () { return { ac: [0,0,0,0] } }, methods:{ loads: function() { // 3、基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')) // 4、准备数据和配置项 // 指定图表的配置项和数据 var option = { title: { text: '文件监控信息', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left', }, series: [ { name: '访问来源', type: 'pie', radius: '50%', data: [ {value: this.ac[0], name: '添加文件'}, {value: this.ac[1], name: '删除文件'}, {value: this.ac[2], name: '修改文件'}, {value: this.ac[3], name: '重命名'}, ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] } // 5、展示数据 // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } }, mounted: function() { this.loads() } } </script> 5.6 FileMon--表格--饼图 之间的关系