电信杯网球比赛系统_项目总结

目录

项目介绍

负责内容

小程序

1.比赛邀请制业务逻辑开发

 2.首页Canvas覆盖弹出的Modal组件

 3.实现用户注册登录功能

 4.Dva解决异步问题

后台管理平台

1.使用Promise实现先后发送两个请求

个人收获

---

项目介绍

电信杯网球比赛系统小程序采用比赛邀请制，实现了赛事创建，发起比赛邀请制，比分填写，规则定制，运动员基础水平管理等系列功能，适用于网球比赛；

用户 通过工号注册登录，后台根据 openId 是否和工号一对一绑定判断是否是用户 本人。

系统包括微信小程序（Taro.js+Dva.js）和后台管理平台（React.js+A ntdPro）。

能适配安卓，iPhone，iPad等不同机型。

负责内容

小程序

1.比赛邀请制业务逻辑开发

需求介绍如下：

1. 创建可邀请本场大赛内空闲人员参加比赛

2. 创建者可对用户进行搜索 选定用户加入比赛

3. 参赛者未准备之前 ，创建者可对其进行编辑，或是移除参赛人员

4. 待比赛人员已满、所有参赛者皆已准且两队极差≤2.5 时，创建者可开始比赛

5. 除创建者外，比赛中有用户已准备比赛，就不再允许取消比赛，除非所有参赛者的状态均为 “未准备”

流程图如下：

 数据流图如下：(页面与组件间的通信流程)

 页面组件间数据传递详情如下：

 效果如下：

 2.首页Canvas覆盖弹出的Modal组件

 解决方法：

• 使用z-index结合canvas的type
• 利用modal显示与否的变量来控制canvas的display
• 将canvas转换为一张图片
• 使用cover-view

第一种，尝试无效。

经验告诉我们，当看了很多文档还是没法解决问题时，建议回到最初的起点，也就是官方文档。

微信文档解说如下：

 于是使用第二种方法，根据Modal的visible控制canvas的display属性。

结果如下：

 3.实现用户注册登录功能

通过用户微信号唯一标志openId和工号一一对应判定是否是用户本人注册登录系统。

第一次登录时，要求用户先注册，输入已在管理后台登记的工号和姓名，前端将随机获取的code+appid传送给后端，后端拿到APPSecret和前端送过来的数据，得到用户openId，并判定是否是第一次登录，最后将用户openId和工号存储起来。

流程图如下：

 4.Dva解决异步问题

使用callback，向model传参一个 callback，根据model的值调用callback。

 * getToken({payload, callback}, {call, put}) {
      const response = yield call(VerificationService.getAccessToken, payload);
      const {code} = response;
      if(code===0){
        const {accessToken=''}=response.data;
        callback(response);
        yield put({
          type: 'save',
          payload: {
            codeStatus:code,
            accessToken,
          }
        })
      }else{
        callback(response);
        yield put({
          type: 'save',
          payload: {
            codeStatus:code,
          }
        })
      }

    },

后台管理平台

负责比赛管理、用户管理和规则管理模块书写

个人收获

• 熟悉Taro.js+Dva.js项目框架搭建及配置
• 熟悉微信小程序分包机制
• 熟悉Nginx配置部署项目，微信小程序部署
• 熟悉利用proxy代理解决跨域问题
• 熟悉Promise的使用
• 锻炼自己阅读文档并快速解决问题的能力