[Java知识库]SpringBoot+LayUI+MybatisPlus 前后端分离 实现排名统计功能

前言：

小伙伴们，大家好，我是狂奔の蜗牛rz，当然你们可以叫我蜗牛君，我是一个学习Java快一年时间的小菜鸟，同时还有一个伟大的梦想，那就是有朝一日，成为一个优秀的Java架构师。

首先给各位粉丝朋友们道个歉，在2022年上半年中，我因为参加实习、做毕设和写论文，以及毕业答辩等诸多原因，不得不停更之前的博客系列，不过现在我忙完后就又回来了，后续将会给大家分享更多的编程干货。

最近这段时间我会将在毕设项目的编写过程中所遇到的问题以及解决问题的方法进行总结，整理成这个 SpringBoot+LayUI前后端分离项目实战系列 。

特别提醒：如果对 SpringBoot+LayUI前后端分离项目实战系列感兴趣的，可以阅读本系列往期博客：

第一篇：SpringBoot+LayUI模板引擎+MybatisPlus 前后端分离 实现系统公告通知

第二篇：SpringBoot+LayUI+MybatisPlus+Echarts图表 前后端分离 实现数据统计功能

今天分享的问题是：如何使用SpringBoot框架、LayUI框架和MybatisPlus框架来实现排名统计功能，具体解决方案如下，请各位小伙伴们耐心观看：

1.SpringBoot后端主要实现代码

1.1 视图对象ResultSortVo的实现代码

package com.rz.sport_manager.entity.vo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.io.Serializable;

/**
 * @ClassName ResultSortVo
 * @Description 竞赛总分排序的视图对象
 * @Author 狂奔の蜗牛rz
 * @Date 2022/05/20
 */
// 使用@Data注解，引入无参构造器, set和get方法, 以及toString方法等
@Data
// 使用@AllArgsConstructor注解, 引入有参构造方法
@AllArgsConstructor
// 使用@NoArgsConstructor注解, 再次引入无参构造方法, 防止被有参构造覆盖
@NoArgsConstructor
public class ResultSortVo implements Serializable {

    /**
     * 分院名称
     */
    private String departName;

    /**
     * 竞赛总分
     */
    private Integer scoreSum;

}

1.2 ResultInfoMapper接口实现代码和ResultInfoMapper.xml映射文件

1.2.1 ResultInfoMapper接口实现代码

package com.rz.sport_manager.mapper;

import com.rz.sport_manager.entity.pojo.ResultInfo;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.rz.sport_manager.entity.pojo.UserInfo;
import com.rz.sport_manager.entity.vo.ResultSortVo;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * @ClassName ResultInfoMapper
 * @Description 竞赛成绩表 Mapper 接口
 * @Author 狂奔の蜗牛rz
 * @Date 2022/05/20
 */

// 使用@Repository注解, 将其注册为Dao层, 交由Spring容器统一管理
@Repository
// 使用@Mapper注解, 将该接口注册为Mapper接口
@Mapper
public interface ResultInfoMapper extends BaseMapper<ResultInfo> {

    /**
     * 获取各分院所有竞赛组的竞赛成绩总分的数据集合
     * @return List<ResultSortVo> 泛型为ResultSortVo的List集合
     */
    public List<ResultSortVo> getDepartScoreSumSortList();

}

1.2.2 ResultInfoMapper.xml映射文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.rz.sport_manager.mapper.ResultInfoMapper">

    <!-- 获取各分院所有竞赛组的竞赛成绩总分的数据集合 -->
    <select id="getDepartScoreSumSortList" resultMap="resultSortMap">
        select ti.team_name as depart_name ,sum(ri.score) as score_sum from sport_manager01.result_info ri
        left join sport_manager01.team_info ti on ti.team_id = ri.team_id
        left join sport_manager01.sport_info si on si.sport_id = ri.sport_id
        where ri.group_id in(1,2,3) and ri.status = 1 and ri.publish = 1 and si.status = 1 
        group by depart_name order by score_sum desc;
    </select>

    <!-- 成绩总分排序的结果集映射 -->
    <resultMap id="resultSortMap" type="com.rz.sport_manager.entity.vo.ResultSortVo">
        <!-- 使用result设置相关属性，只需显式定义不一致的字段和属性
              property：Java实体类中的对应属性；column：对应数据库中的字段名
             如果一个数据库字段使用别名，其他字段也要使用别名 -->
        <result property="departName" column="depart_name"/>
        <result property="scoreSum" column="score_sum"/>
    </resultMap>

