P6. 对局列表和排行榜功能

P6. 对局列表和排行榜功能

    • 0 概述
    • 1 对局列表功能
      • 1.1 分页配置
      • 1.2 后端按页获取对局列表接口
      • 1.3 前端展示传回来的对局列表
      • 1.4 录像回放功能
        • 1.4.1 录像回放的流程
        • 1.4.2 录像回放的实现
      • 1.5 前端分页展示
    • 2 排行榜功能
      • 2.1 排行榜的实现

0 概述

  • 本节主要介绍了如何实现对局列表和排行榜,对局列表包含对局录像的回放的实现最重要的是掌握怎么写分页功能

1 对局列表功能

1.1 分页配置

由于对局数量很多,不可能放在同一页上展示,因此要实现分页功能。后端的 Mybatis 分页配置:

MybatisConfig:

@Configuration
public class MybatisConfig {@Beanpublic MybatisPlusInterceptor mybatisPlusInterceptor() {MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));return interceptor;}
}

1.2 后端按页获取对局列表接口

service.impl

需要传入参数 page,表示当前要获取的是哪一页的列表。

通过 MyBatis 提供的 API 来实现分页查询的功能,查询的页面按最新对局顺序排列。

@Override
public JSONObject getRecordList(Integer page) {IPage<Record> recordIPage = new Page<>(page, 8); // 每页展示8条QueryWrapper<Record> queryWrapper = new QueryWrapper<>();queryWrapper.orderByDesc("id");List<Record> records = recordMapper.selectPage(recordIPage, queryWrapper).getRecords();List<JSONObject> items = new ArrayList<>();for (Record record : records) {JSONObject item = new JSONObject();User userA = userMapper.selectById(record.getAId());User userB = userMapper.selectById(record.getBId());item.put("a_photo", userA.getPhoto());item.put("a_username", userA.getUsername());item.put("b_photo", userB.getPhoto());item.put("b_username", userB.getUsername());item.put("record", record);String result = "Draw";if ("A".equals(record.getLoser())) result = "B Win";else if ("B".equals(record.getLoser())) result = "A Win";item.put("result", result);items.add(item);}JSONObject resp = new JSONObject();resp.put("records", items);resp.put("records_count", recordMapper.selectCount(null));return resp;
}

1.3 前端展示传回来的对局列表

写一个表格来展示每个对局的信息,先获取一页的信息进行调试:

<template><ContentField><table class="table table-striped table-hover" style="text-align: center;"><thead><tr><th>A</th><th>B</th><th>对战结果</th><th>对战时间</th><th>操作</th></tr></thead><tbody><tr v-for="record in records" :key="record.record.id"><td>s<img :src="record.a_photo" alt="" class="record-user-photo">&nbsp;<span class="record-user-username">{{ record.a_username }}</span></td><td><img :src="record.b_photo" alt="" class="record-user-photo">&nbsp;<span class="record-user-username">{{ record.b_username }}</span></td><td>{{ record.result }}</td><td>{{ record.record.createtime }}</td><td><button type="button" class="btn btn-secondary">查看录像</button></td></tr></tbody></table></ContentField>
</template><script>
import ContentField from '../../components/ContentField.vue'
import { useStore } from 'vuex';
import { ref } from 'vue';
import $ from 'jquery';export default {components: {ContentField},setup() {const store = useStore();let records = ref([]);let current_page = 1;let total_records = 0;console.log(total_records);const pull_page = page => {current_page = page;$.ajax({url: "http://127.0.0.1:3000/record/getlist/",data: {page,},type: "get",headers: {Authorization: "Bearer " + store.state.user.token,},success(resp) {records.value = resp.records;total_records = resp.records_count;},error(resp) {console.log(resp);}})}pull_page(current_page);return {records,}}
}
</script><style scoped>
img.record-user-photo {width: 4vh;border-radius: 50%;
}
</style>

1.4 录像回放功能

1.4.1 录像回放的流程

