Vue2+VueRouter2+webpack 构建项目实战（四）接通api，先渲染个列表

通过前面几篇教程，我们已经顺利搭建起来了，并且已经组建好路由了。本章节，我们需要做一个列表页面，然后利用获取  http://cnodejs.org/api  的公开API，渲染出来。

制作列表页面

我们打开src/page/index.vue 文件，在这里写入下面的代码：

<template> < div > < h1 class = "logo" > cnodejs Api Test </ h1 > < ul class = "list" > < li v-for = "item in lists" v-text = "item.title" ></ li > </ ul > </ div > </ template > < script > export default { data() { return { lists:[{ id: 1 , title: "test title 1" },{ id: 2 , title: "test title 2" }] } }} </ script >

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

配合点css

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

新建文件， src/style/scss/_index.scss

输入下面的内容

.logo {color: red ;}.list { line-height: 2 ; li {border-bottom: 1px solid #ddd ;}}

然后在 src/style/style.scss 中输入

@ import "scss/index" ;

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

我的习惯是，一个文件，一个样式，文件位于src/page/ 文件夹下面，样式位于src/style/scss 下面。文件和样式同名。如果文件位于子目录，如src/page/user/pay.vue ，那么，对应的scss 文件就是src/style/scss/user/_pay.scss 这样。

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

调用api.js

在第二节中，我们在src/config 目录下面建立了一个api.js 的空文件。在第三节中没有使用。本节，我们要开始使用了。

首先，我们编辑 src/main.js  ，引用 src/config/api.js 。如下：

import api from './config/api' Vue.prototype.$api = api

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

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

// 引用 vue 没什么要说的 import Vue from 'vue' // 引用路由 import VueRouter from 'vue-router' // 光引用不成，还得使用 Vue.use(VueRouter) // 入口文件为 src/App.vue 文件 所以要引用 import App from './App.vue' // 引用路由配置文件 import routes from './config/routes' // 引用API文件 import api from './config/api' // 将API方法绑定到全局 Vue.prototype.$api = api // 使用配置文件规则 const router = new VueRouter({ routes}) // 跑起来吧 new Vue({ router, el: '#app' , render: (h) => h(App)})

安装superagent组件

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

安装非常简单，我们首先跳转到项目根目录，然后输入 npm install superagent -D 进行安装。

编写api.js文件

有了工具了，我们就需要来编写api.js 文件，使它可以完成我们想要的工作。

// 配置API接口地址 var root = 'https://cnodejs.org/api/v1' ; // 引用superagent var request = require ( 'superagent' ); // 自定义判断元素类型JS function toType (obj) { return ({}).toString.call(obj).match( /\s([a-zA-Z]+)/ )[ 1 ].toLowerCase()} // 参数过滤函数 function filter_null (o) { for ( var key in o) { if (o[key] == null ) { delete o[key] } if (toType(o[key]) == 'string' ) { o[key] = o[key].trim() if (o[key].length == 0 ) { delete o[key] } } } return o} /* 接口处理函数 这个函数每个项目都是不一样的，我现在调整的是适用于 https://cnodejs.org/api/v1 的接口，如果是其他接口 需要根据接口的参数进行调整。参考说明文档地址： https://cnodejs.org/topic/5378720ed6e2d16149fa16bd*/ function _api_base (method, url, params, success, failure) { var r = request(method, url).type( 'text/plain' ) if (params) { params = filter_null(params); if (method === 'POST' || method === 'PUT' ) { if (toType(params) == 'object' ) { params = JSON .stringify(params); } r = r.send(params) } else if (method == 'GET' || method === 'DELETE' ) { r = r.query(params) } } r.end( function (err, res) { if (err) { alert( 'api error, HTTP CODE: ' + res.status); return ; }; if (res.body.success == true ) { if (success) { success(res.body); } } else { if (failure) { failure(res.body); } else { alert( 'error: ' + JSON .stringify(res.body)); } } });}; // 返回在vue模板中的调用接口 export default { get: function (url, params, success, failure) { return _api_base( 'GET' , root + '/' + url, params, success, failure) }, post: function (url, params, success, failure) { return _api_base( 'POST' , root + '/' + url, params, success, failure) }, put: function (url, params, success, failure) { return _api_base( 'PUT' , root + '/' + url, params, success, failure) }, delete : function (url, params, success, failure) { return _api_base( 'DELETE' , root + '/' + url, params, success, failure) },}

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

如果你JS基础过硬，一看就懂，如果不行，就慢慢看，慢慢理解吧。反正我基础不成，也看着理解了。

模板中调用api接口试试

编辑src/page/index.vue 文件，代码如下：

<template> < div > < h1 class = "logo" > cnodejs Api Test </ h1 > < ul class = "list" > < li v-for = "item in lists" v-text = "item.title" ></ li > </ ul > </ div > </ template > < script > export default { data() { return { lists:[] } }, created () { // 组件创建完后获取数据，这里和1.0不一样，改成了这个样子 this .get_data() }, methods: { get_data: function (params) { var v = this if (!params) params = {} // 我们这里用全局绑定的 $api 方法来获取数据，方便吧~ v.$api.get( 'topics' , params, function (r) { v.lists = r.data }) }, },} </ script >

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

小结

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

1. 如何新建一个js文件，并且把这个文件引用，然后绑定到全局
2. 学习理解superagent插件。
3. 如何在vue模板中调用绑定的方法。
4. 组件渲染完成时，执行函数。

我的这个教程着重演示各个部分如何衔接，完成，并非要做一个十全十美的东西，因此，只要能把数据读取出来即可，至于更多的内容的渲染，以及更好看的样式，不是我这里要考虑的事情。可以看我其他的博文。