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

注:iVX也有免费直播课《第八期直播课》

一、文章详情实现

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

那么此时由于我们需要跳转到详情页需要对应的数据ID,那么此时还需要给首页的文章数据对象数组一个列:
在这里插入图片描述

接着设置对应的内容事件:
在这里插入图片描述
此时设置了对应的详情ID值为当前循环到的内容的数据ID,也就是对应的哪一条的数据ID。

接下来使用前台跳转到详情页:
在这里插入图片描述
到了文章详情页后我们还需要获取到当前数据ID对应文章数据的详情,那么此时肯定需要一个服务;此时创建一个服务为获取文章详情内容:
在这里插入图片描述
由于获取文章数据需要指定一个 ID,那么我们给这个服务创建一个参数,通过参数找到对应的数据值:
在这里插入图片描述
接着编写事件,直接选择对应的数据库进行输出,给予条件为数据ID等于传入过来的文章ID,在输出值的时候,由于数据ID不可能重复,肯定是只有一条数据,我们直接选择输出的结果为对象数组的某一行值,由于行是从0开始,所以我们选择对应的行号为 0 即可:
在这里插入图片描述

二、详情内容获取

详情获取服务应该是在详情页显示时调用:
在这里插入图片描述
此时直接传递对应的数据ID即可,那么接下来就需要一个容器来接收对应的返回值,由于是只有一条对象数据,那么直接创建一个对象变量,并且命名为详情数据:
在这里插入图片描述

接着给予这个详情数据对应的列:
在这里插入图片描述
该列必须要和数据库中数据列名相同,否则你是取不到的。接下来我们创建了列后,在当前页面显示时,给予返回数据到创建的对象变量:
在这里插入图片描述

接着我们在详情页面中分别绑定这些值到页面上的组件中:
在这里插入图片描述
接着我们预览查看后数据可以照常显示:
在这里插入图片描述

三、评论内容实现

接下来我们开始编写评论去内容,那么首先必然是提交评论内容到数据库,此时还需要创建一个数据库用于存储评论信息,此时这个数据库有两个列:
在这里插入图片描述
评论文章ID是为了知道当前评论信息是哪个文章的数据。

创建好之后,我们创建一个服务提交当前用户的评论信息:
在这里插入图片描述
接着该服务接收两个内容,一个是评论的内容,另一个是评论的文章ID:
在这里插入图片描述
接着我们给评论按钮添加事件,调用评论服务即可,并且清空评论输入框的内容:
在这里插入图片描述
接着我们预览内容后,评论并不会有任何提示,那么此时我们需要创建一个数组,用于存储对应的评论信息,评论之后把评论信息加到当前数组之中,再遍历显示到当前评论区即可;首先创建一个数组:
在这里插入图片描述
在这里插入图片描述

接着创建一个循环,把评论内容放到之下,并且设置循环的数据来源为评论信息对象数组:
在这里插入图片描述
接着我们为显示内容做数据绑定:
在这里插入图片描述
接着我们在评论按钮中添加一个动作,给对应的对象数组添加值,并且创建时间为“刚刚”:
在这里插入图片描述
随后我们输入值后评论即可完成评论显示功能:
在这里插入图片描述

四、评论内容数据库获取

刚刚的功能只是实现了“单机版”内容,此时我们还需要创建一个服务去服务器获取已经评论过的内容,此时需要创建一个服务,命名为评论获取:
在这里插入图片描述
该服务接收一个文章ID作为参数,到数据库中查找对应的评论信息即可:
在这里插入图片描述
接着在详情页显示时增加调用该服务的操作,并且给予评论信息作为存储容器:
在这里插入图片描述
此时我们预览之后,发现当前文章的评论结果已经显示:
在这里插入图片描述

五、点赞实现

