最终效果图如下：
整体项目结构按照vue-cli进行搭建，也是一个非常普通的vue-cli结构。
由于豆瓣API的限制，不能使用ajax的方式获取，所以引入vue-resource，使用jsonp的形式去获取。
这个。。 提供的数据应该是需要使用 JSON来请求吧。
虽然 jq 有jsonp，但是一直没有成功使用过。。 所以自己写了一个简单的。
var jsonp = function (url, callback) {if (typeof url=== 'undefined') {
throw 'the 1st param "url" missing'
}
if (typeof callback === 'undefined') {
throw 'the 2nd param "callback" missing'
}
var jsonpcallback = 'callback' + new Date().valueOf()
if (typeof callback !== 'string') {
window[jsonpcallback] = callback
callback = jsonpcallback
} else {
window[jsonpcallback] = function (data) {
eval(callback).call(window, data)
}
}
var script = document.createElement('script')
script.setAttribute('type', 'text/javascript')
script.setAttribute('src', url + (url.indexOf('?') == -1 ? '?' : '&') + 'callback=' + jsonpcallback)
var head = document.getElementsByTagName('head')[0]
head.appendChild(script)
}
然后，你在页面中这样调用：
jsonp('https://api.douban.com/v2/book/isbn/9787115299710', function (data){var title = data.title
// 你自己的数据处理 可以通过 for..in 的结构来遍历data的属性。
})
还是补充一下吧，这样可以取到返回的所有数据(<ul><li>结构</li>....</ul>)，在上面的回调里面调用这个函数：
function getObjectData(data){var f_this = arguments.callee
var $ul = $('<ul>')
for(var item in data){
var row = data[item]
var $li = $('<li>')
if(!$.isPlainObject(row) && !$.isArray(row)){
$li.append(item + ':' + row)
}else{
$li.append(item).append(f_this(row))
}
$ul.append($li)
}
return $ul
}
这个。。 提供的数据应该是需要使用 JSON来请求吧。
虽然 jq 有jsonp，但是一直没有成功使用过。。 所以自己写了一个简单的。
var jsonp = function (url, callback) {if (typeof url=== 'undefined') {
throw 'the 1st param "url" missing'
}
if (typeof callback === 'undefined') {
throw 'the 2nd param "callback" missing'
}
var jsonpcallback = 'callback' + new Date().valueOf()
if (typeof callback !== 'string') {
window[jsonpcallback] = callback
callback = jsonpcallback
} else {
window[jsonpcallback] = function (data) {
eval(callback).call(window, data)
}
}
var script = document.createElement('script')
script.setAttribute('type', 'text/javascript')
script.setAttribute('src', url + (url.indexOf('?') == -1 ? '?' : '&') + 'callback=' + jsonpcallback)
var head = document.getElementsByTagName('head')[0]
head.appendChild(script)
}
然后，你在页面中这样调用：
jsonp('https://api.douban.com/v2/book/isbn/9787115299710', function (data){var title = data.title
// 你自己的数据处理 可以通过 for..in 的结构来遍历data的属性。
})
还是补充一下吧，这样可以取到返回的所有数据(<ul><li>结构</li>....</ul>)，在上面的回调里面调用这个函数：
function getObjectData(data){var f_this = arguments.callee
var $ul = $('<ul>')
for(var item in data){
var row = data[item]
var $li = $('<li>')
if(!$.isPlainObject(row) && !$.isArray(row)){
$li.append(item + ':' + row)
}else{
$li.append(item).append(f_this(row))
}
$ul.append($li)
}
return $ul
}
