亦云小组KTV点歌系统简介

客官°小女子只卖身不卖艺 2022-10-10 06:21 174阅读 0赞

![53d78064556271ae64637a7cf1e4030a.png][]

20级青鸟四班 亦云小组

指导老师：穆老师   班主任：佟老师

**小组成员：**

组长：靳天宇

组员：王晓丹 谢佳泽 王睿志 蒲璐颖 张铨政

**目录：**

1.首页 2.项目前台 3..项目后台

**总结：**

本次KTV项目总结。总体来说，相比于一期的：“HTML网页制作项目”难度要大很多。刚接手时，我们每一个人都有一定的压力。心想着，凭借自己的能力能不能做好这次项目？怎样将它完美无瑕地展现在观众的面前。经过一天的紧密筹划与分配。用时一周制作的KTV项目终于从我们的手中打造而成，展示观众的面前。

本组所制作的KTV系统点歌系统，实现了让客户进行基本的查歌、点歌、切歌的功能。以及后台开发人员对系统的维护、对歌曲信息进行的增删改等等的操作。

这些功能的实现，都离不开项目开发人员的精诚团结、刻苦钻研的精神。我们会认真地对待每一个细节，用心去做它。让它完美地展现在你们的面前！

**主页：**

![c08926f3bdf683c8e6e4536a06a19d05.png][]

页面布局：

由右边的酒水，娱乐，点歌等字样组成的类似于导航栏的功能

![f5987cad0ca0404f2906becde55ca1ca.png][]

图.1

由上述图片图.1组成的KTV点播功能

![d6fb2a45ca6cb1b370eebe0f134e5d1b.png][]

上图组成了的KTV主页的主体

由榜单，歌星，语种，拼音，MV，分类，字数组成

**功能：**

1.  可以实现通过主页来进入不同的点歌样式页面
2.  实现了对歌曲的暂停播放，切歌，气氛，重唱，音量加减，唱歌，返回主页，上一首，下一首的功能

**特色：**

1.  按住或单击播放等功能会变色
2.  创新的加入了音量进度条可以通过单击或者滑动来改变音量
3.  提示功能——背景均由半透明的黑色或白色打底
4.  创新-加入了歌曲进度条功能可以根据当前播放的时间而前进

**已点功能：**

![c7e288f5c0a1fc1a8c4b59173596b132.png][]

页面布局：由已点组成

**功能：**

*  可以删除歌曲
 *  点播歌曲
 *  点击歌曲后切换歌曲

**特色：**

*  可以上下页
 *  已点的图标里的数字可以根据已点歌单的数量而变化
 *  点已点图标显示再点一下隐藏

**歌星点歌：**

![b3c98a5a108dca49509f376a0454091d.png][]

页面布局：由歌单列表和歌星点歌页面组成

**功能：**

可以通过点击歌星的名字来查询歌曲

**特色：**

*  选择歌曲会变色
 *  支持显示歌星照片并进行上下页
 *  背景都是半透明的黑色

**语种点歌：**

![78d06d7f40ce361b0737c443dd4c64bf.png][]

页面布局：

由歌单列表和语种点歌页面组成

**功能：**

可以通过点击大陆，日韩，香港等来查询歌曲

![aaedfbebfe5649196dfd5a6b78775a77.png][]

可以通过点击返回显示主页

**特色：**

*  支持语种页进行上下页
 *  支持显示歌曲和歌手姓名并进行上下页
 *  背景都是半透明的黑色

**分类点歌：**

![fba70a549a9b09e46afccdf3d9a89b2b.png][]

页面布局：由歌单列表和分类点歌页面组成

分类点歌里面有热门流行，经典老歌，游戏动漫组成(更多分类可在后台添加)

**功能：**

*  可以通过点击热门流行，经典老歌，游戏动漫等来查询歌曲
 *  可以通过点击返回显示主页
 *  可以将查询的歌曲通过点击加入到已点中

**特色：**![29a5ef95ee0bd392a6509596c661b426.png][]

*  背景都是半透明的黑色
 *  RGB颜色切换渲染气氛
 *  分类可上下页

**字数点歌：**

![6d364cf6841bbd7efb8ae1d461a2fe62.png][]

**页面布局：**

*  由歌单列表和字数点歌页面组成
 *  字数点歌里面由数字和查找删除组成

**功能：**

字数点歌里面可以输入查询歌曲字数

![55d4efeb161780cc96388ba83fffce69.png][]

*  不输入数字则查询全部歌曲
 *  可以通过点击返回显示主页
 *  可以将查询的歌曲通过点击加入到已点中

**特色：**

*  歌曲添加到已点列表后变色
 *  背景都是半透明的黑色

**换肤功能：**

![4203ba5aff949e7937433fbddb27f6c6.png][]

*  由内置的4个皮肤预览图组成
 *  单击可以切换皮肤