</mapper>

1.3 ResultInfoService服务层接口和其实现类的主要实现代码

1.3.1 ResultInfoService服务层接口的实现代码

package com.rz.sport_manager.service;

import com.rz.sport_manager.entity.pojo.ResultInfo;
import com.baomidou.mybatisplus.extension.service.IService;
import com.rz.sport_manager.entity.vo.*;
import com.rz.sport_manager.utils.JsonResult;

import java.util.List;

/**
 * @ClassName ResultInfoService
 * @Description 竞赛成绩表 Service层接口
 * @Author 狂奔de蜗牛rz
 * @Date 2022/05/20
 */
public interface ResultInfoService extends IService<ResultInfo> {
    
    /**
     * 获取各分院的所有竞赛组的竞赛总分排序后的数据集合
     * @return JsonResult<List<ResultSortVo>> 泛型为List<ResultSortVo>的JsonResult结果集
     */
    public JsonResult<List<ResultSortVo>> getTeamScoreSumSortList();

}

1.3.2 ResultInfoServiceImpl服务层接口实现类的实现代码

package com.rz.sport_manager.service.impl;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.rz.sport_manager.entity.vo.*;
import com.rz.sport_manager.mapper.*;
import com.rz.sport_manager.service.ResultInfoService;
import com.rz.sport_manager.utils.JsonResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.*;

/**
 * @ClassName ResultInfoServiceImpl
 * @Description 竞赛成绩表 Service层接口实现类
 * @Author 狂奔de蜗牛rz
 * @Date 2022/05/20
 */

// 使用@Service注解, 将该类注册为Service层, 交由Spring的IOC容器统一管理
@Service
public class ResultInfoServiceImpl extends ServiceImpl<ResultInfoMapper, ResultInfo> implements ResultInfoService {

    // 通过类型自动装配ResultInfoMapper接口
    @Autowired
    private ResultInfoMapper resultInfoMapper;
    
    /**
     * 获取各分院的所有竞赛组的竞赛总分排序后的数据集合
     * @return JsonResult<List<ResultSortVo>> 泛型为List<ResultSortVo>的JsonResult结果集
     */
    @Override
    public JsonResult<List<ResultSortVo>> getTeamScoreSumSortList() {
        // 获取resultSortVoList集合(用于存储各分院所有竞赛组的竞赛总分)
        List<ResultSortVo> resultSortVoList = resultInfoMapper.getDepartScoreSumSortList();
        // 返回值为调用JsonResult结果集的batchDataSuccess方法, 需传入两个参数(分页数据的总行数和竞赛成绩所属参赛队伍的视图对象集合)
        return JsonResult.batchDataSuccess(resultSortVoList.size(),resultSortVoList);
    }
    
}

1.4 ResultInfoController控制层的实现代码

package com.rz.sport_manager.controller;

import com.rz.sport_manager.entity.vo.*;
import com.rz.sport_manager.service.ResultInfoService;
import com.rz.sport_manager.utils.JsonResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.util.List;

/**
 * @ClassName ResultInfoController
 * @Description 竞赛成绩表 前端控制器
 * @Author 狂奔de蜗牛rz
 * @Date 2022/05/20
 */
//使用@Controller注解, 使当前类实现Controller接口, 并交由Spring容器统一管理
@Controller
//使用@RequestMapping注解, 设置get类型的请求映射路径
@RequestMapping("/sport_manager/result_info")
public class ResultInfoController {
    
