【项目笔记】晚会互动大屏项目总结

项目简介

晚会现场互动大屏是一款用于晚会,年会等现场活动气氛互动系统,分为前端(后台,大屏幕),后端,微信小程序端,大屏实时动态投放活动状态,留言等,用于烘托现场气氛。

项目展示

前台(大屏幕)

image-20201019122048969

image-20201019122403490

image-20201019122342437

后台

场控管理

image-20201019121510010

(界面切换后,前台不会直接刷新,会通过动态刷新方式更改布局)

礼物管理

image-20201019121532114

活动管理

image-20201019121321416

节目单管理

image-20201019121411883

节目新建&编辑

image-20201019121400377

用户管理

image-20201019121556255

小程序

首页活动选择

image-20201019121656070

活动界面

image-20201019121932434

我的礼物

image-20201019122313069

项目设计

所有微服务基于 Spring BootSpring Cloud Alibaba构建

image-20201019173034653

前端视图采用 vue.js + elementUI 产品界面。

屏幕使用是 DataV用来做基础模板

文档链接 http://datav.jiaminghi.com/guide/

使用了如水位图

image-20201019174200405

胶囊柱图

image-20201019174225599

留言模块主要使用的是 轮播表

image-20201019174315907

通过 updateRows方法 不刷新的更新数据

抽奖界面在此界面基础上 手写了抽奖样式

为了保证节目效果(主持人喊开始结束) 前端完成抽奖,之后把中奖数据发送到后台,然后再渲染到前台中奖列表中。

后台操控使用的是vue-element-admin 一款基于elemUI的后台管理模板

缺什么组件都可以通过elemUI找到相对于组件

图片上传使用的是 阿里OSS存储服务 也相对简单

小程序端也比较简单,比较复杂的可能就是点赞的效果,比较难做。调试了很久


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!

河传助手项目展示 上一篇
抽奖笔记 下一篇