接下来我们增加一个点赞服务,接受一个文章数据ID以及一个点赞用户列表作为参数,当点赞动作发生时,添加当前用户到点赞用户列表更新到对应的点赞数据之中,表示当前用户已点击:
在这里插入图片描述
此时那如何在页面中判断用户是否已经点击了呢?我们在前端设置一个一维数组用于判断用户是否点击:
在这里插入图片描述
并且在获取文章数据时,给予文章对应字段给当前的数据列表,那么我们的详情对象数据就要增加该列,并且该列为数组形式:
在这里插入图片描述

此时再到页面的显示事件中指定对应的值内容:
在这里插入图片描述
接着在前端给文本设置事件,点击后即可参与点击:
在这里插入图片描述
不过此时当前事件还是有问题的,点击当前文本后还需要对应的将当前的ID存储到点赞用户列表之中,我们先把对应文章发布页中的昵称变量放到外部:
在这里插入图片描述

当点击的时候判断当前昵称是否存在点赞用户列表,如果不存在则加入,并且更新用户点赞列表,否则将提示未登录或已点赞:
在这里插入图片描述
此时我们回到详情页,点击后并没有任何反应,但是在数据库中已存在点赞用户:
在这里插入图片描述
那么此时点赞后应该在前端有所显示,我们直接在点赞用户外添加一个 if 容器,把点赞操作放到if 之中,并且设置文本若当前用户昵称不属于点赞用户列表,那么就可以点赞:
在这里插入图片描述
如果属于的话我们就显示已点赞,并且不生效事件:
在这里插入图片描述

此时我们再访问内容,会出现已点赞提示:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286245.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

centos格式化xfs文件系统格式并设置自动启动挂载磁盘

文章目录 说明操作步骤 说明 非全方位资料,学习实践而来,欢迎参考学习 操作步骤 要将 /dev/sdb1 分区快速格式化为 XFS 文件系统并设置开机自动挂载,可以按照以下步骤进行操作: 查看已连接的硬盘列表,主要是设备名称…

System.CommandLine选项Option

前一篇简单看了一下CommandLine命令的使用,其实在一个命令行工具中,还有一个重要的点,那就是选项——Option,选项是为命提供参数,就好像C#中方法,Command就像方法,Option就像方法的参数&#xf…

长尾关键词如何优化

长尾关键词流量占据全站流量的80%,这是根据御梵景观后台数据得出来的结论,千万不要以为泛关键词给网站带来的流量大,打个比方花园设计一天带100个 流量,但是花园设计案例带10个,花园设计效果图带10个,花园设…

【ArcGIS风暴】ArcGIS10.6栅格计算器(Raster Calculator)用法详解

扩展阅读: 【ArcGIS风暴】ArcGIS 10.2栅格计算器实用公式大全(经典珍藏版) 【ArcGIS风暴】栅格计算器(Raster Calculator)运算出现错误问题及解决方案汇总 文章目录 1. 栅格计算器简介2. 栅格计算器用法3. 简单算术运算4. 数学函数运算5. 空间分析函数运算1. 栅格计算器简…

C语言试题二十九之编写函数int function(int lim,int aa[max])求出小于或等于lim的所有素数并放在aa数组中,该函数返回所求的素数的个数。

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 编写函数i…

三、登录页制作《iVX低代码/无代码个人博客制作》

注:iVX也有免费直播课《第八期直播课》 一、登录页实现 本节需要做的登录页如下: 该页面我们复习可以的值,首先设置整个页面页面的垂直和水平对其为居中,随后一个容器包裹对应的登录区域,此时我们创建一个页面命名为…

Android ContentProvider支持跨进程数据共享与互斥、同步 杂谈

在开发中,假如,A、B进程有部分信息需要同步,这个时候怎么处理呢?设想这么一个场景,有个业务复杂的Activity非常占用内存,并引发OOM,所以,想要把这个Activity放到单独进程&#xff0c…

【C#控件详解】对话框类控件(打开文件,保存文件,选择字体和颜色)

