溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關怎么在Vue中調取接口并渲染數據，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
首先，在HTML頁面引入：
//引入vue.js文件 <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> 引入vue-resource.min.js文件，就可以引入接口方法了 <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
然后，在body中書寫div：
//id在下面js中進行引用
<div id="box">
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>序號</td>
<td>姓名</td>
<td>頭像</td>
</tr>
//v-for 循環數據表中的數據
<tr v-for="v in msg">
<td>{{v.id}}</td>
<td>{{v.username}}</td>
<td>{{v.photo}}</td>
</tr>
</table>
</div>第三，js代碼：
<script type = "text/javascript">
window.onload = function(){
//實例化vue類
var vm = new Vue({
//綁定box
el:'#box',
data:{
//設置msg內容為空，在請求數據前為空的狀態
msg:'',
},
mounted:function () {
//調取本地的get(就在下面)
this.get();
},
methods:{
get:function(){
//發送get請求
this.$http.post('http://你的IP/api/方法',{key:"密鑰"},{emulateJSON:true}).then(function(res){
//msg等于回調函數返回的res(值)
this.msg=res.body.data;
//在打印臺測試打印，無誤后一定要刪除
console.log(res);
},function(){
console.log('請求失敗處理');
});
}
}
});
}
</script>控制器：
public function index()
{
// //引入秘鑰
$pwd=new ApisModel();
$passwd=$pwd->passwd();
// print_r($passwd);die;
//空的數組，等待輸入秘鑰與存儲在model層的秘鑰對比
$date=request()->get();
// print_r($date);die;
// 對比秘鑰是否一致
if($date['key']==$passwd){
$model=new ApisModel();
$data=$model->role_show();
return json(array('data'=>$data,'code'=>1,'message'=>'操作完成'));
}else{
$data = ['name'=>'status','message'=>'操作失敗'];
return json(['data'=>$data,'code'=>2,'message'=>'秘鑰不正確']);
}
}model:
public function passwd(){
$key='存放在本地的密鑰';
return $key;
}
//簡單的測試接口
public function role_show(){
return Db::name('role_power')->select();
}OK，post方式搞定了，下面是vue使用get方法進行接口調用，渲染數據
簡單粗暴，大致一樣，就不一一詳解了，上代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<div id="box">
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td >ROLE_ID</td>
<td >POWER_ID</td>
<td >創建時間</td>
</tr>
<tr v-for="v in msg">
<td >{{v.role_id}}</td>
<td >{{v.power_id}}</td>
<td >{{v.create_time}}</td>
</tr>
</table>
</div>
<script type = "text/javascript">
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
msg:'',
},
mounted:function () {
this.get();
},
methods:{
get:function(){
//發送get請求
this.$http.get("http://ip?key=密鑰",{emulateJSON:true}).then(function(res){
console.log(res.body);
this.msg=res.body.data;
},function(){
console.log('請求失敗處理');
});
}
}
});
}
</script>
</body>
</html>關于怎么在Vue中調取接口并渲染數據就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
