2024年实训项目——志愿云媒体

目录

0.前言

1.简介

2.开发背景

3.功能模块

4.涉及技术与框架

5.项目实现

5.1 登录

5.2 注册

5.3 模块选择

5.4 内容展示区

5.5 视频展示区

5.6 系统管理区(仅管理员可见)

5.7 个人信息区

6.总结

---

0.前言

本文主要分享2024年实训项目，旨在记录项目内容、项目实现等。前端代码地址：志愿云媒体实训前端项目 (github.com)https://github.com/wubeizi/volunteer_hub

1.简介

本系统是一个独立开发的网站，在系统中为四川省志愿者服务活动中心提供志愿者及志愿服务事业宣传的统筹管理。

2.开发背景

随着科技的进步和社会的发展，多媒体展示系统在各类活动中心，特别是志愿者服务活动中心的应用越来越广泛。志愿者服务活动中心是志愿者们交流、学习和开展活动的场所，因此，建立一个多媒体展示系统可以更好地满足志愿者们的需求，志愿者服务活动中心可以更加生动、形象地展示志愿者的风采和成果，提高志愿服务的知名度和影响力。志愿者服务活动中心多媒体展示系统致力于提高志愿者服务活动的管理和宣传效果。

3.功能模块

本项目主要定义了志愿云媒体的需求，由四大模块组成：内容展示区、视频展示区、个人信息区、系统管理区。

4.涉及技术与框架

• 前端：Vue3
• 后端：SpringBoot
• 数据库：MySQL，MyBatis-plus
• 数据存储：pinia
• 前后端数据交互：axios
• 组件库：TDesign

5.项目实现

5.1 登录

用户进入首页，在登录框中输入自己的账户号和密码，点击按钮进入后台进行验证，如果验证通过，进入志愿云媒体，如果未通过验证，则转至登录框，提示用户错误的原因，如此直到用户信息通过验证，再执行通过验证的后续操作，直到结束。

5.2 注册

用户进入登录页，点击注册账号，在注册框中输入自己的用户名、密码和邮箱，点击按钮进入后台进行验证，如果验证通过，则通知用户创建账号成功，跳转到登录页面进行登录，如果未通过验证，则提示用户错误原因（用户名不合法，密码两次不相同），如此直到用户信息创建账号成功，然后跳转至登录界面登录。

5.3 模块选择

用户进入主页，点击左侧导航栏的模块的子菜单内名称，选择其中任何一项进入其内部进行操作。

5.4 内容展示区

5.4.1 文明四川

主要展示与四川文明创建相关的新闻资讯，包括道德模范、道德好人等内容，点击相关新闻或好人模范会出现浮窗，用户可进行阅读，部分按钮会跳转到外部网站进行查看。

5.4.2 志愿四川

主要介绍相关志愿项目和热点新闻等，提供项目介绍、新闻专栏、专题活动、志愿招募和活动地图等信息。

5.4.2.1 志愿项目

在志愿项目页面，用户可以通过关键词筛选或直接搜索的形式查找相关志愿活动，并点击查看活动详细信息。

5.4.2.2 信息动态

在信息动态页面，用户可以阅读近期热门的新闻或图片，点击相关项可以查看详细内容。

5.4.2.3 宣传视频

在宣传视频页面，用户可观看志愿相关视频，点击相关项可播放视频。

5.4.2.4 活动地图

在活动地图页面，用户可查看志愿项目在四川省的具体分布情况，同时可筛选三种状态的志愿项目(进行中，待启动，已结项)，鼠标悬浮可查看相关信息，也可点击链接进行跳转。

5.4.3 活动广告

主要展示志愿公益活动与公益广告。

5.4.3.1 公益活动

在公益活动页面，用户可查看与公益相关的新闻，点击相关项可查看具体内容。

5.4.3.2 公益广告

视频类

视频类公益广告主要展示以视频播放为形式的广告，用户点击可查看视频内容。

图片类

图片类公益广告主要展示以图片为形式的广告，用户点击可查看图片详情。

5.5 视频展示区

5.5.1 视频播放

在多媒体大屏上滚动播放列表中的视频，用户可在列表中通过拖拽来排序视频。

5.5.2 信息发布

用户可在信息发布页面设置在大屏上播放的视频列表，可通过本地上传视频或选择云端上的视频来设置。

5.6 系统管理区(仅管理员可见)

5.6.1 管理用户

管理员有权删除或编辑用户相关信息。

5.6.2 数据管理

系统管理员点击下载sql文件可以备份系统中的所有数据，同时管理员可管理整个系统的所有数据，包括在内容展示区的文章、人物以及热点新闻等，可进行新增、删除、修改等操作。

5.6.3 系统信息

系统信息页面用于记录系统管理员的操作日志和系统的基本信息，管理员可导出操作日志。

5.7 个人信息区

5.7.1 个人页

个人页用于展示用户的相关基础信息，用户可修改除名字外的信息。

5.7.2 登出

用户点击登出，可回退至登录页。

6.总结

本项目主要采用Vue3作为前端框架并利用SpringBoot作为后端框架，搭配TDesign组件库和相关插件，采用本地部署的形式完成了一个前后端分离的项目。本项目为笔者第三次较为完整的项目经历，从需求分析到设计最后到实现、测试，每个过程都受益匪浅。