iVx realizes simple news application on the page

I. Introduction

If you want to make a news application, the display of batch data is inevitable. There are many ways to display data, you can use native js or Vue, or you can use various template engines on the backend. Today I chose to use the iVx language.

iVX is a new development system based on cloud native (including front-end and back-end), a programming language with no code visualization: no code, visualization, componentization, data driven, cloud native, yes An important feature of the language; iVX has its own compiler/parser, which can generate executable code for the selected target system.

For detailed content, you can visit the official website , create project operation properties, etc. You can see how to customize the homepage of the cool browser .

Having said so much, let's do it in practice.

Second, the object

It can be said that iVx also has object-oriented characteristics. Therefore, the object is also a large type in iVx. We can add it in the lower left corner of the interface, as shown in the figure:

Insert picture description here


After adding an object, we can click on the object we added and set the object's fields:

Insert picture description here


After we click on the object, we can add fields to the object, and we can also set the type of the field. Take news objects as an example. We will simulate a news page later.

We can set some values ​​for this object:

Insert picture description here


We can enter directly in the window. Then we create a few text boxes. Then click the text box and select the object variable in the following order:

Insert picture description here


When we select the object variable, we can enter the following options:

Insert picture description here


As you can see here, we can select each attribute of the object variable. We can bind the attributes and the content of the text box according to our needs. We can use four text boxes to distribute the four attributes of the bound object variable, and the display effect is as follows:

Insert picture description here


Let's not enrich the style for now. Let's take a look at what an array of objects is.

Three, the object array

For news pages, there are usually many duplicate entries. The structure of each entry is the same, so we usually need a lot of object variables.

At this time, we can choose to use the object array to store our data. The object array is in the lower left corner of the interface:

Insert picture description here


Using object arrays can save us a lot of work.

Before using the object array, we need to bind the array and the object. We bind the objects in the order in the figure:

Insert picture description here


After binding, we can store the object data uniformly. Then we first manually add some data (add it in other ways later):

Insert picture description here


So how do we display these data in batches? If you still bind manually one by one, then the object array is of little significance, so we need to learn one more content.

Four, circulation container

Object arrays alone are useless. Object arrays are usually used in conjunction with our loop container. The location of the circulation container is shown in the figure:

Insert picture description here


Just click to add. How to use the recycle container?

We put the content that needs to be looped into the loop container, such as the news layout written earlier:

Insert picture description here


In this way, just putting it in the loop container has no effect. We also need to bind the object array to the loop container. The binding method is as follows:

Insert picture description here


After selecting the object array, select the value of the object array. Does it work now?

After binding the object array, we also need to bind the properties of the object to the loop container. The specific operations are as follows:

Insert picture description here


We need to select the controls in the loop container, such as text. Then select the corresponding content of the current data 1 in the upper left corner. For example, if I select the title text box, I select the title data.

Let's take a look at the display effect:

Insert picture description here


You can see that all the contents of the object array are now available. You can try to change the contents of the object array to see if the display effect will change.

Although the display effect is no problem now, the data input is still manually, so we need to find a way to improve it.

Five, the database

The power of iVx is that it allows you to achieve full-stack development with zero code. Built in iVx, we can add a database in the background, the way to add is as follows:

Insert picture description here

The database option will only appear after we select the background. When we click on the database, we can see the page of database field settings:

Insert picture description here


We can click on the position in the figure to add fields, but we will not add fields by ourselves today. We import fields and data directly from excel, we create the following excel:

Insert picture description here


Our first row is the field, and the following row is the data. Then click Import, select the local excel sheet to import:

Insert picture description here


The effect after import is as follows:

Insert picture description here


You can see that the data has been imported and the fields have been created. In addition, there are some fields that come with ivx, we don't need to modify them here.

Now that our database has been stored, how does the front end get the data? This requires something called service.

6. Service

Service is the channel between the front-end and the back-end to exchange information. We can obtain data from the database through the service. We first create a service:

Insert picture description here


Services, like databases, need to be added in the background. When we click on the service, we can see the following page:

Insert picture description here

On the page, I boxed two things. One of them is the receiving parameter and the other is the return parameter.

The receiving parameter is what the service needs, and the return parameter is what the service provides to us.

It's like we want a dish, we need to provide requirements such as'more spicy','less sugar', etc. This is the request parameter. Then we can get a dish, which is the return parameter.

Now we need the service to return news data to us. There is no request parameter here, and the return parameter is the news list. So we add a return parameter to the service:

Insert picture description here


Then we set up what the service does. We choose to output the contents of the database, which is equivalent to querying the database:

Insert picture description here

We can add filter criteria in one place, but we will not modify it here. Below we can select the fields that need to be queried, here we only select four. When the query is completed, our program will enter the callback function. Here we set the structure to the news list when the callback is successful, and then return it to us.

Insert picture description here


Now that the service is successfully created, how do we use it? We only need to start the service in the foreground, and then receive the structure returned by the service. For example, I add an event to the main body:

Insert picture description here


We set the event to be triggered at initialization, and then start the service in the event. When we choose to start the service, a callback function will appear here, and we can assign values ​​to the object array in the callback function.

The binding of the previous loop container remains unchanged. When we use the service to assign a value to the object array, the content of the object array changes. Then we can display the content returned by the database. The display effect is as follows:

Insert picture description here


Now our data presentation is almost complete. But in fact, it is not a good practice to use excel to import. We usually use the network interface to get the data. The operation of this part will be shown for everyone next time.

Seven, news applications

Because most of it is the content of the layout, so here is just a brief introduction. You can make layouts according to your own hobbies. Let’s take a look at the new news object:

Insert picture description here


fields such as title, avatar and cover are included here. Then the same is to create an array of objects:

Insert picture description here

For convenience, I manually inserted the data by myself. You can use other methods to import data. In terms of layout, you can follow your preferences:

Insert picture description here


We write the layout of a single column in the loop container, and then let the loop container bind our object array. The specific method has been mentioned before, so I won't go into details here.

The next thing is to bind each control, the operation here is still the same as before. We can click on the following pattern in the picture to preview with a mobile phone:

Insert picture description here


The following is the final display effect:

Insert picture description here


the interface here is relatively simple, you can enrich it yourself. We will use other methods to obtain data in the future.