|
@@ -1,43 +1,61 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
<h1 class="primary--text">Basic Fetching Tutorial</h1>
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
<span>Example to get votes of a given YouTube video ID:</span>
|
|
|
- <a href="https://youtube.com/watch?v=kxOuG8jMIgI" target="_blank">kxOuG8jMIgI</a><br><br>
|
|
|
+ <a href="https://youtube.com/watch?v=kxOuG8jMIgI" target="_blank"
|
|
|
+ >kxOuG8jMIgI</a
|
|
|
+ ><br /><br />
|
|
|
|
|
|
<h2>Example Request:</h2>
|
|
|
<span><b>Request URL:</b></span>
|
|
|
- <a :href="apiUrl+'/votes?videoId=kxOuG8jMIgI'" v-text="apiUrl+'/votes?videoId=kxOuG8jMIgI'" target="_blank" /><br>
|
|
|
- <span><b>Request Method:</b> <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET" target="_blank">HTTP/GET</a></span><br>
|
|
|
- <span><b>Headers:</b></span><br>
|
|
|
+ <a
|
|
|
+ :href="apiUrl + '/votes?videoId=kxOuG8jMIgI'"
|
|
|
+ target="_blank"
|
|
|
+ v-text="apiUrl + '/votes?videoId=kxOuG8jMIgI'"
|
|
|
+ /><br />
|
|
|
+ <span
|
|
|
+ ><b>Request Method:</b>
|
|
|
+ <a
|
|
|
+ href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET"
|
|
|
+ target="_blank"
|
|
|
+ >HTTP/GET</a
|
|
|
+ ></span
|
|
|
+ ><br />
|
|
|
+ <span><b>Headers:</b></span
|
|
|
+ ><br />
|
|
|
<code class="code">
|
|
|
- Accept: text/html,application/xhtml+xml,application/xml;q=0.9<br>
|
|
|
- Pragma: no-cache<br>
|
|
|
- Cache-Control: no-cache<br>
|
|
|
- Connection: keep-alive
|
|
|
- </code><br>
|
|
|
- <span><b>Response:</b></span><br>
|
|
|
- <div class="code"><code style="background-color: rgba(0,0,0,0);">
|
|
|
- {<br>
|
|
|
- "id": "kxOuG8jMIgI",<br>
|
|
|
- "dateCreated": "2021-12-20T12:25:54.418014Z",<br>
|
|
|
- "likes": 27326,<br>
|
|
|
- "dislikes": 498153,<br>
|
|
|
- "rating": 1.212014408444885,<br>
|
|
|
- "viewCount": 3149885,<br>
|
|
|
- "deleted": false<br>
|
|
|
- }
|
|
|
- </code></div>
|
|
|
- <br><br>
|
|
|
+ Accept: text/html,application/xhtml+xml,application/xml;q=0.9<br />
|
|
|
+ Pragma: no-cache<br />
|
|
|
+ Cache-Control: no-cache<br />
|
|
|
+ Connection: keep-alive </code
|
|
|
+ ><br />
|
|
|
+ <span><b>Response:</b></span
|
|
|
+ ><br />
|
|
|
+ <div class="code">
|
|
|
+ <code style="background-color: rgba(0, 0, 0, 0)">
|
|
|
+ {<br />
|
|
|
+ "id": "kxOuG8jMIgI",<br />
|
|
|
+ "dateCreated": "2021-12-20T12:25:54.418014Z",<br />
|
|
|
+ "likes": 27326,<br />
|
|
|
+ "dislikes": 498153,<br />
|
|
|
+ "rating": 1.212014408444885,<br />
|
|
|
+ "viewCount": 3149885,<br />
|
|
|
+ "deleted": false<br />
|
|
|
+ }
|
|
|
+ </code>
|
|
|
+ </div>
|
|
|
+ <br /><br />
|
|
|
<v-alert border="left" color="orange" text type="info">
|
|
|
- <span>An invalid YouTube ID will return status code 404 "Not Found".</span><br>
|
|
|
- <span>An incorrectly formatted YouTube ID will return 400 "Bad Request".</span>
|
|
|
+ <span>An invalid YouTube ID will return status code 404 "Not Found".</span
|
|
|
+ ><br />
|
|
|
+ <span
|
|
|
+ >An incorrectly formatted YouTube ID will return 400 "Bad
|
|
|
+ Request".</span
|
|
|
+ >
|
|
|
</v-alert>
|
|
|
|
|
|
-
|
|
|
- <a :href="endpointUrl" v-text="endpointUrl" target="_blank" />
|
|
|
-
|
|
|
+ <a :href="endpointUrl" target="_blank" v-text="endpointUrl" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -54,7 +72,7 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
apiUrl: process.env.apiUrl,
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
+ };
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|