【实习日报】2019年6月下半月 前端开发实习工作日报汇总

以下记录的是今年6月16日-6月30日笔者在公司进行web前端工作的每日工作内容,其中隐去了项目的具体名称、人名、公司名等。

2019.6.17

今天完成的任务:完成了经纪商管理系统的几个前端静态页面的显示

遇到的问题:今天遇到了一个这样的问题:如下图,在dialog弹窗中的标题文字要求显示两种样式的问题,但是dialog只有一个title属性可以被赋值,因此笔者打算将html的<font>标签混入title的属性值中去用以实现两种字体样式的显示,但是不知道为什么html标签没有被解析而是原样输出了字符串,不仅如此,这种方法也要更繁琐些,后面在讨论了之后发现其实dialog的title也提供了slot插槽属性,可以直接将html写在插槽上再插入到title属性上便可解决此问题!

明天的规划:继续经纪商管理系统的开发

 

 

2019.6.18

今天完成的任务:完成了经纪商管理系统的大部分静态页面显示,修改了野牛期货客户端中的一些问题

遇到的问题:今天遇到到的主要问题是CSS方面的,虽热最近编写的静态页面都主要基于element ui组件,相对来说难度较小而且不需要做出太绚丽的界面,但是还是会有一些样式方面的微调才能做的比较满意,比如下图:上传的样式展示基于element中自带的上传组件,但是其上传组件中默认居中显示“+”的icon,如果加上“上传”的文字后,文字会直接掉到底部,为了把“上传”二字加入到跟合适的位置,考虑使用“子绝父相”式的布局可以较好的解决这个问题

今天因为需要修改野牛期货客户端上K线图右边的浮标显示,包括使其向左移和使浮标上的数字显示正确(默认必须保留两位小数),在成哥的帮助下笔者进一步了解了stockcharts插件和野牛期货之间的联系,包括其提供的接口控制和文档,另外也学习了如何去查找stockcharts中的源码

明天的规划:将经纪商管理系统的剩余一点静态页面完成,完善其整体显示效果,修改左部菜单栏以贴合原型图,开始后台管理系统静态页面的编写

 

 

2019.6.19

今天完成的任务:基本完成了经纪商管理系统的静态显示部分

遇到的问题:今天笔者在编写css样式时发现需要控制某些div的位置时,margin和padding的控制效果在很多时候是一样的,以至于有些分不清楚什么时候该使用margin什么时候该使用padding来控制div的位置了,尤其是要控制那些无边框无背景颜色的div时更是如此,因而到网上搜集了一些这类资料:http://www.hicss.net/use-margin-or-padding/

何时应当使用margin: 需要在border外侧添加空白时。 空白处不需要背景(色)时。 上下相连的两个盒子之间的空白,需要相互抵消时。如15px + 20px的margin,将得到20px的空白。
何时应当时用padding: 需要在border内测添加空白时。 空白处需要背景(色)时。 上下相连的两个盒子之间的空白,希望等于两者之和时。如15px + 20px的padding,将得到35px的空白。

明天的规划:将经纪商系统中剩下的标题和logo部分进行修改,开始后台管理系统的编写

 

 

2019.6.20

今天完成的任务:完善了经纪商管理系统的页面展示,开始进行后台管理系统的前端开发

遇到的问题:今天遇到的一个问题:修改coreui的左边菜单栏的宽度,如下图,由于在左边菜单栏这里需要加上净资产这些信息,因此左边的菜单栏要比预设的200px的宽度更宽一些才合理,但是这里涉及到一个问题就是菜单栏是基于响应式的布局设计的,因此如果需要改动这个宽度则需要连带的改动各种相关的width和margin-left属性,这里涉及的属性只能根据chrome浏览器的样式显示一个个的去调整,最终笔者在修改了大概5个相关属性之后初步调宽了这个状态栏。

明天的规划:继续后台管理系统的编写

 

 

2019.6.21

今天完成的任务:完成了管理后台的部分页面

遇到的问题:今天遇到的问题主要是布局的方面的问题。笔者记得以前在学校包括实习的时候写html页面都很少考虑布局方面的问题,很多时候面对一些页面,就直接写多少多少px或者直接用百分比就完事了,但是这些做法现在看来并不好,尤其是页面在不同设备上显示还有缩放的时候效果会很不好,尽管正常使用的时候很少会进行页面显示的缩放,但是却也必须考虑偶有出现的缩放现象,所以必须要好好考虑布局的问题,不管是针对比较传统的页面还是响应式的页面来说。

解决的措施:笔者在和同事们讨论之后发现现在布局应该是要以响应式布局为主,最有名的就是bootstrap的栅格化布局+媒体查询的思路了,之后的element ui等类似的栅格布局都或多或少的借鉴了bootstrap的这种思想,一般我们在写页面时就可以考虑使用这种布局。另外还有一类布局方式是比较传统的布局方式,主要是基于float的布局,相比之下现在使用flex弹性布局要更流行更合适一些。

明天的规划:继续后台管理系统的编写

 

 

 

2019.6.24

今天完成的任务: 完成了管理后台的部分静态页面的开发

遇到的问题:今天遇到了一个奇怪的问题:如下图所示:在vue-router的index.js文件中笔者根据设计图需要在userlist下再增加一个children页面也就是用户详情页面,但是userlist已经是用户(user)的children页面,不知道为什么在这种情况下使用$router.path()函数始终无法访问到用户详情页面(userDetails),在与夜景讨论了一段时间之后还是没能解决这个问题,最终也是暂时放弃了这种写法转而使用如下图所示的这种写法过渡。 可能与coreui自带的导航栏路有关系。。

明天的规划:继续后台管理系统的编写

 

 

2019.6.25

今天完成的任务:完成了管理后台的部分静态页面的开发(用户列表、分组管理)

遇到的问题:今天在写用户详情这个页面时发现这个页面很长(写完之后才发现的),虽然这个页面里有很多内容是其他页面已经有的,比如说在经纪商管理系统里有一部分,所以最终写出来的代码比较长(当然这其中包括了一些静态数据),在笔者写完之后觉得好像不太好,打算封装成一两个子组件来,但是因为现在还是静态页面编写阶段,所以还有些地方肯定是不确定或者是要修改的,所以就暂时让这些代码全部堆积在一起吧! 另外有时候觉得p标签很好用,不只是在作为纯文本的内容是很好用。主要是觉得p标签自带了换行属性,很多时候可以省去对
换行标签的使用,使代码更加美观简洁,另外在纯文本的地方要多利用p标签,这样可以增加html的语义化,尤其是在丢失css样式的情况下,p标签的好处就很大程度的体现出来了。为什么以前笔者没有觉得p标签那么好用呢。。大概是因为它自带了外边距吧。

明天的规划:继续后台管理系统的编写,完成营销活动和资金、管理模块的静态页面

 

 

 

2019.6.26

今天完成的任务:完成了营销活动和资金模块的静态页面

遇到的问题:今天笔者在跟成哥讨论的时候讲起了关于职业规划的问题。笔者还是持一直以来的这个观点:现代社会高速发展,社会工作劳动效率极高,其中一个很大的原因是因为明确的社会劳动分工,对于很多人来说可能一个确切的领域,一个确切的工作会伴随一生,笔者认为即使这份工作是兴趣所然我们也没有必要一直从事一份工作,比如我们每过十年重新规划一个新的工作,换一份职业,这样会使我们本就平淡的人生增添一些色彩:比如前十年我可以做程序员,但是以后还可以去做老师,学者…… 笔者认为这是一个很好的思路!也愿意去尝试。

明天的规划:继续后台管理系统的编写

 

 

 

2019.6.27

今天完成的任务:进本完成了管理后台的静态页面编写,目前还差总览的图标没有加上

遇到的问题:使用margin: 0 auto不能使img标签表现出的图片水平居中,通常我们如果要将一个div之类的块级元素水平居中的话除了使用flex布局之外,更为常见的其实是将其外边距设为auto,即margin: 0 auto,但是对于img标签这样做确实无效的,因为img标签其实是行内替换元素,虽然可以设置width height,但是本质上行级标签,所以这里应该用text-align:center来居中,或者将其display改为block之后利用margin auto居中。

明天的规划:完善后台管理系统

 

 

 

2019.6.28

今天完成的任务:将总览中的图表加上,部分使用的echarts实现,还有一部分使用的是静态图片

遇到的问题:最近一直在写css和html,由于会操作到大量的div,有时候就必须给div取class的名字,但是当div嵌套比较多比较细的时候,笔者发现此时要给div取名字就会变得困难很多,一般取名就是根据其具体含义来取名的,可是有些嵌套的div涉及到的含义不好表述,因为太细致了,但是又必须要取名字,只是一个比较麻烦的问题。还需要研究一下怎么解决

明天的规划:完善后台管理系统,对接接口

发布了24 篇原创文章 · 获赞 20 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/a715167986/article/details/99422403