创建对战列表和排行榜界面

一、实现对局列表界面

1.需要实现分页功能

在config.MybatisConfig中添加分页配置：

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

    @Override
    public JSONObject getRecordList(Integer pageNo, Integer pageSize) {

        IPage<Record> recordIPage = new Page<>(pageNo, pageSize);
        QueryWrapper<Record> queryWrapper = new QueryWrapper<>();
        queryWrapper.orderByDesc("id");
        List<Record> records = recordMapper.selectPage(recordIPage,queryWrapper).getRecords();

        JSONObject resp = new JSONObject();   //返回的结果
        List<JSONObject> items = new LinkedList<>();
        for(Record record : records){
            User userA = userMapper.selectById(record.getAId());
            User userB = userMapper.selectById(record.getBId());
            JSONObject item = new JSONObject();
            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 = record.getLoser();
            if("all".equals(result)){
                item.put("loser","平局");
            } else if("A".equals(result)) {
                item.put("loser","A输");
            } else {
                item.put("loser","B输");
            }

            items.add(item);
        }

        resp.put("records",items);
        resp.put("records_count",recordMapper.selectCount(null));
        return resp;
    }

2.实现前端界面 

-用户每点击一次，就向后端发送一次请求获取当前界面的数据。参数有查询的页数和页大小

-开一个数组保存当前页的前后页

<template>
    <div>
        <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>
                            <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.loser }}</td>
                        <td> {{ record.record.createtime }}</td>
                        <td>
                            <button @click="open_record_content(record.record.id)" type="button" class="btn btn-danger">查看录像</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <nav aria-label="Page navigation example" style="float: right;">
                <ul class="pagination">
                    <li class="page-item" @click="click_page(-2)">
                        <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </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="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </ContentField>
    </div>
</template>

<script>

import ContentField from '../../components/ContentField.vue'
import $ from 'jquery'
import { useStore } from 'vuex'
import { ref } from 'vue'
import router from '@/router/index.js'

export default {
    components:{
        ContentField
    },
    setup() {
        const store = useStore();
        let records = ref([]);
        let current_page = 1; //当前界面
        let total_records = 0;
        let pages = ref([]);  //当前页面的前后页

        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 / 10));
            if(page >= 1 && page <= max_pages) {
                pull_page(page)
            }
        }
        const update_pages = () => {
            let max_pages = parseInt(Math.ceil(total_records / 10));
            let new_pages = [];
            
            console.log(max_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" : ""
                    });
                }
            }
            console.log(new_pages);
            pages.value = new_pages;
        }
        const pull_page = (page) => {   //获取某一个页面的内容
            current_page = page; 
            $.ajax({
                url: "http://127.0.0.1:3000/record/getlist/",
                data: {
                    page_no: page,
                    page_size: 10
                },
                type: "get",
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(resp) {
                    records.value = resp.records;
                    total_records = resp.records_count;
                    update_pages();
                },
                error(resp) {
                    console.log(resp)
                }
            })
        };      
        pull_page(current_page)
        const stringTo2D = map => {
            let g = [];
            for (let i = 0, k = 0; i < 13; i ++ ) {
                let line = [];
                for (let j = 0; j < 14; j ++, k ++ ) {
                    if (map[k] === '0') line.push(0);
                    else line.push(1);
                }
                g.push(line);
            }
            return g;
        }

        const open_record_content = recordId => {
            for (const record of records.value) {
                if (record.record.id === recordId) {
                    console.log(record);
                    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;
                }
            }
        }
        return {
            records,
            open_record_content,
            pages,
            click_page
        }
    }
}
</script>

<style>
img.record-user-photo {
   width: 5vh;
   border-radius: 50%;
}
</style>

3.对战记录的展示

保存a、b的操作，然后在前端界面在演示渲染一次。

    add_listening_events() {
        if (this.store.state.record.is_record) {
            console.log(this.store.state.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 {
            this.ctx.canvas.focus();

            this.ctx.canvas.addEventListener("keydown",e => {
                let d = -1;
                if(e.key === 'w') d = 0;
                else if(e.key === 'd') d = 1;
                else if(e.key === 's') d = 2;
                else if(e.key === 'a') d = 3;

                //向后端发送下一步的信息
                if(d >= 0) {
                    this.store.state.pk.socket.send(JSON.stringify({
                        event: "move",
                        direction: d,
                    }))
                }
            });
        }
        
    }

二：排行榜同理