首先要明确录像回放需要哪些参数,将这些参数从后端获取后保存在前端。之后要明确前端在哪展示录像,以及如何展示录像。

  • 后端传来的参数已在 1.2 节中说明,并且前端保存在 records 数组中,records 中的每个 record.record 包含了录像的具体信息,包括地图、双方玩家的操作信息、败者等。
  • 前端需要开一个全局变量 record.js 进行保存,并且决定在 PlayGround 中进行录像回放,因此需要一个变量记录当前是在 pk 还是在播放 record。另外,它们共用的 GameMap.js 也需要根据是 record 还是 pk 进行相应的判断,如果是 pk 那就是前几节实现的,如果是 record 则要播放录像。

1.4.2 录像回放的实现
  • 首先在前端 record.js 记录全局变量,在点击"播放录像"按钮之后,应该将对应录像的信息保存到 Game, Record,并且跳转到新的页面播放对应录像,因此需要添加对应的路由(路由中带上对应录像的 id):

    path: '/record/:recordId/',
    name: 'record_content',
    component: RecordContentView,
    meta: {requestAuth: true,
    }
    
    const open_record_content = recordId => {for (const record of records.value) {if (record.record.id === recordId) {store.commit("updateIsRecord", true);store.commit("updateGame", {map: stringTo2D(record.record.map),a_id: record.record.aid,a_sx: record.record.asx,a_sy: record.record.asy,b_id: record.record.bid,b_sx: record.record.bsx,b_sy: record.record.bsy,});store.commit("updateSteps", {a_steps: record.record.asteps,b_steps: record.record.bsteps,});store.commit("updateRecordLoser", record.record.loser);router.push({name: "record_content",params: {recordId}})break;}}
    }
    
  • GameMap.js 中实现录像回放:

    add_listening_events() {if (this.store.state.record.is_record) {let k = 0;const a_steps = this.store.state.record.a_steps;const b_steps = this.store.state.record.b_steps;const loser = this.store.state.record.record_loser;const [snake0, snake1] = this.snakes;const interval_id = setInterval(() => {if (k >= a_steps.length - 1) {if (loser === "all" || loser === "A") {snake0.status = "die";}if (loser === "all" || loser === "B") {snake1.status = "die";}clearInterval(interval_id);} else {snake0.set_direction(parseInt(a_steps[k]));snake1.set_direction(parseInt(b_steps[k]));}k ++ ;}, 300);} else {/* pk页面的操作 */}
    }
    

1.5 前端分页展示

分页要满足以下几点:

(1) 当前页高亮,并且返回当前页的对局列表。

(2) 展示前面2页和后面2页的信息,如果页数不存在就不展示。

(3) 点击对应编号之后会跳转到对应的页面。

