React中页面收集用户信息及图形化展示

时间:2022-11-09 13:36:23

React中页面收集用户信息及图形化展示当用户进入对应的对应的页面,在React的生命周期函数里开始计时。当离开对应页面,触发componentWillUnmount计时函数。停止计时,并将计时时间发送给服务端。

React中页面收集用户信息及图形化展示

后端处理发送数据

有两种情况,1 之前没有数据 sql操作insert 2. 之前有数据 sql操作为update

这里采用策略模式,用map替换if/ else

我们首先查询数据库,看是否有用户对应的记录。然后进入对应的数组,找到map。匹配对应的sql语句。

React中页面收集用户信息及图形化展示

然后写入数据库,更新数据。

图形化展示使用antV-g2。吐槽一下 蚂蚁金服的可视化库没有百度的Echarts好用。

然后根据官网的demo修改数据可以得到展示图

React中页面收集用户信息及图形化展示