[圖文教程] H5迷你日記 - Vue + Amaze UI + jQuery + OkayApi

暗夜在火星發表於2018-01-18

H5VueUIjQueryAPI

開發示例：迷你日記

假設當前需要開發一個迷你版的日記，用於紀錄私人生活感想。本文將說明如何使用小白介面配合構建你想要的APP。　

線上示例和原始碼

最終實現效果，請訪問：demo.okayapi.com/mininote/

專案原始碼下載，請前往碼雲okayapi-demo。

需求原型

需求原型如下：

主要介面及功能說明如下：

登入介面：進行使用者登入。
日記列表介面：列出並展示使用者全部的日記，按新增日記的時間逆序輸出，即最近新增的顯示在最前面；支援動態載入和分頁顯示。
日記新增介面：新增新日記。

下面將分別進行說明，講解。　

開發登入介面

登入和註冊功能模組，是常見的基礎模組。在登入前，需要先註冊。註冊介面可參考登入介面。進行註冊時，需要使用到小白介面中的使用者註冊介面。假設註冊的使用者為：dogstar，其密碼為：123456。則註冊時可這樣呼叫介面（記得密碼須md5後再傳遞）：

http://api.okayapi.com/?s=App.User.Register&username=dogstar&password=202cb962ac59075b964b07152d234b70複製程式碼

在上面的請求中，介面引數username表示註冊賬號，password表示賬號密碼。此處省略了公共引數，即簽名sign，應用憑證app_key。關於如何生成簽名，可參考這裡。成功註冊，可看到類似這樣的返回：

{
    "ret": 200,
    "data": {
        "err_code": 0,
        "err_msg": "",
        "uuid": "7A0950629ACD76B1AF2FD752EDAFC9F2"
    },
    "msg": ""
}複製程式碼

其中，uuid表示新使用者的的UUID。

註冊成功後，便可進行登入操作。登入時，可使用使用者登入介面。則介面呼叫為：

http://api.okayapi.com/?s=App.User.Login&username=dogstar&password=202cb962ac59075b964b07152d234b70複製程式碼

介面引數與前面註冊時類似，密碼仍需要md5後再傳遞。成功登入情況下，小白介面會返回：

{
    "ret": 200,
    "data": {
        "err_code": 0,
        "err_msg": "",
        "uuid": "7A0950629ACD76B1AF2FD752EDAFC9F2",
        "token": "EEDF58F433751443DD16E3027BB137A02BB2FA7CCEF41B0D0A5ACBCFC5E16059"
    },
    "msg": ""
}複製程式碼

其中，uuid表示當前使用者的UUID，用於唯一標識使用者；而token則是使用者登入成功後的會話憑證，可用於驗證使用者是否已登入。這兩個返回欄位是非常重要的資訊，在後面的介面請求中都需要頻繁用到，因此需要儲存在客戶端本地。

開發日記列表介面

完成了公共基礎模組——登入和註冊的功能開發後，現在我們將進入迷你日記核心的業務功能開發。這一塊，對於初學者，一開始會有點困惑，但一旦你瞭解了其中的奧妙，則能應用自如，開發你想要的App應用。

很明顯，私人日記，不止一篇，是一對多的關係。因此適合使用集合形式來進行儲存。因此，這裡需要結合使用者集合模組介面進行開發。

溫馨提示：一對多，用集合。

而對於日記列表，具體則可以使用獲取集合列表。假設，此日記集合的名稱為：notes，則取第一頁日記列表的資料時，介面請求類似如下：

http://api.okayapi.com/?s=App.User_Set.GetList&key=notes&sort=2複製程式碼

其中，介面引數key表示集合名稱，sort表示排序規則，為2時表示按建立時間逆序。

一開始，這個介面是沒有資料返回的，因為還沒有新增任何日記。即會看到這樣的介面返回：

{
    "ret": "200",
    "data": {
        "err_code": "0",
        "err_msg": "",
        "items": {},
        "total": "0",
        "page": "1",
        "perpage": "10"
    },
    "msg": ""
}複製程式碼

目前，一切正常，只是還沒有日記資料。接下來——

開發日記新增介面

在日記列表頁，點選“新增日記”可進入日記新增介面，使用者輸入日記標題和內容後，便可呼叫小白介面的新增元素介面進行提交。提交時，介面請求示例為：

http://api.okayapi.com/?s=App.User_Set.Add&key=notes&data={"title":"快樂教師節","content":"今晚在大學度過了第一個教師節，和同學在草坪上一起搞活動、做遊戲，玩得很開心……"}複製程式碼

成功新增後，會返回：

{
    "ret": 200,
    "data": {
        "err_code": 0,
        "err_msg": "",
        "id": "1"
    },
    "msg": ""
}複製程式碼

至此，日記已成功新增。此時，再回到剛才的日記列表頁面就能看到資料啦！

執行效果截圖

首頁 - 1

首頁 - 2

登入頁