九、二手信息站点后台完成
了解完后台实现后,我们开始为该二手商品站点完成完成后台制作。
文章目录
- 九、二手信息站点后台完成
- 9.1.1 完成二手信息站点注册功能
- 9.1.2 完成二手信息站点登录功能
- 9.1.3 完成商品发布功能
- 9.1.4 首页信息获取
- 9.1.5 详情页内容
9.1.1 完成二手信息站点注册功能
首先完成账户的注册需要在该项目后台中添加一个私有用户:
随后我们点击注册页面的 按钮组件 为其添加事件;首先为 手机验证码按钮 添加事件,事件逻辑为该 按钮 受到点击后进行响应,随后添加一个 动作,该 动作 为选择 私有用户对象,用 私有用户对象 发起一个 手机验证码动作:
随后得到验证码后我们直接为 注册按钮 添加一个事件,条件为 点击触发:
为了判断该动作是否成功完成,我们为这个动作设置一个 回调事件;添加 回调事件 后增加其条件,判断注册结果是否成功,若成功则使用系统界面对象发起一个弹窗,内容为注册结果并且跳转到登录界面:
再此为了保证完整性,再添加一个条件判断注册结果是否为否,为否则弹出注册失败原因:
9.1.2 完成二手信息站点登录功能
登录界面的功能实现跟注册页面实现类似。为 登录按钮 添加一个事件为 点击触发,随后依旧是使用 私有用户 对象发起一个登录操作:
随后为登录时间添加一个回调,为回调增加一个条件,若登录结果为成功,那么就弹出弹窗作为提示并且跳转到信息展示页面:
最后也为其添加一个登录失败事件,并且做弹窗提示:
9.1.3 完成商品发布功能
在商品发布页中,我们需要使用文件接口获取本地图片:
获取到本地图片完成成功后,我们需要创建一个封面图地址的文本变量:
并且在获取到文件后将这个变量设置为读取到的 base64 图片内容:
接着我们添加一个隐藏的图片:
并且设置这个图片为不可见,在正式赋值后给与图片信息,这样不会影响整体的页面排版:
接着我们继续为获取图片按钮添加事件,此时将刚刚获取到的图片信息赋值给这个封面图图片,并且设置该负面图属性可见:
但是此时的图片是不可见的,因为我们一般情况下,图片并非使用 base64 显示,此时应该转化这个图片为 base64 图片:
最后我们为发布按钮添加发布事件。这个事件需要创建一个服务将传递的值给与数据库,那么这个操作就意味着我们需要再多做一个操作,也就是创建一个数据库。首先我们在后台创建一个商品数据库:
在这个商品数据库中添加几个字段,由于截图不全再次截图 2 次进行说明:
随后添加一个服务命名为发布信息:
在服务中创建需要的参数:
在服务中设置商品数据库对象动作为提交,并且给与对应的数据:
最后自己设置一个返回结果为是否成功:
此时必要的工作已经做完,我们接着可以为发布按钮添加发布事件了。在发布按钮中添加点击后触发事件,该事件动作为使用发布信息发布启动服务作为动作,传入发布信息作为传递的值:
完成后给与一个成功提示与错误提示即可:
9.1.4 首页信息获取
此时我们已经可以从数据库中获取数据,首页的内容应该丰富起来。我们此时在首页中添加对象变量命名为商品数据,设置列名与数据库列名一致:
接着我们对这个页面添加一个事件,触发调价哪位页面显示之前,此时我们应该调用一个服务获取数据,再此新建一个服务命名为默认数据:
该服务不需要接收参数,直接输出数据库数据即可:
我们接着页面添加事件,该事件直接调用该服务,调用完毕后给商品数据变量赋值为返回值即可:
此时我们回到页面之中,删除多余的商品信息内容,直留下一个。在唯一一个商品信息列外,添加一个 for 循环组件:
设置 for 循环组件的数据来源为商品信息变量:
接着我们将内容依次对应设置即可:
此时我们应该还设置一个隐藏的文本用来记录当前的 id 值,因为在详情页面中我们需要通过当前这个商品信息 id 值,找到数据库中匹配的数据。添加一个文本,设置值为当前数据的 ID,并且设置属性为不可见:
9.1.5 详情页内容
详情页是通过当前点击的 数据ID 到数据库中进行检索,我们此时应该创建一个服务命名为某商品数据:
设置接收参数 id 为数字,通过商品数据库对象进行输出操作,设置条件且为 数据ID 等于当前 id 值即可:
我们接下来需要了解一下进入商品详情页的逻辑。首先我们第一步为点击商品数据,此时我们应该创建一个变量为查询id,该变量值用来在商品信息页面加载时提供具体的 id 用于服务的调用:
此时我们再为图片设置一个点击事件,点击图片时赋值查询id变量为当时设置的隐藏文本的内容,随后再跳转到详情页:
此时我们创建一个商品详情变量用于数据显示:
再详情页的显示事件中直接调用对应服务进行内容赋值到详情对象变量即可:
在详情页创建一个循环组件,将要显示的内容进行循环,设置循环组件的数据来源为商品详情变量:
随后再设置对应的内容即可,在此使用富文本变量举例:
最后只需要为跳转按钮都添加页面跳转即可完成。