使用Vue+Bootstrap开发在线音乐网站

牟云音乐1.0版本落地成功(nb)

链接请进 牟云音乐

因为我并不是主营前端,对于前端我只能说是浅薄了解,所以网站的界面设计大多借鉴了QQ音乐的设计,故在此声明。

首页

歌单推荐和排行榜满满的都是诚意啊(这套配色刚开始也是模仿后来借助Chrome上的插件Color by Fardos出奇的完成了配色设计,也要感谢朋友在这里的建议)。

歌单详情

(ps:现在已加入"学习"模块)
右边那长长的滚动条暗示着它是一个尊贵的收录了200首单曲的歌单,每首歌曲都有独立的详情页播放,或者点击全部播放。

播放页面

点击左下角的封面图或者键盘按空格开始播放,页面上可以看到当前歌曲的热评,这个UI说实在的真的有些丑我自己都看出来了没办法 ,不是美工的我暂时就这吧。

歌手广场

找歌手没啥说的 按条件筛选就好了。

歌单广场

各种标签各种类型尽管找。

歌手详情

应该找我嵩的,算了。

专辑详情

薛之谦的<<意外>>好像出来有几年了可是听起来并没有过时的感觉,和我嵩一样是个有才华的Boy。

热搜建议

实时更新热搜指数。

搜索建议

总觉得做的还是太粗糙了…

搜索结果

可以搜索单曲 专辑 歌单 歌手 ,然后就可以进去听了, 嗯这些好像很多平台都可以提供, 而牟云界面简陋功能单一根本没有任何可比性, 所以后期的优化中我觉得还是要把体验感做上来,至少不会让人点开后就, 就关掉了,生态也是很重要的一个点。

现在再来记录一下开发这个页面所用到的前端技术栈

• Bootstrap
• Jquery
• Vue

基本上都是面向Google编程 面向Stack Overflow编程哈哈,反正耗时耗精力但确实解决了很多问题。

然后在服务器端的部署,因为是静态页面所以我用的Nginx代理,在这之前我去了腾讯云也就是我服务器和域名备案的云服务商,域名解析在我的顶级域名里加了一条二级域名 music.superboyjack.cn 然后在nginx.conf文件中添加了这么一段配置:

server {
        listen       80;
        server_name  music.superboyjack.cn;#监听牟云音乐
        root c:/MouYun;#牟云音乐站点

        location / {   
            index  index.html index.htm;
        }
        error_page   500 502 503 504  50x.html;
        location = /50x.html {
            root   html;
        }
}

简单的一段配置就花费了我大把时间才搞好,所以说经验真的很重要,纵使你知识体系掌握的再熟悉,没有经验也是凉凉。不码了今天就这吧。