网易云音乐手机端

发表于
字数统计 477 | 阅读时长 2

环境搭建

2018年8月22日：初步搭建LeanClound 和 七牛云环境，测试admin界面上传七牛云功能正常

在搭建过程中，使用的是七牛云1.x版本，由于七牛云设置需要uptoken，在本地利用七牛Node.js SDK 构建后端服务返回uptoken，所需要的 accessKey secretKey保留在本地，切勿上传至GitHub。
共引用如下库

1
2
3
4
<script src="../node_modules/leancloud-storage/dist/av-min.js"></script>
<script src="../node_modules/qiniu-js/dist/qiniu.min.js"></script>
<script src="../node_modules/plupload/js/moxie.js"></script>
<script src="../node_modules/plupload/js/plupload.dev.js"></script>

服务端代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
response.statusCode = 200;
response.setHeader("Content-Type", "text/json; charset=utf-8");
response.setHeader("Access-Control-Allow-Origin", "*");

var config = fs.readFileSync("xxx.json");//存有"accessKey""secretKey"的json文件
config=JSON.parse(config)
let{accessKey,secretKey}=config
var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);

var options = {
    scope: 'bucket',//项目名称
  };
  var putPolicy = new qiniu.rs.PutPolicy(options);
  var uploadToken=putPolicy.uploadToken(mac);

response.write(`
{
    "uptoken":"${uploadToken}"
}`);
response.end();

并在七牛云配置 中设置相应的路径uptoken_url，同时开启server服务器和自己的页面进行测试。

管理界面搭建及功能实现

  • 使用简单的界面，将整个后台管理页面面分为四部分，新建歌曲、歌曲列表、歌曲信息、上传区域。分别使用MVC。增添了eventHub,使用订阅/发布 来控制各部分之间的信息传递。
  • 上传歌曲后，可以在歌曲信息部分显示歌曲的名称、歌手、链接。并可以进行编辑在储存。
  • 读取后台歌曲信息，并显示在列表。点击列表显示信息。更改信息后刷新列表。

用户界面搭建

  • 仿照网易云音乐手机端，采用vw布局。
  • meat：vp 禁止缩放。
  • 媒体查询，不同屏幕大小导航栏是否固定。

源码链接
预览请手机扫二维码
预览链接