OurEDA慕课网开发记录

项目说明

OurEDA实验室每年都会面向大一新生招人，每周的沙龙都会有学长来讲课，传经验，录下来的沙龙视频就非常有价值，因此，在老师的安排下，我负责开发了慕课网这样一个项目。

首要问题及其解决方案

视频网站首先需要考虑的问题就是大视频文件的播放，上传，处理。

• 沙龙一般时长为一个半小时，所以项目至少要能承受4GB的大小的视频文件的上传。这里我选用了百度的fex-webuploader，利用其分片上传功能，先分片上传，再后台合并，利用事务机制实现空间的最大化利用，防止“死文件碎片”的产生。
• 视频的播放我使用了JWplayer的播放器，后台使用nginx做静态文件代理，对非文件请求使用nginx反向代理。

解决了视频文件问题，剩下的就是web开发的基础问题了。

技术选择

随着项目经验的增加，我对于一个较大项目的的前后端分离非常看重，因为这涉及到项目中后期的效率问题，非常重要。

• 前端工程使用React+Webpack+Redux，因为后台管理涉及很多增删改查的步骤，使用Redux是非常有必要的。在前后端分离方面，我利用Node做了一层中间层，使用自己编写的proxy中间件，将带有特定前缀的请求都重定向到开发者指定的地方，中间的处理过程对开发者来说是透明的，这样就解决了安全跨域的问题。
• 后端工程一如使用Koa等熟练的技术进行的开发。
• 架构使用前后端分离，在自动化方面增加了gulp来协助webpack进行自动化转译等工作。

前端工程结构

IMooc/
├── mocks/  假数据，用于开发
├── assets/
│   ├──html/ 编译压缩后的html文件
│   ├── dist/ 静态资源文件
│       ├── font/
│       ├──  js/
│       ├── css/
├── src/   源码目录
│   ├── html/  ect模板
│   ├── css/
│   ├── js/
│   ├── scss/
│   ├── image/
│   ├── lib/  bower目录
├── server/   源码目录
│   ├── instances/  实例
│   ├── lib/    库函数
│   ├── routes/   路由
│   ├── views/   网页渲染内容
│   ├── public/   公共资源文件

上面server是一个小型服务器，不处理复杂路由逻辑，只具有转发的作用，充当中间层，mocks假数据用于前后端平行开发，前端的所有开发都在src内。

一些收获

• redux的思想很惊艳，层次的划分非常具有美感。
• react的组件复用特点用好了，越到后期开发速度越快，用“信手拈来”形容再恰当不过。但是要注意组件的设计一定一定要有规划，要知道会有多少页面用到所需的组件，越原始的组件改动接口结构越危险，
• 前后端分离真的很棒，即使是一个人对功能进行修改，也能做到条理清晰。
• gulp+webpack自动化一定要做，会非常省心，开发者启动了自动程序后只需要关注代码即可，刷新浏览器，热加载一类的活就应该交给工具干！

项目部分页面截图