信息发布系统

我要开发同款
pipi_web2023年11月22日
120阅读
开发技术vuejavascriptcss、html5
所属分类网页(Webview)

作品详情

该项目分为:数据概览、素材管理、节目管理、审批中心、发布记录、设备管理;
该项目的使用流程及模块功能:
上传素材,=》在审批中心,审批素材;
根据已经审批通过的素材创建节目,节目创建包含节目信息、及选定的设备、及播放的策略 =》 审批通过后,节目在大屏上根据策略播放;
节目管理,可以查看全部节目及正在播放的节目,可以删改,也可以查看详情;
发布记录,记录发布的节目记录用来追溯历史的发布信息;
设备管理,可以查看节目可以下发播放的设备;设备包含开关屏,重启,及批量操作。

我负责整个项目的所有模块前端功能开发,项目使用的是vue2 进行项目搭建,echarts 进行数据概览图表绘制,Element UI 进行组件封装,统一封装的axios进行接口请求,scss 进行页面样式书写。包含上传组件封装,视频首帧获取方法封装,base64和file互转;服务器获取时间方法封装。该功能已经通过测试,并上线。

项目遇到的难题1:首先是素材上传的断点续传,获取视频固定帧数作为封面,,因为考虑到用户体验,同时还要保证能并发,挂后台上传。解决方案,开始查阅下语雀,博客以及github,大概看了下思路,就是,切割文件,上传分片再组合文件(这一步后台根据MD5值去合并),文件采用slice进行切割,在根据new File()将分片设置成完整的单个file,至于视频首帧,则是利用 canvas 快照将视频流在 onloadeddata 预加载模式下获取固定帧,暂停采用的是 axios.CancelToken 来中断接口请求;
难题二2: 节目发布因为需要的是有及时性和时效性,在用户选用播放时间时,不能使用本机时间,需要使用服务器时间;解决方案查询资料采用通过创建XMLHttpRequest new Date(xmlHttp.getResponseHeader('Date'))来获取;
声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论