music

注意，该项目是基于 Webpack@4 构建，尚未对 Webpack v4 版本以下做兼容，clone 的同学请注意升级

一个基于 jQuery 的网站 app 应用，主要界面仿(chao)照(xi) music.163.com/m

在线预览

注意，本项目仅支持 Firefox,Chrome 新版浏览器，微信或者其他浏览器内核打开页面可能有 bug,预览页面请尽量用 Firefox 或 Chrome 浏览器打开!!!

git clone https://github.com/strugglebak/music.git

先到 music 项目目录安装依赖

cd music
yarn install -D

在项目 music 目录开启如下命令跑上传文件后台

yarn serve

在项目 music 目录开启如下命令开启预览

yarn start

打开管理端页面

open http://127.0.0.1:9000/admin.html

打开移动端页面

open http://127.0.0.1:9000/

注意，在本项目中需要用到七牛云的密钥，所以要启动本项目的全部功能你需要去七牛云注册一个账号，并将你的 bucket 名字命名为 music-1，然后在项目的根目录创建 qiniu-key.json，形式是下面的样子

{
  "accessKey": "yourAccessKey",
  "secretKey": "yourSecretKey"
}

项目的功能主要分两个部分

PC 端页面如下

移动端页面如下

项目主要采用的技术栈 jQuery + AJAX + MVC设计模式 + 原生ES5/ES6 + 正则 + LeanCloud + 七牛云 + Travis CI 持续集成 + webpack

jQuery 写起来，能让代码变得更清晰和易懂，全程不用太多原生 JS 的感觉不要太爽
MVC 设计模式，又一个写代码的贴心小棉袄来了，代码结构需要那么复杂干什么，你写的这些谁懂啊，用上 MVC 你甚至可以做到 '无脑式写代码'
AJAX 发送请求？当然了，我跟服务器打交道, 必须得分析 api 接口然后伪造请求阿，这中间将会用到 promise 的一些功能
正则 用到好，全家吃到饱啊，从网易云上扒的歌词是有时间段和回车的，必须用正则将他们一条一条解析出来，然后结合 css 实现滚动
LeanCloud + 七牛云 后端存储，可以让你体会到数据是如何从前端传输到后端，再从后端传输到前端的，体会一把全栈的滋味!
ES5+ES6,当然不得不承认的一点，有时候 ES5/ES6 语法可以让我们的代码少些 for 循环，在一些数组和字符串操作的场合，简直就是神器一般
Travis CI 持续集成，自动部署项目到云端，真正的一键操作，全程无忧！只需 git push ,免去了还要将项目 scp 到服务器的烦恼
webpack 使用最流行的打包工具，模块化项目构建，将 js、sass、image 等依赖全部打包成 static assets,集中式的模块化输出

如图所示的架构,架构图中说明了以下几点

这个项目为什么要采用 jQuery ? 众所周知，jQuery 是一个拥有 '历史悠久' 的前段框架，它是对原有 dom 操作的一层封装，免去了原生 dom 操作中那些烦人的 api 各路神奇的调用，真正实现用最小的代码完成最多的任务(人生苦短，我用。。。当然是 jQuery 拉),相比原生 JS, 它的 api 更简洁，文档规范且友好,最喜人的是，它支持 AJAX。
jQuery 已经过时了，为何不使用更先进的框架? 很简单，jQuery 虽然已经成为过去，但这不妨碍我们去理解它的设计**和设计模式，并且，在真正接触一个大型框架之前，用 jQuery 来学习和过渡是一个不错的选择。怎么学习? 现在哪个大型框架不用 MVVM 模式? 我用 jQuery + MVC 这种模式能让我更好的理解其他框架的底层在干什么，框架毕竟只是个适应时代和项目适用场景的玩意儿，会其精髓便对其他有融会贯通之感。

项目可以改进的点有很多，比如

当然这个项目还在完善中，我觉得要完成以上的功能需要调用到一些 api 来做，目前找到的一个开源的项目很不错,地址在这里, 直接在服务器上跑一个 node.js 的服务，通过这个强大的 api，还是可以逐渐做好的。