怎么在Vue中調(diào)取接口并渲染數(shù)據(jù)
這篇文章將為大家詳細(xì)講解有關(guān)怎么在Vue中調(diào)取接口并渲染數(shù)據(jù)，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
成都創(chuàng)新互聯(lián)公司從2013年成立，先為陵城等服務(wù)建站，陵城等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為陵城企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
首先，在HTML頁面引入：
//引入vue.js文件
引入vue-resource.min.js文件，就可以引入接口方法了
然后，在body中書寫div：
//id在下面js中進(jìn)行引用
| 序號 |
姓名 |
頭像 |
//v-for 循環(huán)數(shù)據(jù)表中的數(shù)據(jù)
{{v.id}} |
{{v.username}} |
{{v.photo}} |
第三，js代碼：
window.onload = function(){
//實(shí)例化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('請求失敗處理');
});
}
}
});
}
控制器：
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方法進(jìn)行接口調(diào)用，渲染數(shù)據(jù)
簡單粗暴，大致一樣，就不一一詳解了，上代碼：
Vue 測試實(shí)例 - 菜鳥教程(runoob.com)
ROLE_ID
POWER_ID
創(chuàng)建時間
{{v.role_id}}
{{v.power_id}}
{{v.create_time}}
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('請求失敗處理');
});
}
}
});
}
關(guān)于怎么在Vue中調(diào)取接口并渲染數(shù)據(jù)就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
當(dāng)前文章：怎么在Vue中調(diào)取接口并渲染數(shù)據(jù)
標(biāo)題路徑：http://weahome.cn/article/pjpdsc.html
重慶分公司
重慶分公司
