前端实习第五周周记

前言

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

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

周一

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

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

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

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

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

周二

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

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

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

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

周三

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

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

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

周四

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

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

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

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

周五

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

相关推荐
cy玩具18 分钟前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161771 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo2 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v2 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫2 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.2 小时前
Chrome调试工具(查看CSS属性)
前端·chrome