    /**
     * 获取各分院的所有竞赛组的竞赛总分排序后的数据集合
     * @return JsonResult<List<ResultSortVo>> 泛型为List<ResultSortVo>的JsonResult结果集
     */
    // 使用@GetMapping注解, 设置请求映射路径, 请求方式为get类型
    @GetMapping("/getTeamScoreSumSortList")
    // 使用@ResponseBody注解, 把控制视图方法返回到请求页面上
    @ResponseBody
    public JsonResult<List<ResultSortVo>> getTeamScoreSumSortList(){
        // 返回值为调用ResultInfoService接口的getTeamScoreSumSortList方法, 获取各分院的所有竞赛组的竞赛总分排序后的数据集合
        return resultInfoService.getTeamScoreSumSortList();
    }
    
}

2.LayUI前端主要实现代码

2.1 排名统计的前端主要实现代码

<style>
    .welcome .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
    .welcome .icon {margin-right:10px;color:#1aa094;}
    .welcome .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
    .welcome .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
    .welcome .main_btn > p {height:40px;}
</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main welcome">
        <div class="layui-row layui-col-space20">
            <div class="layui-col-md12">
                <div class="layui-row layui-col-space15">
                    
                     <!-- 右侧区域 -->
                    <div class="layui-col-md3">
                        <!-- 各分院竞赛总分排名 -->
                        <div class="layui-card" style="width: 100%;min-height:300px">
                            <div class="layui-card-header"><i class="fa fa-fa icon"></i>各分院竞赛总分排名</div>
                            <!-- 竞赛总分排行的详情信息 -->
                            <div class="layui-card-body" id="table1">
                                 <!-- 存放模板的script标签 -->
                                <script type="text/html" id="tableTemplate1">
                            <!-- table表格 -->
                             <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
                                 <!-- 表格内容 -->
                                 <tbody>
                                     <!-- 表格头部行 -->
                                     <tr>
                                         <!-- 表格头部列 -->
                                         <th style="border-bottom: 1px solid rgb(211,211,211); font-size: 16px; color:rgb(0,0,0); font-weight: normal; padding:0 0 10px 0;">排名</th>
                                         <th style="border-bottom: 1px solid rgb(211,211,211); font-size: 16px; color:rgb(0,0,0); font-weight: normal; padding:0 0 10px 0;">分院名称</th>
                                         <th style="border-bottom: 1px solid rgb(211,211,211); font-size: 16px; color:rgb(0,0,0); font-weight: normal; padding:0 0 10px 0;">竞赛总分</th>
                                     </tr>
                                     <!-- 使用layui的each循环, 遍历数据集合信息(注意: 这里一定要使用d.data; 参数index表示集合下标, item表示集合元素) -->
                                     {{# layui.each(d.data,function(index,item){ }}
                                     <!-- 表格内容行 -->
                                     <tr>
                                         <!-- 表格内容列 -->  
                                         <!-- 判断当前元素下标是否为0(即分数排行的第一名), 若为0, 则设置为以下样式 -->
                                         {{# if(index == 0) { }}
                                         <td style="font-size: 16px; color:rgb(88,87,86); padding: 15px 0 0 5px;">
                                             <!-- 排名数字的背景颜色设置为红色 -->
                                             <span style="width: 24px; height: 24px; border-radius: 3px; display: block; background: #878787; color: #fff; line-height: 24px; text-align: center; background: #ed405d">1</span>
                                         </td>
                                         <!-- 判断当前元素下标是否为1(即分数排行的第二名), 若为1, 则设置为以下样式 -->
                                         {{# } else if(index == 1) { }}
                                         <td style="font-size: 16px; color:rgb(88,87,86); padding: 15px 0 0 5px;">
                                              <!-- 排名数字的背景颜色设置为橙色 -->
                                             <span style="width: 24px; height: 24px; border-radius: 3px; display: block; background: #878787; color: #fff; line-height: 24px; text-align: center; background: #f78c44">2</span>
                                         </td>
                                         <!-- 判断当前元素下标是否为2(即分数排行的第三名), 若为2, 则设置为以下样式 -->
                                         {{# } else if(index == 2) { }}
                                         <td style="font-size: 16px; color:rgb(88,87,86); padding: 15px 0 0 5px;">
                                             <!-- 排名数字的背景颜色设置为蓝色 -->
                                             <span style="width: 24px; height: 24px; border-radius: 3px; display: block; background: #878787; color: #fff; line-height: 24px; text-align: center; background: #49bcf7">3</span>
                                         </td>
                                         {{# } else { }}
                                         <td style="font-size: 16px; color:rgb(88,87,86); padding: 15px 0 0 5px;">
                                             <!-- 其他名次的排名数字的背景颜色设置为灰色 -->
                                             <span style="width: 24px; height: 24px; border-radius: 3px; display: block; background: #878787; color: #fff; line-height: 24px; text-align: center;">{{ index+1 }}</span>
                                         </td>
                                         {{# } }}
                                         <!-- 遍历每个元素值均使用 {{ item.字段名 }} 格式(注意: {{后无需加#号) -->
                                         <td style="font-size: 16px; color:rgb(88,87,86); padding: 15px 0 0 20px;">
                                             <!-- 获取分院名称 -->
                                             <span style="font-size: 16px; color:rgb(88,87,86);padding: 15px 0 0 20px;">{{ item.departName }}</span>
                                         </td>
                                         <td style="font-size: 16px; color:rgb(88,87,86); padding: 15px 0 0 15px;">
                                             <!-- 获取竞赛分数 -->
                                             <span style="font-size: 16px; color:rgb(88,87,86);padding: 15px 0 0 15px;">{{ item.scoreSum }}</span>
                                         </td>
                                     </tr>
                                     <!-- 循环结束记得加上这个 -->
                                     {{# }); }}
                                 </tbody>
                             </table>
                         </script>
                            </div>
                        </div>
                        
                </div>
            </div>
        </div>
    </div>
</div>
<script>
        layui.use(['layer','jquery','laytpl'], function () {
        // 获取jquery对象
        var $ = layui.jquery,
            // 获取layer对象
            layer = layui.layer,
            // 获取laytpl对象
            laytpl = layui.laytpl;
            
        // 竞赛分数排名信息
        let resultInfoList1;    
        /* 编写获取竞赛分数排名信息的ajax请求 */
        $.ajax({
            // 请求方式为GET
            type: 'GET',
            // 数据接口：请求JSON数据到后端
            url: 'http://localhost:8080/sport_manager/result_info/getTeamScoreSumSortList',
            // 数据类型为json格式
            dataType: 'json',
            // 内容类型为json
            contentType: 'application/json',
            // 开启同步
            async: false,
            /* 处理请求的回调函数 */
            success: function (data) {
                // 若返回的状态码为0，则执行成功处理操作
                if(data.code === 0) {
                    // 竞赛成绩排名信息为当前数据
                    resultInfoList1 = data;
                    // console.log(resultInfoList);
                // 若返回的状态码为1，则执行失败处理操作                
                } else {
                    layer.msg('获取竞赛成绩排名数据失败！', {icon: 2});
                }
            }
        });

        // 获取分数排行模板中的html页面代码(tableTemplate1对应script模板中的id选择器)
        let tableTpl = tableTemplate1.innerHTML,
            // 根据id选择器定位到公告通知的div盒子
            table = document.getElementById('table1'); 
        // console.log(resultInfoList1);
        //渲染模板信息(tableTpl是模板引擎的html代码, resultInfoList1是上面获取到的竞赛成绩排名信息, html用于存储div盒子中的代码)
        laytpl(tableTpl).render(resultInfoList1, function(html) {
           // 获取模板引擎中的html代码, 将其赋值到html参数中去   
           table.innerHTML = html;
        });
            
   });
</script>

2.2 排名统计的前端页面显示效果

以上就是如何使用SpringBoot框架、LayUI框架和MybatisPlus框架来实现排名统计功能的所有分享内容了。欢迎各位小伙伴讨论和学习，觉得还不错的不妨给蜗牛君点个关注，顺便来个一键三连。我们下期见，拜拜啦！