当前位置: 首页 > 工具软件 > amaze-vue > 使用案例 >

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

郭通
2023-12-01

开发示例:迷你日记

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

登录页

更多功能的添加

除了上面的基本的登录、查看日记列表、添加日记外,还可以添加更多界面和功能。例如:修改日记、删除日记、搜索日记等。这些,等你来实现哦~


 类似资料: