【项目总结】饥人谷前端作品库开发心得

2016-06-18 本文已影响1614人清水芦苇

饥人谷前端作品库

目前开发的第一阶段已经结束，项目也已经上线。小组团队要求写一篇开发心得，相互交流，以飨后生。那么在这里我先打一个草稿。
项目作品请见：饥人谷前端作品库
【注：本项目支持手机端浏览】

项目的起止历程

团队的QQ讨论组历史记录最远能追溯到4.22，项目也就是那天开始正式立项运作的。截止到6.6，项目1.0版正式上线。总历时45天，期间产品需求讨论与设计出图10天，项目开发15天，自测联调15天，上线、线上测试、bug修复 5天。

参加项目的初衷

自己所在的公司目前的前端技术有很多地方并没有和互联网前沿技术接轨。一方面，以库的易维护性，安全性，代码混杂性为理由，将jquery库弃之门外，使用的是内部框架，给前端js代码与外部接轨带来困难。另一方面，npm包管理模式还没有建立，工程化，模块化等领域相对较弱。所以一来是实地接触一下互联网的web开发模式，更好地参与技术实践，考虑将一些优秀的东西吸纳进公司内部。二来是自己刚刚接触nodejs后端开发，希望能一试身手。

项目所采用的技术

项目管理工具
公司之前使用的svn版本管理，git虽然使用过但二者的差异并不真正清楚。
个人同意这样的观点：SVN中文化图形界面做的很好上手快，思路很清楚，更适用于项目管理，很多公司仍然用的都是SVN。Git有它的优势比如分支概念，offline使用。感兴趣可以看看以下内容。
话说Svn与Git的区别
前端
HTML CSS规范写法、CSS3特效、BootStrap的使用、响应式页面、常见组件的封装、RequireJS模块化写法
后端
nodejs的使用、Express 搭建网站的方法、常用中间件的使用、七牛图片上传处理、数据库的构思与操作、MongoDB的使用。

本次项目自己负责的部分

本项目后端基于nodejs的express模块搭建，自己负责的主要是上传作品后端编码。修改页由于当时公司项目正紧，迫使交给了别人去做，后期的完善自己也并没有跟进，感觉很遗憾。
具体流程是用户从浏览器端上传作品后将作品信息传到后台，后台将提交的数据保存到数据库。其中的难点是我们将图片保存到七牛云存储平台而并非是自己的服务器上。七牛云存储平台的API是一套新的API体系，如何使用，需要自己去研究。之所以采用上传七牛原因有二：①七牛的图片处理非常便捷，提供了一整套图片处理的API，并且可以用queryString加后缀参数的形式直接改变图片大小，以适应我们缩略图封面图等同一图片不同剪裁大小的需求。②节省自身的服务器压力。

图片云存储和用户、开发者之间的关系

项目中吃到的亏——吃一堑长一智

先谈一下当时我的状态，我当时周一到周五一直在上班。有时候甚至还要加班，但即使这样到家依然要敲两个小时代码，为了赶上项目进度。（但实际上最终我还是给项目拖了后腿）。后期实在顶不住了，回家就睡，早上6点起来敲代码，敲到8点上班。所以当时QQ里6点多我总会发一堆消息，和前端，后端负责人，产品，导师进行沟通。当时感觉非常疲倦，这个我在后面会继续谈到。
起初自己对于技术的理解，对于自身的认识非常浅薄，觉得自己就是负责技术实现就好了，至于产品长什么样，怎么做用户会更喜欢，并不怎么关心，因为我感觉我的成就感更多来源于解决问题本身，而不是顾客的一个赞赏。（当然也可能是用户从来没有直接赞赏过我^_）。在这次项目中，这种错误的认识导致了很严重的后果。因为一开始的项目需求大会我迟到了，只听了一半，竟然觉得这也没关系，后面肯定会有人告诉我去做什么的。我只管到时候再听一遍，然后实现就好了。
后来吃了大亏。
因为自己根本不知道项目需求是什么！哪些内容需要校验，先上传到本地服务器还是先上传到七牛服务器？修改信息需要改哪些数据库的内容？完全没有对上。前后端数据对接完全瞎眼了，一团乱麻，到了第二周感觉自己还完全在团队之外徘徊。即使后来对自己负责部分清晰了之后，也很难再从整体上把握项目，感觉自己只能是牵强地说成是项目的一员，不能算是主导者，连推动者都不算。
也正是从这一次，我开始重视了产品需求，用户体验上的东西，不再是一个盲目的随从，开始考虑合理性，意义，开发效率，界面设计的逻辑等内容，不再是一个简单的技术实现者了。

