五、文章详情页制作及跳转功能实现《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 定义 举例:下行转换(把基类的指针或引用…

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

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

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,那么此时还需要给首页的文章数据对象数组一个…

System.CommandLine选项Option

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

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

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

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

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

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

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

动物界的再生一个故事

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

基于.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…

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

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

【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…

七、文章管理页面及功能实现《iVX低代码/无代码个人博客制作》

注&#xff1a;iVX也有免费直播课《第八期直播课》 一、文章管理页页面制作 文章管理页的基本结构与首页类似&#xff0c;我们复制一个首页&#xff0c;并且重命名首页的名称为文章管理页&#xff1a; 我们接着删除如下图所框选部分内容&#xff1a; 接着重命名导航为内容…

【ArcGIS风暴】ArcGIS快捷键大全

使用快捷键能提高工作效率,本文总结了ArcGIS快捷键大全。当然了,为了个性化定制,也可以在ArcGIS中自定义快捷键。 扩展阅读: 【ArcGIS微课1000例】0015:ArcGIS如何创建/自定义快捷键? 文章目录 1. 访问 ArcMap 菜单命令2. 窗口操纵3. 刷新或暂停地图绘制4. 通过拖放进行…

.net core 抛异常对性能影响的求证之路

一、前言在.net 社区中曾经听到过很多关于大量抛异常会影响性能这样的结论&#xff0c;心中一直就存在各种疑问。项目中使用自定义异常来处理业务很爽&#xff0c;但是又担心大量抛业务异常存在性能问题。查阅了各种文档&#xff0c;微软官方对性能优化这一块也不建议使用过多的…

Android Bootloader LittleKernel的两篇文章 【转】

转自&#xff1a;http://blog.csdn.net/loongembedded/article/details/41747523 2014-12-05 14:37 3599人阅读 评论(2) 收藏 举报分类&#xff1a;Android Bootloader&#xff08;68&#xff09; Android 开发之 ---- bootloader &#xff08;LK&#xff09; LK是什么 LK 是 L…

一、首页第一个首页栏制作【仿淘票票系统前后端完全制作(除支付外)】

首页一共分为3个页面&#xff0c;分别是首页&#xff1a; 影院&#xff1a; 我的&#xff1a; 一、标题头制作 首先我们新建一个 web 相对应用&#xff0c;随后点击前台&#xff0c;在前台新建一个页面&#xff1a; 接着给予这个页面一个背景色&#xff1a; 为了使页面…