打字练习pk之代码篇

绝地灬酷狼 2022-04-17 01:59 262阅读 0赞

> 1.点击组队开始pk按钮跳转到输入4个数字的界面，输出之后这个页面只显示登录人的姓名，如果是第一个登录的人就显示开始pk按钮，其他人不显示开始pk按钮，有几个人登录就会显示几个人的信息
> 
> 2.队长点击开始pk，其他人页面显示等待队长谁开始pk，然后都跳到pk界面，默认限时，然后写上限时时间(时间是可以配置的)
> 
> 3.当到了限时时间或者个人去掉限时时间然后点击完成，此时判断如果是一个人练习就把成绩插入到result表中，如果判断为一个组的pk此时就把成绩插入到result表中，同时也插入到pk\_result表中。
> 
> 4.到了限时时间自动弹出pk的成绩和排名。

1. 有四个数字同时下面还有9个数字的9宫格的设计拿一个举例子

<button type="button" class="btn"  color="light" (click)="clearText()">
            <i class="fa fa-refresh"></i>
       </button>       ---删除所有数字，界面上的刷新按钮
    
      <button type ="button" class="btn" color="light" (click)="deleteText()">
        X
        </button>     --界面上的x

// 输入文本
      ChoiceNumber(number: any) {
        if (this.oneText === undefined || this.oneText === null || this.oneText === '') {
          this.oneText = number.value;
          return;
        }

// 四个数字都输入完成了，调用查询人员的方法
    this.keyText = this.oneText + this.twoText + this.threeText + this.fourText;
    this.faceToface();

// 调用方法，前端传一个model过去
    faceToface() {
        this.interval = setInterval(() => {
          {
            const body = JSON.stringify({
              keyText: this.keyText,
              // userId
              id: this.id,  //从localstorage里面取出来的
              // userName
              name: this.userName  //从localstorage里面取出来的
            });
            const dataUrl = 'typing-web/teFaceToFace/findByKeyText';
            this.http.post(dataUrl, body).subscribe(
              res => {
                // 后端传回来的结果
                const resObject: any = res.json();
                if (resObject.code === '0011') {
                 this.showDialog('组队完成，请加入其它组或30秒后再试！');
                  clearInterval(this.interval);   // 清除一直请求后端的方法
                  this.router.navigateByUrl('workspace/typing-exercise/typing-exercise');
                  return;
                }
                if (resObject.code !== '0000') {
                  alert('加载失败，请重新加入');
                  clearInterval(this.interval);   // 清除一直请求后端的方法
                  this.router.navigateByUrl('workspace/typing-exercise/typing-exercise');
                  return;
                }
    
                const pkModel: any = resObject.data;   //定义局部变量就可以，没有必要定义全局变量(因为我发现在前端的时候很多人都把所有的变量定义在类下面实际上是没有必要的)
                if ( pkModel.started) {
                // 已开始，跳转到打字页面
                this.router.navigate(['workspace/typing-exercise/typing-test'], {
                  queryParams: {
                    previewflag: 'true'
                  }
                });
                } else {
                  // 显示所有pk成员
                  this.users = pkModel.userSet;
                  if (pkModel.captionId === this.id) {
                   // 判断是否组长，是组长则显示开始pk按钮。
                    this.firstPerson();
                  }else {
                      this.elsePerson();
                    }
                }
                // 当组队完成时记录此时的组的id，为了下面更新是否pk开始的时候用
                localStorage.setItem('groupId', pkModel.groupId);
                  // 显示第一个人的姓名
                    this.firstUserName = pkModel.captionName;
    
              }
            );
          }
        }, 500);
      }

实际上应该先介绍后端是怎么写的

controller ---> service就不介绍了， 重点就是serviceimp这一块。

@Resource
        private RedisTemplate redisTemplate;
    
        // 将输入相同四个数字的人统计出来返回到页面上
        @Override
        public ItooResult findByKeyText(FaceToFaceModel faceToFaceModel) {
            // 当前端传的数据跟后端实体的字段类型和命名一样时可以传到实体里面，下面是获取界面上输入的四个数字
            String keyText = faceToFaceModel.getKeyText();
            if (keyText == null) {
                return ItooResult.build("1111", "未获得keyText值");
            }
            // 根据key值查询出来所有的人
            PkModel pkModel = (PkModel) redisTemplate.opsForValue().get(keyText);
            if (pkModel == null) {
                //第一个人进入时，将其设置为队长，生成组Id
                pkModel = new PkModel();
                pkModel.setKeyText(keyText);
                pkModel.setGroupId(BaseUuidUtils.base58Uuid());
                // 设置第一个人的Id 为了方便前端判断是否为进入的第一个人
                pkModel.setCaptionId(faceToFaceModel.getId());
                // 设置第一个人的Name为了方便前端取出第一个人的名字显示
                pkModel.setCaptionName(faceToFaceModel.getName());
                // 默认是否开始pk为false
                pkModel.setStarted(false);
                Set<FaceToFaceModel> userSet = new HashSet<>();
                userSet.add(faceToFaceModel);
                // 像前端返回查询到人的信息
                pkModel.setUserSet(userSet);
                // 将pkModel的信息添加到redis缓存中
                redisTemplate.opsForValue().set(keyText, pkModel);
                // 清除redis缓存的信息
                redisTemplate.expire(keyText, 30, TimeUnit.SECONDS);
                return ItooResult.build("0000", "查询成功", pkModel);
            }
            //如果不是第一个人。
            if (pkModel.getStarted()) {
                //pk开始了
                Set<FaceToFaceModel> userSet = pkModel.getUserSet();
                if (userSet.contains(faceToFaceModel)) {
                    //已加入本组队的人
                    return ItooResult.build("0000", "查询成功", pkModel);
                } else {
                    //尚未加入本组队的人
                    return ItooResult.build("0011", "组队已完成，请加入其他分组！");
                }
    
            } else {
                //尚未开始,则把此人加入到userSet中。
                Set<FaceToFaceModel> userSet = pkModel.getUserSet();
                userSet.add(faceToFaceModel);
                pkModel.setUserSet(userSet);
                redisTemplate.opsForValue().set(keyText, pkModel);
                redisTemplate.expire(keyText, 30, TimeUnit.SECONDS);
                return ItooResult.build("0000", "查询成功", pkModel);
            }

这只是一部分的代码。