基于springboot+vue(thymeleaf)+mysql下的自创音乐网站平台--CrushMusic(开发日志十二)

上期说到歌手部分，当时还添加啥歌手以及专辑与歌曲，所以不能体现分类模块，花了一两天搜集了一百多张专辑和三百多首歌曲添加了进去，先看歌手模块部分。

 

这是未分类的模块，我们点击推荐男歌手：

 

再点击一个华语男歌手：

 

点击欧美歌手：

更多的分类就不用展示了，做完这个模块之后还添加了歌手详情页面，点击头像或歌曲列表名称都可以点进歌手详情界面：

点击周杰伦头像：

 

这个单曲列表，我们还可以点击专辑：

 

点击任意一张专辑进入专辑详情：

 

可以在这个界面点击任意的该歌手的专辑进行查看。

成果展示结束，现在来说明一下做的时候遇到的几个问题：

1、浏览器缓存问题：

由于此项目还没进行前后端分离，但我会经常改动一些css，这个时候浏览器却不能及时的进行更新，因为浏览器会优先加载缓存的css，只要你引用的css没有变，它不会去重新加载，但是如果你想看到效果的话，

解决方案一，就是按F12在检查模式下进行你css更改测试，这样如果效果满意那你改动的css就是正确的，浏览器过一段时间就会重新加载你的资源的；

解决方案二 ，就是清除浏览器缓存，但是这个方法会让浏览器重新加载你的静态资源，会加载一段时间，很不方便，最重要的一个缺点就是，如果引用了bootstrap的图标，他不会去及时地加载，我昨天遇到的问题就是，bootstrap图标加载不出来了，为此我还专门引用了静态的字体图标文件，浏览器却还是未能加载，但是我明白这是浏览器缓存问题，所以我就没理会，果然今天早上重新运行项目时，图标又全部加载回来了。

2、页面刷新时滚动条位置不变：

因为我的项目需要点击爱心来进行添加我喜欢，如果每次点击后都要刷新到最顶部就不合理，所以我引用了一段js代码就解决了这个问题，附上代码：

window.onbeforeunload = function () {
    var scrollPos;
    if (typeof window.pageYOffset != 'undefined') {
        scrollPos = window.pageYOffset;
    }
    else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
        scrollPos = document.documentElement.scrollTop;
    }
    else if (typeof document.body != 'undefined') {
        scrollPos = document.body.scrollTop;
    }
    document.cookie = "scrollTop=" + scrollPos; //存储滚动条位置到cookies中
}

window.onload = function () {
    if (document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {
        var arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/); //cookies中不为空，则读取滚动条位置
        document.documentElement.scrollTop = parseInt(arr[1]);
        document.body.scrollTop = parseInt(arr[1]);
    }
}

3、redirect传参中文为空：

因为我的那些分类啥的都是中文，传参过去如果用数字代替再判断回来就很不方便，这个时候我调查了一下原因，原来是编码问题，只需要在传参时附上一段转码即可，例如我这个：

return "redirect:rank?song_classify="+ URLEncoder.encode(song_classify,"UTF-8");

前面展示的几个页面实现原理都很简单，难点已经在前几期讲过了，这里都是重复的增删改查，所以代码方面就不用展示了，前端界面我借鉴的是：我的音乐部分是酷狗音乐，歌手推荐那里是网易云，歌手详情与专辑详情、歌单推荐等借鉴的是QQ音乐，属实是个缝合怪了。

算来算去，音乐网站基本的功能都已经实现了，不过用户还可以自己创建歌单，以及将歌曲添加进自己的歌单，这个模块还要加一下，最后就是播放模块，就可以结束了。