使用Vue調(diào)取接口,并渲染數(shù)據(jù)的示例代碼

更新時間：2019年10月28日 14:57:39 作者：YiFeng_888

今天小編就為大家分享一篇使用Vue調(diào)取接口,并渲染數(shù)據(jù)的示例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

剛接觸vue.js框架的時候，很傷腦筋。今天整理一下post/get兩種方式，簡單的調(diào)取數(shù)據(jù)庫數(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中進行引用
<div id="box">
 
 <table border="1" cellpadding="0" cellspacing="0">
 <tr>
 <td>序號</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(){
//實例化vue類
var vm = new Vue({
 //綁定box
 el:'#box',
 data:{
   //設(shè)置msg內(nèi)容為空，在請求數(shù)據(jù)前為空的狀態(tài)
   msg:'',
   },
 mounted:function () {
   //調(diào)取本地的get(就在下面)
   this.get();
   },
 methods:{
 get:function(){
   //發(fā)送get請求
   this.$http.post('http://你的IP/api/方法',{key:"密鑰"},{emulateJSON:true}).then(function(res){
    //msg等于回調(diào)函數(shù)返回的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;
  //空的數(shù)組，等待輸入秘鑰與存儲在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方法進行接口調(diào)用，渲染數(shù)據(jù)

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

<!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 style="width:130px;height:30px;">ROLE_ID</td>
 <td style="width:130px;height:30px;">POWER_ID</td>
 <td style="width:130px;height:30px;">創(chuàng)建時間</td>
 </tr>
 <tr v-for="v in msg">
 <td style="width:130px;height:30px;">{{v.role_id}}</td>
 <td style="width:130px;height:30px;">{{v.power_id}}</td> 
 <td style="width:130px;height:30px;">{{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請求
    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>

ok,都測試好了，可以使用，千萬別搞錯id哦。

以上這篇使用Vue調(diào)取接口,并渲染數(shù)據(jù)的示例代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: