關于上次說的用vue.js，zepto，node.js,webpack等技術重構CNode。這是一個比較入門的項目，一般你學完vue就可以上手了，CNode網(wǎng)站有公開的API所以你可以獲取這個網(wǎng)站的所有數(shù)據(jù)接口，然后渲染到頁面上，用CSS等加工一下就可以了。起初，我一直感覺好難好難好難，雖然說不出難在哪里，就感覺好難好難好難。讓我細說，不就是用ajax獲取數(shù)據(jù)，然后傳到組件上渲染嗎，再模仿著寫樣式不就好了嗎。是不難啊，可是為什么我心里天然覺得很難呢？
CNode是給了我們數(shù)據(jù)接口，ajax也就那么幾個方法。后來我仔細想想，發(fā)現(xiàn)了內(nèi)心恐懼的地方是ajax。是啊，給了我數(shù)據(jù)接口，我能獲取到數(shù)據(jù)，但是你給了我什么??？在沒用之前，對于ajax獲取到的數(shù)據(jù)我是未知的。人總對自己未知的東西感到恐懼！就像同學說的，ajax我之前以為很難的啊，后來我用起來感覺也沒什么啊。我想，大部分初學者對于ajax的困惑往往就在于對他獲取到的數(shù)據(jù)的未知性的恐懼。
既然恐懼它的未知性，那么我們不妨好好看看這個“數(shù)據(jù)”！這里我用的是zepto的Ajax方法（現(xiàn)學現(xiàn)用嘛）。
let data = { page: 1, limit: 20,//獲取20個 tab: 'all', mdrender: true }; let topics = []; $.get("https://cnodejs.org/api/v1/topics", data, function (res) { if (res && res.data) { // 如果查到數(shù)據(jù) topics = res.data; } }) 然后在Console輸入topics
ajax獲取到的是Json格式，如上圖所示，我們可以看到獲取到了20個Json類型的“對象”，每個對象有那么多個屬性。比如我要獲取第一個對象的title
現(xiàn)在你應該看穿了ajax獲取到的那個數(shù)據(jù)了吧，感覺這一小步邁出去后，整個人都輕松了。
趁熱打鐵，簡單的用vue渲染一個頁面。
HTML：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://zeptojs.com/zepto.js"></script> <script src="vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for="(item,i) in items" :key="item.id"> <span class="index" :title="i + 1">{{(i + 1) > 9999 ? "..." : (i + 1)}}</span> <span class="face"> <img :src="item.author.avatar_url" alt="" :title="item.author.loginname" width="80" height="80" /> </span> <span class="name" :title="item.title">{{item.title}}</span></li> </ul> </div> <script src="Ajax-demo1.js"></script> </body> </html> JS：
new Vue({ el: '#app', data:{ items:[], scroller:null, tip:{ page: 1, limit: 20, tab: 'all', mdrender: true } }, methods:{ getData(){ let self = this; $.get("https://cnodejs.org/api/v1/topics", this.tip, function (res) { if (res && res.data) { // 如果查到數(shù)據(jù) self.items = res.data; } }) } }, created:function() { this.getData(); console.log("success"); }, mounted:function() { } })
新聞熱點
疑難解答
圖片精選
