怎么在Vue中調(diào)取接口并渲染數(shù)據(jù)-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)公司一直秉承“誠信做人，踏實(shí)做事”的原則，不欺瞞客戶，是我們最起碼的底線！以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個(gè)客戶多一個(gè)朋友！為您提供成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)頁設(shè)計(jì)、微信小程序、成都網(wǎng)站開發(fā)、成都網(wǎng)站制作、成都軟件開發(fā)、重慶APP軟件開發(fā)是成都本地專業(yè)的網(wǎng)站建設(shè)和網(wǎng)站設(shè)計(jì)公司，等你一起來見證！

首先，在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;
 }
 //簡單的測(cè)試接口
 public function role_show(){
  return Db::name('role_power')->select();
 
 }

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

簡單粗暴，大致一樣，就不一一詳解了，上代碼：

<!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ò)，可以把它分享出去讓更多的人看到。

標(biāo)題名稱：怎么在Vue中調(diào)取接口并渲染數(shù)據(jù)-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://aaarwkj.com/article28/icecp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)公司、商城網(wǎng)站、網(wǎng)站建設(shè)、電子商務(wù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

怎么在Vue中調(diào)取接口并渲染數(shù)據(jù)-創(chuàng)新互聯(lián)