[图文教程] 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

登陆页

更多功能的添加

除了上面的基本的登陆、查看日记列表、添加日记外，还能够添加更多界面和功能。例如：修改日记、删除日记、搜索日记等。这些，等你来实现哦～