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

article/2025/10/14 16:59:45

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

一、详情页制作

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

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

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

在这里插入图片描述

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

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

二、功能完善

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

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

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

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

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

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

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


http://chatgpt.dhexx.cn/article/SFl5PItZ.shtml

相关文章

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

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

一、首页、详情页、文章编辑页制作《iVX低代码/无代码个人博客制作》

注:iVX也有免费直播课《第八期直播课》 一、首页制作 首页预览如下: 首先在博客页创建一个相对应项目: 接着选择前台,创建一个页面,命名为首页: 接着更改当前屏幕为小屏尺寸: 接着我们分…

二、文章发布页制作及后台实现《iVX低代码/无代码个人博客制作》

注:iVX也有免费直播课《第八期直播课》 一、文章编辑页制作 当首页制作完毕后,需要显示内容就需要有文章数据,此时我们创建一个文章编辑页增加对应的数据。 那么我们创建一个页面,命名为文章发布页: 接着我们查看标…

二、博客首页完成《iVX低代码仿CSDN个人博客制作》

制作iVX 低代码项目需要进入在线IDE:https://editor.ivx.cn/ 一、菜单思路参考及制作 在 CSDN 首页中的菜单部分为一串横排的内容,并且可以进行拖动: 首先咱们添加一个行,命名为菜单: 接着肯定是需要设置上下的内边…

四、博客详情页完成《iVX低代码仿CSDN个人博客制作》

制作iVX 低代码项目需要进入在线IDE:https://editor.ivx.cn/ 一、博客详情页分析 博客详情页大体分为顶部标题、发布时间、作者信息、博文内容,底部的评论我们在此不必做悬浮内容,咱们直接放到博文之下进行显示即可;顶部标题需要…

博客中GIF动画超简单制作

前言: 在写博客的时候图片和视频是非常通俗易懂的,比文字表述更为清晰,有时候演示过程用动画效果更好,毕竟图片只是静态的,看不出整个过程。而录制成视频,体积大,保存发送也比较麻烦,最重要的事博客中不支持这种格式,所以制作成GIF动画,方便、占用空间又小、博客也支…

一、博客首页搭建搭建《iVX低代码仿CSDN个人博客制作》

制作iVX 低代码项目需要进入在线IDE:https://editor.ivx.cn/ 一、头部导航栏思路参考 首先我们可以查看CSDN的博客首页,从中查看一下布局: 在以上首页中,我们可以得知其顶部为一个整行,这个行内容左侧为一个logo&am…

《博客页面制作》教程

《博客页面制作》教程 一、《博客页面制作》第一部分 效果图&#xff1a; 参考代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>博客制作-第一部分</title><style type"text/css"&g…

Perfetto —— 靠谱的trace利器

最近踩到的坑&#xff0c;报了一个cst的测试项fail&#xff0c;帧率不符合预期&#xff0c;对应的测项进程是android.view.cts 肯定是要抓sytrace看看了 但是&#xff0c;试了systrace和atrace去抓&#xff0c;只抓了launcher的绘制&#xff0c;并没有android.view.cts的绘制…

perfetto使用简介

perfetto使用简介 文章目录 perfetto使用简介一、使用方法1.1 打开perfetto的设置界面1.1.1 adb指令1.1.2 系统设置 1.2 打开录制跟踪记录功能1.3 打开跟踪记录功能后&#xff0c;运行需要调试的APP1.4 运行完操作之后点击,可点击下拉菜单停止跟踪记录1.5 导出trace文件 二、打…

Android性能优化之Perfetto

Perfetto 一. 通过System Tracing抓取 1. System Tracing Overview System Tracing即系统跟踪界面&#xff0c;用户可以通过如下两种方式进入系统跟踪界面&#xff1a; &#xff08;1&#xff09;设置 – 其他设置 – 开发者选项 – 系统跟踪&#xff08;Realme GT Neo 闪速…

[ES6] 01. Intro to ES6 and traceur compiler

---恢复内容开始--- ES6 is ECMAScript version 6, which JavaScript is based on. The next version of JavaScript is going to be based on version 6 of ECMAScript. Tracer is a way to compile that next version of JavaScript back into JavaScript of today, meaning …

Android性能优化工具

一、性能优化工具基础 1.1 概述 在Android开发中&#xff0c;开发者可通过"系统跟踪"观察Android设备的运行情况并生成跟踪报告&#xff0c;在此基础上进行分析优化。Android 平台提供了多种获取跟踪信息的工具&#xff1a; Android Studio CPU 性能剖析器Systrace…

搭建Babel运行环境,Traceur ES6模板,块级作用域,let和const命令

搭建Babel运行环境 Babel&#xff08;http://babeljs.io/&#xff09;可用于将使用ES6语法的脚本转化为ES5语法的脚本&#xff0c;基本功能的安装步骤如下&#xff1a; 1、安装node解释器和npm包管理工具 2、安装babel解释器 npm install -g babel &#xff08;建议这个过程完…

ES6转ES5,Traceur使用方式

ES6于2015年6月正式发布&#xff0c;各大浏览器的最新版本对 ES6 的支持可以查看https://kangax.github.io/compat-table/es6/。 目前各大浏览器和开发环境对支持ES6的支持情况参差不齐&#xff0c;在实际项目开发中&#xff0c;我们仍旧不得不降级使用ES5语法以兼容各平台。幸…

Traceur 使用方式

ES6于2015年6月正式发布&#xff0c;各大浏览器的最新版本对 ES6 的支持可以查看https://kangax.github.io/compat-table/es6/。 目前各大浏览器和开发环境对支持ES6的支持情况参差不齐&#xff0c;在实际项目开发中&#xff0c;我们仍旧不得不降级使用ES5语法以兼容各平台。幸…

Rxjava:interval的使用

以固定的时间间隔不断发射数据。 测试&#xff1a; Test public void testSimple(){Observable.interval(1, TimeUnit.SECONDS).subscribe(new Action1<Long>() {Overridepublic void call(Long aLong) {System.out.println("aLong " aLong);}});for (;;){…

FlinkSql系列6之 Interval Join

FlinkSql系列6之 Interval Join 前言 本次我们来学习flinksql的Interval Join,这个方式主要是针对两个流在一定时间区间内的join,支持事件时间和处理时间&#xff0c;而且这个流每次只会产生一条数据&#xff0c;是一个完全的追加流。 一、Interval Join是什么&#xff1f; I…

Flink Interval Join使用以及源码解析

1、Interval Join 概述 在之前的Join算子中&#xff0c;一般使用的是coGroup算子&#xff0c;因为一个算子可以提供多种语义&#xff0c;但是也是有一些弊端的。因为coGroup只能实现在同一个窗口的两个数据流之间进行join&#xff0c;在实际的计算过程中&#xff0c;往往会遇到…

mysql datesub interval_Mysql之INTERVAL与DATE_SUB与EXTRACT函数的使用

1. INTERVAL INTERVAL代表的是时间间隔 MySQL中的时间间隔类型有如下几种: 1.1 利用INTERVAL做时间的加减法 示例: 加法:SQL>SELECT DATE 2018-11-01 + INTERVAL 10 11 DAY_HOUR; 结果:2018-11-11 11:00:00 减法:SQL> select date 2018-11-11 11:00:00 -INTERVAL 10 11…