10分钟做一个新闻问答web站点[iVX低代码实战]

一、创建首页
进入到iVX线上编辑器后,选择相对定位。
在这里插入图片描述
点击创建后进入到 IDE 之中:
在这里插入图片描述
我们在第一步中首先创建一个首页。点击左侧组件栏中的页面组件,创建一个页面:
在这里插入图片描述
接着重命名该页面为Home,在页面中创建一个行,命名为main:
在这里插入图片描述
设置main的高度为包裹,并且背景色透明:

在这里插入图片描述

在main之下创建一个行,设置高度为包裹,重命名为标题:
在这里插入图片描述
接着设置一下他们之间的属性信息:
在这里插入图片描述

接着创建两个行,一个行命名为内容,在内容之下创建一个行为信息:
在这里插入图片描述
之后在在行中添加信息的内容,对象树与展示效果如下:
在这里插入图片描述
此时在页面中创建一个对象数组,重命名为信息:
在这里插入图片描述

接着在图片中增加列:
在这里插入图片描述
接着在对象数组中添加数据:
在这里插入图片描述

接着在内容中添加一个for循环组件:
在这里插入图片描述
接下来把信息放到for循环之下:
在这里插入图片描述
接着为循环创建绑定一个数据来源的值为信息对象数组值:
在这里插入图片描述

接着点击一个组件,点击数据绑定:
在这里插入图片描述

接着为不同的组件选择合适的值:
在这里插入图片描述

其他内容同理可得,接下来预览界面发现会自动使用for循环创建多个内容:
在这里插入图片描述

二、数据库创建

接着我们点击导出可以导出数据成xlsx,这一个步骤是为了将该数据存储到数据库之中。
在这里插入图片描述
我们点击后台,点击DB进行数据库创建:
在这里插入图片描述
接着我们点击导入,选择刚刚导出的内容作为数据库内容:
在这里插入图片描述
导入后我们在数据库中可以看到刚刚的数据:
在这里插入图片描述

接下来点击后台,再创建一个服务用于数据获取,重命名为数据获取:
在这里插入图片描述
服务是数据库与前台之间的逻辑层,我们点击服务对服务进行编辑。在需要做的动作之中旋转信息对象做输出,输出指从数据库往外输出内容,当数据库输出完毕后,当前服务设置自定义的返回结果,返回结果的内容就是输出结果的对象数组的值:
在这里插入图片描述
接着我们给该页面添加显示事件,显示后那么启动服务,完成后将对象数组的值赋值为当前服务返回的值:
在这里插入图片描述

此时我们对象数组中的值清空后,页面依旧会显示内容,这是因为已经使用服务将数据库的值赋予给页面中的对象数组:
在这里插入图片描述

三、搜索功能制作

搜索功能主要是通过输入关键字,再到数据库中判断是否存在相似的内容,从而输出,那么这个时候咱们只需要给搜索按钮点击后有一个事件,这个事件去响应一个搜索服务即可完成。
首先需要做一个搜索服务,搜索服务步骤如下:
在这里插入图片描述
接着给点击按钮增加时间即可,传入的关键字则是输入框的值:
在这里插入图片描述

服务完毕后直接给予信息对象数组的值即可。

三、发布信息页面制作

此时再添加一个页面如下效果:
在这里插入图片描述

为了方便,该页面内容不做过多修饰,点击不同的五角星可以上传不同的图片。

接着咱们为点击图片上传图片编写事件(需要添加文件接口):
在这里插入图片描述

其他两张图片同理不再赘述。
此时给home页的发按钮添加点击事件,点击后跳转到发布页:
在这里插入图片描述

此时在数据库中添加一个值为内容:
在这里插入图片描述
添加一个发布服务:
在这里插入图片描述
接着给发布页按钮发布添加时间,启动该服务传递值内容:
在这里插入图片描述

接着成功发布内容,数据库中也会有提示:
在这里插入图片描述

在这里插入图片描述

四、数据分页

首页的数据过多则需要分页,分页需要服务完成。
我们在数据获取服务中看见有输出行数填写框:
在这里插入图片描述
这里的行数起始则表示数据库中第几行到第几行内容。若输入1-3则会出现第1、2、3条数据:
在这里插入图片描述
此时这两条数据写死并不好,咱们可以使用参数动态响应内容:
在这里插入图片描述
此时我们默认输出1-3条数据,那么在首页的显示事件之中,咱们可以将始末参数写死用1和3代替:
在这里插入图片描述
此时写死也并不是太好,咱们在home页面中创建两个变量,一个叫始,一个叫末:
在这里插入图片描述
并且始的值为1,末的值为3。最后我们将页面显示事件的值换成1和3:
在这里插入图片描述

再创建两个按钮,一个为上一页另一个为下一页:
在这里插入图片描述

我们点击下一页时,由于每页初始数据条数为3条,那么第一次的数据是起始为1,结束为3,下一页则需要其实位置和结束位置都往下移动3个位置,也就是1+3和3+3。
第一页是1到3条,第二页就是4到7条,依次类推。
所以在此处点击下一页按钮后,调用服务数据获取时,应该给始、末两个变量都加上3,下一页按钮事件如下:
在这里插入图片描述
那么上一页则相反是减3:
在这里插入图片描述
此时还需要判断上一页的值若等于1则不执行,因为第一页没有上一页,条件只需要是不等于1或大于1即可:在这里插入图片描述
我们点击下一页,发现若没有数据后还可以可以点击:
在这里插入图片描述

