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

    项目部分页面截图

    首页
    首页
    课程列表页面
    视频播放页面
    个人页面
    课程管理列表页面
    课程信息修改页面
    课程信息修改页面
    课程视频上传页面
  • 相关阅读:
    Pig Latin-freecodecamp算法题目
    Search and Replace -freecodecamp算法题目
    Where art thou-freecodecamp算法题目
    Roman Numeral Converter-freecodecamp算法题目
    Diff Two Arrays-freecodecamp算法题目
    Asp.Net前台调用后台变量
    ASP.NET获取前端页面的Html标签的值
    echart 设置图例图标形状
    解决tableexport导出到excel中有关中文乱码的问题
    C# Async与Await用法
  • 原文地址:https://www.cnblogs.com/bbman/p/12070206.html
Copyright © 2020-2023  润新知