前端实习第五周周记

前言

每一天做了什么还是要记录一下，不然过两天后就会发现，慢慢遗忘自己的收获与做过的东西。

这周做的是医学检验系统的样本库部分。由于是公司的代码所以不能交代具体，那么久聊一下每天具体做了些什么以及我的一些收获。

周一

周一上午利用treambition拿到任务后，深感任务繁重。本周任务集中在样本库表格，以及表格的一些功能，比如新增，修改等。

但是表格的特殊之处在于，它不是一般的表格，而是带树状的表格，我可以稍微描述一下，每一种类型的菌，会有它旗下的子菌，子菌还有很多的传代菌。做这一块就需要前端的逻辑与和后端配合的默契。

第一天下午封装了三个接口，分别是查询、修改、以及查询子菌。

并且还改了一个bug，一个能跑起来但是显示数据未定义的奇怪bug，记录博客如下：

前端能正常跑起来但是控制台报错数据undefined之onMounted最好不要用异步写法

周二

周二做的任务就是渲染那张树型表格。由于是树的数据结构。我来说一下后端的逻辑。数据有一万多条，非常多，一下子渲染出来是不现实的。所以后端希望前端能分步渲染的做法。

我来说一下后端给我的逻辑。首先，一张表，有一些菌的类型。有的菌有子节点，有的没有。有子节点的菌有一个字段标识。在一开始的时候，前端只需要渲染第一层数据。在渲染的时候，判断那个标识，如果有标识的话，再根据标识利用一个查询子节点的接口，查到数据后把数据放到查到的数据中，并在表格中渲染出来。

在element-ui中，如果一层数据嵌套另一层，是可以被按照层级渲染出来的。于是利用代码渲染第一次后作条件判断，成功做出第二层。

简单带过的就是分页，拿到一个前端的分页器后，获取分页器中拿到的页数，尺寸，并保存。在需要的时候传给后端即可。

周三

第三天做的是按钮功能，比如入库，出库，修改的功能。其实就是调用一个接口——更新接口。

另外做了增添同级菌，传代菌的功能。逻辑很简单，点击表格的一行，点击新增同级菌按钮，那么前端会拿到数据，并且修改其id为空（后端自动生成），由于是同级，父节点直接继承拿到的数据即可。

新增传代菌逻辑有问题就先没做。

周四

测试功能并发现数据都有问题，发现问题，记录如下：

前端修改新增操作导致数据删除——js精度丢失

就是这个问题导致我所有的操作多少都有问题。解决就好啦。增加了新增传代菌的功能，把父亲的节点的id作为自己的父节点id，子节点为空。

今天还对修改按钮作了修改，只要是后端能反查到的数据，都不能轻易修改，这很重要。所以要提前跟后端交涉好，这样前端的效率也会提起来。

周五

完成了一个小的问题，以及继续解决问题。之前遗留的问题还在，下周继续加油。