微客导航 » 文章资讯 » 使用Vue调取接口,并渲染数据的示例代码

使用Vue调取接口,并渲染数据的示例代码

2023-08-10 07:04:04 357

刚接触vue.js框架的时候，很伤脑筋。今天整理一下post/get两种方式，简单的调取数据库数据，并进行渲染，希望帮助大家！

首先，在HTML页面引入：

//引入vue.js文件

引入vue-resource.min.js文件，就可以引入接口方法了

然后，在body中书写div：

//id在下面js中进行引用




序号
姓名
头像

//v-for循环数据表中的数据

{{v.id}}
{{v.username}}
{{v.photo}}

第三，js代码：


window.onload=function(){
//实例化vue类
varvm=newVue({
//绑定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('请求失败处理');
});
}
}
});
}

控制器：

publicfunctionindex()
{
////引入秘钥
$pwd=newApisModel();
$passwd=$pwd->passwd();
//print_r($passwd);die;
//空的数组，等待输入秘钥与存储在model层的秘钥对比
$date=request()->get();
//print_r($date);die;
//对比秘钥是否一致
if($date['key']==$passwd){
$model=newApisModel();
$data=$model->role_show();

returnjson(array('data'=>$data,'code'=>1,'message'=>'操作完成'));
}else{
$data=['name'=>'status','message'=>'操作失败'];

returnjson(['data'=>$data,'code'=>2,'message'=>'秘钥不正确']);
}

}

model:

publicfunctionpasswd(){
$key='存放在本地的密钥';
return$key;
}
//简单的测试接口
publicfunctionrole_show(){
returnDb::name('role_power')->select();

}

OK，post方式搞定了，下面是vue使用get方法进行接口调用，渲染数据

简单粗暴，大致一样，就不一一详解了，上代码：





Vue测试实例-菜鸟教程(runoob.com)









ROLE_ID
POWER_ID
创建时间


{{v.role_id}}
{{v.power_id}}
{{v.create_time}}

ok,都测试好了，可以使用，千万别搞错id哦。

以上这篇使用Vue调取接口,并渲染数据的示例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

使用Vue调取接口,并渲染数据的示例代码

热门推荐

随机推荐