回顾这段时间3个前端项目

​

第一个项目：后台管理系统

代码我已经上传码云了，需要的可以自取。

后台管理系统
使用技术：vue+element-ui+echarts。基本上就是一些crud。包括用户信息的新增和角色的新增。
学习难点：协同开发，一开始准备在github上开通团队协同开发，折腾半天，一直提交不了代码。索性直接放在码云平台，和github一样好用。
​

第二个项目：echarts可视化项目

描述：这个项目是我认为很难的一个，一个是难在和别人沟通需求问题，一个是别人一直催我，导致我连续2晚上干到1点，熬夜伤身体。这个项目无法开源，保密！
技术：vue+echarts+excel读取。
学习难点：这个项目的难点在于，可视化其实我之前做过一些，但是之前数据都是直接写死的。这次的数据是从excel中读取的。而且数据量非常大，难在数据的处理上。
excel数据处理方法：我用的方法是element-ui组件库中的文件上传up-load实现的，点击上传文件后可以读取excel中的数据。vue中导入并读取excel数据

遇到的问题：

• 复现之后发现只能读取一张excel中单个sheet,我的表中有64个sheet。目前操作是手动拆分一张表的多个sheet为多个excel表，具体实现参考链接。然后批量上传读数据。
• 无法读取上传的excel文件名。

或者可解决方案:

• 直接读取excel,安装xlsx。可参考这篇博文。
• 后端操作excel表格，写个接口前端拿吧。感觉更省事一点。

继续解决问题:数据读取到之后，拼接成想要的格式，存放在js文件中保存起来，然后在项目中直接导入js文件即可读取里面的数据。
数据获取包括：饼图数据、折线图数据、表格数据。功能:选择特定的年份实现三者的联动效果。
表格数据的联动效果:主要使用filter函数实现过滤，读取选定的时间，split取年份，按照年份读取数据，然后渲染当前年份的数据，同时，需要实现选择特定的区域，只渲染特定的区域，同样采用filter过滤，读取当前active的选项，然后过滤掉那些没有选中的地方对渲染的数据重新赋值即可。
学习重点：主要学习echarts饼图的使用。数据的渲染。感觉数据对象的一些常用方法要了然于心，特别熟练才行。

第三个项目：vant+vu移动端静态页面100%还原

难点：这个项目的难点就是设备的适配问题。

• 采用阿里巴巴淘宝团队出品的 amfe-flexible，通过不同屏幕的像素比来设置scale值，保证当前窗口的device-width始终等于物理像素设备的宽度,从而达到不同机型的适配效果。
• 要达到完全适配，我们不仅仅只用到amfe-flexible还需要用到postcss-pxtorem。postcss-pxtorem是将我们在css中写的px单位转换为rem单位。与其相似的包还有postcss-pxtorem该包则是将px转换成了2倍的rem单位。

移动端适配配置可参考这篇博文。

主要目的均是学习，希望能提高自己的前端技术，在校招面试中有话可说，愿好运伴随努力的人儿。