Vue axios 讀取api.github.com展示使用者資訊
阿新 • • 發佈：2018-11-10
前言
本文是基於Vue axios 讀取api.github.com展示使用者資訊功能原理的簡單介紹，由於初學Vue有太多的不懂，導致資料展示以及Vue data資料的提取和傳遞造成了巨大的阻礙，在這裡分享一些過程。
Vue作為一個沒有入侵性的框架，並不限制你使用ajax框架。
使用了Vue後，ajax部分你可以做如下選擇：1.使用JS原生XHR介面
2.引入JQuery或者Zepto 使用$.ajax();
3.使用Vue官方推薦的axios
4.Vue的github上提供了vue-resource外掛 ：
5.使用fetch.js
6.自己封裝一個ajax庫
首先，axios是什麼?
axios 是基於 promise 的 HTTP 客戶端，用於頁面和後臺資料的網路互動。
github地址：傳送門
為什麼要用axios？
開源、獨立
它是Vue的官方推薦
使用方法(參考axios文件)
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>本文中axios的使用例項：
axios .get("https://api.github.com/users/"+this.username) .then(function(response) { app.result = response.data; console.log("succeed",app.result); }) .catch(error => { console.log(error); this.errored = true; }) .finally(() => this.loading = false);
api.github.com是什麼？
一個github官方提供的介面。可以在這詳細瞭解：GitHub REST API v3
這裡用的：介面
主角Vue，介紹該頁面使用Vue展示資料遇到的一些困難及解決方法
- 由於Vue這個特性的存在，導致從介面獲取到的
json資料無法直接賦值給Vue的·data·屬性，所以我們得在data裡提前宣告一個result：
data宣告：
data:{
result:[],
},賦值
app.result = response.data;通過獲取到data裡的value圖片地址，新增到
<img>標籤的src=""的位址列中，從而實現圖片展示，我第一反應是使用{{ data.url }}的形式傳入，但是{{}}寫在引號裡就不管用了，所以：<img v-bind:src="result.avatar_url">需要使用Vue的v-bind指令繫結data裡的屬性，result.avatar_url就是github api中使用者頭像的圖片地址。
使用 v-for 展示所有資料：
<!-- {{result}} --> <dl class="dl-horizontal" v-for="(value, key) in result"> <dt>{{key||"無"}}</dt> <dd>{{value||"無"}}</dd> </dl>值得注意的是，(value, key)的順序。
專案原始碼：github repository
what？懶得拿？行吧！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Vue axios 讀取api.github.com展示使用者資訊</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- bootstrap -->
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1 style="text-align:center;">Vue axios 讀取api.github.com展示使用者資訊</h1>
<hr>
<div id="app">
<div style="width:800px;margin:0 auto">
<form class="form-inline" id="search" @submit.prevent="onSubmit">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Famine-life</label>
<div class="input-group">
<div class="input-group-addon">輸入github使用者名稱：</div>
<input class="form-control" placeholder="famine-life" id="username" type="text" v-model="username">
</div>
<button class="btn btn-primary" id="btn">獲取使用者資訊</button>
</div>
</form>
<div id="show_area">
<div class="alert alert-success" role="alert">information of {{username}}</div>
<div class="row">
<div class="col-sm-12">
<div class="thumbnail">
<!-- v-bind載入圖片 -->
<img v-bind:src="result.avatar_url">
<div class="caption">
<ul class="list-group">
<li class="list-group-item list-group-item-info">常用資訊展示欄</li>
<li class="list-group-item list-group-item-success">使用者名稱：{{result.login}}</li>
<li class="list-group-item list-group-item-info">介紹：{{result.bio}}</li>
<li class="list-group-item list-group-item-warning">部落格：{{result.blog}}</li>
<li class="list-group-item list-group-item-danger">姓名：{{result.name}}</li>
<li class="list-group-item list-group-item-success">地址：{{result.location}}</li>
<li class="list-group-item list-group-item-info">followers：{{result.followers}}</li>
<li class="list-group-item list-group-item-warning">following：{{result.following}}</li>
</ul>
<p><a href="#" class="btn btn-primary" role="button" @click="onShow">{{show_btn_value}}</a></p>
</div>
</div>
</div>
</div>
<div class="thumbnail" v-if="isShow">
<!-- {{result}} -->
<dl class="dl-horizontal" v-for="(value, key) in result">
<dt>{{key||"無"}}</dt>
<dd>{{value||"無"}}</dd>
</dl>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"></script>
<!-- jq看著用 -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data:{
username:null,
result:[],
isShow:false,
show_btn_value:"展示完整資訊"
},
methods:{
onShow:function(){
if(!this.isShow){
this.isShow = true;
this.show_btn_value ="隱藏下面資訊";
}else{
this.isShow = false;
this.show_btn_value="展示完整資訊";
}
},
onSubmit:function(){
axios
.get("https://api.github.com/users/"+this.username)
.then(function(response) {
app.result = response.data;
console.log("succeed",app.result);
})
.catch(error => {
console.log(error);
this.errored = true;
})
.finally(() => this.loading = false);
/**jQuery寫法
//jQuery.ajax( url [, settings ] )
$.ajax({url:"https://api.github.com/users/"+this.username,
method:"get",
data:{
username:"hello",
password:"null"
},
success: function(data){
console.log("succeed:",data);
app.result=data;
console.log("輸出vue的data",app.result);
},
error: function(){
console.log("error");
}
});
*/
},
}
});
</script>
</body>
</html>END