一、个人工作总结
个人总代码量为8755行,参与8个文档编写工作,参与项目整体架构搭建,录制2份演示视频,负责讲解介绍项目,具体开发工作如下:
- 参与项目需求分析、设计并编写文档
- 制定Scrum敏捷开发计划
- 项目前端整体风格设计
- 前端开发:TRIZ矛盾矩阵
- 前端开发:解决方案编辑(智能引导模块)
- 前端开发:专利笔记系统(智能引导模块)
- 前端开发:创意社区检索(创意社区模块)
- 前端开发:解决方案详情(方案社区模块)
- 前端开发:创意社区、解决方案社区评论功能(创意、方案社区模块)
- 前端开发:网站主页设计及实现
- 前端开发:解决方案管理、创意管理、评论管理(管理系统模块)
- 前端开发:头像审核、解决方案审核、创意审核(管理系统模块)
- 项目优化:负责图片、字体等静态文件压缩以及相关懒加载技术实现
- 测试工作:寻找软件缺陷、修复缺陷,编写测试文档
二、关键技术总结
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)统一数据格式,循环处理生成二维数组
三、开发过程问题总结
- 设计阶段考虑不周,导致项目逻辑和项目目标变更。
- Scrum敏捷开发模式的计划制定和执行较为粗糙,在特殊时期未能起到控制项目进度的功能。
- 部分开源项目对项目适配性差,导致了富文本编辑器多次迭代更新。
- 平台对接相关事宜未能在设计阶段达成共识,导致后期平台对接耗费较多精力。
四、项目问题总结
- 对创意发布模块的专利保护情况欠缺考虑。
- 创新引导流程中的问题模型建立步骤对没有专业知识的用户来说使用较为困难。
- 发明原理缺乏详细解释和经典案例,用户理解困难。