Web前端应用开发项目式教程（基于uni-app框架） 课件 任务9　实现文章详情页相关功能

任务9

实现文章详情页相关功能Web前端应用开发项目式教程（基于uni-app框架）

目录CONTENTS019.5任务实施9.7学习自评Part19.1任务描述9.2任务效果9.4知识储备9.8课后练习9.9任务拓展9.3学习目标9.6任务测试本任务将实现启嘉校园社区模块文章详情页中的相关功能。用户通过点击社区首页文章列表中的文章卡片可以进入文章详情页，文章详情页需要实现的功能包括展示文章的标题、正文、作者、发布日期；展示文章获得的点赞、转发和评论数量以及评论列表；对文章进行评论、点赞和转发，也可以对其它用户发布的评论进行回复和点赞；关注或取关作者。

9.1任务描述

9.2任务效果任务效果扫描二维码查看

9.3学习目标能力目标素养目标知识目标通过使用条件编译解决多端兼容，培养学习者科学、系统解决问题的意识。通过分享、点赞功能的实现，培养学习者尊重他人劳动成果、传播正能量的意识。了解H5端实现转发功能的方法。掌握uni.showLoading和uni.hideLoading显示和隐藏加载状态方法使用。掌握利用分割和拼接的方式实现字符串与数组之间的转换。能够使用条件编译兼容微信小程序端和H5端转发功能实现的差异。能够使用uni.showLoading和uni.hideLoading方法实现显示和隐藏接口数据请求中的加载状态。能够将图片地址字符串按指定字符分割成图片数组。

9.4知识储备9.4.1评论区互动形式从用户互动性的维度上，可将“评论”形式分为三类：（1）单向评论用户评论后，任何人均不可回复。偏向于让用户发表观点，但不希望用户产生互动，重心更多放在内容上面，不过这种没有反馈机制的设计较难把握。（2）双向评论用户评论后，仅作者可回复，强调作者与用户间产生互动（如微信公众号），互动性不强，引导用户基于内容去进行评论，属于弱社交形态。（3）多向评论用户评论后，任何人均可回复，且可多次互动（如微博、知乎等），互动性强，可以基于内容评论，也可以基于评论而评论，通常该类别下的评论区会相对其他类别活跃，属于强社交形态。

9.4知识储备9.4.2多向评论区展示结构

目前主流的产品中，常见的多向评论展示结构有：主题式、平铺式、盖楼式3种结构。“主题式”特点为用户对正文内容发表的一级评论在上，他人的回复则折叠在下方。

“平铺式”的展示形式是评论和评论回复都处于同一个层级上，视觉上没有明显的层级区分。“盖楼式”如同字面意思，评论区用户之前的互动内容像在盖楼一样，一层一层向下堆砌。“启嘉校园”属于强社交属性，采用的是多向评论的互动形式，而在展示结构上采用的是主题式方式。

9.5任务实施9.5.1获取文章详情逻辑分析

用户进入文章详情页分为三种场景：

（1）通过社区首页中的文章列表进入。

（2）通过搜索的文章列表进入。

（3）通过用户中心的文章列表进入。

当用户点击文章列表中的文章卡片时，跳转到文章详情页，跳转时携带文章ID，将文章ID作为参数调用相应后端接口，从而获取文章相关信息，然后利用数据绑定方式将相关信息呈现在页面对应位置中。

9.5任务实施9.5.1获取文章详情接口分析

获取文章详情需一个后端查询接口，接口名称为“获取文章详情”，接口详情如下：API地址：{{HOST_API}}/IntactArticle/details/:articleIdAPI请求方式：GETAPI请求：见表参数字段名数据类型说明tokenText认证令牌参数字段名数据类型说明articleIdString文章idHeader请求参数路径请求参数

9.5任务实施9.5.1获取文章详情代码实现

在/api/community目录下新建article-details.js文件，编写调用获取文章详情接口的方法，关键代码如下：代码实现

在article-details.vue中，调用getArticleContentApi方法获取文章详情数据，部分代码如下：

9.5任务实施9.5.2实现文章点赞、转发与关注作者功能逻辑分析

实现文章点赞、转发与关注作者功能逻辑相似，只需要通过调用对应后端接口，然后对接口响应状态做出判断即可，相关逻辑如下：

（1）文章点赞：用户点击点赞图标时，调用相应后端接口，接口响应状态为成功，则切换点赞图标状态为“实心”或“空心”，同时对点赞数量进行“+1”或“-1”。

（2）文章转发：用户点击转发按钮时，使用uni-app转发组件触发转发事件，同时调用相应后端接口，接口响应状态为成功，则对转发数量进行“+1”。

（3）关注作者：用户点击关注或已关注按钮时，调用相应后端接口，接口响应状态为成功，则切换关注按钮文本为“已关注”或“关注”。

9.5任务实施9.5.2

实现文章点赞、转发与关注作者功能接口分析

实现文章点赞、转发与关注作者功能共需三个接口，分别为文章点赞/取消点赞、转发文章和关注/取关接口，接口详情如下：

文章点赞/取消点赞接口API地址：{{HOST_API}}/article-like/:articleIdAPI请求方式：POSTAPI请求：见表参数字段名数据类型说明articleIdString文章idHeader请求参数路径请求参数参数字段名数据类型说明tokenText认证令牌

9.5任务实施9.5.2

实现文章点赞、转发与关注作者功能接口分析

