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

一、详情页制作

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

详情页页面如下:

详情页头部也就是一个头部栏,下面是一个行,里面有标题和点赞信息内容,往下是一个富文本显示区域,再往下为评论内容区,接着还有一个评论内容显示区域:

首先我们创建头部,头部跟其他页面的头部一致,不再赘述创建方法,页面组件如下:

接着是标题区域,标题文本所占80%,点赞数据文本占 20%:


此时页面如下:

接下来就是博文内容区域,我们创建一个博文内容行,高度设置为撑开,并且需要进行y轴裁剪,因为评论区内容不固定,肯定超出了当前的高度范围:

接着在这个博文内容行内创建3个行表示这个博文内容行下的3个内容:

接下来给内容区设置内边距:

评论内容区域也要设置内边距,防止每个内容过于靠近边界:

接着在内容区创建一个富文本用于显示内容:

此时富文本需要给定一个固定高度:

接着我们在评论区中创建评论区内容,一个是输入的输入框一个是一个评论按钮:

此时评论内容并不允许多行评论,我们需要该评论区允许多行输入:

那么此时再更改按钮的显示属性页面如下:

接下来编写评论区内容,由于评论区的每个评论是单独的一行信息,我们创建一个行命名为评论:

在此还需要设置对应的内边距信息,使其可以有一定的边缘厚度:

接着创建一行评论内容以及一行时间内容:

此时页面效果如下:

二、功能完善

此时详情页是用来显示对应的文章的内容,那么此时我们必然需要知道点击的是那一个文章,那么在数据库中,文章ID则表示当前数据,为当前数据的身份ID,那么此时我们得在当前页面上新建一个变量用于存储点击到的页面ID:

接着,由于是从首页点击了数据到达当前的详情页,那么此时我们还需要完善首页的内容。

创建一个服务,命名为文章获取,用于获取数据库的文章信息:

接着编写这个服务的事件:

该事件直接选择文章数据库随后直接输出当前输出结果的对象数组的值即可。

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

那么此时数据获取到了之后就还需要一个容器存储数据内容,那么此时新建一个对象变量命名为文章数据:

文章数据对象数组需要与数据库数据相同的列名才可以更好的获取内容,那么此时直接给予我们需要的列名,并且要与数据库列名相似:

随后直接获取把获取到的数据值给予到容器就可以了:

接着我们创建一个 for 循环,把内容存放for 循环之中:

选择对应的数据来源为循环创建:

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

随后再绑定其他内容:


最后显示如下:

接下来预览界面:

