React初探之空教室查询

序:

这个月都在入门前端,由于之前Java script参考书是第三版的(仅包含了ECMAScript5之前的内容),因而最近在补充ES6的语法。同时也开始着手学习主流的框架,先是从React入手,大致了解了整体的结构,就准备着手去实践,以为在实践中积累经验。

起因:

平时喜在教室自习,苦于找空教室的繁琐,虽教务网站可搜空教室,但需登录,而且教务网站空教室查询业务略显繁琐,故犹起做一个空教室查询的界面的想法。

动手:

1.数据源:

使用python采集每个教室的占用情况,将结果保存到csv文件中,大致内容如下:

2.数据库:

使用mysql数据库,将csv文件的内容导入,并为classroom列设计索引(加快查询速度)。

3.API:

使用php编写查询空教室的接口,参数以POST的形式传递,然后构造sql语句查询信息,将结果以json形式返回。

4.前端界面:

采用React+Ant Design设计前端界面。

结果:

线上地址:http://49.235.113.23/function/

遇到的坑:

  1. mysql查询速度极慢:

    最开始查询一次需要6秒左右,这个查询速度对用户而言体验贼差,后来通过为主键设计索引以提高检索速度,最终查询一次仅需0.2x秒。

  2. 表格内容不显示:

    主要是对React的setState()理解不到位,因为setState()是异步的,因此在同一代码块里运行两次setState()将会产生一些问题(如在两次setState()运行之后数据才更新,导致第二次的setState()不能及时的将新的数据写入DOM),最好的办法就是设置定时器隔开两次setState(),使它们在一定程度上”同步”。