实现文章点赞、转发与关注作者功能共需三个接口，分别为文章点赞/取消点赞、转发文章和关注/取关接口，接口详情如下：

转发文章接口API地址：{{HOST_API}}/share/addShareAPI请求方式：POSTAPI请求：见表参数字段名数据类型说明articleIdString文章idHeader请求参数Body请求参数参数字段名数据类型说明tokenText认证令牌

9.5任务实施9.5.2

实现文章点赞、转发与关注作者功能接口分析

实现文章点赞、转发与关注作者功能共需三个接口，分别为文章点赞/取消点赞、转发文章和关注/取关接口，接口详情如下：

关注/取关用户接口API地址：{{HOST_API}}/fans/addFollowAPI请求方式：POSTAPI请求：见表参数字段名数据类型说明followUserIdText欲关注用户的idHeader请求参数Body请求参数参数字段名数据类型说明tokenText认证令牌

9.5任务实施9.5.2实现文章点赞、转发与关注作者功能代码实现

在article-details.js中，编写调用文章点赞/取消点赞、转发文章和关注/取关用户接口的方法，部分代码如下：代码实现

在article-details.vue中，调用postArticleThumbsUpApi、addShare和postUserFollowApi方法实现文章点赞、转发和关注用户功能，部分代码如下：

9.5任务实施9.5.3

实现文章评论功能逻辑分析无论是一级评论还是子评论，同为发布评论、获取评论、删除评论和点赞/取消点赞评论四种操作，可以使用相同的逻辑去实现。需要注意的是一级评论和子评论使用的是同一个文本输入框，因此要根据使用场景对用户评论的对象做出区分，思路如下：（1）发布文章评论当用户直接点击输入框时，分两种情况，第一种情况为存在历史输入状态，即用户上一次进入输入状态时输入了内容但未进行发布且退出输入状态，此时输入框文本内容和评论对象应保持不变（恢复上次的输入状态），若用户手动将输入框内文本内容清空并重新唤起键盘，则将评论对象切换为“文章”；第二种情况为不存在历史输入状态，输入框内文本内容为空，此时将评论对象设置为“文章”。发布评论成功后，清空输入框文本内容。（2）发布评论回复当用户点击评论区中的回复按钮时，分三种情况，第一种情况为存在历史输入状态且当前评论对象与上次评论对象相同，此时输入框文本内容和评论对象应保持不变；第二种情况为存在历史输入状态且当前评论对象与上次评论对象不同（上次评论对象可能是文章或其它评论），此时需要清空输入框文本内容，并将评论对象切换为当前“评论”；第三种情况为不存在历史输入状态，输入框内文本内容为空，此时将评论对象切换为当前“评论”。第一、二种情况下，若用户手动将输入框内文本内容清空并重新唤起键盘，则将评论对象切换为“文章”。发布评论成功后，清空输入框文本内容。

9.5任务实施9.5.3

实现文章评论功能接口分析

实现文章评论相关功能共需四个接口，分别为查询文章评论、发布文章评论、删除评论和评论点赞/取消点赞接口，接口详情如下：

查询文章评论接口API地址：{{HOST_API}}/commentAPI请求方式：GETAPI请求：见表Header请求参数Query请求参数参数字段名数据类型说明tokenText认证令牌参数字段名数据类型说明pageText页数articleIdText文章idparentIdText一级评论id

9.5任务实施9.5.3

实现文章评论功能接口分析

实现文章评论相关功能共需四个接口，分别为查询文章评论、发布文章评论、删除评论和评论点赞/取消点赞接口，接口详情如下：

发布文章评论接口API地址：{{HOST_API}}/commentAPI请求方式：POSTAPI请求：见表Header请求参数Query请求参数参数字段名数据类型说明tokenText认证令牌参数字段名数据类型说明contentString评论内容articleIdString文章idparentIdString父级评论id，传0或不传为一级

9.5任务实施9.5.3

实现文章评论功能接口分析

实现文章评论相关功能共需四个接口，分别为查询文章评论、发布文章评论、删除评论和评论点赞/取消点赞接口，接口详情如下：

删除文章评论接口API地址：{{HOST_API}}/comment/:commentIdAPI请求方式：POSTAPI请求：见表Header请求参数路径请求参数参数字段名数据类型说明tokenText认证令牌参数字段名数据类型说明commentIdText评论id

9.5任务实施9.5.3

实现文章评论功能接口分析

实现文章评论相关功能共需四个接口，分别为查询文章评论、发布文章评论、删除评论和评论点赞/取消点赞接口，接口详情如下：文章评论点赞/取消点赞接口API地址：{{HOST_API}}/comment-likeAPI请求方式：POSTAPI请求：见表Header请求参数Query请求参数参数字段名数据类型说明tokenText认证令牌参数字段名数据类型说明commentIdText评论id

9.5任务实施9.5.3

实现文章评论功能代码实现

在article-details.js中，编写调用查询文章评论、发布文章评论、删除文章评论和文章评论点赞/取消点赞接口的方法，部分代码如下代码实现

在article-details.vue中，引入上面四个接口请求方法，并将其传递给评论组件，部分代码如下：

9.6任务测试

9.7自学评价

9.8课后练习？1.选择题（1）在uni-app中，可以使用什么方法显示加载状态？A.uni.showLoading方法B.uni.showToast方法C.uni.showModal方法D.uni.showOptionDialog方法（2）在uni-app中，可以使用什么方法将图片地址字符串按指定字符分割成图片