H5源码：视频可视化搭建项目源码

工程目录

|-- client					--------前端项目界面代码
    |--common					--------前端界面对应静态资源
    |--components				--------组件
    |--config					--------配置文件
    |--eventBus					--------eventBus
    |--filter					--------过滤器
    |--mixins					--------混入
    |--pages					--------页面
    |--router					--------路由配置
    |--store					--------vuex状态管理
    |--service					--------axios封装
    |--App.vue					--------App
    |--main.js					--------入口文件
    |--permission.js			        --------权限控制
|-- server					--------服务器端项目代码
    |--confog					--------配置文件
    |--controller				--------数据库链接相关
    |--extend					--------框架扩展
    |--model					-------Schema和Model
    |--middleware				--------中间件
    |--core				        --------Koa MVC实现自动加载核心文件
    |--views					--------ejs页面模板
    |--public					--------静态资源
    |--router.js				--------路由
    |--app.js					--------服务端入口
|-- common					--------前后端公用代码模块（如加解密）
|-- engine-template			        --------页面模板引擎，使用webpack打包成js提供页面引用
|-- config.json				        --------配置文件

编辑器整体设计

• 一个组件选择区，提供用户选择需要的组件
• 一个编辑预览画板，提供用户拖拽排序页面预览的功能
• 一个组件属性编辑器，提供给用户编辑组件内部props、公共样式和动画的功能
• 用户在左侧组件区域选择组件添加到页面上，编辑区域组件通过动态组件特性渲染出每个组件元素。

视频合成核心

• 基于FFCreatorhttps://github.com/tnfe/FFCreator，只需要很少的快速依赖和较低的机器配置就可以开始工作

开发调试

启动 mongodb

• 安装mongodb：https://zhuanlan.zhihu.com/p/394960855
• 配置mongodb：配置文件在/server/config/index.js
• 启动mongodb：https://www.cnblogs.com/zhm1985/p/13111448.html

安装依赖

npm i

• 在安装依赖过程中会去根据用户当前环境自动拉取FFmpeg的相关二进制包，具体各个系统的相关二进制包可见node-ffmpeg-installer二进制包详解

启动前置并开启观看模式

此模式下会开启热更新

npm run watch-publish

启动服务端

npm run dev-server

启动完成访问http://localhost:4000就可以看到工程页面了

先注册用户，然后登陆体验操作

发布部署

启动 mongodb

• 安装mongodb：https://zhuanlan.zhihu.com/p/394960855
• 配置mongodb：配置文件在/server/config/index.css
• 启动mongodb：https://www.cnblogs.com/zhm1985/p/13111448.html

需要全局安装 pm2

npm install pm2 -g

启动命令

npm run publish && npm run start