五、限制下一页

这个时候需要限制下一页按钮的点击。
此时我们点击数据获取服务,在有数据的时候成功返回值,若没有数据就返回0:
在这里插入图片描述
接着再到下一页中编写事件,完成数据获取后,返回的结果值不等于0则赋值信息对象数组的值为返回的数据,若返回结果为0说明空数据,空数据则把已经进行加法递增3的始、末变量的值再减少3:
在这里插入图片描述
此时我们运行程序发现点下一页空数据时无响应:
在这里插入图片描述

六、内容详情页

详情页直接复制 home 页内容即可,添加一个评论区,并且给信息对象数组增加一个内容列即可:
在这里插入图片描述

接着还需要在home页的信息对象数组中添加一个列叫做数据ID:
在这里插入图片描述

在这里插入图片描述
接下来咱们需要在详情页中添加一个ID变量,随后在信息行中添加一个时间,当点击该行时给予ID变量赋值为当前数据的数据ID,并且跳转页面到详情页:
在这里插入图片描述
接着添加一个服务通过数据ID查找到合适的内容:
在这里插入图片描述

接着在详情页中,添加一个显示时响应的时间,该事件响应后就启动详情服务,并且把数据ID当作参数传递到服务之中,最后将详情页中的信息对象数组赋值为返回的值:

在这里插入图片描述
接着将循环创建的数组的数据来源绑定为当前页面中的信息对象数组:
在这里插入图片描述
此时运行后我们可以成功进入到页面获取到信息:

七、评论

接下来创建一个数据库,在数据中创建两个列,一个是评论内容,另外一个是评论文章的ID,这个ID对应评论的对应文章:
在这里插入图片描述
接着创建一个服务,接收两个参数,一个是评论内容另外一个是ID,最后将两个值存储到当前的服务之中:
在这里插入图片描述

接着咱们点击评论按钮启动该服务,传递值:
在这里插入图片描述

八、获取评论

获取评论也很简单,只需要传递当前的文章ID既可以在数据库中查找到匹配的内容,返回内容后用一个对象数组存储即可。
首先在详情页创建一个对象数组为评论:
在这里插入图片描述
接着在评论行中创建一个for循环循环一个text文本,for循环的数据来源则是评论对象数组,text文本的内容则是评论内容:
在这里插入图片描述

接着创建一个服务,通过ID查找评论信息:
在这里插入图片描述

接着在页面事件中添加一个动作,这个动作是显示后直接调用获取评论服务,传入ID数据,完成服务后给评论对象数组赋值,该值则为服务返回的数据结果:
在这里插入图片描述
最后预览即可看到评论结果:
在这里插入图片描述

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

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

相关文章

iOS开发网络篇—网络编程基础

一、为什么要学习网络编程 1.简单说明 在移动互联网时代,移动应用的特征有: (1)几乎所有应用都需要用到网络,比如QQ、微博、网易新闻、优酷、百度地图 (2)只有通过网络跟外界进行数据交互、数据…

深入理解Three.js(WebGL)贴图(纹理映射)和UV映射

本文将详细描述如何使用Three.js给3D对象添加贴图(Texture Map,也译作纹理映射,“贴图”的翻译要更直观,而“纹理映射”更准确。)。为了能够查看在线演示效果,你需要有一个兼容WebGL的现代浏览器&#xff0…

在兰州吃牛肉面时亲眼目睹的一幕,我感动了

今天中午去吃占国牛肉面,人比较多,很热闹。旁边坐了一群身穿校服的小学生,身后坐着一位小学老师,当孩子们发现老师在后面的时候,都异口同声地叫老师过去跟他们一起吃,老师嘿的一笑,没同意&#…

如何跨 Namespace 同步 Secret 和 ConfigMap?

Secret 和 ConfigMap 资源对象是命名空间级别的。它们只能被同一命名空间中的 Pod 引用。所以有时候不得不手动为每个命名空间创建它们。但有很多场景,我们想让它们是全局的,至少可以是跨命名空间共享的 Secret 和 ConfigMap,例如这些场景&am…

一文总结学习 Python 的 14 张思维导图

