前端Vue框架(通過axios獲取地址串（介面）資訊)
阿新 • • 發佈：2018-12-11
獲取地址串資訊：某些公司會提供一些地址串的介面，可以通過vue框架使用axios獲取裡面的值，並迴圈遍歷
參考程式碼：
<!DOCTYPE html> <html> <head> <title>demo5 社群作業1</title> <meta charset="UTF-8"> <!--導包--> <script src="js/vue.js"></script> <script src="js/axios.min.js"></script> </head> <body> <div id="demo1"> <table> <!--{{msg}}可以列印看看是否拿到值--> <!--通過v-for方法，可以把msg的值賦值給item進行遍歷--><tr v-for="item in msg"> <td>{{item.title}}</td> <td>{{item.last_reply_at}}></td> <td>{{item.desc}}</td> </tr> </table> </div> </body> <script> var vm = new Vue({ //繫結div el:"#demo1", data:{ //宣告屬性msg:[] },methods:{ //seach方法 seach:function(){ //通過axios,get方法獲取地址的資訊 axios.get("https://cnodejs.org/api/v1/topics").then( res=>{ //可以列印一下獲取到的資訊，看下是怎麼樣的結構 console.log(res.data.data); //把需要的引數賦值給之前宣告的Msgthis.msg=res.data.data; } ).catch( //錯誤異常 err=>{ this.msg=err.status; } ) } },mounted:function (){ //mounted是宣告週期，在宣告週期中執行方法 this.seach() } }); </script> </html> 其他案例網易介面：
<!DOCTYPE html>
<html>
<head>
<title>demo7 網易留言</title>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
</head>
<body>
<div id="demo1">
<!--{{msg}}}-->
<table>
<tr v-for="item in msg">
<td>{{item.commentTxt}}</td>
<td>{{item.createAt}}</td>
</tr>
</table>
</div>
</body>
<script>
var vm = new Vue({
el:"#demo1",
data:{
msg:[]
},
methods:{
seach:function(){
axios.get("http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187")
.then(
res=>{
//commentList是裡面包裝的一個集合名字，獲取值之前先列印看看資訊
this.msg=res.data.data.commentList;
console.log(res.data);
}
).catch(
err=>{
this.mag=err.status;
}
)
}
},
mounted:function () {
this.seach();
}
});
</script>
</html>