2021-05-03

《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