做过的项目（5）——社区拉票

需求主要描述:
一个大型的游戏社区，需要进行进行海选活动。比如最美的玩家，最有人情味工会，最有爱心玩家，诸如此类的社区之"最"排名。玩家从其他玩家分享的链接登录，或者自己主动登录，对自己喜欢的不同赛道进行投票，登录后，要有排行榜功能，要能拉票功能。最核心的是需要统计出每日每个玩家的投票数量，活跃数量，然后需要接入到飞书机器人，完成每日数据统计的播报。

主要涉及技术栈:
thinkphp6+layUI （后台）前端（vue）+ 飞书机器人的开发通知 。
前端用户使用的是游戏组件登录，需要打通这个登录。

系统设计主要考虑点:
1.热榜 投票有不同赛道，为了避免考虑因为排名产生的强者效应，需要让每个登录进来的用户打乱排名，但是又不能在用户投完票之后，立刻随机，让用户找不到了自己刚才投票的那个人。也就是A用户登录后，看到的顺序是固定的，但是B/C/D看到的页面是要随机的

2.用户分享到群里点击链接的时候，会产生并发情况，需要做个取舍，因为如果A邀请B用户，收邀请的人数会+1，但是并发时候会导致计数不准确，B/C/D同时点击登录，而因为事物关系，会同时去修改邀请人数数据，但是又不能因为数据更改失败，让用户无法登录，用户受邀请登录是无感的。所以CAS做法在这里行不通，这里会牺牲掉数据的精确性保证用户的体验。

3.飞书机器人需要自己去申请，然后根据飞书文档的教程说明，完成卡片样式的制作与开发。飞书的机器人很灵活，功能也很强大，但是我们这里需要的是每天凌晨5-10分钟的时候，汇报昨日的数据统计。

4.数据统计部分 对数据精确性要求高的，直接使用专门的表进行插入，然后根据条件再直接使用createtime的时间范围进行查询

5.需要调用灰产鉴定（避免刷票）同时领取的奖品进行角色数据绑定（为了避免领取奖品出现领奖的漏洞，这样每个账号每次活动都只能领取一次奖品码，而且就算多次获取领奖码，也是无法兑换的）

6.对富文本要求比较高，指定使用ckEditor，之前的富文本达不到使用要求。需要将该插件集成到后台的前端代码里面。集成插件需要考虑登录态/变化的编辑。

其他说明:
整体上，该项目涉及到的技术复杂度并不高，用户数量比较大点，然后前端调整有点繁琐。然后使用到了机器人通知，然后需要集成ckEditor替换掉layUI本来的集成的富文本。同时项目开发周期比较少，因为上线比较急，属于临时活动，所以开发工期也比较紧张。

技术说明:
从系统的需求上看，排除基础的权限管理数据表，就是设计用户的投票还有拉票，邀请人数，然后需要编辑每个赛道和每个赛道相关信息。在前端读取到后端的API赛道信息，如果登录了，需要将收到的随机表储存一份到本地，防止用户投票之后，找不到自己投票的人。需要用到storage相关信息。

飞书机器人的开发:这里需要了解webhook概念。可以理解为，每个机器人其实就是一个随机链接，每次访问随机链接的时候，或者给随机链接post相关数据的时候，服务器已经拿到信息，对信息进行相关检查之后，然后推送到设置的这个webhook对应的机器人群上。利用这个功能，可以完成很多类似的 比如订单下单报警推送，资源耗尽消息推送，数据统计报表每日定时推送，也可以接入。https://open.feishu.cn/community/articles/7271149634339422210 阅读文档接入即可。

CKeditor的接入，这里需要对ck进行介绍:

CKEditor 是一个功能强大且广泛使用的开源富文本编辑器。
它允许用户在网页上以直观和用户友好的方式创建、编辑格式化的文本内容。用户可以进行常见的操作，如设置字体样式、大小、颜色，插入图片、链接、表格，调整段落格式等。CKEditor 具有高度的可定制性，可以根据具体的需求进行配置和扩展。它支持多种编程语言和框架，并且在许多网站和内容管理系统中被用于提供丰富的文本编辑体验。例如，在博客平台、论坛、在线文档编辑工具等应用场景中，CKEditor 能够帮助用户轻松创建和编辑吸引人的文本内容，而无需具备深入的 HTML 和 CSS 知识

比传统其他的富文本编辑器，功能上完备性确实高一些。
主要集成流程:（是这个项目里面最复杂的一环）
下载插件到本地静态目录后 先引入项目里面

   <script src="../../../../ckeditor/ckeditor.js"></script>
    <script src="../../../../ckeditor/config.js"></script>
    
     CKEDITOR.config.allowedContent = true; //允许写内容
    let storyEditor = CKEDITOR.replace('story');  //替换掉我们需要进行富文本的内容
    storyEditor.on('fileUploadRequest', function (evt) {
        //接入文本简单，但是还需要加入文本里面文件的上传
        var fileLoader = evt.data.fileLoader,
            formData = new FormData(),
            xhr = fileLoader.xhr;
        //需要使用到XHR相关协议
        xhr.open('POST', fileLoader.uploadUrl, true);
       //需要设置请求授权头，否则是无法上传相关信息的
        xhr.setRequestHeader("Authorization", 'bearer' + localStorage.getItem('admin_token'));
        //XHR上传文件方法
        formData.append('file', fileLoader.file, fileLoader.fileName);
        fileLoader.xhr.send(formData);
        evt.stop();
    });

    //编辑器上传文件完成后的操作 将图片插入到编辑器里面，否则编辑后不会立刻出现在我们编辑的文本里面
    storyEditor.on('fileUploadResponse', function (evt) {
        // Prevent the default response handler.
        evt.stop();
        var data = evt.data,
            xhr = data.fileLoader.xhr;
        response = JSON.parse(xhr.responseText);
        source_url = response.data.src;
        CKEDITOR.tools.callFunction(1, source_url);
    });
  //最后将我们需要进行富文本化的内容写入里面
  storyEditor.setData(storyStr);
  //额外的需要注意 下面上传的文件查看路径（根据项目需要，是否需要调用系统内部已经上传的图片）
config.filebrowserBrowseUrl='';
	config.filebrowserUploadUrl='/';
    config.filebrowserImageBrowseUrl='

小结:
该项目是业务逻辑相对简单的项目，赛道，候选人，登录用户，投票，拉人，统计。需要掌握飞书机器人webhook的创建和接入，然后需要理解CK插件集成到前端里面的方式，前端框架集成的概念。