Vue2+VueRouter2+webpack 构建项目实战(四)接通api,先渲染个列表
来源:互联网 发布:网络使用情况调查问卷 编辑:程序博客网 时间:2024/05/29 12:29
本文转载自 fungLeo大神的博客,本人现在学习vue,仅仅当做笔记。大神链接:http://blog.csdn.net/fungleo/article/details/53171052
通过前面几篇教程,我们已经顺利搭建起来了,并且已经组建好路由了。本章节,我们需要做一个列表页面,然后利用获取http://cnodejs.org/api 的公开API,渲染出来。
制作列表页面
我们打开src/page/index.vue
文件,在这里写入下面的代码:
- 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
输入下面的内容
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
然后在 src/style/style.scss
中输入
- 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
。如下:
- 1
- 2
- 1
- 2
插入这两行代码,就引用好了api.js
,并且,把它绑定到了全局,然后我们就可以在各种地方使用这个文件了。虽然这个文件是空的。
可能部分朋友不知道插入到文件的哪里去。我这里放上main.js
的全部代码:
- 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
文件,使它可以完成我们想要的工作。
- 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
文件,代码如下:
- 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模板中调用绑定的方法。
- 组件渲染完成时,执行函数。
- Vue2+VueRouter2+webpack 构建项目实战(四)接通api,先渲染个列表
- Vue2+VueRouter2+webpack 构建项目实战(四)接通api,先渲染个列表
- Vue2+VueRouter2+webpack 构建项目实战(四)接通api,先渲染个列表下
- Vue2+VueRouter2+webpack 构建项目实战(四)接通api,先渲染个列表
- Vue2+VueRouter2+webpack 构建项目实战(四)接通api,先渲染个列表
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(八)渲染一个列表出来先
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(八)渲染一个列表出来
- Vue2+VueRouter2+webpack 构建项目实战(三)配置路由,整俩页面先(上)
- Vue2+VueRouter2+webpack 构建项目实战(三)配置路由,整俩页面先
- Vue2+VueRouter2+webpack 构建项目实战(三)配置路由,整俩页面先
- Vue2+VueRouter2+webpack 构建项目实战(三)配置路由,整俩页面先
- Vue2+VueRouter2+webpack 构建项目实战
- Vue2+VueRouter2+webpack 构建项目实战(一)准备工作
- Vue2+VueRouter2+webpack 构建项目实战(一)准备工作
- Vue2+VueRouter2+webpack 构建项目实战(一)准备工作
- Vue2+VueRouter2+webpack 构建项目实战(一)准备工作
- Vue2+VueRouter2+webpack 构建项目实战(一)准备工作
- Vue2+VueRouter2+webpack+Axios 构建项目实战(七)重构API文件为使用axios
- 递归知识
- java的逻辑左移<<,逻辑右移>>和无符号逻辑右移>>>
- GPL和LGPL
- memcache 在大型网站中的应用
- 一致性 hash 算法
- Vue2+VueRouter2+webpack 构建项目实战(四)接通api,先渲染个列表
- java的位操作
- 酷播V4.0免费网页播放器如何更改自己的右键信息
- 神奇的图像处理算法
- Eclipse创建简单Maven项目
- jabc oracle 连接出错
- 进制转换
- Python 刷题日记: Letter Combination of a Phone Number
- jenkins部署远程服务器(jenkins+svn+maven)