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 {     @Bean     public 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 recordIPage = new Page<>(page, 8); // 每页展示8条     QueryWrapper queryWrapper = new QueryWrapper<>();      queryWrapper.orderByDesc("id");     List records = recordMapper.selectPage(recordIPage, queryWrapper).getRecords();      List 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 前端展示传回来的对局列表

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

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) 点击对应编号之后会跳转到对应的页面。

2 排行榜功能

2.1 排行榜的实现

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

@Override public JSONObject getRanklist(Integer page) {     IPage userIPage = new Page<>(page, 8);     QueryWrapper queryWrapper = new QueryWrapper<>();     queryWrapper.orderByDesc("rating");      List 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; }