本文主要涵盖了 Python 编程的核心知识(暂不包括标准库及第三方库,后续会发布相应专题的文章)。 首先,按顺序依次展示了以下内容的一系列思维导图:基础知识,数据类型(数字,字符串&am…

GEE学习笔记

掩膜 ​ 在遥感图像处理中,"掩膜"是指一种用于隐藏或保留图像特定部分的技术。掩膜通常是一个二进制图像,其中的像素值为0或1,分别表示遮蔽或保留。 ​ 在去除云的情境中,掩膜通常用于隐藏图像中被云覆盖的部分&#…

十一、飞机大战(IVX 快速开发教程)

十一、飞机大战 制作微信小游戏大致流程与微信小程序、Web类似,不同的在于是组件的使用。 文章目录十一、飞机大战11.1.1 完成游戏角色制作11.1.2 完成物理世界添加11.1.3 完成子弹对象反重力运动11.1.4 使用对象组创建子弹11.1.5 子弹优化11.1.6 设置敌机11.1.7 优…

中国版LinkedIn呼之欲出

迄今为止,发展势头强劲的Facebook仍未上市,而美国职业社交网站LinkedIn 却率先登录纽约证券交易所,股价在第一天的交易中飙升,从45美元的发行价上涨了一倍,然后超过100美元,最终以94.25美元收盘。 LinkedIn…

Android之实现RecyclerView拖拽效果和固定部分元素不进行交换位置(包含源代码下载地址)

1、效果爆照 启动的效果 拖动过程中的效果 拖动后的效果 2、需求和问题 需求:RecyclerView实现拖拽效果,但是部分固定位置不能进行拖拽也不能在拖拽的过程中交换顺序

各主流浏览器内核介绍

所谓的“浏览器内核”无非指的是一个浏览器最核心的部分——“Rendering Engine”,直译这个词汇叫做“渲染引擎”,不过我们也常称其为“排版引擎”、“解释引擎”。这个引擎的作用是帮助浏览器来渲染网页的内容,将页面内 容和排版代码转换为用…

测绘地理信息标准(国家、行业、地方)大全来了:测绘地理信息标准化服务平台

测绘地理信息标准化服务平台,这里有你需要的所有标准,赶快来围观吧!

WPF效果第一百八十七篇之再玩ListBox

大周末的接着上一篇又玩了ListBox,这不又来再次去玩耍ListBox;毕竟是我的最爱,没办法就喜欢玩耍他;闲话也不多扯了,直接看最终效果:2、ItemsPanel还是老样子:<ItemsPanelTemplate x:Key"CommonItemsPanelTemplate"><WrapPanel Orientation"Horizontal&…

利用pdf.js开发嵌入pdf显示,以及利用jquery-ui左右分栏显示

原来考虑用pdf.js的viewer.html页面&#xff0c;但怎么用都不方便。因此直接用pdf.js在左侧连续显示pdf所有内容&#xff0c;右侧显示其它相关内容&#xff0c;并且左右宽度可以任意拖动&#xff0c;最终实现效果如图&#xff1a; 代码&#xff1a;<!DOCTYPE html><ht…

十三、制作 iVX音乐分享小程序

功能介绍 通过前几节的学习&#xff0c;我们对完成一个应用已经有了一些自己的心得。在此再次再制作一个小的音乐小程序应用。该应用一共分为首页、榜单页、音乐分享页和音乐搜索页。 首页&#xff1a; 榜单内容页&#xff1a; 音乐分享页&#xff1a; 音乐搜索页&#xff1a…

01_反射_02_反射类的构造方法

【工程截图】 【Person.java】 //将要被反射的类 package com.Higgin.reflect; import java.util.List;public class Person {private String name"NULL";private int age0;public Person(){System.out.println("构造方法&#xff1a;Person()");}public P…

私有云搭建 OpenStack(centos7.3, centos-release-openstack-ocata)

OpenStack&#xff08;centos7.3,centos-release-openstack-ocata&#xff09;nova&#xff1a;计算节点queue&#xff1a;消息队列&#xff0c;系统瓶颈所在scheduler&#xff1a;调度机制conductor&#xff1a;更新数据库cert&#xff08;objectstore&#xff09;&#xff1a…

C# 类继承中的私有字段都去了哪里?

最近在看 C 类继承中的字段内存布局&#xff0c;我就很好奇 C# 中的继承链那些 private 字段都哪里去了? 在内存中是如何布局的&#xff0c;毕竟在子类中是无法访问的。一&#xff1a;举例说明 为了方便讲述&#xff0c;先上一个例子&#xff1a;internal class Program{stati…

大型分布式网站架构技术总结

本文是学习大型分布式网站架构的技术总结。对架构一个高性能&#xff0c;高可用&#xff0c;可伸缩&#xff0c;可扩展的分布式网站进行了概要性描述&#xff0c;并给出一个架构参考。一部分为读书笔记&#xff0c;一部分是个人经验总结。对大型分布式网站架构有很好的参考价值…

python 数据分析找到老外最喜欢的中国美食【完整代码】

一、环境及依赖 语言&#xff1a;python3.8 抓取&#xff1a;selenium 代理&#xff1a;ipide **注&#xff1a;**想要完整代码的在末尾&#xff0c;注意新手建议慢慢看完。在此提示一下本篇文章的编写步骤&#xff1a;1.获取数据、2.翻译、3.数据清洗、4.切词词权重、5.词云 …

hihoCoder 1257 Snake Carpet(很简单的构造方法)

2015 ACM / ICPC 北京现场赛 I 题 构造 注意一个小坑&#xff0c;每条蛇的输出是要从头到尾输出的。 还要注意的是&#xff0c;不能开数组去模拟构造过程&#xff0c;然后输出&#xff0c;那样会TLE的。 #include <cstdio> #include <cstring> #include <cmath&…