ホームページ  >  記事  >  バックエンド開発  >  vueを使って駅Bのランダムな検索キーワード画像を出力するのもつまらない!

vueを使って駅Bのランダムな検索キーワード画像を出力するのもつまらない!

WBOY
WBOYオリジナル
2016-06-20 12:33:531076ブラウズ

http://ciyuanai.net/icon/それです~ B ステーションで毎日これらの写真を見ることができます、とても面白いです 233

もともと欲しいですこれらの画像をダウンロードするための Nodejs クローラーを作成する必要がありますが、Cherio を通じてページ要素を取得すると、Web ページのソース コードを確認した後、常に unknown というプロンプトが表示されます。 !ネットワークを見てみると、確かに何もありませんでした。 jsonを使って出力されていることが分かりました!

Vue を使用して直接出力することを考えました。これは v-for のものです。しかし、ajaxGet を使用した後、それがクロスドメインであることがわかりました。 jsonpやCORSなどのソリューションを使いたかったのですが、実装がかなり面倒そうなので、ここではPHPのcurlを使いました(笑!なんというアーティファクト)

PHPのcurl_initを介してWebページのコンテンツを取得します:

$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 を使用して出力をループします。ページに行きます!このページでは、非常に強力なレイアウトであるフレックス レイアウトを使用しています。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。