개요

이 기사 에서 실패했기 때문에 리벤지.

무슨 느낌?

소스 코드

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라면 잘 작동하는지 지금은 잘 모르겠다.

또, 취득한 캐릭터 라인을 javascript 측에서 SVG 로서 전개하기 위해서, 템플릿 구문 를 사용하고 있습니다.

PHP측

CORS 대책으로서, 사이에 1장 PHP 서버를 걸게 하고 있습니다.
PHP 쪽으로 Access-Control-Allow-Origin 를 부여하고 있는 것이 그것입니다.

기타 메모

가변 이름에는 개선의 여지가 있다.
URL 그대로가 아니라 user_name 만 php에 전달하도록하는 것이 좋다.

Github 리포지토리