Home  >  Article  >  Backend Development  >  也是无聊!用vue来输出B站的随机搜索关键词图片

也是无聊!用vue来输出B站的随机搜索关键词图片

WBOY
WBOYOriginal
2016-06-20 12:33:531081browse

http://ciyuanai.net/icon/就是这么这个东西~ 每天上B站都能看着这些图片,挺有趣的233

本来是想写 nodejs爬虫来下载这些图片,但是通过 cheerio抓取页面的元素老是提示 undefined,看了下网页源码,嗯哼!!确实是什么东西都没有的,在往Network一看,啊哈!原来是用json来输出的啊!

想了下直接用Vue输出啊,一个 v-for的事!但是用ajaxGet了一下,发现跨域了。本想用jsonp, CORS什么的解决方案的,但是实现来好像也是挺麻烦,所以我这里就用了php的curl(哈哈!神器啊)

通过php的 curl_init来获取网页内容:

$ch = curl_init();curl_setopt($ch, CURLOPT_URL, $url);curl_setopt($ch, CURLOPT_HEADER, 0);curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);curl_setopt($ch, CURLOPT_ENCODING, "application/json"); //添加此项设置json编码,否则返回乱码;curl_setopt($ch, CURLOPT_TIMEOUT, 60);$json = curl_exec($ch);curl_close($ch);print_r($json);

好了!跨域的问题解决了~

后面直接通过jq的 $.getJSON,或者 $.ajax直接获取php返回的数据即可,这里我用 vue-resource,最后用 v-for来循环输出到页面即可!这里的页面用了flex布局,很强大的布局!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn