开发示例：迷你日记

假设当前需要开发一个迷你版的日记，用于纪录私人生活感想。本文将说明如何使用小白接口配合构建你想要的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

登录页

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