关于上次说的用vue.js,zepto,node.js,webpack等技术重构CNode。这是一个比较入门的项目,一般你学完vue就可以上手了,CNode网站有公开的API所以你可以获取这个网站的所有数据接口,然后渲染到页面上,用CSS等加工一下就可以了。起初,我一直感觉好难好难好难,虽然说不出难在哪里,就感觉好难好难好难。让我细说,不就是用ajax获取数据,然后传到组件上渲染吗,再模仿着写样式不就好了吗。是不难啊,可是为什么我心里天然觉得很难呢?
CNode是给了我们数据接口,ajax也就那么几个方法。后来我仔细想想,发现了内心恐惧的地方是ajax。是啊,给了我数据接口,我能获取到数据,但是你给了我什么啊?在没用之前,对于ajax获取到的数据我是未知的。人总对自己未知的东西感到恐惧!就像同学说的,ajax我之前以为很难的啊,后来我用起来感觉也没什么啊。我想,大部分初学者对于ajax的困惑往往就在于对他获取到的数据的未知性的恐惧。
既然恐惧它的未知性,那么我们不妨好好看看这个“数据”!这里我用的是zepto的Ajax方法(现学现用嘛)。
获取20个
tab: 'all',mdrender: true
};
let topics = [];
$.get("https://cnodejs.org/api/v1/topics",data,function (res) {
if (res && res.data) { // 如果查到数据
topics = res.data;
}
})
然后在Console输入topics
ajax获取到的是Json格式,如上图所示,我们可以看到获取到了20个Json类型的“对象”,每个对象有那么多个属性。比如我要获取第一个对象的title
现在你应该看穿了ajax获取到的那个数据了吧,感觉这一小步迈出去后,整个人都轻松了。
趁热打铁,简单的用vue渲染一个页面。
HTML: