[图文教程] H5迷你日记 - Vue + Amaze UI + jQuery + OkayApi
开发示例:迷你日记 假设当前需要开发一个迷你版的日记,用于纪录私人生活感想。本文将说明如何使用小白接口配合构建你想要的APP。 在线示例和源代码 最终实现效果,请访问:http://demo.okayapi.com/mininote/项目源代码下载,请前往码云okayapi-demo。 需求原型 需求原型如下:主要界面及功能说明如下: 登录界面:进行用户登录。日记列表界面:列出并展示用户
开发示例:迷你日记
假设当前需要开发一个迷你版的日记,用于纪录私人生活感想。本文将说明如何使用小白接口配合构建你想要的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
登录页
更多功能的添加
除了上面的基本的登录、查看日记列表、添加日记外,还可以添加更多界面和功能。例如:修改日记、删除日记、搜索日记等。这些,等你来实现哦~
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)