**皮肤：**

![2c8b681deb428d1105a975214e16e74b.png][]![e88b2ca937f4d931eac1a3047bfa62c9.png][]

![dcd786f704f4cbf50a285d2962bce7d8.png][]![459f2282a6b0dd7566536df49be1d41d.png][]

**酒水页面：**

![27ff56e6572dcc674a15aa98aecada69.png][]

页面布局：由酒水的点击按钮，酒水，支付页面 构成

**功能：**

![0726dbe76db8380555a8e9048e1474ec.png][]

*  单击酒水可以打开酒水的页面 单击一款酒水或者饮料会显示共多少元
 *  名称的后面会根据你点了几下而变化
 *  点击支付可以选择支付宝和微信的方式支付
 *  点击取消关闭酒水页面并全部清0

**登录页面:**

![bad6ea98d1e22aa8000710bddd095802.png][]

主后台页面：

![28062aa3e1ae14e7478ec650ac33ae88.png][]

页面布局：由导航栏和主页面构成

**功能：**

可以点击导航栏来增删改查

**后台查询：**

![795c5a56f7b07c550cc018acdc5b8f74.png][]

依次是查询歌曲信息，查询歌手信息，查询歌手类型，查询歌曲类型

鼠标通过右击进行修改或删除歌手信息,歌曲信息,歌手类别,歌曲类别

![85c2563320dd81b55c3dc3c66ef0d4a4.png][]

[53d78064556271ae64637a7cf1e4030a.png]: /images/20221005/d678ecda06164a5784a96d4212f96171.png
[c08926f3bdf683c8e6e4536a06a19d05.png]: /images/20221005/2647b0d109da43578d08bd42a42d67f6.png
[f5987cad0ca0404f2906becde55ca1ca.png]: /images/20221005/917e2d8d51e944a8923e0cad3e8b5833.png
[d6fb2a45ca6cb1b370eebe0f134e5d1b.png]: /images/20221005/9fb7b61dc3b2434d8d54a9b5e59c355b.png
[c7e288f5c0a1fc1a8c4b59173596b132.png]: /images/20221005/f248cf3425a64534a2fbd2bb1cfe0b42.png
[b3c98a5a108dca49509f376a0454091d.png]: /images/20221005/9fb73e9747d748f1b0af3d8252e8604f.png
[78d06d7f40ce361b0737c443dd4c64bf.png]: /images/20221005/9960bd65c2404b36a0fde461795f8a6f.png
[aaedfbebfe5649196dfd5a6b78775a77.png]: /images/20221005/25b587b1d6a34c44b6c9c0da76f53bc7.png
[fba70a549a9b09e46afccdf3d9a89b2b.png]: /images/20221005/c19d8159363c492d9c761c55138b4b29.png
[29a5ef95ee0bd392a6509596c661b426.png]: /images/20221005/6e357165b0064143bc84ce6bec05fb9d.png
[6d364cf6841bbd7efb8ae1d461a2fe62.png]: /images/20221005/829408bed47d4e838d77a9b9b7cd2a31.png
[55d4efeb161780cc96388ba83fffce69.png]: /images/20221005/ed72ba83cc2d4582a3fb7e9b345f04d0.png
[4203ba5aff949e7937433fbddb27f6c6.png]: /images/20221005/021c082defea4e1faa039a8499fac81f.png
[2c8b681deb428d1105a975214e16e74b.png]: https://img-blog.csdnimg.cn/img_convert/2c8b681deb428d1105a975214e16e74b.png
[e88b2ca937f4d931eac1a3047bfa62c9.png]: /images/20221005/99766b5c8360441ca68951c15033c275.png
[dcd786f704f4cbf50a285d2962bce7d8.png]: https://img-blog.csdnimg.cn/img_convert/dcd786f704f4cbf50a285d2962bce7d8.png
[459f2282a6b0dd7566536df49be1d41d.png]: /images/20221005/50898293e3114efd8522105c092902eb.png
[27ff56e6572dcc674a15aa98aecada69.png]: /images/20221005/5e175d9bdaa342699eb2828eb15b330f.png
[0726dbe76db8380555a8e9048e1474ec.png]: /images/20221005/d9943587788a474ba641781cfff15229.png
[bad6ea98d1e22aa8000710bddd095802.png]: /images/20221005/42a3fb4fb8cf4513bbd6d882b1edb614.png
[28062aa3e1ae14e7478ec650ac33ae88.png]: /images/20221005/a8129752c9dd4a52aeb8db6b6c71f6c7.png
[795c5a56f7b07c550cc018acdc5b8f74.png]: /images/20221005/8cf9b70ea92241799f5bc6cbabe59e35.png
[85c2563320dd81b55c3dc3c66ef0d4a4.png]: /images/20221005/97e8abfbb5994c5a9946024ee6694dd7.png