<template><ContentField><nav aria-label="..."><ul class="pagination" style="float: right;"><li class="page-item" @click="click_page(-2)"><a class="page-link" href="#">前一页</a></li><li :class="'page-item ' + page.is_active" v-for="page in pages" :key="page.number" @click="click_page(page.number)"><a class="page-link" href="#">{{ page.number }}</a></li><li class="page-item" @click="click_page(-1)"><a class="page-link" href="#">后一页</a></li></ul></nav></ContentField>
</template><script>
export default {setup() {let current_page = 1;let total_records = 0;let pages = ref([]); // pages 记录当前要展示的所有页面const click_page = page => {if (page === -2) page = current_page - 1;else if (page === -1) page = current_page + 1;let max_pages = parseInt(Math.ceil(total_records / 8));if (page >= 1 && page <= max_pages) {pull_page(page);}}const udpate_pages = () => {let max_pages = parseInt(Math.ceil(total_records / 8)); // 除的是每页展示多少个录像let new_pages = [];for (let i = current_page - 2; i <= current_page + 2; i ++ ) {if (i >= 1 && i <= max_pages) {new_pages.push({number: i,is_active: i === current_page ? "active" : "",});}}pages.value = new_pages;}/* 每次 pull_page 之后都要记得 update_pages */return {pages,click_page}}
}
</script>



2 排行榜功能

2.1 排行榜的实现

排行榜相对就简单多得多了,和对局列表功能相同,就是查出来用户列表,再在前端展示即可(前端和上面的差不多,不赘述了)。

@Override
public JSONObject getRanklist(Integer page) {IPage<User> userIPage = new Page<>(page, 8);QueryWrapper<User> queryWrapper = new QueryWrapper<>();queryWrapper.orderByDesc("rating");List<User> users = userMapper.selectPage(userIPage, queryWrapper).getRecords();JSONObject resp = new JSONObject();for (User user : users) user.setPassword(""); // 记得传回去之前要把密码清空resp.put("users", users);resp.put("users_count", userMapper.selectCount(null));return resp;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/45657.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

登录/注册

目录 1.HTML 2.CSS 3.JS 4.资源 5.运行结果 6.下载链接 7.注意事项 1.HTML <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-sca…

Zabbix配置JAVA JMX监控

JAVA JMX监控简介 官方文档&#xff1a;https://www.zabbix.com/documentation/current/zh/manual/concepts/java Zabbix Java gateway以 Zabbix 守护进程方式原生支持监控 JMX 应用程序。Zabbix Java gateway 的守护进程是用 Java 编写。为了在特定主机上找到 JMX 计数器的值…

Java设计模式的7个设计原则

Java设计模式的7个设计原则是面向对象设计领域中的重要指导方针&#xff0c;它们旨在提高软件系统的可维护性、可扩展性、可复用性和灵活性。以下是这7个设计原则的详细解释&#xff1a; 1. 开闭原则&#xff08;Open-Closed Principle, OCP&#xff09; 定义&#xff1a;一个…

使用 Spring Boot + POI 实现动态 DOCX 模版导出

使用 Spring Boot POI 实现动态 DOCX 模版导出 在企业级应用开发中&#xff0c;根据业务逻辑动态生成Word文档&#xff08;如报告、合同、通知等&#xff09;的需求十分常见。Apache POI 是一个强大的 Java 库&#xff0c;能读写 Microsoft Office 格式的文件&#xff0c;包括…

LCM通讯的使用

本文主要介绍LCM通讯的基本使用&#xff0c;内容主要整理自官网 https://lcm-proj.github.io/lcm/index.html LCM&#xff0c;即Library for Communication and Marshalling&#xff0c;是一组用于消息传递与数据封装的库和工具&#xff0c;它主要的面向对象是要求高带宽、低延…

保证 WebSocket 连接之前的身份验证过程的安全性

以下是一些保证在 WebSocket 连接之前的身份验证过程安全性的方法: 一、使用加密的通信通道 (一)启用 SSL/TLS 如果您的 WebSocket 连接使用 ws:// 协议,升级为 wss:// 协议。wss:// 是基于 SSL/TLS 的安全 WebSocket 连接,它对连接中的所有数据进行加密,包括身份验证过程…

Cesium--获取当前相机中心与地面的射线焦点

本文记录获取当前相机中心与地面的射线焦点的方法&#xff0c;可用于视角缩放过程中&#xff0c;控制视角自动平滑切换到二维等场景&#xff1a; 方法一定是视角中心能与地面有交集&#xff0c;如果对着地平线或对着天空肯定是没效果的。直接放代码&#xff1a; //调整相机到正…

Objective-C 自定义渐变色Slider

文章目录 一、前情概要二、具体实现 一、前情概要 系统提供UISlider&#xff0c;但在开发过程中经常需要自定义&#xff0c;本次需求内容是实现一个拥有渐变色的滑动条&#xff0c;且渐变色随着手指touch的位置不同改变区域&#xff0c;类似如下 可以使用CAGradientLayer实现渐…

利用宝塔安装一套linux开发环境

更新yum&#xff0c;并且更换阿里镜像源 删除yum文件 cd /etc/yum.repos.d/ 进入yum核心目录 ls sun.repo rm -rf * 删除之前配置的本地源 ls 配置阿里镜像源 wget -O /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-7.repo 配置扩展包 wge…

paloalto防火墙CLI修改MGT IP

怎么样通过Cli修改MGT口的IP、掩码、网关、DNS呢&#xff1f; 1&#xff09;console连接上CLi&#xff0c;输入configure进入系统视图 输入exit&#xff0c;退出到用户视图 2&#xff09;在CLI修改带外管理MGT的IP地址、掩码、网关、DNS&#xff0c;默认带外管理是开启https、…

[Elasticsearch]ES近似实时搜索的原因|ES非实时搜索的原因|ES Near real-time search

Elasticsearch-专栏&#x1f448;️ 往期回顾&#xff1a; ES单一查询定义&#x1f448;️ ES深分页问题&#x1f448;️ ES商城搜索实战&#x1f448;️ ES环境搭建:单节点模式/集群模式&#x1f448;️ ES开启认证&#x1f448;️ 近似实时搜索&#xff08;Near real-t…

FlinkModule加载HiveModule异常

HiveModule这个模块加载不出来 加在不出来这个模块&#xff0c;网上查说是要加下面这个依赖 <dependency><groupId>org.apache.flink</groupId><artifactId>flink-connector-hive_${scala.binary.version}</artifactId><version>${flink.…

移动应用安全需求分析与安全保护工程

移动应用安全威胁与需求分析 移动应用在提供便利服务的同时&#xff0c;也面临着诸多安全威胁。了解这些威胁及其防护需求&#xff0c;对于保护用户数据和维护应用的安全至关重要。以下是移动应用常见的安全威胁及其需求分析&#xff1a; 一、移动应用安全威胁 数据泄露 描述…

深度学习进阶

Transformer MHA的好处&#xff1a;Multi head attention能够让模型关注到不同的信息&#xff0c;增强表达能力&#xff0c;提高模型性能&#xff1b;时间复杂度是O(N2)&#xff0c;因为每个词都需要和其他所有词进行Attention操作&#xff0c;所以是N2。 卷积 CNN 卷积核权…

Elasticsearch基础概念

Elasticsearch 是一款开源的,ESTful风格的 分布式搜索、存储、分析引擎; 常见的使用场景 网站搜索,代码搜索等日志管理与分析,应用系统性能分析,安全指标监控等数据库同步,将数据库某个表的数据同步到elasticsearch上然后提供搜索服务 ES基本概念 文档 我们向elasticsearch存…

【活动预告】Apache IoTDB TsFile 智慧能源应用“上会”啦!

2024 年&#xff0c;站在中国数字经济产业升级和数据要素市场化建设的时代交汇点上&#xff0c;为进一步推动全球数据库产业进步&#xff0c;由中国通信标准化协会、大数据技术标准推进委员会主办的“2024 可信数据库发展大会”将于 2024 年 7 月 16-17 日&#xff0c;在北京朝…

跟着李沐学AI:Softmax回归

回归 vs 分类 回归用于估计一个连续值 分类用于预测一个离散类别 两个经典的数据集&#xff1a; MNIST数据集&#xff1a; MNIST&#xff08;Modified National Institute of Standards and Technology&#xff09;数据集是一个广泛应用于机器学习和深度学习领域的手写数字…

车载视频监控管理方案:无人驾驶出租车安全出行的保障

近日&#xff0c;无人驾驶出租车“萝卜快跑”在武汉开放载人测试成为热门话题。随着科技的飞速发展&#xff0c;无人驾驶技术已逐渐从概念走向现实&#xff0c;特别是在出租车行业中&#xff0c;无人驾驶出租车的推出将为公众提供更为安全、便捷、高效的出行服务。 视频监控技…

【Linux杂货铺】2.进程优先级

1.进程优先级基本概念 进程优先级是操作系统中用于确定进程调度顺序的一个指标。每个进程都会被分配一个优先级&#xff0c;优先级较高的进程会在调度时优先被执行。进程优先级的设定通常根据进程的重要性、紧急程度、资源需求等因素来确定。操作系统会根据进程的优先级来决定进…

免费开源的工业物联网(IoT)解决方案

什么是 IoT&#xff1f; 物联网 (IoT) 是指由实体设备、车辆、电器和其他实体对象组成的网络&#xff0c;这些实体对象内嵌传感器、软件和网络连接&#xff0c;可以收集和共享数据。 IoT 设备&#xff08;也称为“智能对象”&#xff09;范围广泛&#xff0c;包括智能恒温器等…