一、前言

如果你要做一个新闻应用，批量数据的显示是不可避免的。要实现数据展现有很多方式，可以使用原生的js或者Vue，也可以使用后端的各种模板引擎。而今天我选择的是使用iVx语言来实现。

iVX是一种基于云原生的全新开发体系（包括前端和后台），一种无代码可视化的编程语言：无代码，可视化，组件化，数据驱动（data driven），云原生（Cloud Native），是该语言重要的特点；iVX有自身的编译器/解析器，可以生成选定目标系统的可执行代码。

详细的内容可以访问官网，创建项目操作属性等可以查看如何自定义炫酷浏览器主页。

说了这么一大堆，我们来实际操作一下。

二、对象

可以说，iVx也是具有面向对象的特性。因此对象也是iVx中的一大类型。我们可以在界面左下角的位置添加，如图：

添加对象后，我们可以点击我们添加的对象，设置对象的字段：

我们点击对象后，可以为对象添加字段，同时还可以设置字段的类型。这里以新闻对象为例。在后面我们将模拟展示一个新闻页面。

我们可以给这个对象设置一些值：

我们可以直接在窗口输入。然后我们创建几个文本框。然后点击文本框，按照如下的顺序，选择对象变量：

当我们选择对象变量后，就可以进入如下的选择：

这里可以看到，我们可以选择对象变量的各个属性。我们可以根据自己的需求将属性和文本框内容进行绑定。我们可以用四个文本框分布绑定对象变量的四个属性，显示效果如下：

这里暂时就先不去丰富样式了。下面我们来看看对象数组是什么。

三、对象数组

对于新闻页面，通常是很多重复的条目。每个条目的结构都是一样的，因此我们通常需要很多个对象变量。

这个时候，我们就可以选择使用对象数组来存储我们的数据了，对象数组在界面的左下角：

使用对象数组可以减少我们很多工作。

在使用对象数组前，我们需要将数组和对象绑定，我们按照图中顺序绑定对象：

绑定后我们就可以统一存储对象数据了。然后我们先手动添加一些数据（后面通过其它方式添加）：

那我们要怎么批量显示这些数据呢？如果还是手动一个一个绑定，那么对象数组的意义不大，因此我们还需要学一个内容。

四、循环容器

光有对象数组是没有什么作用的，对象数组通常要结合我们的循环容器使用。循环容器的位置在如图：

直接点击就能添加。那循环容器要怎么使用呢？

我们将需要循环的内容放入循环容器，比如前面写的新闻布局：

就这样光放入循环容器也没什么作用，我们还需要将对象数组和循环容器进行绑定。绑定方式如下：

选择对象数组后，再选择对象数组的值即可。那现在就有用了吗？

在绑定对象数组后，我们还需要将对象的属性绑定到循环容器内。具体操作如下：

我们需要先选择循环容器内的控件，比如文本。然后再在左上角选择当前数据1的相应内容，比如我选择标题文本框，就选择标题数据。

下面我们来看看展示效果：

可以看到现在现在了对象数组中全部的内容，你可以尝试换一下对象数组的内容，看看显示效果会不会变。

现在虽然显示效果没问题了，但是数据的输入还是通过手动，因此我们需要想办法改进一下。

五、数据库

iVx的强大之处在于，它可以让你0代码实现全栈的开发。在iVx中内置了我们可以在后台添加数据库，添加方式如下：

数据库的选项，要在我们选中后台后才会出现。当我们点击数据库后，可以看到数据库字段设置的页面：

我们可以点击图中位置添加字段，但是我们今天不自己添加字段。我们直接从excel导入字段和数据，我们创建下面的excel：

我们的第一行是字段，后面行都是数据。然后点击导入，选中本地的excel表进行导入：

导入后的效果如下：

可以看到数据都已经导入了，而且字段也创建好了。另外还有一些ivx自带的字段，这里我们不需要修改。

现在我们数据库已经存储好了，前端要怎么获取数据呢？这就需要一个叫服务的东西了。

六、服务

服务是前端和后端交换信息的通道，我们可以通过服务来获取数据库的数据。我们先创建一个服务：

服务和数据库一样，需要在后台添加。我们点击服务可以看到如下页面：

页面中，我框中了两个东西。其中一个是接收参数，一个是返回参数。

其中接收参数是这个服务需要的东西，而返回参数则是需要服务提供给我们的东西。

就好比我们想要一盘菜，我们需要提供‘多辣’、‘少糖’等要求，这就是请求参数。然后我们就可以得到一盘菜，这盘菜就是返回参数。

现在我们是需要服务给我们返回新闻数据，这里没有请求参数，返回参数就是新闻列表。因此我们给服务添加一个返回参数：

