《Web应用基础》课程结业报告
前言
项目地址:https://xsq11.github.io/web/index.html
现在是五一假期,我们的web课程已经结束了,总共上了半学期,通过这半学期的学习,我也对前端的一些知识有了解,感觉前端比后端简单,但是杂事更多。后端没有那么多乱七八糟的东西要考虑,像什么图片配色啊,布局啊,各个部件的大小啊,等等。这次为了完成这个课程设计,我还学会了PS,哈哈哈,以后大有用处。
一、实验内容
(1)开工前的准备
1、这次做什么
Web版的在线音乐播放器
2、为什么会想到做这个
因为老师让我们自己选择主题,我比较喜欢听歌,所以我就想自己做一个Web版的在线音乐播放器。以前做过基于QT的在线音乐播放器,也算是有一些经验吧。
(2)页面的设计
我准备做13个页面,其实刚开始想的是20多个页面,后来发现有些页面很难实现,所以就减少了一些,这个会在后面 “未解决的内容”中详细说明。
(由于我没有保存最开始的代码,所以最开始的index.html 页面内容丢了,本来还想放一张图片的,以后一定注意!)
(3)页面的实现
1、index.html 的实现
index页面有四行,第一行为一个轮播,里面有四张图片。第2,3,4行为歌单,歌手,歌曲的推荐,每行3列。
MDBbootstrap,因为老师讲过一些MDB的例子,以及MDB的官网教程也很详细,我直接CP,然后修改一些地方,于是就完成了index的设计。但是这个只是一个空壳,点击后没有任何反应。
2、index.html的第2行图片点击后页面的实现
这一行的图片点击后会显示一个可播放的歌单。
网易云外连接技术
网易云等音乐平台都有生成外连接播放的功能,可以在你的html页面生成一个播放器,十分好用。(其实就是用< iframe>标签把它的页面嵌在自己的页面,只不过这个页面比较干净,没有其它不相干的元素,但是有vip权限的不能导出!!!)
<iframe width="100%" height=500 src="https://music.163.com/outchain/player?type=0&id=5381722575&auto=0"></iframe>
所以点击“生成外连接播放器”后,把生成的代码放入即可。
2、index.html的第3行图片点击后页面的实现
这一行的图片点击后会显示歌手的信息以及他的相关歌曲。
PS的简单实用
其实不光是这里用到了PS,其它很多图片都是我用ps修改过的。因为网上的图片很难找到满意的,所以就需要对不满意的地方进行修改。这里主要是把找到歌手的图片的不相干元素进行删除,扣除背景,和图片大小的调整。
(唉,这个过程一言难尽啊,我不适合干美工。。。
然后index.html的第3行图片点击后页面的实现也和前面两差不多)
3、网易云API的调用
为了能够实现在线搜索和播放歌曲,必须用js调用相关的api,所以我选择用网易的,当然也可以用其它的。(千万别用酷狗的,因为每天有次数限制。以前做QT的音乐播放器就是用的酷狗的api,因为写代码的时候需要不断调用进行调试,结果次数上制后,给我返回一个莫名其妙的错误参数,刚开始还不晓得是次数上限了,百度了才知道,搞得我心态炸裂。)
1、先创建一个ajax对象:
//ajax 对象
function ajaxObject() {
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的浏览器不支持AJAX!");
return false;
}
}
}
return xmlHttp;
}
然后写调用函数:
2、得到歌曲 id,歌名,歌手信息 ;
网易云的API为“url = ‘https://v1.alapi.cn/api/music/search?keyword=’ ”;后面加上歌曲的名称。注意:歌曲的名称需要encodeURI,因为中文会出错,所以要编码后传递。
然后服务器会返回json数据,json数据如下,我们需要解析。
{
"code": 200,
"msg": "success",
"data": {
"songs": [
{
"id": 191254,
"name": "天下",
"artists": [
{
"id": 6472,
"name": "张杰",
"picUrl": null,
"alias": [],
"albumSize": 0,
"picId": 0,
"img1v1Url": "https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
"img1v1": 0,
"trans": null
}
],
"album": {
"id": 19318,
"name": "明天过后",
"artist": {
"id": 0,
"name": "",
"picUrl": null,
"alias": [],
"albumSize": 0,
"picId": 0,
"img1v1Url": "https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
"img1v1": 0,
"trans": null
},
"publishTime": 1219766400000,
"size": 10,
"copyrightId": 636011,
"status": 1,
"picId": 29686813955450,
"mark": 0
},
"duration": 219093,
"copyrightId": 636011,
"status": 0,
"alias": [],
"rtype": 0,
"ftype": 0,
"mvid": 5779666,
"fee": 8,
"rUrl": null,
"mark": 8704
},
观察json数据即可进行对应的解析。比如 ajax.status == 200 表示正常返回。data{…}里面的songs[…]里面有歌曲的 id 等信息,我们只要获取自己需要的即可。
我就解析了 歌曲 id:id1;歌名:songname ;歌手:artistname ;当然像歌曲时长啊,歌词啊,都可以得到,只不过我不需要就没解析。
2、得到歌曲的播放地址 ;
前面已经得到了歌曲的id,我们只需要 ‘https://music.163.com/song/media/outer/url?id=’ + id + '.mp3 即为歌曲的URL地址。
// ajax post请求:
function ajaxPost() {
var url = 'https://v1.alapi.cn/api/music/search?keyword=' + encodeURI(document.getElementById('in').value);
//alert('enter1');
var ajax = ajaxObject();
ajax.open("get", url, true);
ajax.setRequestHeader("Content-Type", "application/json;charset=utf-8");
//alert('enter2');
ajax.onreadystatechange = function () {
if (ajax.readyState == 4) {
if (ajax.status == 200) {
var response = JSON.parse(ajax.responseText);
var songUrlList = [];
var id1 = response.data.songs[0].id;
var songname = response.data.songs[0].name;
var artistname = response.data.songs[0].artists[0].name;
var htt = 'https://music.163.com/song/media/outer/url?id=' + id1 + '.mp3 ';
// 此时得到了 歌曲 id:id1;歌名:songname ;歌手:artistname ;播放地址:htt
ajax.send(null);
}
3、得到多首歌曲的信息并显示
这样我们就获取了一首歌曲的需要的信息,但是我们往往不仅仅需要一首,而我选择了8首(因为8这个数字吉利),然后用table把他们显示出来,并且点击可以播放。
效果如下:
4、搜索歌曲演示
1、点击右上角的 “找音乐”
2、在右上角输入搜索内容后,点击SEARCH(search)
3、成功搜索
二、过程中遇到的问题
1.网上找的资源图片一言难尽
图片的大小,风格,有杂质等等问题,都需要用ps处理,十分耗时。
2.色彩搭配问题
唉,现在这个成品的色彩是我换了好几个的了,还算勉强看得过去。
3.API调用的一些问题
网易云的外连接播放器它省略了http://,害我搞半天都没弄出来,我刚开始也觉得奇怪,但我以为它就是这样的,我就没在意,结果它总是显示文件不存在,百度后才晓得原因;
还有api的keywords千万别直接用中文,一定要编码后再传入。
当然了,过程中还有许多小问题,不过都解决了,就是耗了些时间。
三、未解决的问题
前面也说了,本来有20多个页面的,但是因为这个网页是静态的,没有数据库等后端,所以像用户登陆等个性化功能无法实现。还有下载设置,意见反馈等高级功能也无法实现。
总结
前端的学习还是很有趣的,这次做这个作业花了很多时间,因此也加深了我对html,css,javascript的理解和应用。说真的,像这种大作业比卷面考试更能锻炼我们的能力,如果这次是卷面考试,我可能仅仅只会答题,可能对语法会很熟悉,但是对真正的应用却不太行,毕竟很多东西卷子无法体现出来。
当然,我也有遗憾的地方,比如对typscript就不是很熟悉了。老师虽然讲了angular的基本使用,但是我这次做的是静态网站,没有用到angular框架,所以这是一个遗憾,争取假期补上吧。
2021年5月3日 21:08