数据成功进行了显示,那么接下来点击当前内容后应该跳转页面到对应的详情页之中。

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

  1. php博客详情页怎么做,简书仿站报告(四):如何制作文章详情页

    简书仿站的文章详情页的基本功能跟首页差不多,因此制作的过程我就不再详细讲述.而是换一个角度,通过介绍那些文章详情页会使用到的函数的具体使用方法来更深入的理解制作的过程. 文章详情页的制作方法 1.建s ...

  2. HelloDjango 第 08 篇:开发博客文章详情页

    作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 首页展示的是所有文章的列表,当用户看到感兴趣的文章时,他点击文章的标题或者继续阅读的按 ...

  3. 微信小程序开发(九)————文章详情页的实现

    我们在上一篇文章中已经制作出来了个人博客列表页,本篇实现详细内容. 首先第一步我们肯定是要创建文件夹,我们选择在pages目录下面的post目录里面创建post-detail的文件夹,如图: 教给大家 ...

  4. BBS(仿博客园系统)项目03(主页搭建、个人站点搭建(侧边栏分类展示、标签展示、日期归档)、文章详情页相关功能实现)...

    摘要: 主页面的搭建(导航条下面的区域) 个人站点 侧边栏分类展示 侧边栏标签展示 侧边栏日期归档 文章详情页 文章内容 文章点赞点踩 文章评论 一.主页面home.html的搭建(进一步完善) ho ...

  5. python个人网站开发_python 全栈开发,Day81(博客系统个人主页,文章详情页)

    一.个人主页 随笔分类 需求:查询当前站点每一个分类的名称以及对应的文章数 完成这个需求,就可以展示左侧的分类 它需要利用分组查询,那么必须要会基于双下划线的查询. 基于双下划线的查询,简单来讲,就是 ...

  6. Django:文章详情页面评论功能需要登录后才能使用,登录后自动返回到文章详情页...

    背景: 文章详情页正在查看文章,想评论一下写的不错,但是需要先登录才能.页面长这个样子: 方案: 1.点击登录链接时,将该页面的URL传递到登录视图中 request.path获取的是当前页面的相对路 ...

  7. django博客项目8:文章详情页

    首页展示的是所有文章的列表,当用户看到感兴趣的文章时,他点击文章的标题或者继续阅读的按钮,应该跳转到文章的详情页面来阅读文章的详细内容.现在让我们来开发博客的详情页面,有了前面的基础,开发流程都是一样 ...

  8. Django博客--4.开发博客文章详情页

    文章目录 0.思路引导 1.设计文章详情页的 URL 2.获取文章的URL 3.编写 detail 视图函数 4.编写详情页模板 5.更改主页中跳转详情页的地址链接 6.模板继承--抽取base.ht ...

  9. python 全栈开发,Day81(博客系统个人主页,文章详情页)

    一.个人主页 随笔分类 需求:查询当前站点每一个分类的名称以及对应的文章数 完成这个需求,就可以展示左侧的分类 它需要利用分组查询,那么必须要会基于双下划线的查询. 基于双下划线的查询,简单来讲,就是 ...

  10. Django 博客开发教程 8 - 博客文章详情页

    首页展示的是所有文章的列表,当用户看到感兴趣的文章时,他点击文章的标题或者继续阅读的按钮,应该跳转到文章的详情页面来阅读文章的详细内容.现在让我们来开发博客的详情页面,有了前面的基础,开发流程都是一样 ...

最新文章

  1. python哪些是可变对象_什么是Python可变对象和不可变对象
  2. oracle 表连接 大表小表_优化必备基础:Oracle中常见的三种表连接方式
  3. group by rollup 变量名为空值_【Python学习笔记】07、数据类型和变量
  4. Transformer性能被高估?DeepMind动态评估模型的时间泛化能力
  5. PyTorch中的nn.Conv1d与nn.Conv2d
  6. Atitit.json类库的设计与实现 ati json lib
  7. 【HDU - 6081】度度熊的王国战略(SW算法,全局最小割)
  8. assume用法及意思_词汇精选:assume的用法和辨析
  9. ACM用N个正方体来建造金字塔问可以建造多少层
  10. 7. Android Basic UI的布局 WidgetDemo基本组件演示
  11. pdf文件的处理(弄成小容量大小的文本文件)
  12. Sublime 美化 SQL代码:SqlBeautifier
  13. 5G O-RAN 一体式小基站硬件白盒化的参考架构
  14. 基于STM32设计的数字电子秤
  15. GeekTool使用备忘
  16. 三天晚上看了24集 央视版《神雕侠侣》 还不错
  17. 2018妙计旅行笔试题
  18. 理解什么叫“自然拼读”
  19. 2020年全球救市两种方法的分析,从世界高度来理解富人思维
  20. 谷歌商店输入账号密码后 回到登录界面/闪退

热门文章

  1. 为什么建议你开一个电子签名钥匙盘?电信设备进网许可证办理
  2. 高响应比优先调度算法(HRRN)
  3. 用c语言实现高响应比作业调度算法,采用高响应比算法地进程调度程序.doc
  4. Linux Command hping3 测试网络安全工具
  5. svn 的tag,分支管理,merge合并冲突
  6. YV12 and NV12
  7. 贵州省中职学校计算机教材电子版,中职计算机基础课件贵州省中职学校计算机应用基础教学工作计划.doc...
  8. 【毕设教程】物联网/嵌入式/单片机毕业设计项目开发流程
  9. 网上书店系统需求分析说明书
  10. 从零开始搭建物联网平台(三)数模设计