【iVX 初级工程师培训教程 10篇文拿证】07 08 新闻页制作

目录

【iVX 初级工程师培训教程 10篇文拿证】01 了解 iVX 完成新年贺卡 【iVX 初级工程师培训教程 10篇文拿证】02 数值绑定及自适应网站制作 【iVX 初级工程师培训教程 10篇文拿证】03 事件及猜数字小游戏 【iVX 初级工程师培训教程 10篇文拿证】04 画布及我和 iVX 合照 【iVX 初级工程师培训教程 10篇文拿证】05 画布及飞机大战游戏制作 【iVX 初级工程师培训教程 10篇文拿证】06 数据库及服务 【iVX 初级工程师培训教程 10篇文拿证】07 08 新闻页制作 【iVX 初级工程师培训教程 10篇文拿证】09 聊天室制作

高分提升请查看专栏： iVX入门到精通 大话 IVX 实战到精通

一、首页制作

本节以相对定位的手机端web为例，着重讲解后台功能实现，前端简单的布局不再进行赘述。

本节所做一共分为3个页面、6个服务和两个数据库：

在这里插入图片描述

其中主页为这个网站首页、发布页为发布信息、详情页为内容详情；评论和信息数据库分别存储评论内容和发布信息内容；其他服务均为数据获取和信息提交。

接下来查看一下首页页面，该项目中的页面不再进行绘制描述，着重以功能实现为主。

首先是首页，首页对象树和页面如下：

在这里插入图片描述

首先查看如何获取数据。在页面显示时触发页面响应事件：

在这里插入图片描述

该页面调用数据获取服务，传入始末两个变量，始末变量为数据库分页变量，通过数据获取服务即可得到对应的数据，随后将数据赋值到信息对象数组中。在此我们暂时并不关心如何编写服务实现分页，此时我们已经知道信息对象数组已经获取到了数据，那么接下来就需要通过该信息数组利用循环创建创建页面内容。

咱们可以先查看信息对象数组列：

在这里插入图片描述

以上对象数组内容即可说明数据库列名与其一致，不然则不方便调用进行调动，那么信息数据库列如下：

在这里插入图片描述

在这里插入图片描述

随后查看 循环创建如下，再将数据对其进行数据绑定即可：

在这里插入图片描述

接着咱们从数据获取服务中查看：

在这里插入图片描述

该数据服务接收了始末两个变量作为对数据选取的区间值，例如变量始为0，末为3，那么就是0到3之间的数据内容，如果每页数据条数为3，每下一页的始末值就是3 6、6 9、9 12 依次加上，每上一页内容就是始末变量递减3即可。

那么在此列出上下页按钮事件：

在这里插入图片描述

在这里插入图片描述

二、详情页

详情页需要我们点击首页中的内容进入，那么就是首页中的信息行设置点击事件：

在这里插入图片描述

我们可以看到，在点击信息后需要传递一个当前数据的ID值，这个ID值系统会自动提供到输入框中，此ID值为必需，否则无法通过数据库中唯一值获取数据库中的内容。

当点击了信息行后跳转到详情页，在详情页的显示事件中调用服务获取到详情数据。

首先看一下详情页以及简要说明：

在这里插入图片描述

接着查看详情页的页面响应事件：

在这里插入图片描述

我们可以看到，通过编写一个详情获取服务即可得到对应的数据，但是必须要通过ID对数据进行查找，当找到值后，信息将会存储到信息对象数组中，评论信息也会通过获取评论服务获取存储到评论对象数组中。

我们在获取评论服务中看到，通过数据ID从评论数据中得到对应的评论数据，那么就说明数据库中肯定是以对应的数据ID作为对应内容的索引，最终将会返回得到的数据：

在这里插入图片描述

随后我们从评论数据库中进行查看，发现果然是以文章内容数据ID作为数据评论的索引：

在这里插入图片描述

接着咱们查看详情服务：

在这里插入图片描述

由此发现详情服务也类似，均是以ID作为对应数据的索引。

接下来咱们先查看评论服务：

在这里插入图片描述

从评论服务中的值，只需要存入提交对应的值到服务中即可，那么在评论按钮处只需要获取到评论输入框内容，并且把ID值同时传入服务即可：

在这里插入图片描述

三、发布页

发布页内容也类似于其他页，均是以内容的增删查改为主，相比其他页面来说过于简单，基本上是填入对应的信息传入服务即可：

在这里插入图片描述

在这里插入图片描述

其搜索内容也类似：

在这里插入图片描述