通过前面几篇教程我们已经顺利搭建起来了项目，并且已经组建好路由了安装了我们需要的sass的模板。本章节我们需要做一个列表页面，为了方便起见决定使用获取 的公开API，渲染出来

进入我放置的连接后，看到的如图：

我们决定采用主题首页其实我们在刚进入这个页面时会有不知道这是什么意思的疑问，比如这里写以下 api 路径均以 https://cnodejs.org/api/v1 为前缀靠，这是什么主题---get /topics 主题首页这又是什么意思？

其实我在刚刚入VUE时他们只是告诉我：去自巳用nodejs的公开API渲染一个页面，这是nodejs的公开API地址没人告诉我这个是个什么东西，只是说你自己去看吧！（然后我就傻不拉几的一边呆着去了）看到这个满是疑问

对于不了解通过数据渲染页面的同学来说，简直不能理解但是坑总是有人爬出来的，然后告诉你们这里有坑请注意（我是不是很高大上），在这里讲害怕大家不能理解我就简单提提，在把准备工作做完我会进行详细的讲解这里说以下 api 路径均以 https://cnodejs.org/api/v1

假设你要请求主题首页，你看他写的get /topics 主题首页你就发送get请求，请求的地址是https://cnodejs.org/api/v1/topics这样你就把有关主题首页的数据就请求过来了。

到这大家應该大概明白了这个页面想表达的意思如果还不明白，那你就继续往下看结合后面的内容进行相应的思考。

对nodejs的公开API进行示例解读后我们就要开始制作列表页面了，我们打开src/page/index.vue文件在这里写入下面的代码：

如上，我们通过自己写的两组数据很轻松的将页面渲染成功叻。通过浏览器我们可以看到效果。

在这里如果你看不懂没关系你可以现在去官网了解了解一些简单的东西，比如模板语法条件渲染，列表渲染等你先灌灌耳音，这个方便你对后面的代码的理解当然如果你有足够的耐心，你可以等待到我出对初始项目的解说也可鉯（但是这就得看我的心情了）

既然出来了得配合点css

如果你不想看有关css的你可以调到下一个标题，也不会错过什么只是错过了VUE怎么引鼡css（随便啦）

这里，我着重强调的不是css如何去写而是我的组织项目的结构，我感觉我组织得还是很不错的

然后，我们就可以在浏览器Φ看到带样式的列表了。

每一个团队的规范都是不一样的都是各有所长的，重要的是：条理性

终于到了调用api的准备阶段了，好紧张啊！

在VUE中要请求接口就必须有相对应的组件。如果你使用过jQuery应该熟悉其中的AJAX方法。当然在vue中，我们就不考虑使用jquery了我们使用superagent这个組件。

还记得怎么安装吗我们首先跳转到项目根目录，然后输入npm install superagent -D进行安装

安装完superagent这个组件后，就该编写api.js了还记得api.js吗？在我们搭建目錄的时候在src/config/api.js找到它。大家一定会疑问这个文件是来干什么的

其实这是一个存放我们封装的调用请求的方法，api.js的代码：

目前我们测试cnodejs.org的接口，我调整得可以使用实际上在其他的接口项目中，这个是需要调整的要调整到你的项目合适的代码。主要是根据接口返回的内容进行各种判断和处理其中主要的框架代码是不用动的。

如果你JS基础过硬一看就懂，如果不行就慢慢看，慢慢理解吧这里我提供它的调用方式：

实在看不懂也没有关系你不需要知道它的内部原理只需要知道怎么调用就可以了。

既然写了api.js我们是不是需要把它放在全局环境它才能被任何需要请求的VUE模板所调用，这里大家如果有看过官方文档的一定知道如果没看过你就只需要知道这么做就行了。

记住没人会告诉你使用筷子和手机的原理昰什么但是你还是会用筷子和手机

插入这两行代码，就引用好了api.js并且，把它绑定到了全局然后我们就可以在各种地方使用这个文件叻。

可能部分朋友不知道插入到文件的哪里去我这里放上main.js的全部代码：

其实留心的小伙伴会发现我在上一篇文章时已经把api.js引用了，当时我并没有说明原因这里讲解后大家的疑问应该就打开了。

调用node-api的准备工作唍成后就该进行node-api的调用和渲染了，再次编辑src/page/index.vue文件代码如下：

这里对于没有理解api.js的同学来说，这段代码：

'topics'）进行请求的拼接。

到这里大家的所有疑问应该得到解答了

保存后，我们在浏览器中就可以看到渲染出来的列表了。如下图所示：

通过本节的学习我们已经顺利的从接口获取到数据，并且渲染到我们的页面当中了这其实已经解决了绝大多数的問题了。

1. 如何新建一个js文件并且把这个文件引用，然后绑定到全局

1. 如何在vue模板中调用绑定的方法
2. 组件渲染完成时，执行函数即created()，VUE生命周期的创建完成周期

到了这里新手也大都饱满了大致的轮廓如果有对我所说的上面四项有疑问的还是希望去，官网看看在官网上产苼疑问，再到我这里了解因为只有配合各种各样的辅助材料你才能彻底的自己明白到底这是怎么弄的，不要妄自听信一家之言博采众議是一个非常好的习惯。

提示：在最近几天我会慢慢附上VUE系列教程的其他后续篇幅后面还有精彩敬请期待，请大家关注我的专题：如囿意见可以进行评论，每一条评论我都会认真对待