在实际应用中,我们会用到各种各样的对话框,如打开文件,保存文件,选择字体和颜色等等。本文详细讲解C#中的颜色对话框、打开文件对话框、字体对话框、浏览文件夹对话框和保存文件对话框。 文章目录 1. ColorDialog对话框2. FolderBrowserDialog对话框3. FontDialog对话框4. …

动物界的再生一个故事

猪月薪5千,打算用20万建一个窝,老虎不允许,说私自建就是违章建筑,只允许向狼买。 狼是搞工程的,先用20万贿赂老虎取得开发权,再用50万元向老虎买这块地, 花10万元把猪圈盖好,向猪要价…

C语言试题三十之请编写函数function对长度位7个字符的字符串,除首尾字符外,将其余5个字符按ascii码降序排列。

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 请编写函数…

基于.NetCore开发博客项目 StarBlog - (11) 实现访问统计

系列文章基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客?基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目基于.NetCore开发博客项目 StarBlog - (3) 模型设计基于.NetCore开发博客项目 StarBlog - (4) markdown博客批量导入基于.N…

【SPSS统计分析】SPSS19.0简体中文版安装教程(附SPSS19.0简体中文版下载)

spss19.0中文版是一款专业数据统计软件,受到各种社会学科的研究生、研究员的欢迎。软件能够对信息的采集、处理、分析进行全面评估和预测。spss19.0中文版新增加了广义线性混合模型、自动线性模型、一个统计网页入口portal和直复营销direct marketing功能等。另外,IBM 针对SP…

Java 比较两个版本号的大小 (通用)

/*** 版本号比较** param v1* param v2* return 0代表相等,1代表左边大,-1代表右边大* Utils.compareVersion("1.0.358_20180820090554","1.0.358_20180820090553")1*/public static int compareVersion(String v1, String v2) {if …

四、登录注册页功能实现《iVX低代码/无代码个人博客制作》

注:iVX也有免费直播课《第八期直播课》 首先打开在线编辑器进入我们的项目:https://editor.ivx.cn/ 一、登录页功能实现 上一节中已经完成了登录页的页面制作,那么这一节就开始对应的完成登录页的功能实现。 登录页的功能实现主要是对用户…

Oracle 12c应用连接VIP轮训负载均衡?

目前很多生产数据库都是两节点RAC,应用连接的数据库通常会连接SCAN IP或者VIP,这里做一个小实验,如果我们使用VIP连接, 应该怎样配置我们的客户端,负载均衡是否是严格意义上的轮训机制,只有通过自己的测试才能得到准备…

C语言试题三十一之判断字符串是否为回文?若是则函数返回1,主函数中输出yes,否则返回0,主函数中输出no。回文是指顺读和倒读都是一样的字符串。

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 请编写函数…

关于html5

html5 是用来 将 js 和 css 结合起来 从而实现 各种功能 javascript 用来定义 html5 页面的逻辑 css 来定义 html5 中的显示样式

【SignalR全套系列】之在.Net6中实现SignalR分组通信

微信公众号:趣编程ACE关注可了解更多的.NET日常实战开发技巧,如需源码 请公众号后台留言 源码;[如果觉得本公众号对您有帮助,欢迎关注]前文回顾【SignalR全套系列】之在.Net6中实SignalR通信SignalR中给客户端分组调用演示服务端代码实现1.Pr…

【ArcGIS风暴】中国756个气象台站分布Shapefile数据下载

在写论文时,通常要做研究区概况图,需要添加气象站点分布,或者在做气温或降水空间插值时,需要将气温和降水数据链接到气象台站上。气象数据通常可以到资源环境科学与数据中心去下载,为了使用的方便,本文分享中国区域756个气象台站shp格式矢量数据,如果你的研究区是西北五…

web上传大文件的配置

1、项目本身的webconfig 在<system.web>字段下 <httpRuntime targetFramework"4.5" requestLengthDiskThreshold"256" maxRequestLength"1000000000" executionTimeout"120"/> 2、找到C:\Windows\System32\inetsrv\confi…