KOB项目

用户表设计

注册流程

Jwt八股

前端向后端发送请求

Controller层接收到请求并调用具体业务逻辑

Service层处理完请求返回给前端

前端接收到后端发来的数据后进行相关操作

登录流程

前端有两个函数，login函数用来根据用户名和密码生成token，getinfo函数用来根据token得到用户的id、用户名和头像。

user.js

login函数

getinfo函数

获取token

根据token获得相关信息

登出函数

直接纯前端实现。删除local storage里的jwt_token，然后把用户相关的变量清空即可。

bot相关API

一共有三个功能，创建、修改和删除。具体流程和登录注册差不多不再赘述。

需要注意的是，需要在编写一个辅助函数refresh_bots并绑定后端apigetBotsInfo。每次修改完bot都要执行该辅助函数。

还有一件事，每次调用后端API的时候，请求头都要加上jwtToken来验证。

Bot表设计

获取天梯排行榜

前端：点击页码，根据页码去后端获取当前页码相对应的user信息，然后利用函数update_pages()更新页码信息。

后端则和之前不同，直接返回一个JSON对象列表，列表里存放两类数据：用户信息「头像、名字、天梯分」以及用户总数。

另外，关于分页，Mybatis-Plus自带的插件IPage会自动处理好。配合条件构造器queryWrapper即可根据前端传来的信息筛选出相对应的页面以及该页面所携带的用户信息。

获取录像列表

Record表设计

前端逻辑和获取天梯排行榜一样，不再赘述。

后端也差不多。JSON对象列表里存放以下数据「两个用户的头像、两个用户的名字、对局信息（回放用）、对局结果、对局时间」以及对局总数。

然后配合分页插件和条件构造器筛选出相对应的页面，将相关信息返回给前端。

查看录像

纯前端实现。后端之前已经把对局信息喂给前端并存储到store里，所以其实相当于两个机器人在对战。

这时就可以复用PK界面的函数GameMap.js以及其他辅助函数。

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) {
                    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;
                }
            }
        };