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

開發示例：迷你日記

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

在線示例和源代碼

最終實現效果，請訪問：http://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

登陸頁

更多功能的添加

除了上面的基本的登陸、查看日記列表、添加日記外，還能夠添加更多界面和功能。例如：修改日記、刪除日記、搜索日記等。這些，等你來實現哦～