六、文章详情显示及点赞实现《iVX低代码/无代码个人博客制作》

一、文章详情实现

上一节我们已经完成了首页的内容显示，那么此时我们完成点击后跳转到详情页内容。

那么此时由于我们需要跳转到详情页需要对应的数据ID，那么此时还需要给首页的文章数据对象数组一个列：

在这里插入图片描述

接着设置对应的内容事件：

在这里插入图片描述

此时设置了对应的详情ID值为当前循环到的内容的数据ID，也就是对应的哪一条的数据ID。

接下来使用前台跳转到详情页：

在这里插入图片描述

到了文章详情页后我们还需要获取到当前数据ID对应文章数据的详情，那么此时肯定需要一个服务；此时创建一个服务为获取文章详情内容：

在这里插入图片描述

由于获取文章数据需要指定一个 ID，那么我们给这个服务创建一个参数，通过参数找到对应的数据值：

在这里插入图片描述

接着编写事件，直接选择对应的数据库进行输出，给予条件为数据ID等于传入过来的文章ID，在输出值的时候，由于数据ID不可能重复，肯定是只有一条数据，我们直接选择输出的结果为对象数组的某一行值，由于行是从0开始，所以我们选择对应的行号为 0 即可：

在这里插入图片描述

二、详情内容获取

详情获取服务应该是在详情页显示时调用：

在这里插入图片描述

此时直接传递对应的数据ID即可，那么接下来就需要一个容器来接收对应的返回值，由于是只有一条对象数据，那么直接创建一个对象变量，并且命名为详情数据：

在这里插入图片描述

接着给予这个详情数据对应的列：

在这里插入图片描述

该列必须要和数据库中数据列名相同，否则你是取不到的。接下来我们创建了列后，在当前页面显示时，给予返回数据到创建的对象变量：

在这里插入图片描述

接着我们在详情页面中分别绑定这些值到页面上的组件中：

在这里插入图片描述

接着我们预览查看后数据可以照常显示：

在这里插入图片描述

三、评论内容实现

接下来我们开始编写评论去内容，那么首先必然是提交评论内容到数据库，此时还需要创建一个数据库用于存储评论信息，此时这个数据库有两个列：

在这里插入图片描述

评论文章ID是为了知道当前评论信息是哪个文章的数据。

创建好之后，我们创建一个服务提交当前用户的评论信息：

在这里插入图片描述

接着该服务接收两个内容，一个是评论的内容，另一个是评论的文章ID：

在这里插入图片描述

接着我们给评论按钮添加事件，调用评论服务即可，并且清空评论输入框的内容：

在这里插入图片描述

接着我们预览内容后，评论并不会有任何提示，那么此时我们需要创建一个数组，用于存储对应的评论信息，评论之后把评论信息加到当前数组之中，再遍历显示到当前评论区即可；首先创建一个数组：

在这里插入图片描述

在这里插入图片描述

接着创建一个循环，把评论内容放到之下，并且设置循环的数据来源为评论信息对象数组：

在这里插入图片描述

接着我们为显示内容做数据绑定：

在这里插入图片描述

接着我们在评论按钮中添加一个动作，给对应的对象数组添加值，并且创建时间为“刚刚”：

在这里插入图片描述

随后我们输入值后评论即可完成评论显示功能：

在这里插入图片描述

四、评论内容数据库获取

刚刚的功能只是实现了“单机版”内容，此时我们还需要创建一个服务去服务器获取已经评论过的内容，此时需要创建一个服务，命名为评论获取：

在这里插入图片描述

该服务接收一个文章ID作为参数，到数据库中查找对应的评论信息即可：

在这里插入图片描述

接着在详情页显示时增加调用该服务的操作，并且给予评论信息作为存储容器：

在这里插入图片描述

此时我们预览之后，发现当前文章的评论结果已经显示：

在这里插入图片描述

五、点赞实现

接下来我们增加一个点赞服务，接受一个文章数据ID以及一个点赞用户列表作为参数，当点赞动作发生时，添加当前用户到点赞用户列表更新到对应的点赞数据之中，表示当前用户已点击：

在这里插入图片描述

此时那如何在页面中判断用户是否已经点击了呢？我们在前端设置一个一维数组用于判断用户是否点击：

在这里插入图片描述

并且在获取文章数据时，给予文章对应字段给当前的数据列表，那么我们的详情对象数据就要增加该列，并且该列为数组形式：

在这里插入图片描述

此时再到页面的显示事件中指定对应的值内容：

在这里插入图片描述

接着在前端给文本设置事件，点击后即可参与点击：

在这里插入图片描述

不过此时当前事件还是有问题的，点击当前文本后还需要对应的将当前的ID存储到点赞用户列表之中，我们先把对应文章发布页中的昵称变量放到外部：

在这里插入图片描述

当点击的时候判断当前昵称是否存在点赞用户列表，如果不存在则加入，并且更新用户点赞列表，否则将提示未登录或已点赞：

在这里插入图片描述

此时我们回到详情页，点击后并没有任何反应，但是在数据库中已存在点赞用户：

在这里插入图片描述

那么此时点赞后应该在前端有所显示，我们直接在点赞用户外添加一个 if 容器，把点赞操作放到if 之中，并且设置文本若当前用户昵称不属于点赞用户列表，那么就可以点赞：

在这里插入图片描述

如果属于的话我们就显示已点赞，并且不生效事件：

在这里插入图片描述

此时我们再访问内容，会出现已点赞提示：

在这里插入图片描述