Spring 后台管理系统项目练习04 ----- 拓展（权限管理，数据统计）模块

1 数据统计

1.1 数据表

1.2 前端页面report

<template>
  <div>
    <!-- 1.定义面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>统计报表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 2.定义卡片视图 -->
    <el-card class="box-card">

       <!-- 3.定义栅格的一行 :gutter="20"定义行间距   :span="9" 占位符  -->
       <el-row :gutter="20">
         <el-col :span="9">
            <!-- 3.定义搜索框 -->
            <el-input placeholder="请输入内容"    v-model="queryReportInfo.query" clearable  @clear="getReportList" >
                <el-button slot="append" icon="el-icon-search" @click="getReportList"></el-button>
            </el-input>
         </el-col>

       </el-row>

       <!-- 统计报表数据表格展现  border 边框线属性  -->
       <el-table :data="reportList" border stripe>
           <el-table-column type="index" label="序号"></el-table-column>
           <el-table-column prop="name" label="名称"></el-table-column>
           <el-table-column prop="count" label="总数"></el-table-column>

       </el-table>

       <!-- 定义分页组件 关于分页插件的属性说明
            1.@size-change 如果分页中每页实现的条数发生变化 则会触发这个该事件
            2.@current-change 当页数发生改变时,触发该函数
            3.current-page 当前选中的页
            4.page-sizes   页面数据展现的选项
            5.page-size    默认选中的页数
            6.layout    分页中展现的数据种类
            7.total     记录总数
       -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryReportInfo.pageNum" :page-sizes="[1, 5, 10, 20]" :page-size="queryReportInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>

    </el-card>


  </div>
</template>

<script>
  export default {
    data() {
      return {
        //1.定义统计报表信息
        reportList: [],
        //2.定义分页对象
        queryReportInfo: {
          query: '', //定义查询参数
          pageNum: 1,
          pageSize: 10
        },
        total: 0,
      }
    },
    created() {
      //1.获取列表数据
      this.getReportList()
    },
    methods: {
      //实现信息分页查询
      async getReportList() {
        const {
          data: result
        } = await this.$http.get("/report/getReportList", {
          params: this.queryReportInfo
        })
        if (result.status !== 200) return this.$message.error("统计报表查询失败")
        this.reportList = result.data.rows
        this.total = result.data.total
      },


      //条数变化时 调用
      handleSizeChange(size) {
        this.queryReportInfo.pageSize = size
        this.getReportList()
      },
      //页码值变化时 调用
      handleCurrentChange(current) {
        this.queryReportInfo.pageNum = current
        this.getReportList()
      },

    }
  }
</script>

<style lang="less" scoped>

</style>

1.2.2 路由

1.3 后端代码实现

1.3.1 POJO (Report)

@Data
@Accessors(chain = true)
@TableName("report")
public class Report{

    @TableId(type = IdType.AUTO)
    private Integer id;
    private String name;
    private Integer count;
}

1.3.2 ReportController

@RestController
@CrossOrigin
@RequestMapping("/report")
public class ReportController {
    @Autowired
    private ReportService reportService;
    /*业务需求：商品列表的展现
    请求路径: /report/getReportList?query=&pageNum=1&pageSize=10
    请求类型: get
    请求参数: 使用pageResult对象接收
    返回值:SysResult(pageResult)
    * */
    //@PathVariable restful动态获取参数
    @GetMapping("/getReportList")
    public SysResult getReportList(PageResult pageResult){//3个参数
        pageResult=reportService.getReportList(pageResult);//3+2

        return SysResult.success(pageResult);
    }

1.3.3 ReportServiceImpl

@Service
public class ReportServiceImpl implements ReportService{
    @Autowired
    private ReportMapper reportMapper;

    @Override
    public PageResult getReportList(PageResult pageResult) {
        //1.构建模糊查询
        boolean flag= StringUtils.hasLength(pageResult.getQuery());//动态sql,为true才拼接条件
        QueryWrapper<Report> queryWrapper = new QueryWrapper<>();
        queryWrapper.like(flag,"name", pageResult.getQuery());
        //2.定义分页对象
        //页数                条数
        IPage page=new Page(pageResult.getPageNum(), pageResult.getPageSize());

        //page的参数由原来的页数/条数 ，经过业务调用添加了 总记录数和分页的结果
        page=reportMapper.selectPage(page,queryWrapper);
        long total=page.getTotal();//获取总数
        List<Report> rows=page.getRecords();//获取分页的结果
        return pageResult.setTotal(total).setRows(rows);
    }

1.3.4 ReportMapper

public interface ReportMapper extends BaseMapper<Report> {

}