TheHack2018结束啦!

有幸在大佬的PY下进入了这次比赛,比赛的项目我们倾注了不少心血,项目的git仓库(前端部分)会稍后发布,我来大致聊聊比赛的感想

比赛总览

  1. 本次的我们的项目是一个OJ,没错,English Learners Online Judge,简称 ELOJ,看了界面会发现,这个界面和EOJ简直神似,大致的功能是一个就是英语学习在线评测。可以说是一个EOJ阉割+英语特化专版。 前端是React,后端Springboot,数据库MySql,非常EZ的一个Web应用。
  1. 由于我们报的是hack.init()组,所以该组高中生较多,但他们的能力真的一点不输我们,看上其逼格都比我们高。而且捣鼓硬件的能力很强(赛前一直很虚这个,4个之后软件的在这种比赛是非常吃瘪的)。但经过观察后发现,普遍的问题是前端能力很差,甚至很多组没人摸过JS(其实我们组也是,由于我会一点微小的nodejs,就硬着头皮上React了)

  2. 开发环境比较简陋,大概10个左右小组在一间不大不小的教室里,4张课桌椅,便是我们全部的空间。
    这里是图

  3. 零食不错,妙脆角,上好佳一套,雪碧,可乐畅吃畅饮,可惜的是没有乐事。中午的午饭是盒饭,但就算是盒饭,也非常好吃(关键是不花钱。

  4. 吃好饭滚回来继续开发,比赛会有很多小的workshop可以去听,听了可以去拿sticker,很遗憾我们组忙着肝代码。没人去,sigh。

  5. 第一次团队协作开发,可纵然是前后端开发,在联调的时候依然不停报错,这种情况在下午才得到解决,可以说是非常拖累开发速度了,所幸之后联调就很快,前后端人员只要规定了JSON的格式就能比较快速地完成。

  6. 之后就一直是我这个前端在爆肝了,页面,路由都是我在做,开发压力真的很大,很多feature也因为时间不足而鸽了。从白天11点肝到第二天凌晨6点,中间除了吃了顿饭就没有休息过。凌晨3-6点是最难受的时候,那个时候真的撑不住了,完全靠仅存的意志去码字。

  7. 8点多吃的早饭,令人欣喜的是上科大的早饭非常好,下面这么多饭菜只要7元,肉包真的全是肉,感动。
    我是图

  8. 最后的时刻反而突然出现很多问题,程序突然挂了,zip包来不及上传了等等。最要命的是,后端组员因为要赶高铁而先走了,就把整个项目给了组长之后就跑了。当评委来做review的时候,我们却发现project跑不起来了,所幸后端组员又杀了回来,在三位大佬的画饼中,审阅似乎还行。

  9. DDL赶完之后真的成为了垃圾时间,已经不大记得了。身上的拼劲也燃尽了,只想早点回家。最后的前8路演因为台风的关系只能室内演出,只能说效果不够好,且很多项目都只是在画饼,比谁能使吹,比谁做的PPT,视频好看,我不经思索,这到底是极客比赛还是创新比赛?技术和idea谁更重要?这一点我陷入了深深的茫然。

前端部分踩坑

React-router路由跳转问题

这一点是最让人蛋疼的了,由于V4相比V3几乎是完全毁灭性升级,很多网上的教程也没法看,只好摸着石头过河。有一个难以解决的痛点是在一个function中实现页面跳转功能,找了很久没有结果。最后采用H5的history那套API得以完成

class Xxx extends Componet{
//.....
this.props.history.push('/')
//...
}
const Emmm = withRouter(Xxx)

值得注意的是一个组件本身是不带history这个props的,必须用withRouter高阶组件包装来传递{history,location},而在这antd的表单组件里很难行得通的,因为你不知道怎么把props传进去,很疑惑为什么不能让组件自带这些props

跨域调试问题

前端和后端用的端口不一样,导致数据交互产生问题,解决方法是在package.json中添加proxy字段

"proxy": {
"/api": {
"target": "http://localhost:8080"
}

浮层问题

初版是想做成像Eoj那样Header覆盖在幻灯片上,然后幻灯片不可见后改变样式。尝试了 react-visibility-sensor 插件,很不幸蜜汁报错,这个特效就不做了。

COOKIE问题

原本是想着靠后端去做session,后来发现成本有点高,不如靠服务器端手动做Cookie,服务器端不去处理,这样的trick平时用用还挺爽的。

React不熟练,大量重复代码

对于ref,高阶组件等等的掌握实在不足,导致很多代码只能用很dirty的实现。我辣鸡,我错了,我会继续学的。

Author: Gofun4
Link: https://www.gofun4.top/2018/07/23/TheHack2018结束啦!/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.