1.熟练掌握 html/css静态页面布局
2.熟悉HTTP协议
3.熟悉ajax
4.熟练掌握Hbulider vscode等开发工具
5.熟悉http协议
6.Js基础扎实
7.熟悉webpack等打包工具
8.熟悉单例模式 代理模式等一些设计模式
9.熟悉react基于react的antdesign
10.精通vue全家桶
11.阅读过Vue源码
12了解linux基本命令行
描述: 该产品时面向学校的各个角色,为他们提供课表 课程 班级等等数据,可以进行课表导入, 或者根据已选规则来智能排课
技术:
前端技术栈采用vue+webpack+vue-router+vuex,后台采用java,数据库mongo, 服务器nginx,该系统主要分为Pc端和pad端
Pc端:
1.采用自己封装的ajax与后台进行数据交互,并且提供了响应拦截,进行全局处理各种状态,,后台采用了restfulApi
2.Vue-router使用钩子函数来进行页面预处理,根据角色权限不同来限制页面的访问,并且提供了全局页面(404), 全局组件loadingBar
3.使用webpack-sprite进行雪碧图合成,减少http请求
4.使用基于echarts的v-charts进行图表采集,数据展示
5.使用了360奇舞团的chimee来处理视频,在页面离开时或者视频播放完时记住视频进度,视频放完后会自动跳到下一个视频
Pad端:
1.采用pxtorem进行单位转换来适配各个平板
2.使用vue-transition 进行页面动画跳转
3.使用less语法糖
项目难点:
1.课表展示, 课表涉及到了课表导入,排课,预导入(通用/单双周),根据规则的智能排课, 期间出现了很多次显示不全的问题,后来花了一个上午终于理清了头绪,并且成功的展示了所有的数据
项目获取到的知识:
1.兄弟组件传值:: 官方提供了一个全局Vue作为兄弟组件传值的工具,但在我看来其实有多的不必要开销,Vue自身带有许多属性与方法,而我们只需要$emit, $on以及$off3个方法就可以实现兄弟组件传值,所以在这里考虑到vue本身是使用发布订阅者模式,于是手写了该模式来替代全局Vue
2.祖孙组件传值: provide与inject由于生命周期处于data之前,无法获取到data变量,官方还提供了另外一个方法($attr与$listen)
3.vue for循环的key: 由于v-for采用的是就地复用策略,如果删除某个数据,可能会造成不是预料的结果,所以在每个数据里会提供一个唯一标识。
4.v-model相当于v-bind:value=”value”以及@input=”fn”
5.使用函数防抖来执行搜索功能,减少http请求
6.使用代理模式来实现防止某些按钮的多次点击
7.使用亨元模式或者对象池防止上传图片时创建多个对象,造成内存不必要的消耗