从接口获取数据
首先,无论怎么样,我们先要从接口拿到数据才能接着往下干.我们通过jquery
用ajax
方法把数据拿过来再说.
如下代码:
$(function(){
$.ajax({
type:'get',
url:"http://cnodejs.org/api/v1/topics",
dataType: 'json',
success: function(data){
if (data.success){
console.log(data)
}else{
alert(JSON.stringify(data));
}
},
error: function(data){
alert(JSON.stringify(data));
}
});
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
代码如上,我们看下浏览器控制台,截图如下:
如上图所示,我们成功的拿到了数据.
分析数据
如上图所示,数据里面包含了如下内容
- 作者
1.作者头像url
2.作者用户名 - 作者ID
- 帖子内容
- 发布时间
- 是否是精华
- 帖子ID
- 最后回复时间
- 回复数量
- 归属标签
- 帖子标题
- 是否置顶
- 浏览统计
数据接口如上.当然,如果是做全功能的论坛的话,这些数据都是有作用的.而在我的项目中,有很多是用不到的.我们来看下我需要那些.
<li>
<i class="user_ico">
<img src="#头像url" alt="用户名">
<span>用户名</span>
</i>
<time class="time">发表于 5 天前</time>
<a class="talk" href="content.html?链接ID">帖子标题</a>
</li>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
如上代码所示,我们需要循环的内容包括
- 作者头像url
- 作者用户名
- 发布时间
- 帖子ID
- 帖子标题
没有问题,我们所需要的内容,接口全部都是有的.
封装 ajax 代码
ajax
代码虽然不长,但是我看着还是比较难受.因此,我用下面的代码进行封装
// ajax get json 方法
function getJson(url,func){
$.ajax({
type:'get',
url:url,
dataType: 'json',
success: function(data){
if (data.success){
func(data);
}else{
alert("接口调用失败");
}
},
error: function(data){
alert(JSON.stringify(data));
}
});
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
如上,在需要的地方,我们只需要用 getJson(url,func)
这个函数就可以了.
引用 封装好的代码
$(function(){
var url = "http://cnodejs.org/api/v1/topics";
getJson(url,function(data){
console.log(data);
});
});
- 1
- 2
- 3
- 4
- 5
- 6
修改成这样之后,我们再来看下,看看能不能打印出来我们所需要的数据?如下图所示:
没有任何问题,我们依然获得了数据.我们在把这个回调的函数再封装一下,改成下面的代码
$(function(){
var url = "http://cnodejs.org/api/v1/topics";
getJson(url,pushDom);
});
function pushDom(data){
console.log(data);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
好,如果没有出错的话,绝对还是能够打印出来接口数据的.这样操作后,我们的代码就无比的简练,并且可阅读性大大增加了.而我们下面要做的事情,就是在 pushDom(data)
这个函数里面去做就好了.
vue 渲染代码
首先,我们需要在页面中用 vue 的方法写入我们要插入的数据.
html代码部分
<li v-for="info in data">
<i class="user_ico">
<img src="{{ info.author.avatar_url }}" alt="{{ info.author.loginname }}">
<span>{{ info.author.loginname }}</span>
</i>
<time class="time">{{ info.create_at }}</time>
<a class="talk" href="content.html?{{ info.id }}">{{ info.title }}</a>
</li>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
vue知识点
循环数据 http://vuejs.org.cn/api/#v-for
JS代码部分
function pushDom(data){
var vm = new Vue({
el: '.list',
data: data
});
}
- 1
- 2
- 3
- 4
- 5
- 6
我们来看一下效果: