在线点歌系统-ssm + vue

44 阅读3分钟

在线点歌系统-ssm + vue

本项目为前几天收费帮学妹做的一个项目,在工作环境中基本使用不到,但是很多学校把这个当作编程入门的项目来做,故分享出本项目供初学者参考

一、项目描述

基于ssm + vue的在线点歌系统

本项目旨在开发一个功能完善的在线点歌系统,通过 SSM 框架(Spring + SpringMVC + MyBatis)构建后端服务,结合 Vue.js 框架实现前端页面展示与交互,为用户提供便捷的点歌服务以及后台管理功能,满足用户在线听歌、收藏歌曲、留言互动等需求,同时方便管理员对歌曲、用户、留言等信息进行管理。

前台登录页面 http://localhost:8080/zaixiandiangexitong/front/index.html

后台登录页面 http://localhost:8080/zaixiandiangexitong/admin/dist/index.html

管理员 账户:admin 密码:admin

用户 账户:a1 密码:123456

二、项目功能

(1)前台模块

首页:展示热门歌曲、推荐歌曲列表,显示轮播图,用于展示热门歌手、活动等信息,提供搜索框,用户可以搜索歌曲名称、歌手等。

歌曲:按歌曲类型分类展示歌曲列表,每首歌曲提供播放、暂停、收藏等操作按钮,点击歌曲可进入歌曲详情页面,显示歌词、评论等信息。

留言版:用户可以发表留言,分享听歌感受,展示其他用户的留言内容,按时间顺序排列。

个人中心:显示用户基本信息(头像、昵称、注册时间等),提供修改密码功能,展示用户的收藏歌曲列表。

歌曲收藏:用户可以收藏喜欢的歌曲,收藏的歌曲在个人中心的收藏列表中展示,方便用户随时查看。

(2)后台模块

个人中心:

修改密码:管理员可以修改自己的登录密码。

个人信息:管理员可以查看和修改自己的基本信息(如头像、昵称等)。

基础数据管理:

歌曲类型管理:添加、修改、删除歌曲类型。

通知类型管理:添加、修改、删除通知类型。

歌曲管理:

歌曲管理:添加、修改、删除歌曲信息,包括歌曲名称、歌手、专辑、歌词等。

歌曲留言管理:查看、回复、删除用户对歌曲的留言。

歌曲收藏管理:查看用户收藏的歌曲记录,可进行删除操作。

留言版管理:查看所有用户的留言,支持删除留言操作。

消息通知管理:发布通知消息,通知内容会推送给所有用户,查看已发布通知的列表,支持删除 通知操作。

用户管理:查看所有用户的基本信息(账号、昵称、注册时间等),支持禁用/启用用户账号, 方便管理员管理用户行为。

轮播图信息:添加、修改、删除轮播图信息,设置轮播图的显示顺序和是否启用。

三、运行环境

运行环境开发工具:idea2024.1

运行环境:jdk1.8+maven3.8.6+MySQL5.7+nodejs14.18.1+tomcat8.0

(此配置为本人调试所用,仅供参考)

四、项目技术

服务端技术:SSM

前端技术:Vue

以上系统源码经过技术整理与调试,确保能正常运行

五、项目截图

1754887471-83bbc1ff14a9c48.png

1754887474-e69bdb5834a6c83.png

1754887478-60f7967997c913b.png

1754887487-2ab6c6acdb5f342.png

1754887489-2a0ca136d1d1a44.png

1754887492-ffa2747bae247da.png

1754887496-a3d2388bb1b4406.png

1754887503-ec061e05dbda66a.png

1754887506-369bc55aad6b573.png

1754887508-d233c31af2d2829.png

1754887513-a168ea70d1188af.png

1754887518-b1f82f4b5c0f03e.png

1754887520-0ffc61fb976b687.png

1754887524-90e35abb78370f6.png

1754887529-0f8b9fe7364c7d4.png

1754887533-0d435438c86074d.png

1754887535-960f7b89901ade4.png

1754887540-c05bd0b457cf7e4.png

1754887544-4f201498f7235a7.png