首页 > 代码库 > Vue2+VueRouter2+webpack 构建项目实战（四）：接通api，渲染列表
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>
通过浏览器，我们可以看到如图所示的渲染结果：
使用scss写样式
新建文件， src/style/scss/_index.scss
然后在 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，并且，把它绑定到了全局，然后我们就可以在各种地方使用这个文件了。虽然这个文件是空的。
那么src/main.js的完整代码：
import Vue from ‘vue‘import App from ‘./App‘import router from ‘./config/routes.js‘Vue.config.productionTip = falseimport api from ‘./config/api.js‘Vue.prototype.$api = apinew Vue({ el: ‘#app‘, router, template: ‘<App/>‘, components: { App }})
安装superagent组件
要请求接口，就必须有相对应的组件。如果你使用过jQuery，应该熟悉其中的AJAX方法。当然，在vue中，我们就不考虑使用jquery了。我们使用superagent这个组件。
安装非常简单，我们首先跳转到项目根目录，然后输入 npm install superagent -D进行安装。
编写api.js文件
有了工具了，我们就需要来编写api.js文件，使它可以完成我们想要的工作。
// 配置API接口地址var root = ‘https://cnodejs.org/api/v1‘;// 引用superagentvar request = require(‘superagent‘);// 自定义判断元素类型JSfunction 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的接口，我调整得可以使用。实际上在其他的接口项目中，这个是需要调整的，要调整到你的项目合适的代码。主要是根据接口返回的内容进行各种判断和处理，其中主要的框架代码是不用动的。
模板中调用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>
保存后，我们在浏览器中，就可以看到渲染出来的列表了。如下图所示：
参考
参考地址：http://blog.csdn.net/fungleo/article/details/53202276
Vue2+VueRouter2+webpack 构建项目实战（四）：接通api，渲染列表