五、文章详情页制作及跳转功能实现《iVX低代码/无代码个人博客制作》

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

一、详情页制作

在之前的章节中,我们已经制作完毕了登录、注册、首页等内容,在这一节中,我们编写详情页以及详情页功能制作。

详情页页面如下:
在这里插入图片描述
详情页头部也就是一个头部栏,下面是一个行,里面有标题和点赞信息内容,往下是一个富文本显示区域,再往下为评论内容区,接着还有一个评论内容显示区域:
在这里插入图片描述
首先我们创建头部,头部跟其他页面的头部一致,不再赘述创建方法,页面组件如下:
在这里插入图片描述
接着是标题区域,标题文本所占80%,点赞数据文本占 20%:
在这里插入图片描述
在这里插入图片描述
此时页面如下:
在这里插入图片描述
接下来就是博文内容区域,我们创建一个博文内容行,高度设置为撑开,并且需要进行y轴裁剪,因为评论区内容不固定,肯定超出了当前的高度范围:
在这里插入图片描述

接着在这个博文内容行内创建3个行表示这个博文内容行下的3个内容:
在这里插入图片描述
接下来给内容区设置内边距:
在这里插入图片描述
评论内容区域也要设置内边距,防止每个内容过于靠近边界:
在这里插入图片描述
接着在内容区创建一个富文本用于显示内容:

在这里插入图片描述

此时富文本需要给定一个固定高度:
在这里插入图片描述
接着我们在评论区中创建评论区内容,一个是输入的输入框一个是一个评论按钮:
在这里插入图片描述

此时评论内容并不允许多行评论,我们需要该评论区允许多行输入:
在这里插入图片描述
那么此时再更改按钮的显示属性页面如下:
在这里插入图片描述
接下来编写评论区内容,由于评论区的每个评论是单独的一行信息,我们创建一个行命名为评论:
在这里插入图片描述
在此还需要设置对应的内边距信息,使其可以有一定的边缘厚度:
在这里插入图片描述
接着创建一行评论内容以及一行时间内容:
在这里插入图片描述
此时页面效果如下:
在这里插入图片描述

二、功能完善

此时详情页是用来显示对应的文章的内容,那么此时我们必然需要知道点击的是那一个文章,那么在数据库中,文章ID则表示当前数据,为当前数据的身份ID,那么此时我们得在当前页面上新建一个变量用于存储点击到的页面ID:
在这里插入图片描述
接着,由于是从首页点击了数据到达当前的详情页,那么此时我们还需要完善首页的内容。

创建一个服务,命名为文章获取,用于获取数据库的文章信息:
在这里插入图片描述

接着编写这个服务的事件:
在这里插入图片描述
该事件直接选择文章数据库随后直接输出当前输出结果的对象数组的值即可。

接着我们到首页中,给予一个事件,该时间为显示时间,当前页面显示后直接选择对应的数据获取服务:
在这里插入图片描述

那么此时数据获取到了之后就还需要一个容器存储数据内容,那么此时新建一个对象变量命名为文章数据:
在这里插入图片描述
文章数据对象数组需要与数据库数据相同的列名才可以更好的获取内容,那么此时直接给予我们需要的列名,并且要与数据库列名相似:
在这里插入图片描述
随后直接获取把获取到的数据值给予到容器就可以了:
在这里插入图片描述
接着我们创建一个 for 循环,把内容存放for 循环之中:
在这里插入图片描述
选择对应的数据来源为循环创建:
在这里插入图片描述

接着给予之后的内容数据绑定,在设置阅读量的时候需要对应的数据进行字符串拼接,字符串内容需要对应的双引号引起来:
在这里插入图片描述

随后再绑定其他内容:
在这里插入图片描述
在这里插入图片描述
最后显示如下:
在这里插入图片描述
接下来预览界面:
在这里插入图片描述
数据成功进行了显示,那么接下来点击当前内容后应该跳转页面到对应的详情页之中。

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

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

相关文章

c++ 数据类型转换: static_cast dynamic_cast reinterpret_cast const_cast

c 数据类型转换: static_cast dynamic_cast reinterpret_cast const_cast 【版权声明】转载请注明出处 http://www.cnblogs.com/TenosDoIt/p/3175217.html【目录】 引言 static_cast 定义 dynamic_cast 定义 举例:下行转换(把基类的指针或引用…

C语言试题二十八之编写函数function功能是:从字符中删除指定的字符,同一字母的大、小写按不同字符处理。

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

日用有余!国产中科方德桌面操作系统初体验

国产IT圈里最受关注的话题,除了芯片想必就是操作系统了。但真说起国产操作系统,大家是既熟悉又陌生,听说过的多而真正使用过的少。而伴随产业发展,市面上也涌现出众多国产操作软件,这些系统是否好用?能否满…

面试经验总结

8 transient是干嘛的 Java的serialization提供了一种持久化对象实例的机制。当持久化对象时,可能有一个特殊的对象数据成员,我们不想用 serialization机制来保存它。为了在一个特定对象的一个域上关闭serialization,可以在这个域前加上关键字…

【GIS风暴】ArcGIS栅格重采样(Resample)方法详解

Contents 1. 最邻近法(Nearest Neighbor)2. 双线性内插法(Bilinear Interpolation)3. 三次卷积法(Cubic Convolution)4. ArcGIS重采样工具(Resample)栅格/影像数据进行配准或纠正、投影等几何变换后,像元中心位置通常会发生变化,其在输入栅格中的位置不一定是整数的行…

Unhandled event loop exception PermGen space

原来一直用eclipse3.5,最近尝试升级到3.7和4.2,但不管是3.7还是4.2项目编译过程中总提示“Unhandled event loop exception PermGen space”要求退出workspace,与原来3.5版本比较了一下eclipse.ini参数设置发现没有差别,怀疑是公司…

C# RichTextBox 做简单的HTML代码编辑器 ---------利用WinApi修正左侧显示行号 误差

说明:通过WinApi可以准确定准滚动位置。 //行号 生成显示 这里rtbLineNum用的 RichTextBox,也可以用其它private void ShowLineNum(){rtbLineNum.Text "";//计算行高,行数int linesLength 0;var pFirst tbEditor.GetPositionFr…

Angular - - angular.element

angular.element 将DOM元素或者HTML字符串一包装成一个jQuery元素。 格式:angular.element(element); element:包装成jquery对象的html字符串或者dom元素 jqLite提供的方法: addClass()after()append()attr()bind() – 不支持命名空间,选择器…

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

注:iVX也有免费直播课《第八期直播课》 一、文章详情实现 上一节我们已经完成了首页的内容显示,那么此时我们完成点击后跳转到详情页内容。 那么此时由于我们需要跳转到详情页需要对应的数据ID,那么此时还需要给首页的文章数据对象数组一个…

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…