前端开发专业实习报告

        专业实习开始于6月13日，结束于7月1日，短暂而充实的三周，就这样结束了。重新回顾HTML、CSS、JS和vue的知识点的时候，我觉有时候学习的知识再去回顾的时候有一些不同的理解，就像是有一句俗话所说“书读百遍其义自见”，老师又通过做相关项目，让我们运用到了实践中去，收获满满。
        首先，老师介绍了web前端行业的应用领域、前景以及发展方向。web前端就是网站前台部分，运行在PC端，移动端等浏览器上展现给用户所浏览的网页。前端主要需要掌握到三大技术，HTML，CSS及JavaScript。同时，告诉我们想要学好并从事web前端行业，在思路要清晰的前提下，就必须要反反复复加强练习，多敲代码，找到错误并去解决问题，再此多发现问题，并总结问题，推荐通过发博客，来记录，这样可以永远保存，其他人刷到之后，还可以通过评论，来点评去发现问题。
        接下来，老师通过web前端静态页面还原，讲解了HTML和CSS相关知识点，这也是初次跟老师做的一个完完整整的页面，以前的练习都是针对某些样式所做的小案例。HTML是网页基础骨架，我们应该熟悉掌握常用的HTML标签，清楚对应的标签用法。CSS是网页样式的书写，我们应该熟悉掌握常用的样式属性，知道如何使用对应样式。在静态页面还原时，我们需要用到HTML+CSS+PHOTOSHOP，利用PHOTOSHOP工具，根据ui设计图还原对应的网页页面，来测量各个div之间的距离以及用切片工具把大的图片分割成自然连接的小图，然后保存为WEB所用格式，应用到css中去。拿到图片之后，做好准备工作，然后整理思路，首先把页面分成头（网站logo、导航栏、广告以及网站介绍区域）、体（网站的主题内容）和尾部（网站的基本信息、合作厂商以及作者）三部分，并编写三个大模块对应的结构代码，再把每个大的div分成若干个小的div。在写结构时，应注意以下几点知识点：当看到页面中相同元素的并列排序时，我们都是使用无序列表来做，并通过css中，text-decoration: none属性来设置无文本修饰；一般页面中logo图，都是用H1标签来完成；若网页中出现特殊图片（不在同一div划分范围内）一般用绝对定位（position: absolute;）去完成。
        通过页面还原项目讲解了HTML和CSS之后，下面，介绍了Javascript的起源、简介以及特点等并通过做小的项目让我们学会了如何去使用。JavaScript，一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。JavaScript程序是由若干语句组成的，语句是编写程序的指令。一个完整的JavaScript实现是由核心、文档对象模型、浏览器对象模型3个不同部分组成的。
        简单介绍完之后，通过图书管理系统、贪吃蛇、购物车页面三个项目，来把学到东西运到到实践中去。做项目时，我们不能急于去完成，一定要先分析项目，把项目中的逻辑搞清楚、搞懂在着手去做。图书管理系统需要完成以下7个功能：实现查看图书信息、实现新增图书信息、实现批量添加图书信息、实现删除图书信息、实现借出图书业务处理、实现归还图书业务处理以及实现搜索图书业务处理。在做项目时，我们应按以下三步去完成，第一步：利用js输出图书管理系统的菜单。第二步：创建一个数组用于保存图书。第三步：实现查看功能，调用对应函数。注意在创建多个对象时，应先创建类，通过类产生对应的对象。贪吃蛇小游戏逻辑思维非常强，通过分析需要按照以下思路去完成，第一步：绘制地图，利用js输出表格。第二步：产生蛇头和食物，使蛇头为红色，食物为蓝色。第三步，通过js动态产生元素。第四步，点击按钮时，让蛇头移动。第五步：按下键盘上下左右时，改变当前蛇头移动方向。其中，应注意一些细节问题，例如没有出界的死亡判定，身体要紧跟蛇头不能分开、防止出现蛇头反方向移动等。在这个项目中，使我掌握了定时器的使用setInterval（）；事件处理函数中，定义事件对象为event，使用event.keyCode键盘对应键值，根据按键，即可改变蛇头的方向；判断蛇头是否出界，需要判断在headNode.style.中，top<0 ||top>450 ||left<0||left>450是否在这个范围内，并清除定时器。购物车页面利用js实现以下相关功能：全选功能、四个分项按钮跟随状态的变化并给每一个按钮添加事件，使每个状态发生变化时，判断当前有多少个选中状态的功能、已选商品的件数以及合计多少钱的跟踪状态、当点击数量中的“+”或“-”按钮时，可控制数量以及小计的变化以及删除功能。应注意使其功能应在window.onload延时加载中去实现，等待结构加载完成，才能加载js。同时，在实现删除功能时，通过层级关系，发现要删除的元素，点击元素（this）的父级，在js中移除对应元素，首先找到被移除的父级，然后父级.removeChild（移除的元素）。以上为关于JavaScript相关项目、要实现的功能以及学到了知识。
        最后，讲解了前端框架Vue。Vue是一套用于构建用户界面的渐进式框架，代码简洁、上手容易并且市场上得到大量的应用。Vue的数据驱动是通过MVVM模式来实现的。通过vue做了点餐页面和去哪网项目，使我深刻感受到在大学里所学的知识与更多的实践结合在一齐，用实践来检验真理，这才是我们实习的真正目的。首先，拿到点餐页面，应把页面结构分成leftNav（左面导航栏）、order（命令栏）、oftergoods（常用商品栏）和typegoods（种类栏）四个部分并用HTML和CSS完成相关结构布局。分析点餐页面可以看到要实现以下功能：点击相关属性时，要实现商品的展示；商品的增加、删除、商品数量的增加、总数量以及总金额的计算等。将四部分用组件去完成，组件可以帮助我们提高开发效率以及提高项目的可维护性。同时，在做这个项目期间，我收获了以下几点：在css中，使用float浮动属性时，是不占位置空间的。因此，可以使用overflow: hidden;将浮动的隐藏；利用父组件给子组件传递数据，给子组件的template上的元素绑定相关事件，执行子组件的方法，子组件的方法中发射一个事件，传一个数据；无论我门实现页面中哪个功能，都必须要判断当前商品是否存在或count是否小于零，不要急于去写代码。接下来，做了关于去哪网相关的两个页面，拿到页面首先划分页面结构，再分析各个部分是用什么样的功能去实现的。主要完成页面以下几个功能：输入框以及点击秦皇岛实现跳转、实现轮播图的滑动、实现图片的分页展示、图片的滑动、景点的详情展示、搜索功能、展示从A-Z所有的国家以及展示A-Z字母。第一次接触通过vue做这么完整的项目，发现了自己很多不足，同时收获也是满满的。以下为通过这个项目所收获的几点：当点击搜索框输入城市时，会跳转到另外页面，所以，这个输入框用的不是input，而是用的div利用css：display: flex; align-items: center;交叉轴对齐方式去完成；当改第三方组件的样式时，而又不想去除scoped属性造成组件之间样式时，用穿透语法，直接将样式进行穿透；轮播图利用swiper插件去完成，在swiper相关文档中，查找相关属性并将小圆点封装到一个槽里面，图片利用v-for实现页面列表的渲染；页面拖拽是使用better-scroll仿原生app拖拽的插件去实现的。以上为关于vue相关项目、要实现的功能以及学到了知识。
         其中，使我领悟到了，原来我们只是单纯的学习书本上的知识，没有实践，无法把知识融会贯通，但通过这次的实训，我们把知识真正的运用上了，更深刻的理解和掌握了关于HTML、CSS、JavaScript和vue的相关知识。
        利用此次实训的机会使我巩固了以前所学的知识，积累了web前端开发的经验。同时，我明白了学习是一个长时间积累的过程，应该不断的去学习去巩固以前所学知识。