然后我们设置服务要做的事情。我们选择输出数据库的内容，这就相当于查询数据库：

在一处我们可以添加筛选条件，这里我们不做修改。下面我们可以选择需要查询的字段，这里我们只选择四个。当查询完成后，我们的程序会进入回调函数。这里回调我们成功时将结构设置到新闻列表中，然后返回给我们。

现在服务创建成功了，我们要怎么使用呢？我们只需要在前台启动服务，然后接收服务返回的结构即可，比如我给主体添加一个事件：

我们设置事件在初始化时触发，然后在事件中启动服务。当我们选择启动服务后，这里就会出现一个回调函数，我们在回调函数中给对象数组赋值即可。

之前循环容器的绑定还是不变，当我们使用服务给对象数组赋值后，对象数组的内容就变化了。然后我们就可以显示数据库返回的内容了。显示效果如下：

现在我们的数据展现差不多算是完成了。不过实际上使用excel导入的方式同样不是个很好的做法，我们通常会使用网络接口的方式来获取数据。关于这部分的操作，将在下次为大家展示。

七、新闻应用

因为大部分是布局的内容，因此这里只是简单说一下。大家可以根据自己的爱好进行布局。先看看新的新闻对象：

这里包括了标题头像和封面等字段。然后同样是创建一个对象数组：

为了方便，这里是自己手动插入了数据。大家可以使用其它方式导入数据。布局方面大家可以根据自己喜好来：

我们在循环容器中写好单个栏目的布局，然后让循环容器绑定我们的对象数组。具体方式在前面已经说了，这里就不再细说了。

下面的事情就是绑定各个控件了，这里操作还是和之前一样。我们可以点击图中如下图案用手机进行预览：

下面是最终的显示效果：

这里的界面比较简单，大家可以自己丰富一下。后续我们还会用其它方式获取数据。

iVx实现页面简易新闻应用相关推荐

解析聚合新闻数据，并显示到主界面上（简易新闻二）
获取解析聚合新闻数据,并显示到主界面上(简易新闻二) 关于之前的功能实现可以从制作简易新闻App导航篇中查看先上一下最终效果图: 关于界面的搭建请看上一篇使用Fragment+ViewPager ...
Android 实现用户收藏新闻以及查看新闻（简易新闻六）
Android 实现用户收藏新闻以及查看新闻(简易新闻六) 效果图: 因为录制的gif过长无法上传,所以这里分为两段,一段是用户未登录状态下收藏新闻需登录,用户登录后可以收藏: 第二段用户未登录查看 ...
Android实现第三方Mob短信验证登录以及手机号显示和修改用户名（简易新闻五）
Android实现第三方Mob短信验证登录以及手机号显示和修改用户名(简易新闻五) 关于之前的功能实现可以从制作简易新闻App导航篇中查看因为这篇是写了有一段时间的博客,所以这篇(包括后面的简易新 ...
ListView实现简易新闻客户端
文章目录一.作业要求二.具体实现 1.0布局文件(activity_main.xml) 1.1布局文件(simpleitem.xml) 2.程序代码(MainActivity.java) 总结一 ...
php小程序开发新闻,微信小程序实战程序简易新闻的制作方法
这篇文章主要讲述微信小程序实战程序简易新闻的制作方法的相关资料,需要的朋友可以参考下微信小程序实战项目: 简易新闻制作先看下效果: 实现思路数据全部是采用的本地数据,图片也是本地图片,因为苦逼的 ...
Android简易新闻客户端自动升级简易新闻（二十）
Android简易新闻客户端自动升级简易新闻(二十) 关于说明第一步,添加引用第二步,注册蒲公英账号第三步,添加AndroidManifest.xml配置初始化最后一步打包上传关于 ...
Android使用高德与和风天气实现定位实况数据显示简易新闻（十）
Android使用高德与和风天气实现定位实况数据显示简易新闻(十) 关于效果图第一步,添加和风引用第二步,修改AndroidManifest.xml 第三步,修改activity_main.x ...
制作生成静态页面的新闻系统
利用PHP生成静态HTML页面的好处很多: 1.静态页面不需要Web服务器解释执行,用户打开网页的速度会快些: 2.打开静态页面时,Web服务器不需要访问数据库,减轻了对数据库访问的压力: 3.静态H ...
PHP基础示例:用PHP+Mysql编写简易新闻管理系统
实现目标:使用php和mysql操作函数实现一个新闻信息的发布.浏览.修改和删除操作实现步骤: 一.创建数据库和表 1.创建数据库和表:newsdb 2.创建表格:news 字段:新闻id,标题,关 ...

iVx实现页面简易新闻应用