用户登录

现在 PostIndex 组件里用了 PostList 组件,在 PostList 组件里又用了 PostListItem 组件。在这个 PostListItem 组件里的东西就是每个内容列表项目。

这个组件需要显示的数据可以通过属性的方式传递过来, 打开 PostList 组件,在这个组件里导入发送请求需要用的 HTTP 客户端,名字是 apiHttpClient 来自 @/app/app.service。

在这个组件里可以添加一个 created 生命周期,这个组件被创建以后会执行组件里的这个 created 方法。用 async 标记一下它。

在这个方法里面添加一个 response 等于 await,用一下 apiHttpClient 上面的 get 请求 /posts 这个地址。在组件里可以再添加一个数据,添加一个 data 方法,方法返回的东西就是组件里可以使用的数据,比如添加一个 posts,默认让它等于一个空白的数组。

请求接口成功以后,可以设置一下组件里的这个 posts 数据,等于 response 里的 data。

有了内容列表数据以后,在这个 PostListItem 组件的上面,用一个 v-for,循环一下这个内容列表数据,post in posts ,循环的就是数组里的 posts 这个数据。这个数据是请求服务端的内容列表接口获取到的。

然后把当前被循环的这个内容项目交给这个 PostListItem 组件,绑定一下这个组件的 item 属性,等会儿我们在这个组件里添加这个 item 属性。这里可以把属性的值可以设置成 post。 再添加一个 key 属性,对应的值设置成 post.id 。

在打开 PostListItem 组件,在组件里要声明组件支持的属性,添加一个 props, 添加一个叫 item 的属性,类型设置成 Object 。

修改一下这个组件的模板,用一组 h3 元素,里面绑定输出 item 这个属性里的 title,它的值就是内容的标题。小横线,一组 small 元素,里面再绑定输出 item.user.name ,这个值就是内容项目的作者的名字。

预览

回到浏览器预览一下,页面没有正常显示内容列表,控制台上提示了一个错误,canot read property get of undefiend。

这个是因为在 post-list 组件里使用的这个 apiHttpClient 在导入的时候,这里写错了,要加一个大括号,里面是要导入的 apiHttpClient。

再回到浏览器。现在页面上会显示从服务端的内容列表接口那里获取到的内容项目。

在 Vue 组件内部请求服务接口获取组件需要的数据《 Vue.js 前端应用 #12:应用架构 》

统计

13052
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点