Help us understand the problem. What is going on with this article?

Github の草を取得して自分のサービスに表示する

More than 1 year has passed since last update.

概要

こちらの記事で失敗したのでリベンジ。

どんな感じになる?

スクリーンショット 2018-01-30 9.41.28.png

ソースコード

vue ファイルは以下

App.vue
<template>
  <div>
    <input type="text" v-model="msg" >
    <button @click="getGarden()">get the garden!</button>
    <p v-if="msg.length > 0 && svg.length > 0">
      user: {{msg}}
      <br/>
      <span v-html="svg"></span>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'longtime1116',
      svg: '',
    };
  },
  methods: {
    getGarden() {
      const XHR = new XMLHttpRequest();
      const query = `http://localhost:8081/getGarden.php?url=https://github.com/users/${this.msg}/contributions`;
      XHR.open('GET', query, true);
      XHR.onreadystatechange = (() => {
        if (XHR.status === 200) {
          this.svg = XHR.responseText;
        }
      });
      XHR.send(null);
    },
  },
};
</script>

以下の php を、php -S localhost:8081 で起動しておきます。

getGarden.php
<?php
//$data = file_get_contents("https://github.com/users/longtime1116/contributions");
$data = file_get_contents($_GET['url']);
header("Access-Control-Allow-Origin: *");
header("Content-Type: text/plain");
print $data;

解説

vue.js 側

axios や fetch で php サーバからの応答を取得すると、ReadableStream 型で response が返ってきて処理が面倒くさいので、XMLHttpRequest を使いました。
(なんでXMLHttoRequestならうまくいくのかいまいちよくわかっていない。。。Promise形式だとReadableStreamを使うようになっている?)

また、取得した文字列を javascript 側で SVG として展開するために、テンプレート構文を使っています。

PHP側

CORS対策として、間に1枚PHPサーバをかませるようにしています。
PHP の方でAccess-Control-Allow-Originを付与しているのがそれです。

その他メモ

変数名に改善の余地あり。
URL そのままではなく user_name だけ php に渡すようにした方がいい。

Github リポジトリ

https://github.com/longtime1116/github_gardener

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした