前端开发初入行心得

    距离开始实习到现在已经快两个月了，我是做前端开发的，目前已经接手了两个项目，同时进行但都没有完工，说说感受吧。我是本科读的信息管理与信息系统专业，因为专业被划分在了经管院，所以大方向是偏管理的，前端技术类的课程挺少的，大多也是讲讲理论知识。实际操作很少，我对前端开发比较感兴趣，觉得画页面很有意思，于是就在大四上学期开始自学前端技术，两三个月学完了HTML、CSS，Javascript，又继续学习了react，然后大四下开始找工作。找工作之后才发现原来现在大部分企业用的框架都是vue，没办法又得改学这个，但很多原理和方法什么的都差不多，学的也挺快的。入职第二天就开始跟进项目了。下面聊聊我工作过程中遇到的一些问题和感受吧。
    实际做了项目才知道，跟之前自己在往上找视频学习是真不一样，这东西还是得上手操作才能提升的很快，html和css是很基础的前端技术，但是实际做项目时候也会出现很多问题。
    1.在学习的时候我感觉定位挺好用的，每次用就是找准距左距上的距离，然后写上就行了。第一个项目是一个微信小程序，在画页面的时候就出现了问题，因为要适应各种不同型号的手机，它们的屏幕大小都不一样，用定位来布局就会导致页面只有在基准的那个型号的手机屏上是正常的，但凡换了一种大小的屏幕，布局就乱了，这就是由于定位只是根据左上的位置来的，没法适应整个画面。于是我改用margin属性进行布局，就很正常了。
    2.好多的效果都可以直接用现成的组件稍加修改来实现，我没用过也不知道这东西，还傻傻的自己写，然后写不出来去问前辈，前辈说，用组件库啊，你自己写多累挺。尬住了尬住了！比如那个轮播图，我记得之前跟着视频学习的时候讲过，用原生js写。我做这个时候还跑去翻视频，结果才知道有u-view这个东西，上面有封装好的组件，直接cv过来改改内容就完事了。有一说一，真好使。
    3.有一个页面是一个列表页，在前期展示静态页面的时候应该是这样在data里写一个列表，下面罗列所有的对象： 

 

 而我是在html部分把所有列表内容都写成了一个个的div，这样在展示静态页面的时候是没问题的，但是调接口时就不能这样写了。正确的应该是给html中的列表盒子加上v-for方法在该展示数据的位置用{{item}}，item对应下方data中列表中各对象各字段的值。后期调接口直接把各字段的值替换为接口中调出来的各字段的值。这些都是vue的内容，我这相当于是边做项目边学vue了哈哈。

    4：有的接口要在header中加入token和请求头。我现在只知道token是用于校验用户身份的。具体什么情况要加什么情况不加还没有研究。后端同事传到api文档上都标上了，反正他们要，我就写上了，后续有时间还是得自己明白原理才行。

    5：这个项目进行的同时，又半截加入了一个响应式官网的项目，这也是我第一次接触响应式。作用就是写出来的页面可以同时适应PC端和web端，不需要各写一套。最开始进项目时候，一直报错，运行不了，后来明白了是没有下载依赖，拉代码的时候依赖是拉不下来的，需要现下载。用npm-i命令。这个项目给我的工作主要是修改布局，加一点动效什么的。有一个需求是主页原先是一张背景图，现在需要把它修改为轮播图，于是我从element UI上找到了轮播图的组件，一运行报错，屏幕上显示的是图片地址。然后我把data中的图片以import方式引入，然后在下方data中定义一个列表再将其引入就成功，但是只是显示出了图片，并没有轮播效果。原因是因为我没有下载element。之前做uniapp项目的时候如果用到组件就是直接把u-view组件库上的代码直接拿过来，也无需下载什么东西。所以就没往这方面想，还以为是逻辑写错了。然后把element下载到本地引入到项目中号，轮播图效果终于实现了。下面就是对轮播图进行修改，修改成客户想要的样子，组件库的轮播图高度比客户要求的小了一半，于是我把图片的高度修改成了两倍，但是两侧的切换图片按钮还是在原来的高度上，我从浏览器中打开控制台寻找定于这两个按钮的类，发现他是组件内部已经封装好的类。我感觉这就没法修改了，是人家都定义好的。然后我上网查了解决方法得知，可以用v-deep深度选择器去解决，它可以穿透盒子，去修改封装好的盒子的样式，代码写为：：v-deep 类名{height：XXXpx；}这次终于修改完成了！

     今天就先写到这里啦，其实还有很多工作中遇到的问题，后续会一一记录！

     上面这些问题大多数都体现出来自己基础不牢固的短板了，后续还是要通过项目，来继续巩固基础，然后深入学习！总的来说，痛并快乐着，虽然好多不会的，但我依然对这个行业充满热情。键盘敲烂，月薪过万！未来可期了家人们！