搭建伺服器、資料庫（jQ網易雲）
一直都是用網易雲聽音樂，這次自己動手做一個移動端的jQ版網易雲，本篇主要講如何通過搭建本地伺服器，通過七牛和LeanCloud資料庫，在管理員界面可以上傳音樂。
一、對這個jQ版網易雲進行分析
1、用例圖 use cases（做什麼功能？）
2、線框圖（Stretch）
3、架構圖
二、LeanCloud環境搭建
LeanCloud，會用做對數據的存儲與讀取（但不能存文件）。之前總結過對LeanCloud的使用：
余咖咖：如何使用LeanCloud加個資料庫？
這裡就簡單的說一下步驟即可：
- 註冊 LeanCloud 帳號
- 創建一個應用，假設應用名字為 wangyiyun
- 根據 JavaScript SDK 安裝指南 安裝 leancloud-storage
- 在頁面中引入 av-min.js
- 初始化 AV
var APP_ID = ...; var APP_KEY = ...; AV.init({ appId: APP_ID, appKey: APP_KEY });
- 測試資料庫創建是否成功
//創建一個資料庫var TestObject = AV.Object.extend(TestObject);//用new新建 var testObject = new TestObject();//保存一條數據 testObject.save({ words: Hello World! }).then(function(object) {//保存成功，彈出Rocks alert(LeanCloud Rocks!); })
- 去控制面板（ 控制台 > 存儲 > 數據 > TestObject）查看數據，確認 TestObject 創建了一條新數據
三、七牛環境搭建
七牛可以存儲文件，獲取文件的信息。這裡說下步驟：
- 創建一個本地nodejs server，下載地址：
yuyunzhi/nodejs-server
- 註冊七牛帳號（上傳身份證）:
七牛雲-國內領先的企業級雲服務商
- 新建一個儲存的空間「籃子」，這裡可以命名為：wangyiyun
- 進入七牛SDK官網，用Node.js下載（SDK表示提供相關所有的API）
- 輸入命令安裝
npm install qiniu-js
- 給伺服器添加路由/uptoken
- 在/uptoken添加如下代碼
var qiniu = require(qiniu)console.log(HTTP 路徑為
+ path)if(path===/uptoken){ response.statusCode = 200 response.setHeader(Content-Type, text/json;charset=utf-8) response.setHeader(Access-Control-Allow-Origin, *) response.removeHeader(Date)var config = fs.readFileSync(./qiniu-key.json)config = JSON.parse(config)let {accessKey, secretKey} = config;var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);var options = { scope: 籃子名, };var putPolicy = new qiniu.rs.PutPolicy(options);var uploadToken=putPolicy.uploadToken(mac);response.write(` { "uptoken": "${uploadToken}" } `)response.end() }else{ response.statusCode = 404 response.end() }
解釋一下下：當請求的路徑為/uptoken就會執行if花括弧的內容，返回狀態碼200，返迴響應頭，將七牛的accessKey, secretKey儲存到json里進行讀取，通過JSON.parse將其轉化為對象，並賦值給變數accessKey, secretKey，將獲取的內容放入新建的空間（籃子），並響應一個uptoken，響應結束。
- 將 uploadToken 作為響應輸出
- node server.js 8888，啟動 server，進行監聽。在瀏覽器輸入url：
http://localhost:8888/uptoken //就會響應一段uptoken
- 參考七牛示例，使用使用 Qiniu.uploader 來上傳文件:
七牛雲 - JavaScript SDK
- 引入moxie 1.x ：版本號：1.5.6
https://github.com/moxiecode/moxie/releases
- 引入plupload 2.x ：版本號：2.3.6
moxiecode/plupload
- 引入qiniu-js 1.x
https://github.com/qiniu/js-sdk/tree/1.x
<script src="../vendors/moxie.js"></script><script src="../node_modules/plupload/js/plupload.min.js"></script><script src="../node_modules/qiniu-js/dist/qiniu.min.js"></script>
注意：moxie 1.x無法通過npm安裝，所以直接下載；plupload 2.x ，qiniu-js 1.x知道版本號，可以打開package.json，直接加入以下代碼：
"dependencies": { "plupload": "^2.3.2", "qiniu-js": "^1.0.2" }
然後輸入命令安裝就可以了：
npm install
- 初始化上傳按鈕（七牛示例有，參考並修改）：
var uploader = Qiniu.uploader({ runtimes: html5, //上傳模式,依次退化 browse_button: xxx, //上傳選擇的點選按鈕，**必需** uptoken_url : http://localhost:8888/uptoken, domain: http://qiniu-plupload.qiniudn.com/, //bucket 域名，下載資源時用到，**必需** get_new_uptoken: false, //設置上傳文件的時候是否每次都重新獲取新的token max_file_size: 40mb, //最大文件體積限制 dragdrop: true, //開啟可拖曳上傳 drop_element: yyy, //拖曳上傳區域元素的ID，拖曳文件或文件夾後可觸發上傳 auto_start: true, //選擇文件後自動上傳，若關閉需要自己綁定事件觸發上傳 init: { FilesAdded: function(up, files) { plupload.each(files, function(file) { // 文件添加進隊列後,處理相關的事情 }); }, BeforeUpload: function(up, file) { // 每個文件上傳前,處理相關的事情 }, UploadProgress: function(up, file) { // 每個文件上傳時,處理相關的事情 uploadStatus.textContent = 上傳中 }, FileUploaded: function(up, file, info) { uploadStatus.textContent = 上傳完畢 // 每個文件上傳成功後,處理相關的事情 // 其中 info.response 是文件上傳成功後，服務端返回的json，形式如 // { // "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98", // "key": "gogopher.jpg" // } // 參考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html // var domain = up.getOption(domain); // var res = parseJSON(info.response); // var sourceLink = domain + res.key; 獲取上傳成功後的文件的Url }, Error: function(up, err, errTip) { //上傳出錯時,處理相關的事情 }, UploadComplete: function() { //隊列文件處理完畢後,處理相關的事情 }, } });
最後的效果如下：
四、這個過程的幾個要點
1、版本號不要裝錯了。。。qiniu-js 1.x的JS文件，全局變數是Qiniu，qiniu-js 2.x，全局變數是qiniu；
2、該報錯可忽視，是安全的。Refused to get unsafe header "date"；
3、如果有401報錯，那麼檢查accessKey, secretKey是否準確；
推薦閱讀：