iVx实现页面简易新闻应用

Posted 2021-06-14 ZackSock

一、前言

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

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

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

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

二、对象

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

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

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

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

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

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

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

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

三、对象数组

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

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

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

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

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

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

四、循环容器

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

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

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

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

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

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

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

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

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

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

五、数据库

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

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

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

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

导入后的效果如下：

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

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

六、服务

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

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

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

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

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

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

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

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

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

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

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

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

七、新闻应用

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

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

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

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

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

下面是最终的显示效果：

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