当前位置: 首页 > news >正文

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.lryc.cn/news/398465.html

相关文章:

  • uniapp easycom组件冲突
  • 总结24个Python接单赚钱平台与详细教程,兼职月入5000+
  • macOS 的电源适配器设置
  • 视觉SLAM与定位之一前端特征点及匹配
  • 开源项目的认识理解
  • 37.哀家要长脑子了!--层序遍历
  • 【从零开始AI绘画6】StableDiffusionWebUI拓展的安装方法以及推荐的几个拓展
  • HTML5表单的自动验证、取消验证、自定义错误信息
  • SpringMVC系列九: 数据格式化与验证及国际化
  • 判断链表中是否有环(力扣141.环形链表)
  • Kubernetes基于helm部署jenkins
  • 【Linux】vim详解
  • Android11 mtk 第二次设置壁纸,锁屏壁纸不变的问题
  • Java学习路线
  • java 实现人脸检测
  • VSCode神仙插件——Codeium (AI编程助手)
  • css文本划线效果(text-decoration相关属性详解)
  • 《Windows API每日一练》8.5 listbox控件
  • 使用Node.js 框架( Express.js)来创建一个简单的 API 端点
  • 企业服务行业CRM解决方案
  • 服务器怎么进PE系统?
  • Linux内核编译与调试menuos-linux-3.18.6-在ubuntu20.04环境
  • java-mysql 三层架构
  • 打工人如何应对AI对工作岗位的风险
  • C++:从C语言过渡到C++
  • 在安卓中使用FFmpeg录制摄像头的视频并保存到本地MP4文件
  • Vue从零到实战第一天
  • BUUCTF - Basic
  • 如何理解Node.js?NPM?Yarn?Vue?React?
  • 苹果入局,AI手机或将实现“真智能”?