项目实训总结

个人总代码量为8755行，参与8个文档编写工作，参与项目整体架构搭建，录制2份演示视频，负责讲解介绍项目，具体开发工作如下：

1.图片压缩技术

        为了减轻服务器压力，提高客户端网页加载速度，图片压缩技术不可或缺，我在本项目中使用了基于canvas画布的图片压缩，具体实现如下：

（1）使用FileReader读取图片文件，提取图片相关信息。

（2）创建canvas画布，根据需要压缩的图片大小按比例缩放，使其不超过1000*1000的区域。

（3）将需要压缩的图片绘制到canvas画布上进行压缩。

（4）使用canvas的导出方法，将图片格式转为jpeg格式，图片质量压缩为60%，得到压缩后的图片（base64格式）。

（5）处理base64格式图片，按照逗号分割图片数据，去除url头并转化为byte，将小于0的ascii码转换为大于0，处理完成后得到blob格式图片。

（6）处理blob格式图片，新建文件对象，读入blob格式图片数据，并规定类型为mime，处理完成后得到图片类型文件。

（7）使用FormData将图片文件映射为表单对象，上传到服务器。

2.懒加载功能

创意社区的创意卡片采用了懒加载的方式，增加页面动感，具体实现如下：

（1）列必须定义最小高度（约等于卡片的期望高度），以使v-lazy相交观察器正常工作，使用v-sheet或v-responsive来设置min-height和包含卡片。

（2）v-lazy的v-model不是全局的isActive,应该是v-for的每一项的属性（item.isActive）。

3.评论区功能

我在本项目中实现了包括添加表情、回复评论功能在内的较为通用的评论区功能，评论区内容变更的实现采用了利用key重新渲染组件的方法：

（1）给要重新渲染的组件提供一个key属性，以便 Vue 知道特定的组件与特定的数据片段相关联。如果key保持不变，则不会更改组件，但是如果key发生更改，Vue 就会删除旧组件并创建新组件。

（2）Rerender()被调用时，reload改变。此时，Vue将销毁组件并创建一个新组件。我们得到的是一个子组件，它将重新初始化自身并“重置”其状态。

4.TRIZ矛盾矩阵前端实现

项目中TRIZ矛盾矩阵以二位数组的形式存储，获取方式如下：

（1）从网络上下载TRIZ矛盾矩阵表格

（2）使用Python读取表格文件，存入dataframe

（3）对数据进行清洗，筛去不必要的数据

（4）统一数据格式，循环处理生成二维数组