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

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

目录索引

《Vue2+VueRouter2+webpack 构建项目实战（一）准备工作》

《Vue2+VueRouter2+webpack 构建项目实战（二）目录以及文件结构》

《Vue2+VueRouter2+webpack 构建项目实战（三）配置路由，整俩页面先》

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

《Vue2+VueRouter2+webpack 构建项目实战（五）配置子路由》

通过前面几篇教程，我们已经顺利搭建起来了，并且已经组建好路由了。本章节，我们需要做一个列表页面，然后利用获取 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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

配合点css

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

新建文件， 

src/style/scss/_index.scss

输入下面的内容

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

1
2
3
4
5
6
1
2
3
4
5
6

然后在 

src/style/style.scss

中输入

@import "scss/index";

1
1

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

我的习惯是，一个文件，一个样式，文件位于

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

1
2
1
2

插入这两行代码，就引用好了

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)
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

安装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)
},
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

这个文件就有点狂拽酷炫吊炸天了。目前，我们测试

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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

小结

好，通过本节的学习，我们已经顺利的从接口获取到数据，并且渲染到我们的页面当中了。这其实已经解决了绝大多数的问题了。
如何新建一个js文件，并且把这个文件引用，然后绑定到全局
学习理解

superagent

插件。
如何在vue模板中调用绑定的方法。
组件渲染完成时，执行函数。

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

本文由FungLeo原创，允许转载，但转载必须附带首发链接。如果你不带链接，我将采取包括但不限于深深的鄙视你等手段！

首发地址：http://blog.csdn.net/fungleo/article/details/53202276