溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么在Vue中調(diào)取接口并渲染數(shù)據(jù)

發(fā)布時(shí)間：2021-03-23 16:00:12 來源：億速云 閱讀：754 作者：Leah 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)怎么在Vue中調(diào)取接口并渲染數(shù)據(jù)，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

首先，在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中進(jìn)行引用
<div id="box">
 
 <table border="1" cellpadding="0" cellspacing="0">
 <tr>
 <td>序號(hào)</td>
 <td>姓名</td>
 <td>頭像</td>
 </tr>
  //v-for 循環(huán)數(shù)據(jù)表中的數(shù)據(jù)
 <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(){
//實(shí)例化vue類
var vm = new Vue({
 //綁定box
 el:'#box',
 data:{
   //設(shè)置msg內(nèi)容為空，在請(qǐng)求數(shù)據(jù)前為空的狀態(tài)
   msg:'',
   },
 mounted:function () {
   //調(diào)取本地的get(就在下面)
   this.get();
   },
 methods:{
 get:function(){
   //發(fā)送get請(qǐng)求
   this.$http.post('http://你的IP/api/方法',{key:"密鑰"},{emulateJSON:true}).then(function(res){
    //msg等于回調(diào)函數(shù)返回的res(值)
    this.msg=res.body.data;
    //在打印臺(tái)測(cè)試打印，無誤后一定要?jiǎng)h除
    console.log(res);  
   },function(){
    console.log('請(qǐng)求失敗處理');
   });
  }
 }
});
}
</script>

控制器：

public function index()
 {
  //  //引入秘鑰
  $pwd=new ApisModel();
  $passwd=$pwd->passwd();
  // print_r($passwd);die;
  //空的數(shù)組，等待輸入秘鑰與存儲(chǔ)在model層的秘鑰對(duì)比
  $date=request()->get();
   // print_r($date);die;
  // 對(duì)比秘鑰是否一致
  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;
 }
 //簡(jiǎn)單的測(cè)試接口
 public function role_show(){
  return Db::name('role_power')->select();
 
 }

OK，post方式搞定了，下面是vue使用get方法進(jìn)行接口調(diào)用，渲染數(shù)據(jù)

簡(jiǎn)單粗暴，大致一樣，就不一一詳解了，上代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥教程(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 >創(chuàng)建時(shí)間</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(){
    //發(fā)送get請(qǐng)求
    this.$http.get("http://ip?key=密鑰",{emulateJSON:true}).then(function(res){
     console.log(res.body); 
     this.msg=res.body.data; 
    },function(){
     console.log('請(qǐng)求失敗處理');
    });
   }
  }
});
}
</script>
</body>
</html>

關(guān)于怎么在Vue中調(diào)取接口并渲染數(shù)據(jù)就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

vue
AI
助
手