[IVX junior engineer training course 10 papers to get certificates] 0708 news page production

Catalog

【iVX Junior engineer training course 10 Textual evidence 】01 understand iVX Complete the New Year greeting card
【iVX Junior engineer training course 10 Textual evidence 】02 Numerical binding and adaptive website production
【iVX Junior engineer training course 10 Textual evidence 】03 Events and guessing numbers games
【iVX Junior engineer training course 10 Textual evidence 】04 Canvas and me iVX Group photo
【iVX Junior engineer training course 10 Textual evidence 】05 Canvas and aircraft war game production
【iVX Junior engineer training course 10 Textual evidence 】06 Database and services
【iVX Junior engineer training course 10 Textual evidence 】07 08 News page making
【iVX Junior engineer training course 10 Textual evidence 】09 Chat room production

For high score promotion, please check the column ：
iVX Beginner to master
Big talk IVX From actual combat to mastery

One 、 Home page production

This section focuses on the mobile terminal with relative positioning web For example , Focus on the realization of background functions , The simple layout of the front end will not be repeated .

The work done in this section is divided into 3 A page 、6 Two services and two databases ：

The home page is the home page of this website 、 The release page is the release information 、 The details page is the content details ; The comment and information database stores the comment content and the published information content respectively ; All data acquisition and other information submission services .

Next, take a look at the home page , The pages in this project are no longer described , Focus on function realization .

First, the home page , The home page object tree and page are as follows ：

First look at how to get the data . Trigger the page response event when the page is displayed ：

This page calls the data acquisition service , Pass in the beginning and end variables , The beginning and end variables are Database Paging variables , The corresponding data can be obtained through the data acquisition service , Then assign the data to the information object array . For the time being, we don't care about how to write service implementation pages , At this point, we already know that the information object array has obtained the data , Then you need to create page content by using the loop through the information array .

Let's first look at the columns of the information object array ：

The content of the above object array indicates that the database column name is consistent with it , Otherwise, it is inconvenient to call for transfer , Then the information database is listed as follows ：


Then check The loop is created as follows , Then bind the data to it ：

Then let's check from the data acquisition service ：

The data service receives the first and last two variables as the interval value selected for the data , For example, the variable starts with 0, The last is 3, So that is 0 To 3 Data content between , If the number of data pieces per page is 3, The beginning and end values of each next page are 3 6、6 9、9 12 Add... In turn , The content of each previous page is that the variable decreases from beginning to end 3 that will do .

Then the button events on the previous and next pages are listed here ：

Two 、 Details page

We need to click the content in the home page to enter the details page , Then it is the click event set in the information line of the home page ：

We can see , After clicking the information, you need to transfer a current data ID value , This ID The value will be automatically provided into the input box , this ID Value is required , Otherwise, the content in the database cannot be obtained through the unique value in the database .

When you click on the information line, jump to the details page , Invoke the service to get the detail data in the display event of the detail page. .

First look at the details page and a brief description ：

Then view the page response event on the details page ：

We can see , The corresponding data can be obtained by writing a detail acquisition service , But it has to pass ID Look up the data , When the value is found , The information will be stored in the information object array , The comment information will also be obtained through the get comment service and stored in the comment object array .

We see in getting comments , By data ID Get the corresponding comment data from the comment data , Then it means that the database must be based on the corresponding data ID As the index of the corresponding content , Finally, the obtained data will be returned ：

Then we look at it from the comments database , It was found that it was based on the content data of the article ID As an index of data reviews ：

Then let's check the service details ：

It is found that the details of the service are similar , All of them are based on ID As the index of the corresponding data .

Next, let's check the comment service ：

Value from comment service , You only need to save and submit the corresponding value to the service , Then you only need to get the content of the comment input box at the Comment button , And the ID Values can be passed into the service at the same time ：

3、 ... and 、 Release page

The content of the release page is also similar to other pages , They are mainly based on the addition, deletion, inspection and modification of the content , It's too simple compared to other pages , Basically, fill in the corresponding information and transfer it to the service ：

Its search content is similar ：