项目说明
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自动化一定要做,会非常省心,开发者启动了自动程序后只需要关注代码即可,刷新浏览器,热加载一类的活就应该交给工具干!