目录
内容综述
本文在登录功能和社区功能的搭建的基础上,完成了社区的获取帖子、发帖、点赞。由于还没解决的bug,目前还没有实现回帖的新增等功能。
社区帖子
数据分析
此前是使用静态数据搭建的社区,现在尝试进行前后端交互,首先要分析一下接口的帖子数据。获取所有帖子的接口:
可以看到,每个帖子有postId、owner、title、time、commentCount、likes字段。原来封装的Post组件中需要的数据有:
基本数据除了名称之外,都可以对应,有些前端需要的数据(比如发帖人的头像)还没有获取到,因此还需要跟后端的同学协调。
此外,后端提供了发帖、删帖、点赞等接口,可以逐一实现。
代码实现
展示帖子
首先,需要在community.js中封装获取所有帖子的方法:
在这里,为了方便链式调用,我采用了Promise格式,并且将在本次项目中的网络请求中全面使用Promise。根据接口,获得res.data,其中的数据需要做一些处理,主要是格式转换以及其他数据的获取。例如,time只需要显示年月日即可,而if_welcome是通过确定帖子的点赞列表中有没有当前用户的openid来设置true/false:
将处理好的结果保存在data的arr中即可。
方法写好后,就要在community.wxml中修改调用Post的代码,将静态数据改为动态数据:
把整理好的数据字段分别传入Post中即可。这样,实现效果如下:
此外注意到,我在Post组件中增加了一个删除按钮,这个没有什么好说的。可以看到,基本页面搭建已经完成。
点赞帖子
接下来,实现点赞功能。
在之前的文章中提到,点赞是通过点击Post组件的点赞按钮,然后由Post组件将事件传递给父组件并由父组件处理的。因此,同样是从Post组件出发:
触发点赞的函数基本没有变化,仍然是将帖子的id和状态发送出去。然后,在community.wxml中接收并处理。在处理之前,先看点赞帖子的接口:
可见,要点赞帖子,必须有token,而要有token,就必须先登录。所以,community的页面结构必须变一下,在没有获取token时不能浏览页面:
这样就保证,当用户点赞帖子时,已经登录了。然后可以处理changeWelcome事件了,但在这之前,必须封装一个点赞帖子的函数:
函数需要传入post_id和token,分别是要点赞的帖子的id和用户的token。注意,token是放在header里面的,不是放在data中。同样,函数返回Promise对象,以便进行下一次操作。
然后修改处理点赞事件的函数:
由于后端还没有给出取消点赞的接口,因此我现在只能实现点赞的功能。所以,获取state后,只处理state为true的情况。当state为true时,调用likeOnePost函数,传入post_id和token。如果Promise对象状态变为resolved,那么调用getAllPosts函数,重新获取帖子。否则,提示点赞失败。这样,实现效果:
点赞前:
点赞后:
至此,点赞功能实现。
发布帖子
再接下来,要实现发帖功能。首先需要画一个发帖按钮,我使用固定定位,将按钮固定在视口右下角:
当然,这个按钮也是在只有token获取后才显示的。给这个按钮绑定一个点击事件函数:
我的计划是,新建一个发帖页面,点击发帖按钮将会前往这个页面,发帖成功后将会返回社区页面。于是,在pages中新建addNewPost页面:
然后,先搭建addNewPost.wxml页面:
结构很简单,就是一个textarea加两个按钮即可。页面样式如下:
在data中建立数据:
title就是帖子内容,token是用户的token。按照惯例,需要在onShow生命周期函数中获取token:
,并清空title,保证上次输入的内容不会影响这次输入:
然后给textarea绑定输入监听函数和value值,并给两个按钮绑定函数。关于绑定输入函数和清空函数的具体实现:
当用户点击发帖按钮时,将会发布帖子:
当用户没有输入内容时,会提示用户,不会发送网络请求:
否则,可以发送网络请求,同样使用Promise实现:
这次的then和catch我就直接写在函数内部了,因为应该不存在链式调用了:
如果发帖成功,将会提示用户,并且在1秒后退回上一层页面;发帖失败也会提示用户。
这样,发帖页面就完成了。然后需要在社区页面的发帖按钮中实现,点击就进入发帖页面,于是实现按钮的点击函数:
导航使用的是wx的API,这样就可以导航到发帖页面了。实现效果:
社区页面:
点击右下角按钮:
输入内容:
清空:
点击发帖:
再输入后发送:
社区页面:
发帖功能成功!!
总结
本文描述了社区功能的帖子展示、点赞、发帖功能,其中封装网络请求函数用到了Promise,这也是我个人较少使用Promise中的一次尝试。接下来要实现的是删帖、帖子的回帖展示。