项目中的前后端交接

我们的流程是这样的，每3~4天开一次技术会，前后端各自汇报一下目前的进展情况以及下一阶段的任务。
一开始要么是没有文档，要么是总是各干各的，互相不通气。后来经过若愚老师调教，开始重视文档，群里常常是写了什么然后@相关人员来看看，开始重视讨论，当时我感觉到大家的空前热情。
整体前后端开发流程是后端或者前端先给出数据接口，然后相关人员确定后敲定，如果后续有需要再添加或修改相应的字段。然后就是沟通，沟通，沟通。
前后端基本对接完成之后，然后出了开发机，大家利用测试用户账号登录一起在线上联调测试。

项目中遇到的问题与收获

其实我们平常总谈收获，比如听讲座受到了启发觉得有收获，比如去旅游拍到了好照片有收获。其实个人认为收获的本质是由0变1，也就是原来你没有而现在你有了。那么在研发领域，真正能有收获的方式有两点：
①他山之石，可以攻玉。多逛技术社区论坛，多看别人的技术博客，读读别人的代码，勤翻点技术书籍。之前我遇到过一阵不爽期，感觉自己每天做的事情差不多，成长开始变缓慢。我请教过之前在实习公司奢集遇到的鹏哥（很多时候去问问过来人总是好的）。他说都有这么一段期间，你觉得成长不大了。这会就需要自己主动去逛逛社区，论坛，了解别人在做什么，不懂就去研究。
②解决问题就是收获。我个人觉得这点相当重要。解决问题应该是工程师的天职。一个工程师的强与弱，不是会多少套语言，会多少个API，也不是做过多少个作品，写过多少行代码，最重要的是解决实际问题的能力。当然解决问题的基础是得有扎实的基本功以及相应领域的基础知识。所以有一些老工程师，写代码不一定有年轻工程师溜，但他们能够作为年轻人的导师来指导年轻人写代码，是因为他们葆有解决问题的视野、思路、能力。

项目中自己处理的问题
自己主要处理的是作品截图上传七牛的操作，起先采用老师推荐的node-qiniu模块进行API，做到一半的时候发现他的API过于陈旧，好几年没有更新，七牛自己的API也已经改版了实际上。所以后来我去尝试了官网上给的原生API，发现好麻烦。然后用去npmjs.com调研，最终选用qn模块来完成和七牛的对接。
在和ajax的交互上，由于数据涉及到图片信息，所以form上必须通过enctype="multipart/form-data"设置form表单的上传数据格式。表单中enctype="multipart/form-data"的意思，是设置表单的MIME编码。默认情况，这个编码格式是application/x-www-form-urlencoded，不能用于文件上传；只有使用了multipart/form-data，才能完整的传递文件数据。但是我在处理这种编码格式数据时总是转换格式不正确，后来利用connect-multiparty中间件将这种格式转换为对象形式，才顺利解决问题。后面有必要研究一下connect-multiparty源码学学人家是怎么转换的。
期间遇到很多不懂的问题，诸如七牛的空间存储的概念，key的概念，二进制流的概念都要去读文档，查资料。

感悟：七牛的js原生API写的真烂，都没有封装回调函数，但是七牛的客服团队是真靠谱！每个问题问了20分钟以内必有人回答，而且可以看出人家是懂技术的。并且周六周日客服都有人坐班。后期七牛客服人员还电话找到我（我都不知它是怎么找到我电话的==）问我体验怎么样，有什么建议，项目是做什么的？很nice，很周到。以下是一些答疑实录。

七牛客服答疑1
七牛客服答疑2
七牛客服答疑3