创新实训——记录5

目录

内容综述

社区帖子

数据分析

代码实现

展示帖子

点赞帖子

发布帖子

总结

---

内容综述

本文在登录功能和社区功能的搭建的基础上，完成了社区的获取帖子、发帖、点赞。由于还没解决的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中的一次尝试。接下来要实现的是删帖、帖子的回帖展示。