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

项目部分页面截图

OurEDA慕课网开发记录_第1张图片
OurEDA慕课网开发记录_第2张图片
OurEDA慕课网开发记录_第3张图片
OurEDA慕课网开发记录_第4张图片

你可能感兴趣的:(OurEDA慕课网开发记录)