本篇文章主要描述【赏金赛项目】的具体实现细节。

关于赏金赛的具体介绍，请看本人的前一篇文章。

1 前期构想

作为一个在探索AI的号，先想设计一个比赛合集的网站，确实有点南辕北辙。

既然搞比赛，就需要实践，需要真正地参与，上来就先学习一大堆理论和基础知识，时间成本比较高，甚至可能半途而废。

不如直接参与一个比赛，跑通一个程序，拿到排行榜的排名，给到实实在在的反馈。

虽说有了比赛代码，按下F5就能执行出结果，但是这里面依旧有很多前提，比如：

  • 打什么比赛
  • 从哪里拿到代码
  • 代码要求的运行环境
  • 代码能跑通吗
  • 代码跑了一天一夜，最后报错了
  • 代码跑一天一夜出结果了，但提交后判定格式有问题，0分
  • 排名卡在200名，无法进一步前进，没有人提供思路

我创立这个号的初衷，其实就是为了解决这些问题。

  • 打什么比赛，我来提供一个一站式平台，自己选择。
  • 提供详尽的本地环境部署方法
  • 针对每个比赛，提供baseline与软件版本要求
  • 提供可在线上环境出结果的代码
  • 针对报错和格式问题，提供社区，互帮互助
  • 持续地提供比赛思路及详细实现

【赏金赛项目】当初的构想就是为了解决第一个问题——打什么比赛。

如今各种比赛层出不穷，在好几个网站之间跳来跳去，不知从哪下手。如果设计一个整合平台，就能够简单地横向比较了，比如赏金，还剩多少天，类型等等，这样更容易选择出感兴趣地比赛，切入更容易。

2 设计过程

项目的关键过程有3个，访问目标网站的数据，整合到一张表，展示出这张表。

第一，访问目标网站的数据。

这个很简单了，各种编程语言都有其相应的实现方法，比如Python可以用requests库，直接访问对应的链接就可以。

第二，整合到一张表。

这个阶段的工作可以看成是数据清洗，像择菜切菜一样，把每个土豆都切成工整的块块，存起来。

择菜好说，怎么存呢？初期是想存到csv里，但是这样每次查找都要载入整个csv文件，当这个文件很大时，可能会有性能问题。

最后经过权衡，上了postgres数据库，没用ORM，用的psycopg2，还专门研究了下事务的存储过程，但是在咱们的这个场景中，用不上事务。

第三，展示出这张表。

展示表这一步，是花费时间最多的，首先要选择数据从服务器到浏览器的流动方式。

可行的方案有3种，1是服务端提供API，浏览器直接通过ajax服务器API交互，这样可以自由设计请求参数，但是API设计时间成本较多。 2是浏览器直接通过ajax请求整张表，筛选排序等参数全部在前端实现，这样的话把大多数工作交给了前端。 3是不用ajax，直接通过请求参数生成对应的HTML，但这违背了全站静态页面的初衷，也进一步提高了后端复杂性。

综合来看，最后选择的第二种方案，这样的话重点就转移到了寻找前端框架上面。

最开始是折腾的是datatables，它的文档非常完善，而且非常成熟，但是把比赛放到干巴巴的表里，属实不是那么美观，体验较差。

于是又开始寻找其他方案，开始搜索各种关键词，data, filte , pagination, sort 不断变换组合尝试。

最终，发现了vue-dataset这么个框架，它提供卡片式的条目显示方式，体验良好。

使用时，不得不又去学了一把vue，再次感叹了一波vue的美感，真的是艺术品。

3 小结

这样看起来工作量并不多的一个小项目，花费掉本人近100个小时的时间，不得不说是个黑洞。

制作途中遇到了各种各样的小问题，文中都没有提及，80%的时间其实都摊在了这些小问题上。

总之，这是万里长征的一小步，后面还有星辰大海等待我们。

你准备好了吗？

【完】

我是阿图，专注于AI相关内容。

关注我，共同探索神奇的人工智能~